Column Definitions

This page documents the types for column definition objects. Each column definition type provides properties for specific table features. For a comprehensive guide on creating and configuring columns, see Column Definitions.

API

AccessorColumnDef

Defines columns that access data from your table's data source. This is the primary column definition type used to configure how data is extracted and displayed.

Prop	Type
accessorKey Key	\| string \| keyof TData
aggregatedCell The cell to display each row for the column if the cell is an aggregate.	\| string \| ((props: { cell: Cell< TData, TValue, TColumnMeta > column: Column< TData, TValue, TColumnMeta > getValue: () => TValue row: Row<TData> table: TableInstance<TData> }) => any)
aggregationFn The resolved aggregation function for the column.	AggregationFnOption<TData>
cell	\| string \| ((props: { cell: Cell< TData, TValue, TColumnMeta > column: Column< TData, TValue, TColumnMeta > getValue: () => TValue row: Row<TData> table: TableInstance<TData> }) => any)
enableColumnFilter Enables/disables the `column` filter for this column.	boolean
enableGlobalFilter Enables/disables the global filter for this column.	boolean
enableGrouping Enables/disables grouping for this column.	boolean
enableHiding Enables/Disables hiding the column.	boolean
enableMultiSort Enables/Disables multi-sorting for this column.	boolean
enablePinning Enables/disables column pinning for this column. Defaults to `true`.	boolean
enableResizing Enables or disables column resizing for the column.	boolean
enableSorting Enables/Disables sorting for this column.	boolean
filterFn The filter function to use with this column. Can be the name of a built-in filter function or a custom filter function.	FilterFnOption<TData>
footer	\| string \| ((props: { column: Column< TData, TValue, TColumnMeta > header: Header< TData, TValue, TColumnMeta > table: TableInstance<TData> }) => any)
getGroupingValue Specify a value to be used for grouping rows on this column. If this option is not specified, the value derived from `accessorKey` / `accessorFn` will be used instead.	( row: TData, ) => any
getUniqueValues	( item: TData, ) => string \| string[]
header Header definition.	\| string \| ((props: { column: Column< TData, TValue, TColumnMeta > header: Header< TData, TValue, TColumnMeta > table: TableInstance<TData> }) => any)
id ID of the column	string
invertSorting Inverts the order of the sorting for this column. This is useful for values that have an inverted best/worst scale where lower numbers are better, e.g.,a ranking (1st, 2nd, 3rd) or golf-like scoring	boolean
maxSize The maximum allowed size for the column	number
meta Column Meta	any
minSize The minimum allowed size for the column	number
size The desired size for the column	number
sortDescFirst Set to `true` for sorting toggles on this column to start in the descending direction.	boolean
sortingFn The sorting function to use with this column. - A `string` referencing a built-in sorting function - A custom sorting function	\| 'auto' \| 'alphanumeric' \| 'alphanumericCaseSensitive' \| 'basic' \| 'datetime' \| 'text' \| 'textCaseSensitive' \| any
sortUndefined Configure how undefined values are sorted for this column. `false`: Undefined values will be considered tied and need to be sorted by the next column filter or original index (whichever applies). `-1`: Undefined values will be sorted with higher priority (ascending) (if ascending, undefined will appear on the beginning of the list) `1`: Undefined values will be sorted with lower priority (descending) (if ascending, undefined will appear on the end of the list)	false \| 1 \| -1

accessorKey

Type

| string
| keyof TData

Description

Key

aggregatedCell

Type

| string
| ((props: {
    cell: Cell<
      TData,
      TValue,
      TColumnMeta
    >
    column: Column<
      TData,
      TValue,
      TColumnMeta
    >
    getValue: () => TValue
    row: Row<TData>
    table: TableInstance<TData>
  }) => any)

Description

The cell to display each row for the column if the cell is an aggregate.

aggregationFn

Type

AggregationFnOption<TData>

Description

The resolved aggregation function for the column.

cell

Type

