Use Data Table State

GitHub

Composes data loading, bulk selection, table configuration, and selected-row navigation for client, server, or stream-powered data tables.

Installation

bash

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

Usage

tsx

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

tsx

const state = useDataTableState({
  pagination: "server",
  data,
  totalCount,
  columnsServer,
  tableRouterState,
  filteredColumns,
  initViewColumns: {},
  minimal: false,
  scrollable: false,
  selectedRow: undefined,
  bulkActions: undefined,
  onPermission: undefined,
  addMeta: undefined,
})

API Reference

UseDataTableStateStreamProps

tsx

type UseDataTableStateStreamProps = DataTableStreamDataProps

UseDataTableStateClientProps

tsx

type UseDataTableStateClientProps = DataTableClientDataProps<TData> & {
	globalFilterFn?: FilterFnOption<TData>
}

UseDataTableStateServerProps

tsx

type UseDataTableStateServerProps = DataTableServerDataProps<TData>

UseDataTableStateCommonProps

tsx

type UseDataTableStateCommonProps = {
	tableRouterState: UseDataTableRouterReturn
	translationsRootKey?: string
	minimal: boolean
	scrollable: boolean
	addMeta: Record<string, unknown> | undefined
	initViewColumns: ColumnVisibilityState
	filteredColumns: ColumnDef<TData, TValue>[]
	selectedRow: { id: keyof TData; value: number } | undefined
	bulkActions: DataTableBulkActionsConfig<TData, TDataTableBulkAction> | undefined
	onPermission: ((action: TDataTableBulkAction) => boolean) | undefined
}

useDataTableState

Composes data loading, bulk selection, table configuration, and selected-row navigation for client, server, or stream-powered data tables.

Props

Name	Type	Default	Description
addMeta *	Record<string, unknown> \| undefined	-	-
bulkActions *	DataTableBulkActionsConfig<TData, TDataTableBulkAction> \| undefined	-	-
filteredColumns *	ColumnDef<TData, TValue>[]	-	-
globalFilterFn	FilterFnOption<TData>	-	-
initViewColumns *	ColumnVisibilityState	-	-
minimal *	boolean	-	-
onPermission *	((action: TDataTableBulkAction) => boolean) \| undefined	-	-
pagination *	"stream" \| "client" \| "server"	-	-
scrollable *	boolean	-	-
selectedRow *	{ id: keyof TData; value: number } \| undefined	-	-
tableRouterState *	UseDataTableRouterReturn	-	-
translationsRootKey	string	"table"	-

Dependencies

@tanstack/react-table @cs/data-table @cs/data-table-build-fetch-data @cs/data-table-bulk-actions @cs/data-table-types @cs/use-data-table @cs/use-data-table-columns-with-bulk @cs/use-data-table-router @cs/use-data-table-stream-route