TypeScript Types

The types/ directory contains all TypeScript type definitions and interfaces used throughout the data table components.

Source Code ↗

Core Types

Option

Option type for select/multi-select filters.

interface Option {
  label: string
  value: string
  count?: number
  icon?: React.ComponentType<{ className?: string }>
}

FilterVariant

Filter variant type defining the UI control type.

type FilterVariant =
  | "text"
  | "number"
  | "range"
  | "date"
  | "date_range"
  | "select"
  | "multi_select"
  | "boolean"

FilterOperator

Filter operator type defining the comparison logic.

type FilterOperator =
  | "ilike"
  | "not.ilike"
  | "eq"
  | "neq"
  | "in"
  | "not.in"
  | "empty"
  | "not.empty"
  | "lt"
  | "lte"
  | "gt"
  | "gte"
  | "between"
  | "relative"

JoinOperator

Join operator type for combining multiple filters.

type JoinOperator = "and" | "or" | "mixed"

Extended Types

ExtendedColumnFilter

Extended column filter with additional metadata.

interface ExtendedColumnFilter<TData> {
  id: Extract<keyof TData, string>
  value: string | string[]
  variant: FilterVariant
  operator: FilterOperator
  filterId: string
  joinOperator?: JoinOperator // Individual join operator for each filter
}

ExtendedColumnSort

Extended column sort for URL state management.

interface ExtendedColumnSort<TData> {
  id: Extract<keyof TData, string>
  desc: boolean
}

GlobalFilter

Global filter type.

type GlobalFilter = string | Record<string, unknown>

Column Definition Types

DataTableColumnDef

Extended column definition for data table. Inherits all TanStack Table ColumnDef properties.

type DataTableColumnDef<TData, TValue = unknown> = ColumnDef<TData, TValue>

ColumnMeta

Extended column metadata interface (augments TanStack Table’s ColumnMeta).

interface ColumnMeta<TData extends RowData, TValue> {
  // Display
  label?: string
  placeholder?: string

  // Filtering
  variant?: FilterVariant
  options?: Option[]
  range?: [number, number]
  autoOptions?: boolean
  autoOptionsFormat?: boolean
  showCounts?: boolean
  dynamicCounts?: boolean
  mergeStrategy?: "preserve" | "augment" | "replace"

  // Formatting
  unit?: string
  icon?: React.ComponentType<{ className?: string }>

  // Row Expansion
  expandedContent?: (row: TData) => React.ReactNode
}

TableMeta

Extended table metadata interface (augments TanStack Table’s TableMeta).

interface TableMeta<TData extends RowData> {
  joinOperator?: JoinOperator
  hasIndividualJoinOperators?: boolean
}

Row Types

DataTableRow

Data table row type. Alias for TanStack Table Row.

type DataTableRow<TData> = Row<TData>

DataTableInstance

Data table instance type. Alias for TanStack Table.

type DataTableInstance<TData> = Table<TData>

Query State Types

QueryKeys

Query keys for URL state management.

interface QueryKeys {
  page?: string
  perPage?: string
  sort?: string
  filters?: string
  joinOperator?: string
}

Type Helpers

ValueOf

Utility type to get the literal values from constant objects.

type ValueOf<T> = T[keyof T]

JoinOperatorValues

Convenience type for accessing JOIN_OPERATORS constant values.

type JoinOperatorValues = typeof JOIN_OPERATORS

FilterOperatorValues

Convenience type for accessing FILTER_OPERATORS constant values.

type FilterOperatorValues = typeof FILTER_OPERATORS

FilterVariantValues

Convenience type for accessing FILTER_VARIANTS constant values.

type FilterVariantValues = typeof FILTER_VARIANTS

TanStack Table Module Augmentation

The types module augments TanStack Table’s type definitions to add custom metadata:

• ColumnMeta - Adds label, placeholder, variant, options, and other filter-related metadata
• TableMeta - Adds joinOperator and hasIndividualJoinOperators for filter logic

This allows TypeScript to provide proper type checking and autocomplete for column and table metadata throughout the data table components.