Interface GridSlotsComponent

Grid components React prop interface containing all the overridable components.

interface GridSlotsComponent {
    baseBadge: JSXElementConstructor<BadgeOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
        ref?: null | ((instance: null | HTMLSpanElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLSpanElement>;
    },
        | "className"
        | "components"
        | "style"
        | "color"
        | "variant"
        | "children"
        | "classes"
        | "sx"
        | "max"
        | "componentsProps"
        | "slotProps"
        | "slots"
        | "anchorOrigin"
        | "invisible"
        | "badgeContent"
        | "overlap"
        | "showZero"> & {
        component?: ElementType<any, (keyof IntrinsicElements)>;
    } & BaseBadgePropsOverrides>;
    baseButton: JSXElementConstructor<ButtonOwnProps & Omit<ButtonBaseOwnProps, "classes"> & CommonProps & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
        ref?: null | ((instance: null | HTMLButtonElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement>;
    },
        | "className"
        | "href"
        | "style"
        | "color"
        | "variant"
        | "children"
        | "classes"
        | "sx"
        | "tabIndex"
        | "disabled"
        | "size"
        | "action"
        | "centerRipple"
        | "disableRipple"
        | "disableTouchRipple"
        | "focusRipple"
        | "focusVisibleClassName"
        | "LinkComponent"
        | "onFocusVisible"
        | "TouchRippleProps"
        | "touchRippleRef"
        | "fullWidth"
        | "disableFocusRipple"
        | "endIcon"
        | "startIcon"
        | "disableElevation"> & {
        component?: ElementType<any, (keyof IntrinsicElements)>;
    } & BaseButtonPropsOverrides>;
    baseCheckbox: JSXElementConstructor<CheckboxProps & BaseCheckboxPropsOverrides>;
    baseChip: JSXElementConstructor<ChipOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
        ref?: null | ((instance: null | HTMLDivElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLDivElement>;
    },
        | "className"
        | "icon"
        | "style"
        | "color"
        | "variant"
        | "label"
        | "children"
        | "classes"
        | "sx"
        | "tabIndex"
        | "disabled"
        | "size"
        | "clickable"
        | "onDelete"
        | "avatar"
        | "deleteIcon"
        | "skipFocusWhenDisabled"> & {
        component?: ElementType<any, (keyof IntrinsicElements)>;
    } & BaseChipPropsOverrides>;
    baseDivider: JSXElementConstructor<BaseDividerPropsOverrides>;
    baseFormControl: JSXElementConstructor<FormControlOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
        ref?: null | ((instance: null | HTMLDivElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLDivElement>;
    },
        | "margin"
        | "className"
        | "style"
        | "error"
        | "color"
        | "variant"
        | "children"
        | "classes"
        | "sx"
        | "disabled"
        | "required"
        | "size"
        | "fullWidth"
        | "focused"
        | "hiddenLabel"> & {
        component?: ElementType<any, (keyof IntrinsicElements)>;
    } & BaseFormControlPropsOverrides>;
    baseIconButton: JSXElementConstructor<IconButtonOwnProps & Omit<ButtonBaseOwnProps, "classes"> & CommonProps & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
        ref?: null | ((instance: null | HTMLButtonElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement>;
    },
        | "className"
        | "style"
        | "color"
        | "children"
        | "classes"
        | "sx"
        | "tabIndex"
        | "disabled"
        | "size"
        | "action"
        | "centerRipple"
        | "disableRipple"
        | "disableTouchRipple"
        | "focusRipple"
        | "focusVisibleClassName"
        | "LinkComponent"
        | "onFocusVisible"
        | "TouchRippleProps"
        | "touchRippleRef"
        | "disableFocusRipple"
        | "edge"> & {
        component?: ElementType<any, (keyof IntrinsicElements)>;
    } & BaseIconButtonPropsOverrides>;
    baseInputAdornment: JSXElementConstructor<InputAdornmentOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
        ref?: null | ((instance: null | HTMLDivElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLDivElement>;
    },
        | "className"
        | "style"
        | "position"
        | "variant"
        | "children"
        | "classes"
        | "sx"
        | "disableTypography"
        | "disablePointerEvents"> & {
        component?: ElementType<any, (keyof IntrinsicElements)>;
    } & BaseInputAdornmentPropsOverrides>;
    baseInputLabel: JSXElementConstructor<InputLabelOwnProps & Pick<FormLabelOwnProps, "color" | "filled"> & CommonProps & Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
        ref?: null | ((instance: null | HTMLLabelElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLLabelElement>;
    },
        | "margin"
        | "className"
        | "style"
        | "error"
        | "color"
        | "variant"
        | "children"
        | "classes"
        | "sx"
        | "disabled"
        | "required"
        | "size"
        | "filled"
        | "shrink"
        | "focused"
        | "disableAnimation"> & {
        component?: ElementType<any, (keyof IntrinsicElements)>;
    } & BaseInputLabelPropsOverrides>;
    basePopper: JSXElementConstructor<PopperProps & BasePopperPropsOverrides>;
    baseSelect: JSXElementConstructor<SelectProps & BaseSelectPropsOverrides>;
    baseSelectOption: JSXElementConstructor<{
        children?: ReactNode;
        native: boolean;
        value: any;
    } & BaseSelectOptionPropsOverrides>;
    baseTextField: JSXElementConstructor<TextFieldProps & BaseTextFieldPropsOverrides>;
    baseTooltip: JSXElementConstructor<TooltipProps & BaseTooltipPropsOverrides>;
    booleanCellFalseIcon: JSXElementConstructor<any>;
    booleanCellTrueIcon: JSXElementConstructor<any>;
    cell: JSXElementConstructor<HTMLAttributes<HTMLDivElement> & {
        align: GridAlignment;
        children?: ReactNode;
        className?: string;
        colIndex: number;
        colSpan?: number;
        column: GridStateColDef;
        disableDragEvents?: boolean;
        isNotVisible: boolean;
        onClick?: MouseEventHandler<HTMLDivElement>;
        onDoubleClick?: MouseEventHandler<HTMLDivElement>;
        onDragEnter?: DragEventHandler<HTMLDivElement>;
        onDragOver?: DragEventHandler<HTMLDivElement>;
        onFocus?: FocusEventHandler<Element>;
        onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
        onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
        onMouseDown?: MouseEventHandler<HTMLDivElement>;
        onMouseEnter?: MouseEventHandler<HTMLDivElement>;
        onMouseLeave?: MouseEventHandler<HTMLDivElement>;
        onMouseOver?: MouseEventHandler<HTMLDivElement>;
        onMouseUp?: MouseEventHandler<HTMLDivElement>;
        pinnedOffset?: number;
        pinnedPosition: PinnedColumnPosition;
        row: GridValidRowModel;
        rowId: GridRowId;
        rowNode: GridTreeNode;
        showLeftBorder: boolean;
        showRightBorder: boolean;
        style?: CSSProperties;
        width: number;
        [x: `data-${string}`]: string;
    } & CellPropsOverrides>;
    columnFilteredIcon: JSXElementConstructor<any>;
    columnHeaderFilterIconButton: JSXElementConstructor<ColumnHeaderFilterIconButtonProps & ColumnHeaderFilterIconButtonPropsOverrides>;
    columnHeaders: JSXElementConstructor<GridColumnHeadersProps>;
    columnHeaderSortIcon: JSXElementConstructor<GridColumnHeaderSortIconProps & ColumnHeaderSortIconPropsOverrides>;
    columnMenu: JSXElementConstructor<GridColumnMenuProps & ColumnMenuPropsOverrides>;
    columnMenuClearIcon: JSXElementConstructor<any>;
    columnMenuFilterIcon: JSXElementConstructor<any>;
    columnMenuHideIcon: JSXElementConstructor<any>;
    columnMenuIcon: JSXElementConstructor<any>;
    columnMenuManageColumnsIcon: JSXElementConstructor<any>;
    columnMenuSortAscendingIcon: JSXElementConstructor<any>;
    columnMenuSortDescendingIcon: JSXElementConstructor<any>;
    columnReorderIcon: JSXElementConstructor<any>;
    columnResizeIcon: JSXElementConstructor<any>;
    columnSelectorIcon: JSXElementConstructor<any>;
    columnsManagement: JSXElementConstructor<any>;
    columnSortedAscendingIcon: null | JSXElementConstructor<any>;
    columnSortedDescendingIcon: null | JSXElementConstructor<any>;
    columnsPanel: JSXElementConstructor<GridColumnsPanelProps & ColumnsPanelPropsOverrides>;
    columnUnsortedIcon: null | JSXElementConstructor<any>;
    densityComfortableIcon: JSXElementConstructor<any>;
    densityCompactIcon: JSXElementConstructor<any>;
    densityStandardIcon: JSXElementConstructor<any>;
    detailPanelCollapseIcon: JSXElementConstructor<any>;
    detailPanelExpandIcon: JSXElementConstructor<any>;
    detailPanels: JSXElementConstructor<GridDetailPanelsProps & DetailPanelsPropsOverrides>;
    exportIcon: JSXElementConstructor<any>;
    filterPanel: JSXElementConstructor<GridFilterPanelProps & FilterPanelPropsOverrides>;
    filterPanelAddIcon: JSXElementConstructor<any>;
    filterPanelDeleteIcon: JSXElementConstructor<any>;
    filterPanelRemoveAllIcon: JSXElementConstructor<any>;
    footer: JSXElementConstructor<HTMLAttributes<HTMLDivElement> & {
        sx?: SxProps<Theme>;
    } & FooterPropsOverrides>;
    footerRowCount: JSXElementConstructor<HTMLAttributes<HTMLDivElement> & RowCountProps & {
        sx?: SxProps<Theme>;
    } & FooterRowCountOverrides>;
    groupingCriteriaCollapseIcon: JSXElementConstructor<any>;
    groupingCriteriaExpandIcon: JSXElementConstructor<any>;
    loadIcon: JSXElementConstructor<any>;
    loadingOverlay: JSXElementConstructor<GridLoadingOverlayProps & LoadingOverlayPropsOverrides>;
    moreActionsIcon: JSXElementConstructor<any>;
    noResultsOverlay: JSXElementConstructor<HTMLAttributes<HTMLDivElement> & {
        sx?: SxProps<Theme>;
    } & NoResultsOverlayPropsOverrides>;
    noRowsOverlay: JSXElementConstructor<HTMLAttributes<HTMLDivElement> & {
        sx?: SxProps<Theme>;
    } & NoRowsOverlayPropsOverrides>;
    openFilterButtonIcon: JSXElementConstructor<any>;
    pagination: null | JSXElementConstructor<(Partial<TablePaginationProps> & PaginationPropsOverrides)>;
    panel: JSXElementConstructor<GridPanelProps & PanelPropsOverrides>;
    quickFilterClearIcon: JSXElementConstructor<any>;
    quickFilterIcon: JSXElementConstructor<any>;
    row: JSXElementConstructor<GridRowProps & RowPropsOverrides>;
    rowReorderIcon: JSXElementConstructor<any>;
    skeletonCell: JSXElementConstructor<GridSkeletonCellProps & SkeletonCellPropsOverrides>;
    toolbar: null | JSXElementConstructor<GridToolbarProps & ToolbarPropsOverrides>;
    treeDataCollapseIcon: JSXElementConstructor<any>;
    treeDataExpandIcon: JSXElementConstructor<any>;
}

Hierarchy (view full)

GridBaseSlots
GridIconSlotsComponent
- GridSlotsComponent
  - GridSlots

Index

Properties

baseBadge baseButton baseCheckbox baseChip baseDivider baseFormControl baseIconButton baseInputAdornment baseInputLabel basePopper baseSelect baseSelectOption baseTextField baseTooltip booleanCellFalseIcon booleanCellTrueIcon cell columnFilteredIcon columnHeaderFilterIconButton columnHeaders columnHeaderSortIcon columnMenu columnMenuClearIcon columnMenuFilterIcon columnMenuHideIcon columnMenuIcon columnMenuManageColumnsIcon columnMenuSortAscendingIcon columnMenuSortDescendingIcon columnReorderIcon columnResizeIcon columnSelectorIcon columnsManagement columnSortedAscendingIcon columnSortedDescendingIcon columnsPanel columnUnsortedIcon densityComfortableIcon densityCompactIcon densityStandardIcon detailPanelCollapseIcon detailPanelExpandIcon detailPanels exportIcon filterPanel filterPanelAddIcon filterPanelDeleteIcon filterPanelRemoveAllIcon footer footerRowCount groupingCriteriaCollapseIcon groupingCriteriaExpandIcon loadIcon loadingOverlay moreActionsIcon noResultsOverlay noRowsOverlay openFilterButtonIcon pagination panel quickFilterClearIcon quickFilterIcon row rowReorderIcon skeletonCell toolbar treeDataCollapseIcon treeDataExpandIcon

Properties

baseBadge

baseBadge: JSXElementConstructor<BadgeOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
    ref?: null | ((instance: null | HTMLSpanElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLSpanElement>;
},
    | "className"
    | "components"
    | "style"
    | "color"
    | "variant"
    | "children"
    | "classes"
    | "sx"
    | "max"
    | "componentsProps"
    | "slotProps"
    | "slots"
    | "anchorOrigin"
    | "invisible"
    | "badgeContent"
    | "overlap"
    | "showZero"> & {
    component?: ElementType<any, (keyof IntrinsicElements)>;
} & BaseBadgePropsOverrides>

The custom Badge component used in the grid for both header and cells.

Default

Badge

baseButton

baseButton: JSXElementConstructor<ButtonOwnProps & Omit<ButtonBaseOwnProps, "classes"> & CommonProps & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
    ref?: null | ((instance: null | HTMLButtonElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement>;
},
    | "className"
    | "href"
    | "style"
    | "color"
    | "variant"
    | "children"
    | "classes"
    | "sx"
    | "tabIndex"
    | "disabled"
    | "size"
    | "action"
    | "centerRipple"
    | "disableRipple"
    | "disableTouchRipple"
    | "focusRipple"
    | "focusVisibleClassName"
    | "LinkComponent"
    | "onFocusVisible"
    | "TouchRippleProps"
    | "touchRippleRef"
    | "fullWidth"
    | "disableFocusRipple"
    | "endIcon"
    | "startIcon"
    | "disableElevation"> & {
    component?: ElementType<any, (keyof IntrinsicElements)>;
} & BaseButtonPropsOverrides>

The custom Button component used in the grid.

Default

Button

baseCheckbox

baseCheckbox: JSXElementConstructor<CheckboxProps & BaseCheckboxPropsOverrides>

The custom Checkbox component used in the grid for both header and cells.

Default

Checkbox

baseChip

baseChip: JSXElementConstructor<ChipOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    ref?: null | ((instance: null | HTMLDivElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLDivElement>;
},
    | "className"
    | "icon"
    | "style"
    | "color"
    | "variant"
    | "label"
    | "children"
    | "classes"
    | "sx"
    | "tabIndex"
    | "disabled"
    | "size"
    | "clickable"
    | "onDelete"
    | "avatar"
    | "deleteIcon"
    | "skipFocusWhenDisabled"> & {
    component?: ElementType<any, (keyof IntrinsicElements)>;
} & BaseChipPropsOverrides>

The custom Chip component used in the grid.

Default

Chip

baseDivider

baseDivider: JSXElementConstructor<BaseDividerPropsOverrides>

The custom Divider component used in the grid.

Default

Divider

baseFormControl

baseFormControl: JSXElementConstructor<FormControlOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    ref?: null | ((instance: null | HTMLDivElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLDivElement>;
},
    | "margin"
    | "className"
    | "style"
    | "error"
    | "color"
    | "variant"
    | "children"
    | "classes"
    | "sx"
    | "disabled"
    | "required"
    | "size"
    | "fullWidth"
    | "focused"
    | "hiddenLabel"> & {
    component?: ElementType<any, (keyof IntrinsicElements)>;
} & BaseFormControlPropsOverrides>

The custom FormControl component used in the grid.

Default

FormControl

baseIconButton

baseIconButton: JSXElementConstructor<IconButtonOwnProps & Omit<ButtonBaseOwnProps, "classes"> & CommonProps & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
    ref?: null | ((instance: null | HTMLButtonElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLButtonElement>;
},
    | "className"
    | "style"
    | "color"
    | "children"
    | "classes"
    | "sx"
    | "tabIndex"
    | "disabled"
    | "size"
    | "action"
    | "centerRipple"
    | "disableRipple"
    | "disableTouchRipple"
    | "focusRipple"
    | "focusVisibleClassName"
    | "LinkComponent"
    | "onFocusVisible"
    | "TouchRippleProps"
    | "touchRippleRef"
    | "disableFocusRipple"
    | "edge"> & {
    component?: ElementType<any, (keyof IntrinsicElements)>;
} & BaseIconButtonPropsOverrides>

The custom IconButton component used in the grid.

Default

IconButton

baseInputAdornment

baseInputAdornment: JSXElementConstructor<InputAdornmentOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
    ref?: null | ((instance: null | HTMLDivElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLDivElement>;
},
    | "className"
    | "style"
    | "position"
    | "variant"
    | "children"
    | "classes"
    | "sx"
    | "disableTypography"
    | "disablePointerEvents"> & {
    component?: ElementType<any, (keyof IntrinsicElements)>;
} & BaseInputAdornmentPropsOverrides>

The custom InputAdornment component used in the grid.

Default

InputAdornment

baseInputLabel

baseInputLabel: JSXElementConstructor<InputLabelOwnProps & Pick<FormLabelOwnProps, "color" | "filled"> & CommonProps & Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
    ref?: null | ((instance: null | HTMLLabelElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLLabelElement>;
},
    | "margin"
    | "className"
    | "style"
    | "error"
    | "color"
    | "variant"
    | "children"
    | "classes"
    | "sx"
    | "disabled"
    | "required"
    | "size"
    | "filled"
    | "shrink"
    | "focused"
    | "disableAnimation"> & {
    component?: ElementType<any, (keyof IntrinsicElements)>;
} & BaseInputLabelPropsOverrides>

The custom InputLabel component used in the grid.

Default

InputLabel

basePopper

basePopper: JSXElementConstructor<PopperProps & BasePopperPropsOverrides>

The custom Popper component used in the grid.

Default

Popper

baseSelect

baseSelect: JSXElementConstructor<SelectProps & BaseSelectPropsOverrides>

The custom Select component used in the grid.

Default

Select

baseSelectOption

baseSelectOption: JSXElementConstructor<{
    children?: ReactNode;
    native: boolean;
    value: any;
} & BaseSelectOptionPropsOverrides>

The custom SelectOption component used in the grid.

Default

MenuItem

baseTextField

baseTextField: JSXElementConstructor<TextFieldProps & BaseTextFieldPropsOverrides>

The custom TextField component used in the grid.

Default

TextField

baseTooltip

baseTooltip: JSXElementConstructor<TooltipProps & BaseTooltipPropsOverrides>

The custom Tooltip component used in the grid.

Default

Tooltip

booleanCellFalseIcon

booleanCellFalseIcon: JSXElementConstructor<any>

Icon displayed on the boolean cell to represent the false value.

Default

GridCloseIcon

booleanCellTrueIcon

booleanCellTrueIcon: JSXElementConstructor<any>

Icon displayed on the boolean cell to represent the true value.

Default

GridCheckIcon

cell

cell: JSXElementConstructor<HTMLAttributes<HTMLDivElement> & {
    align: GridAlignment;
    children?: ReactNode;
    className?: string;
    colIndex: number;
    colSpan?: number;
    column: GridStateColDef;
    disableDragEvents?: boolean;
    isNotVisible: boolean;
    onClick?: MouseEventHandler<HTMLDivElement>;
    onDoubleClick?: MouseEventHandler<HTMLDivElement>;
    onDragEnter?: DragEventHandler<HTMLDivElement>;
    onDragOver?: DragEventHandler<HTMLDivElement>;
    onFocus?: FocusEventHandler<Element>;
    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
    onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
    onMouseDown?: MouseEventHandler<HTMLDivElement>;
    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
    onMouseOver?: MouseEventHandler<HTMLDivElement>;
    onMouseUp?: MouseEventHandler<HTMLDivElement>;
    pinnedOffset?: number;
    pinnedPosition: PinnedColumnPosition;
    row: GridValidRowModel;
    rowId: GridRowId;
    rowNode: GridTreeNode;
    showLeftBorder: boolean;
    showRightBorder: boolean;
    style?: CSSProperties;
    width: number;
    [x: `data-${string}`]: string;
} & CellPropsOverrides>

Component rendered for each cell.

Default

GridCell

columnFilteredIcon

columnFilteredIcon: JSXElementConstructor<any>

Icon displayed on the column header menu to show that a filter has been applied to the column.

Default

GridFilterAltIcon

columnHeaderFilterIconButton

columnHeaderFilterIconButton: JSXElementConstructor<ColumnHeaderFilterIconButtonProps & ColumnHeaderFilterIconButtonPropsOverrides>

Filter icon component rendered in each column header.

Default

GridColumnHeaderFilterIconButton

columnHeaders

columnHeaders: JSXElementConstructor<GridColumnHeadersProps>

Component responsible for rendering the column headers.

Default

GridColumnHeaders

columnHeaderSortIcon

columnHeaderSortIcon: JSXElementConstructor<GridColumnHeaderSortIconProps & ColumnHeaderSortIconPropsOverrides>

Sort icon component rendered in each column header.

Default

GridColumnHeaderSortIcon

columnMenu

columnMenu: JSXElementConstructor<GridColumnMenuProps & ColumnMenuPropsOverrides>

Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.

Default

GridColumnMenu

columnMenuClearIcon

columnMenuClearIcon: JSXElementConstructor<any>

Icon displayed in column menu for clearing values

Default

GridClearIcon

columnMenuFilterIcon

columnMenuFilterIcon: JSXElementConstructor<any>

Icon displayed in column menu for filter

Default

GridFilterAltIcon

columnMenuHideIcon

columnMenuHideIcon: JSXElementConstructor<any>

Icon displayed in column menu for hiding column

Default

GridVisibilityOffIcon

columnMenuIcon

columnMenuIcon: JSXElementConstructor<any>

Icon displayed on the side of the column header title to display the filter input component.

Default

GridTripleDotsVerticalIcon

columnMenuManageColumnsIcon

columnMenuManageColumnsIcon: JSXElementConstructor<any>

Icon displayed in column menu for showing all columns

Default

GridViewColumnIcon

columnMenuSortAscendingIcon

columnMenuSortAscendingIcon: JSXElementConstructor<any>

Icon displayed in column menu for ascending sort

Default

GridArrowUpwardIcon

columnMenuSortDescendingIcon

columnMenuSortDescendingIcon: JSXElementConstructor<any>

Icon displayed in column menu for descending sort

Default

GridArrowDownwardIcon

columnReorderIcon

columnReorderIcon: JSXElementConstructor<any>

Icon displayed on the column reorder button.

Default

GridDragIcon

columnResizeIcon

columnResizeIcon: JSXElementConstructor<any>

Icon displayed in between two column headers that allows to resize the column header.

Default

GridSeparatorIcon

columnSelectorIcon

columnSelectorIcon: JSXElementConstructor<any>

Icon displayed on the column menu selector tab.

Default

GridColumnIcon

columnsManagement

columnsManagement: JSXElementConstructor<any>

Component used inside Grid Columns panel to manage columns.

Default

GridColumnsManagement

columnSortedAscendingIcon

columnSortedAscendingIcon: null | JSXElementConstructor<any>

Icon displayed on the side of the column header title when sorted in ascending order.

Default

GridArrowUpwardIcon

columnSortedDescendingIcon

columnSortedDescendingIcon: null | JSXElementConstructor<any>

Icon displayed on the side of the column header title when sorted in descending order.

Default

GridArrowDownwardIcon

columnsPanel

columnsPanel: JSXElementConstructor<GridColumnsPanelProps & ColumnsPanelPropsOverrides>

GridColumns panel component rendered when clicking the columns button.

Default

GridColumnsPanel

columnUnsortedIcon

columnUnsortedIcon: null | JSXElementConstructor<any>

Icon displayed on the side of the column header title when unsorted.

Default

GridColumnUnsortedIcon

densityComfortableIcon

densityComfortableIcon: JSXElementConstructor<any>

Icon displayed on the "comfortable" density option in the toolbar.

Default

GridViewStreamIcon

densityCompactIcon

densityCompactIcon: JSXElementConstructor<any>

Icon displayed on the compact density option in the toolbar.

Default

GridViewHeadlineIcon

densityStandardIcon

densityStandardIcon: JSXElementConstructor<any>

Icon displayed on the standard density option in the toolbar.

Default

GridTableRowsIcon

detailPanelCollapseIcon

detailPanelCollapseIcon: JSXElementConstructor<any>

Icon displayed on the detail panel toggle column when expanded.

Default

GridRemoveIcon

detailPanelExpandIcon

detailPanelExpandIcon: JSXElementConstructor<any>

Icon displayed on the detail panel toggle column when collapsed.

Default

GridAddIcon

detailPanels

detailPanels: JSXElementConstructor<GridDetailPanelsProps & DetailPanelsPropsOverrides>

Component responsible for rendering the detail panels.

Default

GridDetailPanels

exportIcon

exportIcon: JSXElementConstructor<any>

Icon displayed on the open export button present in the toolbar by default.

Default

GridSaveAltIcon

filterPanel

filterPanel: JSXElementConstructor<GridFilterPanelProps & FilterPanelPropsOverrides>

Filter panel component rendered when clicking the filter button.

Default

GridFilterPanel

filterPanelAddIcon

filterPanelAddIcon: JSXElementConstructor<any>

Icon displayed for deleting the filter from filter panel.

Default

GridAddIcon

filterPanelDeleteIcon

filterPanelDeleteIcon: JSXElementConstructor<any>

Icon displayed for deleting the filter from filter panel.

Default

GridDeleteIcon

filterPanelRemoveAllIcon

filterPanelRemoveAllIcon: JSXElementConstructor<any>

Icon displayed for deleting all the active filters from filter panel.

Default

GridDeleteForeverIcon

footer

footer: JSXElementConstructor<HTMLAttributes<HTMLDivElement> & {
sx?: SxProps<Theme>;
} & FooterPropsOverrides>

Footer component rendered at the bottom of the grid viewport.

Default

GridFooter

footerRowCount

footerRowCount: JSXElementConstructor<HTMLAttributes<HTMLDivElement> & RowCountProps & {
sx?: SxProps<Theme>;
} & FooterRowCountOverrides>

Row count component rendered in the footer

Default

GridRowCount

groupingCriteriaCollapseIcon

groupingCriteriaCollapseIcon: JSXElementConstructor<any>

Icon displayed on the grouping column when the children are expanded

Default

GridExpandMoreIcon

groupingCriteriaExpandIcon

groupingCriteriaExpandIcon: JSXElementConstructor<any>

Icon displayed on the grouping column when the children are collapsed

Default

GridKeyboardArrowRight

loadIcon

loadIcon: JSXElementConstructor<any>

Icon displayed on the input while processing.

Default

GridLoadIcon

loadingOverlay

loadingOverlay: JSXElementConstructor<GridLoadingOverlayProps & LoadingOverlayPropsOverrides>

Loading overlay component rendered when the grid is in a loading state.

Default

GridLoadingOverlay

moreActionsIcon

moreActionsIcon: JSXElementConstructor<any>

Icon displayed on the actions column type to open the menu.

Default

GridMoreVertIcon

noResultsOverlay

noResultsOverlay: JSXElementConstructor<HTMLAttributes<HTMLDivElement> & {
sx?: SxProps<Theme>;
} & NoResultsOverlayPropsOverrides>

No results overlay component rendered when the grid has no results after filtering.

Default

GridNoResultsOverlay

noRowsOverlay

noRowsOverlay: JSXElementConstructor<HTMLAttributes<HTMLDivElement> & {
sx?: SxProps<Theme>;
} & NoRowsOverlayPropsOverrides>

No rows overlay component rendered when the grid has no rows.

Default

GridNoRowsOverlay

openFilterButtonIcon

openFilterButtonIcon: JSXElementConstructor<any>

Icon displayed on the open filter button present in the toolbar by default.

Default

GridFilterListIcon

pagination

pagination: null | JSXElementConstructor<(Partial<TablePaginationProps> & PaginationPropsOverrides)>

Pagination component rendered in the grid footer by default.

Default

Pagination

panel

panel: JSXElementConstructor<GridPanelProps & PanelPropsOverrides>

Panel component wrapping the filters and columns panels.

Default

GridPanel

quickFilterClearIcon

quickFilterClearIcon: JSXElementConstructor<any>

Icon displayed on the quick filter reset input.

Default

GridCloseIcon

quickFilterIcon

quickFilterIcon: JSXElementConstructor<any>

Icon displayed on the quick filter input.

Default

GridSearchIcon

row

row: JSXElementConstructor<GridRowProps & RowPropsOverrides>

Component rendered for each row.

Default

GridRow

rowReorderIcon

rowReorderIcon: JSXElementConstructor<any>

Icon displayed on the reorder column type to reorder a row.

Default

GridDragIcon

skeletonCell

skeletonCell: JSXElementConstructor<GridSkeletonCellProps & SkeletonCellPropsOverrides>

Component rendered for each skeleton cell.

Default

GridSkeletonCell

toolbar

toolbar: null | JSXElementConstructor<GridToolbarProps & ToolbarPropsOverrides>

Toolbar component rendered inside the Header component.

Default

null

treeDataCollapseIcon

treeDataCollapseIcon: JSXElementConstructor<any>

Icon displayed on the tree data toggling column when the children are expanded

Default

GridExpandMoreIcon

treeDataExpandIcon

treeDataExpandIcon: JSXElementConstructor<any>

Icon displayed on the tree data toggling column when the children are collapsed

Default

GridKeyboardArrowRight