DataTable
A sortable, searchable table component with column definitions and flexible rendering.
Live Demo
| Name | Role | Status |
|---|---|---|
| Alice Johnson | Engineer | Active |
| Bob Smith | Designer | Inactive |
| Charlie Brown | Manager | Active |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | DataTableColumn[] | — | Column definitions: key, header, sortable, render. |
data | T[] | — | Array of row data objects. |
searchable | boolean | false | Show a search input above the table. |
searchPlaceholder | string | 'Search…' | Placeholder text for the search input. |
emptyMessage | string | 'No results.' | Message shown when no rows match the filter. |
Usage
import { DataTable } from '@ghiberti85/ui'
const columns = [
{ key: 'name', header: 'Name', sortable: true },
{ key: 'role', header: 'Role' },
{ key: 'status', header: 'Status', render: (val) => <span>{String(val)}</span> },
]
const data = [
{ name: 'Alice', role: 'Engineer', status: 'Active' },
{ name: 'Bob', role: 'Designer', status: 'Inactive' },
]
<DataTable columns={columns} data={data} searchable />