DataTable
Componente de tabela com ordenação e busca, definições de colunas e renderização flexível.
Demonstração
| Name | Role | Status |
|---|---|---|
| Alice Johnson | Engineer | Active |
| Bob Smith | Designer | Inactive |
| Charlie Brown | Manager | Active |
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
columns | DataTableColumn[] | — | Definições de colunas: key, header, sortable, render. |
data | T[] | — | Array de objetos de dados por linha. |
searchable | boolean | false | Exibir campo de busca acima da tabela. |
searchPlaceholder | string | 'Search…' | Texto placeholder para o campo de busca. |
emptyMessage | string | 'No results.' | Mensagem exibida quando nenhuma linha corresponde ao filtro. |
Uso
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 />