Interface ColumnDefinitionOptions<T>

interface ColumnDefinitionOptions<T> {
    customBodyRender?: (
        value: any,
        rowIndex: number,
        columnIndex: number,
        state: DataTableState<T>,
        updateValue: (value: any) => void,
    ) => ReactNode | Element;
    customBodyRenderLite?: (
        dataIndex: number,
        rowIndex: number,
    ) => ReactNode | Element;
    customFilterListOptions?: {
        render?: (value: ReactNode) => ReactNode;
        update?: (
            filterList: FilterList,
            filterPos: number,
            index: number,
        ) => FilterList;
    };
    customFilterListRender?: (value: unknown) => string;
    customHeadLabelRender?: (
        options: { colPos: number; index: number } & {
            label: string;
            name: string;
        } & ColumnDefinitionOptions<T>,
    ) => ReactNode;
    customHeadRender?: (
        columnMeta: CustomHeadRenderer<T>,
        handleToggleColumn: (columnIndex: number) => void,
        sortOrder?: DataTableSortOrderOption,
    ) => ReactNode;
    display: boolean | "excluded";
    download: boolean;
    draggable?: boolean;
    empty?: boolean;
    filter: boolean;
    filterList?: string[];
    filterOptions?: DataTableStateColumnFilterOptions<T>;
    filterType?: FilterTypeType;
    hint?: string;
    print: boolean;
    searchable: boolean;
    setCellHeaderProps?: (columnMeta: CustomHeadRenderer<T>) => object;
    setCellProps?: (
        cellValue:
            | ReactNode
            | (dataIndex: number, rowIndex: number) => ReactNode | Element,
        rowIndex: number,
        columnIndex: number,
    ) => TableCellProps;
    sort: boolean;
    sortCompare?: (
        order: "none" | "desc" | "asc",
    ) => (obj1: { data: unknown }, obj2: { data: unknown }) => number;
    sortDescFirst: boolean;
    sortDirection?: "none" | "desc" | "asc";
    sortThirdClickReset?: boolean;
    viewColumns: boolean;
}

Type Parameters

  • T

Properties

customBodyRender? customBodyRenderLite? customFilterListOptions? customFilterListRender? customHeadLabelRender? customHeadRender? display download draggable? empty? filter filterList? filterOptions? filterType? hint? print searchable setCellHeaderProps? setCellProps? sort sortCompare? sortDescFirst sortDirection? sortThirdClickReset? viewColumns

Properties

OptionalcustomBodyRender

customBodyRender?: (
    value: any,
    rowIndex: number,
    columnIndex: number,
    state: DataTableState<T>,
    updateValue: (value: any) => void,
) => ReactNode | Element

Function that returns a string or React component. Used to display data within all table cells of a given column. The value returned from this function will be used for filtering in the filter dialog. If this isn't need, you may want to consider customBodyRenderLite instead.

Type declaration

    • (
          value: any,
          rowIndex: number,
          columnIndex: number,
          state: DataTableState<T>,
          updateValue: (value: any) => void,
      ): ReactNode | Element

    • Parameters

      • value: any

        The value of the cell column

        any type is used because user can pass any value

      • rowIndex: number

        The index of the row

      • columnIndex: number

        The index of the column

      • state: DataTableState<T>

        The current state of the table

      • updateValue: (value: any) => void

        A function to update the value of the cell

        any type is used because user can pass any value

      Returns ReactNode | Element

See

Example

OptionalcustomBodyRenderLite

customBodyRenderLite?: (
    dataIndex: number,
    rowIndex: number,
) => ReactNode | Element

Similar to and performing better than customBodyRender, however with the following caveats:

  1. The value returned from this function is not used for filtering, so the filter dialog will use the raw data from the data array.
  2. This method only gives you the dataIndex and rowIndex, leaving you to lookup the column value.

Type declaration

    • (dataIndex: number, rowIndex: number): ReactNode | Element

    • Parameters

      • dataIndex: number

        The index of the item in the data array.

      • rowIndex: number

        The index of the row in the current page table.

      Returns ReactNode | Element

See

Example

OptionalcustomFilterListOptions

customFilterListOptions?: {
    render?: (value: ReactNode) => ReactNode;
    update?: (
        filterList: FilterList,
        filterPos: number,
        index: number,
    ) => FilterList;
}

