mui-datatable-delight
    Preparing search index...

    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
    Index

    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

    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

    Example

    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

    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

    customFilterListRender?: (value: unknown) => string

    use customFilterListOptions.render

    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
    draggable?: boolean

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

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

    Example

    sort: boolean

    Enable/disable sorting on column.

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

    Example

    sortDescFirst: boolean

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

    Example

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

    use sortOrder instead

    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