mui-datatable-delight
    Preparing search index...

    Interface DataTableComponents

    interface DataTableComponents {
        AnnounceText: () => ReactNode;
        BottomBar: () => ReactNode;
        Checkbox: (props: CheckboxProps) => Element;
        ColumnsResizer: () => ReactNode;
        ColumnVisibilitiesBox: () => ReactNode;
        DataFilterBox: <T>(
            __namedParameters: {
                filterUpdate: FilterUpdateType<T>;
                handleClose: () => void;
            },
        ) => ReactNode;
        FilteredValuesList: <T>(
            __namedParameters: TableFilterListProps<T>,
        ) => ReactNode;
        RowExpansionButton: (
            __namedParameters: {
                areAllRowsExpanded: () => boolean;
                buttonClass: string;
                dataIndex?: number;
                iconClass: string;
                iconIndeterminateClass: string;
                isHeaderCell: boolean;
                onExpand?: (...args: unknown[]) => unknown;
            },
        ) => ReactNode;
        SelectedRowsToolbar: (
            __namedParameters: TableToolbarSelectProps,
        ) => ReactNode;
        Table: (__namedParameters: TableProps) => ReactNode;
        TableBody: (__namedParameters: DataTableBodyProps) => ReactNode;
        TableHead: (__namedParameters: TableProps) => ReactNode;
        Toolbar: <T>(props: ToolbarProps<T>) => ReactNode;
        Tooltip: (props: TooltipProps) => Element;
    }
    Index

    Component

    AnnounceText BottomBar ColumnsResizer ColumnVisibilitiesBox DataFilterBox FilteredValuesList RowExpansionButton SelectedRowsToolbar Table TableBody TableHead Toolbar

    Other

    Checkbox Tooltip

    Component

    AnnounceText: () => ReactNode

    Type declaration

      • (): ReactNode

      • Announce text

        Returns ReactNode

    BottomBar: () => ReactNode

    Type declaration

      • (): ReactNode

      • The bottom bar component.

        Returns ReactNode

    ColumnsResizer: () => ReactNode

    Type declaration

    ColumnVisibilitiesBox: () => ReactNode

    Type declaration

      • (): ReactNode

      • A component that renders a form with checkboxes for each column with viewColumns set to true. The component is used in the <Toolbar /> .

        Returns ReactNode

    DataFilterBox: <T>(
        __namedParameters: {
            filterUpdate: FilterUpdateType<T>;
            handleClose: () => void;
        },
    ) => ReactNode

    Type declaration

      • <T>(
            __namedParameters: {
                filterUpdate: FilterUpdateType<T>;
                handleClose: () => void;
            },
        ): ReactNode

      • ToolbarDataFilterBox is a component that renders a filter dialog box for a data table, allowing users to apply filters to the table's data. It utilizes the context from the data table to access current state, options, and actions.

        The component maintains an internal filter list state that reflects the current filters applied. It also provides a reset functionality to clear all filters and optionally interfaces with server-side data management if specified in the options.

        Type Parameters

        • T

        Parameters

        • __namedParameters: { filterUpdate: FilterUpdateType<T>; handleClose: () => void }
          • filterUpdate: FilterUpdateType<T>

            Callback to trigger filter update

          • handleClose: () => void

        Returns ReactNode

    FilteredValuesList: <T>(__namedParameters: TableFilterListProps<T>) => ReactNode

    Type declaration

    RowExpansionButton: (
        __namedParameters: {
            areAllRowsExpanded: () => boolean;
            buttonClass: string;
            dataIndex?: number;
            iconClass: string;
            iconIndeterminateClass: string;
            isHeaderCell: boolean;
            onExpand?: (...args: unknown[]) => unknown;
        },
    ) => ReactNode

    Type declaration

      • (
            __namedParameters: {
                areAllRowsExpanded: () => boolean;
                buttonClass: string;
                dataIndex?: number;
                iconClass: string;
                iconIndeterminateClass: string;
                isHeaderCell: boolean;
                onExpand?: (...args: unknown[]) => unknown;
            },
        ): ReactNode

      • The row expansion button component.

        Parameters

        • __namedParameters: {
              areAllRowsExpanded: () => boolean;
              buttonClass: string;
              dataIndex?: number;
              iconClass: string;
              iconIndeterminateClass: string;
              isHeaderCell: boolean;
              onExpand?: (...args: unknown[]) => unknown;
          }

        Returns ReactNode

    SelectedRowsToolbar: (__namedParameters: TableToolbarSelectProps) => ReactNode

    Type declaration

      • (__namedParameters: TableToolbarSelectProps): ReactNode

      • The selected rows toolbar component.

        It renders the number of selected rows and either a custom component provided by the user or a default delete button. When the delete button is clicked, it will call the onRowsDelete function provided by the user or the onAction function with the TableAction.ROW_DELETE action.

        Parameters

        Returns ReactNode

    Table: (__namedParameters: TableProps) => ReactNode

    Type declaration

      • (__namedParameters: TableProps): ReactNode

      • Main table component

        Parameters

        Returns ReactNode

    TableBody: (__namedParameters: DataTableBodyProps) => ReactNode

    Type declaration

    TableHead: (__namedParameters: TableProps) => ReactNode

    Type declaration

      • (__namedParameters: TableProps): ReactNode

      • Table Head

        Parameters

        Returns ReactNode

    Toolbar: <T>(props: ToolbarProps<T>) => ReactNode

    Type declaration

    Other

    Checkbox: (props: CheckboxProps) => Element

    Global <Checkbox /> component inside <DataTable />

    Type declaration

    Tooltip: (props: TooltipProps) => Element

    Global <Tooltip /> component inside <DataTable />

    Type declaration

      • (props: TooltipProps): Element

      • Demos:

        API:

        Parameters

        • props: TooltipProps

        Returns Element

    Settings

    Member Visibility

    On This Page

    Component
    Other