These options only affect the filter chips that display after filter are selected. To modify the filters themselves, see filterOptions.

Type declaration

  • Optionalrender?: (value: ReactNode) => ReactNode

    Function that return a string or array of strings use as the chip label(s).

    See

    Example

  • Optionalupdate?: (filterList: FilterList, filterPos: number, index: number) => FilterList

    Function that returns a filterList allowing for custom filter updates when removing the filter chip. FilterType must be set to 'custom'.

    See

    Example

OptionalcustomFilterListRender

customFilterListRender?: (value: unknown) => string

Deprecated

use customFilterListOptions.render

OptionalcustomHeadLabelRender

customHeadLabelRender?: (
    options: { colPos: number; index: number } & {
        label: string;
        name: string;
    } & ColumnDefinitionOptions<T>,
) => ReactNode

Function that returns a string or React component. Used for creating a custom header to a column. This method only affects the display in the table's header, other areas of the table (such as the View Columns popover), will use the column's label.

OptionalcustomHeadRender

customHeadRender?: (
    columnMeta: CustomHeadRenderer<T>,
    handleToggleColumn: (columnIndex: number) => void,
    sortOrder?: DataTableSortOrderOption,
) => ReactNode

Function that returns a string or React component. Used as display for column header.

display

display: boolean | "excluded"

Display the column. Possible values:

  • true: Column is visible and toggleable via the View Columns Popover
  • false: Column is not visible but can be made so in the View Columns Popover
  • 'excluded': Column is not visible and not toggleable in the View Column Popover

Default

true

download

download: boolean

Display column in the CSV download file.

Default

true

Optionaldraggable

draggable?: boolean

Determines if the column can be dragged. The draggableColumns.enabled option must also be true.

Default

true

Optionalempty

empty?: boolean

This denote whether the column has data or not. For use with intentionally empty columns.

Default

false

filter

filter: boolean

Display column in filter list

Default

true

OptionalfilterList

filterList?: string[]

Filter value list.

See

Filters Example.

OptionalfilterOptions

filterOptions?: DataTableStateColumnFilterOptions<T>

These options affect the filter display and functionality from the filter dialog.

To modify the filter chip that display after selecting filters.

See

DataTableStateColumnFilterOptions.

OptionalfilterType

filterType?: FilterTypeType

Choice of filtering view. Takes priority over global filterType option.

Use 'custom' is you are supplying your own rendering via filterOptions.

Default

'dropdown'

See

FilterTypeType

Optionalhint

hint?: string

Display hint icon with string as tooltip on hover.

print

print: boolean

Display column when printing.

Default

true

searchable

searchable: boolean

Exclude/include column from search results.

Default

true

OptionalsetCellHeaderProps

setCellHeaderProps?: (columnMeta: CustomHeadRenderer<T>) => object

Is called for each header cell and allows you to return custom props for the header cell based on its data.

See

Example

OptionalsetCellProps

setCellProps?: (
    cellValue:
        | ReactNode
        | (dataIndex: number, rowIndex: number) => ReactNode | Element,
    rowIndex: number,
    columnIndex: number,
) => TableCellProps

Is called for each cell and allows to you return custom props for this cell based on its data.

See

Example

sort

sort: boolean

Enable/disable sorting on column.

Default

true

OptionalsortCompare

sortCompare?: (
    order: "none" | "desc" | "asc",
) => (obj1: { data: unknown }, obj2: { data: unknown }) => number

Custom sort function for the column. Takes in an order string and returns a function that compares the two column values. If this method and options.customSort are both defined, this method will take precedence.

See

Example

sortDescFirst

sortDescFirst: boolean

Causes the first click on a column to sort by desc rather than asc.

See

Example

Default

false

OptionalsortDirection

sortDirection?: "none" | "desc" | "asc"

Deprecated

use sortOrder instead

OptionalsortThirdClickReset

sortThirdClickReset?: boolean

Allows for a third click on a column header to undo any sorting on the column.

See

Example

Default

false

viewColumns

viewColumns: boolean

Allow user to toggle column visibility through 'View Column' list.

Default

true

Settings

Member Visibility

On This Page

Properties