Use Data Table

Creates a TanStack Table instance configured for client, server, or stream pagination.

Installation

bash

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

Usage

tsx

import { useDataTable } from "@/hooks/cs/use-data-table"

tsx

const table = useDataTable({
  pagination: "server",
  data,
  columnsWithBulk: columns,
  totalCount,
  tableRouterState,
  hasBulkPermission: false,
  minimal: false,
  scrollable: false,
  initViewColumns: {},
})

API Reference

tableFeaturesConfig

TableFeatures

tsx

type TableFeatures = typeof tableFeaturesConfig

ColumnDef

tsx

type ColumnDef = TableColumnDef<TableFeatures, TData, TValue>

Row

tsx

type Row = TableRow<TableFeatures, TData>

Table

tsx

type Table = TableInstance<TableFeatures, TData>

Column

tsx

type Column = TableColumn<TableFeatures, TData, TValue>

FilterFnOption

tsx

type FilterFnOption = TableFilterFnOption<TableFeatures, TData>

UseDataTableStreamProps

tsx

type UseDataTableStreamProps = {
	pagination: "stream"
	streamRefresh: () => void
}

UseDataTableClientProps

tsx

type UseDataTableClientProps = {
	pagination: "client"
	globalFilterFn?: FilterFnOption<TData>
}

UseDataTableServerProps

tsx

type UseDataTableServerProps = {
	pagination: "server"
}

UseDataTableCommonProps

tsx

type UseDataTableCommonProps = {
	hasBulkPermission: boolean
	tableRouterState: UseDataTableRouterReturn
	totalCount: number
	minimal: boolean
	scrollable: boolean
	data: TData[]
	columnsWithBulk: ColumnDef<TData>[]
	addMeta?: Record<string, unknown>
	initViewColumns: ColumnVisibilityState
}

UseDataTableReturn

tsx

type UseDataTableReturn = ReturnType<typeof useDataTable<TData>>

useDataTable

Creates a TanStack Table instance configured for client, server, or stream pagination.

Props

Name	Type	Default	Description
addMeta	Record<string, unknown>	-	-
columnsWithBulk *	ColumnDef<TData>[]	-	-
data *	TData[]	-	-
globalFilterFn	FilterFnOption<TData>	-	-
hasBulkPermission *	boolean	-	-
initViewColumns *	ColumnVisibilityState	-	-
minimal *	boolean	-	-
pagination *	"stream"	-	-
scrollable *	boolean	-	-
streamRefresh *	() => void	-	-
tableRouterState *	UseDataTableRouterReturn	-	-
totalCount *	number	-	-

Dependencies

@tanstack/react-table @cs/use-data-table-router