mui-datatable-delight
    Preparing search index...

    Interface DataTableOptions<Row>

    interface DataTableOptions<Row = DefaultRow> {
        caseSensitive: boolean;
        columnOrder?: number[];
        confirmFilters?: boolean;
        count?: number;
        customFilterDialogFooter?: (
            filterList: FilterList,
            applyNewFilters: (...args: unknown[]) => unknown,
        ) => ReactNode;
        customFooter?: (
            rowCount: number,
            page: number,
            rowsPerPage: number,
            changeRowsPerPage: (rowPerPage: number) => void,
            changePage: (newPage: number) => void,
            textLabels: {
                displayRows: string;
                jumpToPage: string;
                next: string;
                previous: string;
                rowsPerPage: string;
            },
        ) => ReactElement;
        customRowRender?: (
            data: Row,
            dataIndex: number,
            rowIndex: number,
        ) => ReactNode;
        customSearch?: (
            searchText: string,
            currentRow: ReactNode[],
            columns: ColumnState<Row>[],
        ) => boolean;
        customSelectedRowsToolbar?: (
            selectedRows: {
                data: SelectedRowDataState[];
                lookup: Record<number, boolean>;
            },
            displayData: DisplayDataState<Row>,
            setSelectedRows: (rows: number[]) => void,
        ) => ReactNode;
        customSort?: (
            data: DataItemState[],
            colIndex: number,
            order: string,
            state: DataTableState<Row>,
        ) => DataItemState[];
        customTableBodyFooterRender?: (
            state: DataTableState<Row>,
            options: DataTableOptions<Row>,
        ) => ReactNode;
        customToolbar?: (data: { displayData: DisplayDataState<Row> }) => ReactNode;
        download: BooleanOrDisabled;
        downloadOptions: {
            filename: string;
            filterOptions?: {
                useDisplayedColumnsOnly?: boolean;
                useDisplayedRowsOnly?: boolean;
            };
            separator: string;
        };
        elevation: number;
        expandableRows: boolean;
        expandableRowsHeader: boolean;
        expandableRowsOnClick: boolean;
        filter: BooleanOrDisabled;
        filterArrayFullMatch: boolean;
        filterType: FilterTypeType;
        fixedHeader: boolean;
        fixedSelectColumn: boolean;
        isRowExpandable?: (
            dataIndex: number,
            expandedRows: ExpandedRows,
        ) => boolean;
        isRowSelectable?: (
            dataIndex: number,
            selectedRows: {
                data: SelectedRowDataState[];
                lookup: Record<number, boolean>;
            },
        ) => boolean;
        jumpToPage: boolean;
        onCellClick?: (
            colData: unknown,
            cellMeta: {
                colIndex: number;
                dataIndex: number;
                event: MouseEvent<HTMLTableCellElement>;
                rowIndex: number;
            },
        ) => void;
        onChangePage?: (currentPage: number) => void;
        onChangeRowsPerPage?: (numberOfRows: number) => void;
        onColumnOrderChange?: (
            newColumnOrder: number[],
            columnIndex: number,
            newPosition: number,
        ) => void;
        onColumnSortChange?: (
            columnName: string,
            direction: "desc" | "none" | "asc",
        ) => void;
        onColumnVisibilityChange?: (
            columnName: string,
            action: "add" | "remove",
        ) => void;
        onDownload?: (
            buildHead: (columns: ColumnState<Row>[]) => string,
            buildBody: (data: DataItemState[]) => string,
            columns: ColumnState<Row>[],
            data: DataItemState[],
        ) =>
            | string
            | false
            | { columns: ColumnState<Row>[]; data: DataItemState[] };
        onFilterChange?: (
            changedColumn: ColumnState<Row> | null,
            filterList: FilterList,
            type: "reset" | FilterTypeType,
            changedColumnIndex: number | null,
            displayData: DisplayDataState<Row>,
        ) => void;
        onFilterChipClose?: (
            index: number,
            removedFilter: string | string[],
            filterList: FilterList,
        ) => void;
        onFilterConfirm?: (filterList: FilterList) => void;
        onFilterDialogClose?: () => void;
        onFilterDialogOpen?: () => void;
        onRowClick?: (
            rowData: (
                ReactNode
                | ((dataIndex: number, rowIndex: number) => ReactNode)
            )[],
            rowMeta: { dataIndex: number; rowIndex: number },
            event: MouseEvent<HTMLTableRowElement>,
        ) => void;
        onRowExpansionChange?: (
            currentRowsExpanded: unknown[],
            allRowsExpanded: unknown[],
            rowsExpanded?: unknown[],
        ) => void;
        onRowsDelete?: (
            rowsDeleted: {
                data: SelectedRowDataState[];
                lookup: Record<number, boolean>;
            },
            newTableData: Row[],
        ) => false | void;
        onRowSelectionChange?: (
            currentRowsSelected: unknown[],
            allRowsSelected: unknown[],
            rowsSelected?: number[],
        ) => void;
        onSearchChange?: (searchText?: string) => void;
        onSearchClose?: () => void;
        onSearchOpen?: () => void;
        onTableChange?: (
            action: TableAction,
            tableState: DataTableState<Row>,
        ) => void;
        onTableInit?: (
            action: TableAction,
            tableState: DataTableState<Row>,
        ) => void;
        page?: number;
        pagination: boolean;
        print: BooleanOrDisabled;
        renderExpandableRow?: (
            rowData: (
                ReactNode
                | ((dataIndex: number, rowIndex: number) => ReactNode)
            )[],
            rowMeta: { dataIndex: number; rowIndex: number },
        ) => ReactNode;
        responsive: "vertical" | "standard" | "simple";
        rowHover: boolean;
        rowsExpanded?: number[];
        rowsPerPage: number;
        rowsPerPageOptions: number[];
        rowsSelected?: number[];
        search: BooleanOrDisabled;
        searchAlwaysOpen: boolean;
        searchDelay: number;
        searchOpen: boolean;
        searchPlaceholder?: string;
        searchProps?: TextFieldProps;
        searchText?: string;
        selectableRows: SelectableRowsType;
        selectableRowsHeader: boolean;
        selectableRowsHideCheckboxes: boolean;
        selectableRowsOnClick: boolean;
        selectToolbarPlacement: "replace" | "none" | "always" | "above";
        serverSide: boolean;
        setFilterChipProps?: (
            colIndex: number,
            colName: string,
            data: readonly unknown[][],
        ) => Pick<ChipProps, "color" | "variant" | "className">;
        setRowProps?: (
            row: unknown[],
            dataIndex: number,
            rowIndex: number,
        ) => TableRowProps;
        setTableProps?: () => TableProps;
        sort: boolean;
        sortFilterList: boolean;
        sortOrder?: DataTableSortOrderOption;
        storageKey?: string;
        tableBodyHeight: string;
        tableBodyMaxHeight?: string;
        viewColumns: BooleanOrDisabled;
    }

    Type Parameters

    Hierarchy

    • DataTableCustomsOptions<Row>
    • default<Row>
      • DataTableOptions
    Index

    Properties

    caseSensitive columnOrder? confirmFilters? count? customFilterDialogFooter? customFooter? customRowRender? customSearch? customSelectedRowsToolbar? customSort? customTableBodyFooterRender? customToolbar? download downloadOptions elevation expandableRows expandableRowsHeader expandableRowsOnClick filter filterArrayFullMatch filterType fixedHeader fixedSelectColumn isRowExpandable? isRowSelectable? jumpToPage onCellClick? onChangePage? onChangeRowsPerPage? onColumnOrderChange? onColumnSortChange? onColumnVisibilityChange? onDownload? onFilterChange? onFilterChipClose? onFilterConfirm? onFilterDialogClose? onFilterDialogOpen? onRowClick? onRowExpansionChange? onRowsDelete? onRowSelectionChange? onSearchChange? onSearchClose? onSearchOpen? onTableChange? onTableInit? page? pagination print renderExpandableRow? responsive rowHover rowsExpanded? rowsPerPage rowsPerPageOptions rowsSelected? search searchAlwaysOpen searchDelay searchOpen searchPlaceholder? searchProps? searchText? selectableRows selectableRowsHeader selectableRowsHideCheckboxes selectableRowsOnClick selectToolbarPlacement serverSide setFilterChipProps? setRowProps? setTableProps? sort sortFilterList sortOrder? storageKey? tableBodyHeight tableBodyMaxHeight? viewColumns

    Properties

    caseSensitive: boolean

    Enable/disable case sensitivity for search

    false
    columnOrder?: number[]

    An array of numbers (column indices) indicating the order the columns should be displayed in. Defaults to the order provided by the Columns prop. This option is useful if you'd like certain columns to swap position.

    confirmFilters?: boolean

    Works in conjunction with the customFilterDialogFooter options and make is so filters have to be confirmed before being applied to the table. When this option is true, the customFilterDialogFooter callback will receive an applyFilters function which, when called will apply the filter to the table.

    Server-side Filters Example

    count?: number

    User provided override for the total number of row.

    customFilterDialogFooter?: (
        filterList: FilterList,
        applyNewFilters: (...args: unknown[]) => unknown,
    ) => ReactNode

    Add a custom footer to the filter dialog.

    customFooter?: (
        rowCount: number,
        page: number,
        rowsPerPage: number,
        changeRowsPerPage: (rowPerPage: number) => void,
        changePage: (newPage: number) => void,
        textLabels: {
            displayRows: string;
            jumpToPage: string;
            next: string;
            previous: string;
            rowsPerPage: string;
        },
    ) => ReactElement

    Render a custom table footer.

    https://mui-datatable-delight.vercel.app/examples/customize-footer

    customRowRender?: (data: Row, dataIndex: number, rowIndex: number) => ReactNode

    Override default row rendering with custom function.

    Type Declaration

      • (data: Row, dataIndex: number, rowIndex: number): ReactNode

      • Parameters

        • data: Row

          The data of the row

        • dataIndex: number

          The dataIndex of the row

        • rowIndex: number

          The rowIndex of the row

        Returns ReactNode

    https://mui-datatable-delight.vercel.app/examples/customize-rows

    customSearch?: (
        searchText: string,
        currentRow: ReactNode[],
        columns: ColumnState<Row>[],
    ) => boolean

    Override default search with custom function.

    Example

    customSelectedRowsToolbar?: (
        selectedRows: {
            data: SelectedRowDataState[];
            lookup: Record<number, boolean>;
        },
        displayData: DisplayDataState<Row>,
        setSelectedRows: (rows: number[]) => void,
    ) => ReactNode

    Render a custom selected rows ToolBar.

    Selected Rows ToolBar Example

    customSort?: (
        data: DataItemState[],
        colIndex: number,
        order: string,
        state: DataTableState<Row>,
    ) => DataItemState[]

    Override default sorting with custom function.

    If you just need to override the sorting for a particular column, see the sortCompare method in the Column options.

    https://mui-datatable-delight.vercel.app/examples/customize-sorting

    customTableBodyFooterRender?: (
        state: DataTableState<Row>,
        options: DataTableOptions<Row>,
    ) => ReactNode

    Render a footer under the table body but above the table's standard footer. This is useful for creating footers for individual columns.

    https://mui-datatable-delight.vercel.app/examples/customize-footer

    customToolbar?: (data: { displayData: DisplayDataState<Row> }) => ReactNode

    Render a custom Toolbar.

    https://mui-datatable-delight.vercel.app/examples/customize-toolbar/CustomToolbar.tsx

    download: BooleanOrDisabled

    Possible Values:

    • true = Button visible and clickable
    • false = Button not visible
    • 'disabled' = Button is visible but not clickable
    true
    downloadOptions: {
        filename: string;
        filterOptions?: {
            useDisplayedColumnsOnly?: boolean;
            useDisplayedRowsOnly?: boolean;
        };
        separator: string;
    }

    An object of options to change the output of the csv file.

    downloadOptions.filename = 'tableDownload.csv'

    downloadOptions.separator = ','
    elevation: number

    Shadow depth applied to the <Paper /> component.

    4
    expandableRows: boolean

    Enable/disable expandable rows.

    https://mui-datatable-delight.vercel.app/examples/expandable-rows

    false
    expandableRowsHeader: boolean

    Show/hide the expand all/collapse all row header for expandable row.

    true
    expandableRowsOnClick: boolean

    Enable/disable expand trigger when row is clicked. When false, only expand icon will trigger this action.

    false
    filter: BooleanOrDisabled

    Possible Values:

    • true = Button visible and clickable
    • false = Button not visible
    • 'disabled' = Button is visible but not clickable
    true
    filterArrayFullMatch: boolean

    For array values, default checks if all the filter values are included in the array. If false, checks if at least one of the filter values is in the array.

    https://mui-datatable-delight.vercel.app/examples/array-value-columns

    true
    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

    fixedHeader: boolean

    Enable/disable a fixed header for the table

    https://mui-datatable-delight.vercel.app/examples/fixed-header

    true
    fixedSelectColumn: boolean

    Enable/disable fixed select column.

    https://mui-datatable-delight.vercel.app/examples/fixed-header

    true
    isRowExpandable?: (dataIndex: number, expandedRows: ExpandedRows) => boolean

    Enable/disable expansion or collapse on certain expandable rows with custom function. Returns true if not provided.

    isRowSelectable?: (
        dataIndex: number,
        selectedRows: {
            data: SelectedRowDataState[];
            lookup: Record<number, boolean>;
        },
    ) => boolean

    Enable/disable selection on certain rows with custom function. Returns true if not provided.

    jumpToPage: boolean

    When true, the option adds a dropdown to the table's footer that allows a user to navigate to a specific page.

    https://mui-datatable-delight.vercel.app/examples/large-data-set

    false
    onCellClick?: (
        colData: unknown,
        cellMeta: {
            colIndex: number;
            dataIndex: number;
            event: MouseEvent<HTMLTableCellElement>;
            rowIndex: number;
        },
    ) => void

    Callback function that triggers when a cell is clicked.

    onChangePage?: (currentPage: number) => void
    onChangeRowsPerPage?: (numberOfRows: number) => void

    Callback function that triggers when a page has changed.

    onColumnOrderChange?: (
        newColumnOrder: number[],
        columnIndex: number,
        newPosition: number,
    ) => void

    Callback function that triggers when a column has been dragged to a new location.

    onColumnSortChange?: (
        columnName: string,
        direction: "desc" | "none" | "asc",
    ) => void

    Callback function that triggers when a column has been sorted.

    Type Declaration

      • (columnName: string, direction: "desc" | "none" | "asc"): void

      • Parameters

        • columnName: string

          Name of the column that was sorted

        • direction: "desc" | "none" | "asc"

          New sort order direction (asc or desc)

        Returns void

    onColumnVisibilityChange?: (
        columnName: string,
        action: "add" | "remove",
    ) => void

    Callback function that triggers when a column view has been changed.

    Type Declaration

      • (columnName: string, action: "add" | "remove"): void

      • Parameters

        • columnName: string

          Name of the column that was changed

        • action: "add" | "remove"

        Returns void

    onDownload?: (
        buildHead: (columns: ColumnState<Row>[]) => string,
        buildBody: (data: DataItemState[]) => string,
        columns: ColumnState<Row>[],
        data: DataItemState[],
    ) => string | false | { columns: ColumnState<Row>[]; data: DataItemState[] }

    A callback function that triggers when the user downloads the CSV file. In the callback, you can control what is written to the CSV file. Return false to cancel download of file.

    onFilterChange?: (
        changedColumn: ColumnState<Row> | null,
        filterList: FilterList,
        type: "reset" | FilterTypeType,
        changedColumnIndex: number | null,
        displayData: DisplayDataState<Row>,
    ) => void

    Callback function that triggers when filters have changed.

    onFilterChipClose?: (
        index: number,
        removedFilter: string | string[],
        filterList: FilterList,
    ) => void

    Callback function that is triggered when a user clicks the "X" on a filter chip.

    Server-side Filters Example

    onFilterConfirm?: (filterList: FilterList) => void

    Callback function that is triggered when a user presses the "confirm" button on the filter popover. This occurs only if you've set confirmFilters option to true.

    Server-side Filters Example

    onFilterDialogClose?: () => void

    Callback function that triggers when the filter dialog closes.

    onFilterDialogOpen?: () => void

    Callback function that triggers when the filter dialog opens.

    onRowClick?: (
        rowData: (
            ReactNode
            | ((dataIndex: number, rowIndex: number) => ReactNode)
        )[],
        rowMeta: { dataIndex: number; rowIndex: number },
        event: MouseEvent<HTMLTableRowElement>,
    ) => void

    Callback function that triggers when a row is clicked.

    onRowExpansionChange?: (
        currentRowsExpanded: unknown[],
        allRowsExpanded: unknown[],
        rowsExpanded?: unknown[],
    ) => void

    Callback function that triggers when row(s) are expanded/collapsed.

    onRowsDelete?: (
        rowsDeleted: {
            data: SelectedRowDataState[];
            lookup: Record<number, boolean>;
        },
        newTableData: Row[],
    ) => false | void

    Callback function that triggers when row(s) are deleted. Returning false prevents row deletion.

    onRowSelectionChange?: (
        currentRowsSelected: unknown[],
        allRowsSelected: unknown[],
        rowsSelected?: number[],
    ) => void

    Callback function that triggers when row(s) are selected/deselected.

    onSearchChange?: (searchText?: string) => void

    Callback function that triggers when the search text value has changed.

    onSearchClose?: () => void

    Callback function that triggers when the searchbox closes.

    onSearchOpen?: () => void

    Callback function that triggers when the searchbox opens.

    onTableChange?: (action: TableAction, tableState: DataTableState<Row>) => void

    Callback function that triggers when table state has changed.

    onTableInit?: (action: TableAction, tableState: DataTableState<Row>) => void

    Callback function that triggers when table state has been initialized.

    Optionalpage

    page?: number

    User provided page for pagination

    pagination: boolean

    Enable/disable pagination.

    true
    print: BooleanOrDisabled

    Possible Values:

    • true = Button visible and clickable
    • false = Button not visible
    • 'disabled' = Button is visible but not clickable
    true
    renderExpandableRow?: (
        rowData: (
            ReactNode
            | ((dataIndex: number, rowIndex: number) => ReactNode)
        )[],
        rowMeta: { dataIndex: number; rowIndex: number },
    ) => ReactNode

    Render Expandable rows.

    https://mui-datatable-delight.vercel.app/examples/expandable-rows

    responsive: "vertical" | "standard" | "simple"

    Enable/disable responsive table view. Options:

    • 'vertical': In smaller view the table cells will collapse such that the heading is to the left of th cell value.
    • 'standard': Table will stay in the standard mode but make small changes to better fit the allocated space.
    • 'simple': On very small devices the table rows will collapse into simple display.

    https://mui-datatable-delight.vercel.app/examples/simple

    'vertical'
    rowHover: boolean

    Enable/disable hover style over row.

    true
    rowsExpanded?: number[]

    User provided expanded rows

    rowsPerPage: number

    Number of rows allowed per page.

    10
    rowsPerPageOptions: number[]

    Options to provide in pagination for number of rows a user can select

    [10, 20, 50, 100]
    rowsSelected?: number[]

    User provided array of number (dataIndexes) which indicated the selected row.

    search: BooleanOrDisabled

    Possible Values:

    • true = Button visible and clickable
    • false = Button not visible
    • 'disabled' = Button is visible but not clickable
    true
    searchAlwaysOpen: boolean

    Always displays search bar, and hides search icon in toolbar.

    false
    searchDelay: number

    The delay in milliseconds to wait before triggering the search. For example, setting searchDelay: 300 means the search will only execute 300ms after the user stops typing.

    Debounce Search Docs

    0
    searchOpen: boolean

    Initially displays search bar.

    false
    searchPlaceholder?: string

    Search text placeholder.

    Example

    searchProps?: TextFieldProps

    Props applied to the search text box. You can set method callbacks like onBlur, onKeyUp, etc, this way.

    Example

    searchText?: string

    Search text for the table.

    selectableRows: SelectableRowsType

    Indicates if rows can be selected.

    'multiple'
    selectableRowsHeader: boolean

    Show/hide the select all/deselect all checkbox header for selectable rows.

    true
    selectableRowsHideCheckboxes: boolean

    Hides the checkboxes that appear when selectableRows is set to "multiple" or "single". Can provide a more custom UX, especially when paired with selectableRowsOnClick.

    false
    selectableRowsOnClick: boolean

    Enable/disable select toggle when row is clicked. When False, only checkbox will trigger this action.

    false
    selectToolbarPlacement: "replace" | "none" | "always" | "above"

    Controls the visibility of the Select Toolbar.

    Options:

    • 'above': Appears above the default toolbar.
    • always:
    • 'none': Select Toolbar never appears
    • 'replace': Select toolbar replaces default toolbar.
    'replace'
    serverSide: boolean

    Enable remote data source

    false
    setFilterChipProps?: (
        colIndex: number,
        colName: string,
        data: readonly unknown[][],
    ) => Pick<ChipProps, "color" | "variant" | "className">

    Is called for each filter chip and allows you to place custom props on a filter chip.

    https://mui-datatable-delight.vercel.app/examples/customize-filter

    setRowProps?: (
        row: unknown[],
        dataIndex: number,
        rowIndex: number,
    ) => TableRowProps

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

    https://mui-datatable-delight.vercel.app/examples/customize-styling

    setTableProps?: () => TableProps

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

    https://mui-datatable-delight.vercel.app/examples/customize-styling

    sort: boolean

    Enable/disable sort on all columns.

    true
    sortFilterList: boolean

    Enable/disable alphanumeric sorting of filter lists.

    true
    sortOrder?: DataTableSortOrderOption

    Sets the column to sort by and its sort direction. To remove/reset sorting, input in an empty object. The object options are the column name and the direction.

    storageKey?: string

    Local storage key used to store the table state.

    tableBodyHeight: string

    CSS string for the height of the table.

    '500px'

    '100%'

    'auto'

    'auto'
    tableBodyMaxHeight?: string

    CSS string for the height of the table.

    '500px'

    '100%'

    'auto'
    viewColumns: BooleanOrDisabled

    Possible Values:

    • true = Button visible and clickable
    • false = Button not visible
    • 'disabled' = Button is visible but not clickable
    true

    Settings

    Member Visibility

    On This Page

    Properties
    caseSensitivecolumnOrderconfirmFilterscountcustomFilterDialogFootercustomFootercustomRowRendercustomSearchcustomSelectedRowsToolbarcustomSortcustomTableBodyFooterRendercustomToolbardownloaddownloadOptionselevationexpandableRowsexpandableRowsHeaderexpandableRowsOnClickfilterfilterArrayFullMatchfilterTypefixedHeaderfixedSelectColumnisRowExpandableisRowSelectablejumpToPageonCellClickonChangePageonChangeRowsPerPageonColumnOrderChangeonColumnSortChangeonColumnVisibilityChangeonDownloadonFilterChangeonFilterChipCloseonFilterConfirmonFilterDialogCloseonFilterDialogOpenonRowClickonRowExpansionChangeonRowsDeleteonRowSelectionChangeonSearchChangeonSearchCloseonSearchOpenonTableChangeonTableInitpagepaginationprintrenderExpandableRowresponsiverowHoverrowsExpandedrowsPerPagerowsPerPageOptionsrowsSelectedsearchsearchAlwaysOpensearchDelaysearchOpensearchPlaceholdersearchPropssearchTextselectableRowsselectableRowsHeaderselectableRowsHideCheckboxesselectableRowsOnClickselectToolbarPlacementserverSidesetFilterChipPropssetRowPropssetTablePropssortsortFilterListsortOrderstorageKeytableBodyHeighttableBodyMaxHeightviewColumns