Interface DataTableComponents

interface DataTableComponents {
    AnnounceText: () => ReactNode;
    BottomBar: () => ReactNode;
    Checkbox: (props: CheckboxProps) => React.JSX.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) => React.JSX.Element;
}

Component

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

Other

Checkbox Tooltip

Component

AnnounceText

AnnounceText: () => ReactNode

Type declaration

    • (): ReactNode

    • Announce text

      Returns ReactNode

BottomBar

BottomBar: () => ReactNode

Type declaration

    • (): ReactNode

    • The bottom bar component.

      Returns ReactNode

ColumnsResizer

ColumnsResizer: () => ReactNode

Type declaration

ColumnVisibilitiesBox

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

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

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

Type declaration

RowExpansionButton

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

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

Table: (__namedParameters: TableProps) => ReactNode

Type declaration

    • (__namedParameters: TableProps): ReactNode

    • Main table component

      Parameters

      Returns ReactNode

TableBody

TableBody: (__namedParameters: DataTableBodyProps) => ReactNode

Type declaration

TableHead

TableHead: (__namedParameters: TableProps) => ReactNode

Type declaration

    • (__namedParameters: TableProps): ReactNode

    • Table Head

      Parameters

      Returns ReactNode

Toolbar

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

Type declaration

Other

Checkbox

Checkbox: (props: CheckboxProps) => React.JSX.Element

Global <Checkbox /> component inside <DataTable />

Type declaration

Tooltip

Tooltip: (props: TooltipProps) => React.JSX.Element

Global <Tooltip /> component inside <DataTable />

Type declaration

    • (props: TooltipProps): React.JSX.Element

    • Demos:

      API:

      Parameters

      • props: TooltipProps

      Returns React.JSX.Element

Settings

Member Visibility

On This Page

Component
Other