Data Table Types

Shared data-loading and server-column types for data-table components and hooks.

Installation

bash

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

Usage

tsx

import type { ColumnServer } from "@/lib/cs/data-table-types";

tsx

const column: ColumnServer = { id: "status", filteringId: "status" };

API Reference

ColumnServer

Shared server-side column metadata for a data table.

tsx

type ColumnServer = {
	id: string
	/** Used for server-side sorting when the column name is not enough. */
	sortingId?: string
	/** Used for server-side filtering when the column name is not enough. */
	filteringId?: string
	/** Indicates that the filter targets multiple values from another table. */
	filteringMulti?: boolean
}

DataTableStreamDataProps

Shared data-loading props for stream-powered tables.

tsx

type DataTableStreamDataProps = {
	pagination: "stream"
	streamApi: string
	extraWhere?: object
	columnsServer?: ColumnServer[]
}

DataTableClientDataProps

Shared data-loading props for client-side tables.

tsx

type DataTableClientDataProps = {
	pagination: "client"
	data: TData[]
}

DataTableServerDataProps

Shared data-loading props for server-paginated tables.

tsx

type DataTableServerDataProps = {
	pagination: "server"
	data: TData[]
	columnsServer?: ColumnServer[]
	totalCount: number
}

Dependencies

@tanstack/react-table