Uptoolkit
GitHub

useCrudDataTable

TanStack Table hook that maps sorting, filters, search, and pagination to API Platform queries.

5 visible rows

{
  "page": 1,
  "itemsPerPage": 5,
  "sort": [],
  "filters": []
}

Installation

npx shadcn@latest add https://ui.uptoolkit.com/r/use-crud-data-table.json

Usage

Wraps useReactTable with row selection, column visibility, global search, and API Platform query mapping.

import { useCrudDataTable } from "@/hooks/use-crud-data-table";

const { table, query } = useCrudDataTable({
  columns,
  data: books,
  manual: true,
  rowCount: totalItems,
  onQueryChange: (query) => fetchBooks(query),
});

Set manual: true when the collection is fetched from an API Platform endpoint. query always reflects the current table state and can be passed to buildApiPlatformQuery or fetchApiPlatformCollection.