DS | Adila.coComponentes
Data Table
Tabela genérica com seleção e estados vazios prontos para uso.
| ID | Cliente | Plano | Status | |
|---|---|---|---|---|
| CL-1042 | Acme Tecnologia | Enterprise | Ativa | |
| CL-1041 | Norte Labs | Pro | Ativa | |
| CL-1040 | Orbit Systems | Pro | Pendente | |
| CL-1039 | Vértice Cloud | Starter | Inativa |
Instalação
bun add @adila-sh/uiUso
import type { DataTableColumnDef } from "@adila-sh/ui";
const columns: DataTableColumnDef<Customer>[] = [
{ accessorKey: "id", header: "ID" },
{
accessorKey: "name",
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Cliente" />
),
},
];
<DataTable
columns={columns}
data={customers}
/>;Use a prop toolbar para inserir filtros ou ações adicionais. Ela também aceita
uma função que recebe a instância da tabela. loading renderiza linhas de
skeleton e empty permite personalizar o estado vazio.
Dependências
@tanstack/react-table@phosphor-icons/react