react-datatable

Use this page when you already understand the feature surface and want the fastest route to the right exported type.

Main package exports

import type {
  DatatableProps,
  DatatableColumn,
  DatatableState,
  OnlineQueryInput,
  OnlineQueryResponse,
  OnlineTableRow,
  DataTableVirtualizationConfig,
  DataTableDisplayOptionsConfig,
  DataTableRowSelectionConfig,
  DataTableBulkActionsConfig,
  DataTableSelectionDescriptor,
} from "./react-datatable"

The package re-exports most application-facing contracts from kit/src/react-datatable/types.

Top-level component types

`DatatableProps<TData>`

Main component prop contract.

Use this when you need the full surface for:

columns
data or online
toolbar and display configuration
row selection, preview, bulk actions, and keyboard behavior
persistence, views, copy links, and URL sync
virtualization and debug options

See Component API.

Column and filter types

`DatatableColumn<TData, TValue = unknown>`

Column-definition contract.

Use this when authoring columns, accessors, headers, widths, sorting/filtering behavior, grouping metadata, and cell rendering.

See Column API.

Filter contracts

Key exports from filter.types.ts:

FilterType
ColumnFilter
FilterPayload
TextFilterPayload
NumberFilterPayload
DateFilterPayload
BooleanFilterPayload
TextListFilterPayload
IdListFilterPayload
FilterOptions

Use these when you need to type custom filter state, server validation, or filter-aware product code.

Online-query types

`OnlineQueryInput`

Union of:

InfiniteOnlineQueryInput
PaginationOnlineQueryInput

This is the backend request contract for online mode.

`OnlineQueryResponse<TData>`

Server response contract for online mode.

`OnlineTableRow<TData>`

Rendered online row union:

type: "group-header"
type: "data"

`OnlineGroupingSummary`

Counts metadata for grouped online mode.

`OnlineConfig<TData>`

Top-level online prop contract used by Datatable.

See Online API.

Table-state types

`DatatableState`

Canonical Zustand-backed table state.

Includes:

display toggles
global search and column filters
column order, visibility, and widths
sorting
row selection, active row, and preview row
grouping and group expansion
active saved view

`DatatableRowSelectionState`

Union of:

ExplicitRowSelectionState
AllMatchingRowSelectionState

Use this when your surrounding app needs to reason about loaded-row selection versus server-wide all-matching selection.

Common config object types

These nested config contracts are useful when you split table configuration into reusable constants:

DataTableVirtualizationConfig
DataTableAppliedStateConfig
DataTableDisplayOptionsConfig
DataTableColumnReorderingConfig
DataTableRowSelectionConfig<TData>
DataTableRowPresentationConfig<TData>
DataTableKeyboardNavigationConfig
DataTableRowActionsConfig<TData>
DataTableRowPreviewConfig<TData>
DataTableBulkActionsConfig<TData>

These map directly to top-level Datatable props like virtualization, displayOptions, selection, rowPresentation, keyboardNavigation, rowActions, rowPreview, and bulkActions.

Bulk-action types

Use these when you build product-owned bulk workflows:

DataTableBulkAction<TData>
DataTableBulkActionItem<TData>
DataTableBulkActionContext<TData>
DataTableBulkActionStep
DataTableBulkActionStepContext<TData>
DataTableBulkServerActionRequest
DataTableSelectionDescriptor

These types are especially important when the UI selects all matching rows and the backend must resolve the final target set.

Persistence and views types

These are not all re-exported from the top-level package, but they are key source contracts when you implement adapters.

Table-state persistence

From persistence/table-state-adapter.types.ts:

PersistedTableState
PersistedTableStateSnapshot
TableStateAdapter
TableStateAdapterConfig

PersistedTableStateSnapshot is the direct stored snapshot:

interface PersistedTableStateSnapshot {
  version: 1
  query: {
    filters: ColumnFilter[]
    sorting: SortingState
    globalFilter: string
    grouping: {
      columns: string[]
      showEmptyGroups: boolean
      expansion: {
        defaultExpanded: boolean
        overrides: Record<string, boolean>
      }
    } | null
    filterMode: "AND" | "OR"
  }
  presentation: {
    showColumnHeaders: boolean
    stickyColumnsCount: number
    showHorizontalLines: boolean
    showVerticalLines: boolean
    showOrderingBadge: boolean
    columnOrder: string[]
    columnVisibility: Record<string, boolean>
    columnWidths: Record<string, number>
    activeViewId: string | null
  }
}

Use these for current-view persistence adapters.

Saved views

From persistence/datatable-view-adapter.types.ts:

DatatableView
DatatableViewState
DatatableViewAdapter
DatatableViewAdapterConfig
adapterSupportsSharing()
adapterSupportsDefaults()

DatatableViewState is the direct saved-view state payload:

interface DatatableViewState {
  version: 1
  query: BackendQueryState
  presentation: BackendPresentationState
}

A DatatableView returned from an adapter includes:

{
  id: string
  name: string
  state: DatatableViewState
  isShared: boolean
  isUserDefault: boolean
  isWorkspaceDefault: boolean
  createdBy: string
  createdAt: Date
  updatedAt: Date
  workspaceId?: string
}

Use these for named-view storage, sharing, and default-view behavior.

If you need the same shape from react-datatable-server, use DatatableViewState there too.

Server helper types

From react-datatable-server:

OnlineNavigationMode
OnlineQueryStateInput
OnlineQueryInput
OnlineTableRow<TData>
OnlineGroupingSummary
OnlineQueryResponse<TData>

These mirror the online contract while keeping backend-facing filter typing looser for API-boundary validation.

See Server helper API.

Practical lookup guide

Use:

DatatableProps when configuring the whole component
DatatableColumn when defining columns
OnlineQueryInput and OnlineQueryResponse when writing backend queries
DatatableState when working with internal table state
PersistedTableState when implementing current-view persistence
DatatableView when implementing saved views
DataTableSelectionDescriptor and bulk-action types when executing selection-driven workflows

TypeScript types