Data Table

Shared types for server-side data-table queries and column configuration.

Installation

bash

pnpm dlx shadcn@latest add @cs/data-table

Usage

tsx

import type { DataTableOnData } from "@/components/cs/data-table";

tsx

const request: DataTableOnData = { skip: 0, take: 10, sorting: [], columnFilters: [], columns: [], globalFilter: null };

API Reference

DataTableOnData

Data sent to a server-side data-table query.

tsx

type DataTableOnData = {
	/** Count of skiped rouws. */
	skip: number
	/** Page size. */
	take: number
	/** Table soritng state. */
	sorting: SortingState
	/** Table column filter state. */
	columnFilters: ColumnFiltersState
	/** Aditional filters. */
	extraWhere?: object
	/** Base info about columns. */
	columns: ColumnServer[]
	globalFilter: string | null
	/** Optional selection filter — adds `{ [field]: { in: values } }` to the where clause. */
	select?: { field: string; values: unknown[] }
}

DataTableHeader

Renders the table header and keeps it sticky for scrollable tables.

Props

Name	Type	Default	Description
scrollable *	boolean	-	-
table *	BasicTable<TData>	-	-

DataTableOnRowClick

Handles navigation and optional refresh after a row is activated.

tsx

type DataTableOnRowClick = (
	row: Row<TData>
) => Promise<{ refresh?: boolean; push?: string } | undefined>

DataTableBody

Renders data-table rows, empty states, selection cells, and optional row navigation.

Props

Name	Type	Default	Description
columnsWithBulkLength *	number	-	-
destination	(row: Row<TData>) => string	-	-
hasBulkPermission *	boolean	-	-
link	(props: { children: ReactNode; href: string; className?: string }) => ReactNode	-	-
onRowClick	DataTableOnRowClick<TData>	-	-
push *	(url: string) => void	-	-
rowClass	(row: Row<TData>) => string \| string	-	-
size	"h-8" \| "h-12"	"h-12"	-
streamRefresh *	() => void	-	-
table *	BasicTable<TData>	-	-
translationsRootKey	string	"table"	Namespace containing the `noResults` message. Defaults to `table`.

TableDataFiltesServer

tsx

type TableDataFiltesServer = (options: {
	[K in keyof TData]?: { id: string; name: string }[]
}) => DataTableToolbarFilter<TData>[]

TableDataFiltesClient

Creates toolbar filters from the currently loaded client-side data.

tsx

type TableDataFiltesClient = (data: TData[]) => DataTableToolbarFilter<TData>[]

DataTableCommonProps

Props shared by all data-table pagination modes.

tsx

type DataTableCommonProps = {
	size?: "h-8" | "h-12"
	height?: number | string
	id: string
	index?: number
	minimal: boolean
	scrollable: boolean
	addMeta: Record<string, unknown> | undefined
	selectedRow: { id: keyof TData; value: number } | undefined
	bulkActions: DataTableBulkActionsConfig<TData, TDataTableBulkAction> | undefined
	onPermission: ((action: TDataTableBulkAction) => boolean) | undefined
	tableRouterState: UseDataTableRouterReturn
	initColumns: ColumnVisibilityState
	noHeader?: boolean
	/** Namespace shared by the table toolbar, body, pagination, and bulk-action messages. Defaults to `table`. */
	translationsRootKey?: string
	defaultPageSize?: number
	toolbar?: (table: UseDataTableReturn<TData>) => React.ReactNode
	push: (url: string) => void
	destination?: (row: Row<TData>) => string
	rowClass?: (row: Row<TData>) => string | string
	onRowClick?: DataTableOnRowClick<TData>
	filteredColumns: ColumnDef<TData, TValue>[]
	link?: (props: { children: ReactNode; href: string; className?: string }) => ReactNode
}

DataTable

Renders a configurable data table with client, server, or stream pagination.

Props

Name	Type	Default	Description
addMeta *	Record<string, unknown> \| undefined	-	-
bulkActions *	DataTableBulkActionsConfig<TData, TDataTableBulkAction> \| undefined	-	-
defaultPageSize	number	-	-
destination	(row: Row<TData>) => string	-	-
filteredColumns *	ColumnDef<TData, TValue>[]	-	-
filters	TableDataFiltesServer<TData> \| TableDataFiltesClient<TData> \| undefined	-	-
height	number \| string	-	-
id *	string	-	-
index	number	0	-
initColumns *	ColumnVisibilityState	-	-
link	(props: { children: ReactNode; href: string; className?: string }) => ReactNode	-	-
minimal *	boolean	false	-
noHeader	boolean	false	-
onPermission *	((action: TDataTableBulkAction) => boolean) \| undefined	-	-
onRowClick	DataTableOnRowClick<TData>	-	-
pagination *	"stream" \| "client" \| "server"	-	-
push *	(url: string) => void	-	-
rowClass	(row: Row<TData>) => string \| string	-	-
scrollable *	boolean	false	-
selectedRow *	{ id: keyof TData; value: number } \| undefined	-	-
size	"h-8" \| "h-12"	"h-12"	-
tableRouterState *	UseDataTableRouterReturn	-	-
toolbar	(table: UseDataTableReturn<TData>) => React.ReactNode	-	-
translationsRootKey	string	"table"	Namespace shared by the table toolbar, body, pagination, and bulk-action messages. Defaults to `table`.

Dependencies

@tanstack/react-table cn next-intl @cs/data-table-row @cs/data-table-types @cs/use-data-table @shadcn/table