| string
| ((props: {
    cell: Cell<
      TData,
      TValue,
      TColumnMeta
    >
    column: Column<
      TData,
      TValue,
      TColumnMeta
    >
    getValue: () => TValue
    row: Row<TData>
    table: TableInstance<TData>
  }) => any)

enableColumnFilter

Type

boolean

Description

Enables/disables the column filter for this column.

enableGlobalFilter

Type

boolean

Description

Enables/disables the global filter for this column.

enableGrouping

Type

boolean

Description

Enables/disables grouping for this column.

enableHiding

Type

boolean

Description

Enables/Disables hiding the column.

enableMultiSort

Type

boolean

Description

Enables/Disables multi-sorting for this column.

enablePinning

Type

boolean

Description

Enables/disables column pinning for this column. Defaults to true.

enableResizing

Type

boolean

Description

Enables or disables column resizing for the column.

enableSorting

Type

boolean

Description

Enables/Disables sorting for this column.

filterFn

Type

FilterFnOption<TData>

Description

The filter function to use with this column. Can be the name of a built-in filter function or a custom filter function.

footer

Type

| string
| ((props: {
    column: Column<
      TData,
      TValue,
      TColumnMeta
    >
    header: Header<
      TData,
      TValue,
      TColumnMeta
    >
    table: TableInstance<TData>
  }) => any)

getGroupingValue

Type

(
  row: TData,
) => any

Description

Specify a value to be used for grouping rows on this column. If this option is not specified, the value derived from accessorKey / accessorFn will be used instead.

getUniqueValues

Type

(
  item: TData,
) => string | string[]

header

Type

| string
| ((props: {
    column: Column<
      TData,
      TValue,
      TColumnMeta
    >
    header: Header<
      TData,
      TValue,
      TColumnMeta
    >
    table: TableInstance<TData>
  }) => any)

Description

Header definition.

Type

string

Description

ID of the column

invertSorting

Type

boolean

Description

Inverts the order of the sorting for this column. This is useful for values that have an inverted best/worst scale where lower numbers are better, e.g.,a ranking (1st, 2nd, 3rd) or golf-like scoring

maxSize

Type

number

Description

The maximum allowed size for the column

Feature-Specific Properties

The following column definition types extend the base column definition with feature-specific properties.

SortingColumnDef

Configures sorting behavior for columns. Properties control whether sorting is enabled, the default sort direction, and custom sorting functions. See Sorting.

Prop	Type
enableMultiSort Enables/Disables multi-sorting for this column.	boolean
enableSorting Enables/Disables sorting for this column.	boolean
invertSorting Inverts the order of the sorting for this column. This is useful for values that have an inverted best/worst scale where lower numbers are better, e.g.,a ranking (1st, 2nd, 3rd) or golf-like scoring	boolean
sortDescFirst Set to `true` for sorting toggles on this column to start in the descending direction.	boolean
sortingFn The sorting function to use with this column. - A `string` referencing a built-in sorting function - A custom sorting function	\| 'auto' \| 'alphanumeric' \| 'alphanumericCaseSensitive' \| 'basic' \| 'datetime' \| 'text' \| 'textCaseSensitive' \| any
sortUndefined Configure how undefined values are sorted for this column. `false`: Undefined values will be considered tied and need to be sorted by the next column filter or original index (whichever applies). `-1`: Undefined values will be sorted with higher priority (ascending) (if ascending, undefined will appear on the beginning of the list) `1`: Undefined values will be sorted with lower priority (descending) (if ascending, undefined will appear on the end of the list)	false \| 1 \| -1

enableMultiSort

Type

boolean

Description

Enables/Disables multi-sorting for this column.

enableSorting

Type

boolean

Description

Enables/Disables sorting for this column.

invertSorting

Type

boolean

Description

Inverts the order of the sorting for this column. This is useful for values that have an inverted best/worst scale where lower numbers are better, e.g.,a ranking (1st, 2nd, 3rd) or golf-like scoring

sortDescFirst

Type

