Data Grid Types

The column.meta type contract shared by data-grid and data-filter — declared once through TanStack's own module augmentation so neither component has to re-open it.

data-grid-types has no component and no visual output — it's the shared column.meta type contract that data-grid (and, later, data-filter) build on. Both list it as a registryDependencies entry and install it automatically.

Installation

pnpm dlx shadcn@latest add @syncblocks/data-grid-types

Usage

Nothing to import — the file's only job is a side-effecting declare module "@tanstack/react-table" augmentation of ColumnMeta. Once it's part of your TypeScript program (installing the file is enough), every columnDef.meta you write is typed against it:

const columns: ColumnDef<Contact>[] = [
  { accessorKey: "name", header: "Name", meta: { type: "text" } },
  {
    accessorKey: "status",
    header: "Status",
    meta: {
      type: "select",
      options: [
        { value: "open", label: "Open" },
        { value: "closed", label: "Closed" },
      ],
    },
  },
]

Column types

Eight types are declared here so data-grid and data-filter never have to re-open the contract. All eight have a working cell editor in Data Grid — multiSelect and user share a popover widget shape (a borderless trigger opening a searchable command list) neither of the other six need.

text, number, currency, select, boolean, date, multiSelect, user

Meta fields

Prop	Type	Default	Description
`type`	`DataGridColumnType`	-	One of the eight column types above. Omit on columns that aren't user-editable (e.g. a selection or actions column).
`options`	`DataGridSelectOption[]`	-	Shared by select and multiSelect — the allowed `{ value, label }` choices.
`users`	`DataGridUser[]`	-	user columns only — a static list of `{ id, name, avatarUrl? }`. The grid never fetches; async/remote user lists are out of scope.
`maxChips`	`number`	`2`	multiSelect only — chips shown before the rest collapse into "+N".
`summary`	`boolean`	`false`	Marks this column as card title/subtitle material for the narrow-container branch.

Exported types

Type	Shape	Description
`DataGridColumnType`	`"text" \| "number" \| "currency" \| "select" \| "boolean" \| "date" \| "multiSelect" \| "user"`	string union of the eight column types
`DataGridSelectOption`	`{ value: string; label: string }`	A single select/multiSelect option.
`DataGridUser`	`{ id: string; name: string; avatarUrl?: string }`	A single user-column entry.

Data Grid Data Pagination