useDataTable
Hook para gerenciar estado do DataTable com TanStack Table.
Instalação
npx @kobana/ui add use-data-tableDependências npm: @tanstack/react-table
Importação
import { useDataTable } from "@/hooks/use-data-table"API
const { table, sorting, filtering, pagination, rowSelection } = useDataTable({
data,
columns,
serverSide: false,
defaultPageSize: 20,
})Options
| Opção | Tipo | Default | Descrição |
|---|---|---|---|
data | TData[] | — | Dados da tabela |
columns | ColumnDef<TData>[] | — | Definição das colunas |
serverSide | boolean | false | Modo server-side |
defaultPageSize | number | 20 | Tamanho da página padrão |
Return
| Propriedade | Tipo | Descrição |
|---|---|---|
table | Table<TData> | Instância TanStack Table |
sorting | SortingState | Estado de ordenação |
filtering | ColumnFiltersState | Estado de filtros |
pagination | PaginationState | Estado de paginação |
rowSelection | RowSelectionState | Linhas selecionadas |
Uso
function ChargesTable({ charges }: { charges: Charge[] }) {
const { table, sorting, pagination } = useDataTable({
data: charges,
columns: chargeColumns,
})
return (
<DataTable
columns={chargeColumns}
data={charges}
searchKey="name"
searchPlaceholder="Buscar cobranças..."
onSearch={handleSearch}
pagination={{
page: pagination.pageIndex + 1,
perPage: pagination.pageSize,
total: charges.length,
totalPages: Math.ceil(charges.length / pagination.pageSize),
}}
/>
)
}Server-side
const { table, sorting, pagination } = useDataTable({
data: serverData,
columns,
serverSide: true,
})
// Use sorting e pagination para fazer fetch server-side
useEffect(() => {
fetchCharges({ page: pagination.pageIndex, sort: sorting })
}, [sorting, pagination])