Uptoolkit
GitHub

Data Table Helpers

Shared TanStack Table types and API Platform query mapping helpers.

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

Installation

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

Usage

Types and helpers shared by the data table components and use-crud-data-table.

import { dataTableStateToCrudQuery, defaultDataTableState } from "@/lib/data-table-helpers";

const query = dataTableStateToCrudQuery(state, columns);

Column meta

Attach filters and labels through columnDef.meta:

meta: {
  label: "Status",
  filter: {
    type: "multiselect",
    operator: "in",
    options: [
      { label: "Draft", value: "draft" },
      { label: "Published", value: "published" },
    ],
  },
}

Supported filter types: text, select, multiselect, boolean, date.