boolean

Description

Set to true for sorting toggles on this column to start in the descending direction.

sortingFn

Type

| 'auto'
| 'alphanumeric'
| 'alphanumericCaseSensitive'
| 'basic'
| 'datetime'
| 'text'
| 'textCaseSensitive'
| any

Description

The sorting function to use with this column.
- A string referencing a built-in sorting function
- A custom sorting function

sortUndefined

Type

false | 1 | -1

Description

Configure how undefined values are sorted for this column.

false: Undefined values will be considered tied and need to be sorted by the next column filter or original index (whichever applies).
-1: Undefined values will be sorted with higher priority (ascending) (if ascending, undefined will appear on the beginning of the list)
1: Undefined values will be sorted with lower priority (descending) (if ascending, undefined will appear on the end of the list)

FiltersColumnDef

Configures filtering behavior for columns. Properties control whether filtering is enabled, the filter function to use, and filter metadata. See Column Filtering.

Prop	Type
enableColumnFilter Enables/disables the `column` filter for this column.	boolean
enableGlobalFilter Enables/disables the global filter for this column.	boolean
filterFn The filter function to use with this column. Can be the name of a built-in filter function or a custom filter function.	FilterFnOption<TData>

enableColumnFilter

Type

boolean

Description

Enables/disables the column filter for this column.

enableGlobalFilter

Type

boolean

Description

Enables/disables the global filter for this column.

filterFn

Type

FilterFnOption<TData>

Description

The filter function to use with this column. Can be the name of a built-in filter function or a custom filter function.

ColumnSizingColumnDef

Configures column sizing behavior. Properties control minimum and maximum widths, default size, and whether the column can be resized. See Column Sizing.

Prop	Type
enableResizing Enables or disables column resizing for the column.	boolean
maxSize The maximum allowed size for the column	number
minSize The minimum allowed size for the column	number
size The desired size for the column	number

enableResizing

Type

boolean

Description

Enables or disables column resizing for the column.

maxSize

Type

number

Description

The maximum allowed size for the column

minSize

Type

number

Description

The minimum allowed size for the column

size

Type

number

Description

The desired size for the column

GroupingColumnDef

Configures grouping behavior for columns. Properties control whether the column can be grouped, aggregation functions, and how grouped cells display. See Column Grouping.

Prop	Type
aggregatedCell The cell to display each row for the column if the cell is an aggregate.	\| string \| ((props: { cell: Cell< TData, TValue, TColumnMeta > column: Column< TData, TValue, TColumnMeta > getValue: () => TValue row: Row<TData> table: TableInstance<TData> }) => any)
aggregationFn The resolved aggregation function for the column.	AggregationFnOption<TData>
enableGrouping Enables/disables grouping for this column.	boolean
getGroupingValue Specify a value to be used for grouping rows on this column. If this option is not specified, the value derived from `accessorKey` / `accessorFn` will be used instead.	( row: TData, ) => any

aggregatedCell

Type

| string
| ((props: {
    cell: Cell<
      TData,
      TValue,
      TColumnMeta
    >
    column: Column<
      TData,
      TValue,
      TColumnMeta
    >
    getValue: () => TValue
    row: Row<TData>
    table: TableInstance<TData>
  }) => any)

Description

The cell to display each row for the column if the cell is an aggregate.

aggregationFn

Type

AggregationFnOption<TData>

Description

The resolved aggregation function for the column.

enableGrouping

Type

boolean

Description

Enables/disables grouping for this column.

getGroupingValue

Type

(
  row: TData,
) => any

Description

Specify a value to be used for grouping rows on this column. If this option is not specified, the value derived from accessorKey / accessorFn will be used instead.

VisibilityColumnDef

Configures column visibility behavior. Properties control whether columns can be hidden by users and whether they are visible by default. See Column Visibility.

Prop	Type
enableHiding Enables/Disables hiding the column.	boolean

enableHiding

Type

boolean

Description

Enables/Disables hiding the column.

Column

Table