DataTable

import {
  DataTable,
  DataTableBulkActions,
  DataTableCardGrid,
  DataTableFilter,
  DataTablePageSizeSelect,
  DataTablePagination,
  DataTableRoot,
  DataTableToolbar,
  useDataTable,
  type DataTableColumnDef,
} from "@giddaa-housing/ui/data-table";
import { Button } from "@giddaa-housing/ui/button";
import { TableCard } from "@giddaa-housing/ui/table-card";
import { getPaginationRowModel } from "@tanstack/react-table";
import { DataTableViewSelect } from "@/components/recipes/data-table-view-select";

function ApplicantsTable({ columns, data }) {
  const table = useDataTable({
    columns,
    data,
    enableRowSelection: true,
    getPaginationRowModel: getPaginationRowModel(),
  });

  return (
    <DataTableRoot table={table}>
      <DataTableToolbar>
        <DataTableFilter
          fields={filterFields}
          onApply={(serialized) => {
            setFilter(serialized);
            table.setPageIndex(0);
          }}
        />
        <DataTableViewSelect view={view} onViewChange={setView} />
        <DataTablePageSizeSelect />
      </DataTableToolbar>
      <DataTable />
      <DataTableBulkActions>
        {({ data }) => <Button>Assign {data.length}</Button>}
      </DataTableBulkActions>
      <DataTablePagination />
    </DataTableRoot>
  );
}

<DataTableToolbar>
  <DataTableFilter
    fields={filterFields}
    onApply={(serialized, filters) => {
      setFilter(serialized);
      setStructuredFilters(filters);
      table.setPageIndex(0);
    }}
  />
  <DataTablePageSizeSelect />
</DataTableToolbar>

const table = useDataTable({
  columns,
  data, // full dataset
  getPaginationRowModel: getPaginationRowModel(),
});

<DataTablePageSizeSelect /> // reads/writes table.setPageSize
<DataTablePagination />     // reads/writes table.setPageIndex

const table = useDataTable({
  columns,
  data: pageRows, // only the current page from the API
  manualPagination: true,
  rowCount: totalCount, // total across all pages, from the API
  state: { pagination: { pageIndex: page - 1, pageSize } },
  onPaginationChange: (updater) => {
    const next =
      typeof updater === "function"
        ? updater({ pageIndex: page - 1, pageSize })
        : updater;
    setPage(next.pageIndex + 1);
    setPageSize(next.pageSize);
  },
});

<DataTablePageSizeSelect />
<DataTablePagination />

<DataTablePageSizeSelect
  pageSize={pageSize}
  onPageSizeChange={(size) => {
    setPageSize(size);
    setPage(1); // reset to first page on size change
  }}
/>
<DataTablePagination
  page={page}           // 1-based current page
  pageSize={pageSize}
  totalEntries={totalCount}
  onPageChange={setPage} // called with the next 1-based page
/>

<DataTableRoot table={table}>
  <DataTableToolbar>{/* view toggle, filters, search */}</DataTableToolbar>
  {view === "list" ? <DataTable /> : null}
  {view === "card" ? (
    <DataTableCardGrid
      renderCard={(row, { action, selection }) => (
        <TableCard
          action={action}
          selection={selection}
          title={row.original.name}
          subtitle={row.original.email}
          details={[
            { label: "Budget", value: row.original.budget },
            { label: "Location", value: row.original.location },
          ]}
        />
      )}
    />
  ) : null}
  {view === "kanban" ? <ApplicantKanban table={table} /> : null}
  <DataTablePagination />
</DataTableRoot>

<DataTableCardGrid
  titleColumnId="name"
  subtitleColumnId="email"
  badgeColumnId="status"
  detailColumnIds={["budget", "location", "assignedTo"]}
/>