DataGrid

The DataGrid component wraps Table with a header, filter sidebar, pagination, and optional add button.

Props

Prop	Type	Description
dataGrid	DataGridType<T>	Config object from useDataGrid()
table	Table<T>	TanStack Table instance from useDataGrid()
title	string	Header title
subtitle	string?	Header subtitle
add	string | boolean?	URL for add button, or true to use ${pathname}/add
filterAction	string?	Custom form action for filters
actions	Snippet?	Additional action buttons rendered in the header
filterFields	Snippet?	Filter form fields rendered in the sidebar

useDataGrid

Creates and configures a data grid. Returns { table, dataGrid, filterData }.

import { useDataGrid } from '@repo/table';

const { table, dataGrid } = useDataGrid({
  tableOptions: {
    columns: [...],
  },
  data: { data: items, count: totalCount },
  getRowLink: (row) => `/items/${row.original.id}`,
});

Options

Option	Type	Description
tableOptions	Partial<TableOptions<T>>	TanStack Table config (columns, initial state, etc.)
data	PaginatedResult<T>	{ data: T[], count: number }
getRowLink	(row: Row<T>) => string?	Row click link generator
filterForm	SuperValidated?	SuperForms validated form for filters
filterSchema	z.ZodObject?	Zod schema for filter fields
sortStrategy	SortingStrategy?	Custom sort strategy (default: urlSortStrategy)
paginationStrategy	PaginationStrategy?	Custom pagination strategy (default: urlPaginationStrategy)
filterStrategy	FilterStrategy?	Custom filter strategy (default: urlFilterStrategy)

Return Value

Property	Type	Description
table	Table<T>	TanStack Table instance
dataGrid	DataGridType<T>	Pass to DataGrid component
filterData	Writable?	Reactive filter form data (if filters configured)

Lower-level Components

Table

Renders the table body without header/pagination chrome.

<script lang="ts">
  import { Table } from '@repo/table';
</script>

<Table
  {table}
  getRowLink={(row) => `/items/${row.original.id}`}
  useColumnManagement={true}
/>

Prop	Type	Description
table	Table<T>	TanStack Table instance
getRowLink	(row: Row<T>) => string?	Row link generator
useColumnManagement	boolean?	Enable column visibility toggles

TableRow

Single row renderer.

<TableRow {row} {getRowLink} />

TableHeadCell

Header cell with sorting indicator.

<TableHeadCell {header} />

Pagination

Pagination controls.

<Pagination {table} paginationStrategy={dataGrid.paginationStrategy} />