```jsx theme={null}
import { useState, useEffect } from 'react'
import { Table } from './ui/table'
import { Input } from './ui/input'
import { Button } from './ui/button'
export function DataTable({ apiUrl }) {
const [data, setData] = useState([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
const [sortField, setSortField] = useState(null)
const [sortDirection, setSortDirection] = useState('asc')
const [filterText, setFilterText] = useState('')
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true)
const response = await fetch(apiUrl)
if (!response.ok) {
throw new Error(`API error: ${response.status}`)
}
const result = await response.json()
setData(result)
setError(null)
} catch (err) {
setError(err.message)
} finally {
setLoading(false)
}
}
fetchData()
}, [apiUrl])
// Sort and filter logic...
return (
{/* Component implementation */}
)
}
```