Implementação de tabelas com TanStack Table v8 usando compound components. Use quando criar tabelas de dados, implementar paginação, seleção de linhas, colunas de ações, ou expansão de linhas.
Sistema de data table usando TanStack Table v8 com arquitetura de compound components. Suporta colunas especiais (select, expand, actions), pinning, alinhamento e sincronização de estados visuais.
import {
DataTableProvider,
Table,
TableRoot,
Toolbar,
Pagination,
useDataTable,
type ColumnDef
} from "@repo/mantine-ui/compound-data-table"
function MyTablePage({ data }: { data: MyData[] }) {
const { table } = useDataTable<MyData>({
data,
columns,
initialPageSize: 50,
extraProps: {
// configurações especiais
}
})
return (
<DataTableProvider table={table}>
<Toolbar />
<TableRoot>
<Table<MyData> />
</TableRoot>
<Pagination />
</DataTableProvider>
)
}
const columns: ColumnDef<DataType>[] = [
{
header: "Nome",
accessorKey: "name",
size: 200,
minSize: 150,
maxSize: 300,
enableSorting: true,
meta: {
headerAlign: "left",
cellAlign: "left"
}
}
]
{
header: "Valor",
accessorKey: "amount",
size: 120,
enableSorting: true,
meta: {
headerAlign: "right",
cellAlign: "right"
},
cell: ({ getValue }) => {
const value = getValue() as number
return new Intl.NumberFormat('pt-BR', {
style: 'currency',
currency: 'BRL'
}).format(value)
}
}
{
header: "Status",
accessorKey: "status",
size: 100,
meta: {
headerAlign: "center",
cellAlign: "center"
},
cell: ({ getValue }) => {
const status = getValue() as string
const color = status === "ativo" ? "green" : "red"
return <Badge color={color}>{status}</Badge>
}
}
extraProps: {
selectColumn: {
showSelectColumn: true
}
}
extraProps: {
expandColumn: {
showExpandColumn: true,
renderExpandedContent: (row) => (
<div className="rounded bg-muted/50 p-4">
<h4 className="mb-2 font-semibold">Detalhes</h4>
<p>{row.original.description}</p>
</div>
)
}
}
extraProps: {
actionColumn: {
showActionColumn: true,
position: "right",
fixed: true,
headerAlign: "center",
cellAlign: "center",
renderActions: (row) => (
<Group gap="xs">
<ActionIcon variant="subtle" onClick={() => handleEdit(row.original)}>
<IconEdit size={16} />
</ActionIcon>
<ActionIcon variant="subtle" color="red" onClick={() => handleDelete(row.original)}>
<IconTrash size={16} />
</ActionIcon>
</Group>
)
}
}
| Column Type | Alignment |
|---|---|
| Select | center |
| Expand | center |
| Actions | center (configurável) |
| Regular | left (default) |