mui-datatable-delight
    Preparing search index...

    Interface ColumnDefinitionOptions<T>

    interface ColumnDefinitionOptions<T> {
        customBodyRender?: (
            value: any,
            rowIndex: number,
            columnIndex: number,
            state: DataTableState<T>,
            updateValue: (value: unknown) => void,
        ) => ReactNode;
        customBodyRenderLite?: (dataIndex: number, rowIndex: number) => ReactNode;
        customFilterListOptions?: {
            render?: (value: ReactNode) => ReactNode;
            update?: (
                filterList: FilterList,
                filterPos: number,
                index: number,
            ) => FilterList;
        };
        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;
        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),
            rowIndex: number,
            columnIndex: number,
        ) => TableCellProps;
        sort: boolean;
        sortCompare?: (
            order: "desc" | "none" | "asc",
        ) => (obj1: { data: unknown }, obj2: { data: unknown }) => number;
        sortDescFirst: boolean;
        sortThirdClickReset?: boolean;
        viewColumns: boolean;
    }

    Type Parameters

    • T
    Index

    Properties

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

    Properties

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

    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: unknown) => void,
        ): ReactNode

      • Parameters

        • value: any

          The value of the cell column

        • 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: unknown) => void

          A function to update the value of the cell

        Returns ReactNode

    Example

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

    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

      • 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

    Example

    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).

      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'.

      Example

    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.

    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: 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
    true
    download: boolean

    Display column in the CSV download file.

    true
    empty?: boolean

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

    false
    filter: boolean

    Display column in filter list

    true
    filterList?: string[]

    Filter value list.

    Filters Example.

    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.

    DataTableStateColumnFilterOptions.

    filterType?: FilterTypeType

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

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

    'dropdown'

    FilterTypeType

    hint?: string

    Display hint icon with string as tooltip on hover.

    print: boolean

    Display column when printing.

    true
    searchable: boolean

    Exclude/include column from search results.

    true
    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.

    Example

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

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

    Example

    sort: boolean

    Enable/disable sorting on column.

    true
    sortCompare?: (
        order: "desc" | "none" | "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.

    Example

    sortDescFirst: boolean

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

    Example

    false
    sortThirdClickReset?: boolean

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

    Example

    false
    viewColumns: boolean

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

    true

    Settings

    Member Visibility

    On This Page

    Properties