Skip to content

DataGridPremium API

API reference docs for the React DataGridPremium component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import { DataGridPremium } from '@mui/x-data-grid-premium/DataGridPremium';
// or
import { DataGridPremium } from '@mui/x-data-grid-premium';
Learn about the difference by reading this guide on minimizing bundle size.

Props

columnsRequired

rowsRequired

aggregationFunctions

aggregationModel

aggregationRowsScope

apiRef

aria-label

aria-labelledby

autoHeight

autoPageSize

cellModesModel

checkboxSelection

checkboxSelectionVisibleOnly

classes

clipboardCopyCellDelimiter

columnBuffer

columnHeaderHeight

columnThreshold

columnVisibilityModel

components

componentsProps

defaultGroupingExpansionDepth

density

detailPanelExpandedRowIds

disableAggregation

disableChildrenFiltering

disableChildrenSorting

disableClipboardPaste

disableColumnFilter

disableColumnMenu

disableColumnPinning

disableColumnReorder

disableColumnResize

disableColumnSelector

disableDensitySelector

disableMultipleColumnsFiltering

disableMultipleColumnsSorting

disableMultipleRowSelection

disableRowGrouping

disableRowSelectionOnClick

disableVirtualization

editMode

experimentalFeatures

filterDebounceMs

filterMode

filterModel

getAggregationPosition

getCellClassName

getDetailPanelContent

getDetailPanelHeight

getEstimatedRowHeight

getRowClassName

getRowHeight

getRowId

getRowSpacing

getTreeDataPath

groupingColDef

hideFooter

hideFooterPagination

hideFooterRowCount

hideFooterSelectedRowCount

initialState

isCellEditable

isGroupExpandedByDefault

isRowSelectable

keepColumnPositionIfDraggedOutside

keepNonExistentRowsSelected

loading

localeText

logger

logLevel

nonce

onAggregationModelChange

onCellClick

onCellDoubleClick

onCellEditStart

onCellEditStop

onCellKeyDown

onCellModesModelChange

onClipboardCopy

onClipboardPasteEnd

onClipboardPasteStart

onColumnHeaderClick

onColumnHeaderDoubleClick

onColumnHeaderEnter

onColumnHeaderLeave

onColumnHeaderOut

onColumnHeaderOver

onColumnOrderChange

onColumnResize

onColumnVisibilityModelChange

onColumnWidthChange

onDetailPanelExpandedRowIdsChange

onExcelExportStateChange

onFetchRows

onFilterModelChange

onMenuClose

onMenuOpen

onPaginationModelChange

onPinnedColumnsChange

onPreferencePanelClose

onPreferencePanelOpen

onProcessRowUpdateError

onResize

onRowClick

onRowDoubleClick

onRowEditCommit

onRowEditStart

onRowEditStop

onRowGroupingModelChange

onRowModesModelChange

onRowOrderChange

onRowSelectionModelChange

onRowsScrollEnd

onSortModelChange

pageSizeOptions

pagination

paginationMode

paginationModel

pinnedColumns

pinnedRows

processRowUpdate

rowBuffer

rowCount

rowGroupingColumnMode

rowGroupingModel

rowHeight

rowModesModel

rowReordering

rowSelection

rowSelectionModel

rowsLoadingMode

rowSpacingType

rowThreshold

scrollbarSize

scrollEndThreshold

showCellVerticalBorder

showColumnVerticalBorder

slotProps

slots

sortingMode

sortingOrder

sortModel

sx

throttleRowsMs

treeData

unstable_cellSelection

unstable_cellSelectionModel

unstable_headerFilters

unstable_ignoreValueFormatterDuringExport

unstable_onCellSelectionModelChange

unstable_splitClipboardPastedText

The ref is forwarded to the root element.

CSS

The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.

.MuiDataGrid-actionsCell

.MuiDataGrid-aggregationColumnHeader

.MuiDataGrid-aggregationColumnHeader--alignLeft

.MuiDataGrid-aggregationColumnHeader--alignCenter

.MuiDataGrid-aggregationColumnHeader--alignRight

.MuiDataGrid-aggregationColumnHeaderLabel

.MuiDataGrid-autoHeight

.MuiDataGrid-booleanCell

.MuiDataGrid-cell--editable

.MuiDataGrid-cell--editing

.MuiDataGrid-cell--textCenter

.MuiDataGrid-cell--textLeft

.MuiDataGrid-cell--textRight

.MuiDataGrid-cell--withRenderer

.MuiDataGrid-cell--rangeTop

.MuiDataGrid-cell--rangeBottom

.MuiDataGrid-cell--rangeLeft

.MuiDataGrid-cell--rangeRight

.MuiDataGrid-cell

.MuiDataGrid-cellContent

.MuiDataGrid-cellCheckbox

.MuiDataGrid-cellSkeleton

.MuiDataGrid-checkboxInput

.MuiDataGrid-columnHeader--alignCenter

.MuiDataGrid-columnHeader--alignLeft

.MuiDataGrid-columnHeader--alignRight

.MuiDataGrid-columnHeader--dragging

.MuiDataGrid-columnHeader--moving

.MuiDataGrid-columnHeader--numeric

.MuiDataGrid-columnHeader--sortable

.MuiDataGrid-columnHeader--sorted

.MuiDataGrid-columnHeader--filtered

.MuiDataGrid-columnHeader

.MuiDataGrid-columnGroupHeader

.MuiDataGrid-columnHeaderCheckbox

.MuiDataGrid-columnHeaderDraggableContainer

.MuiDataGrid-rowReorderCellPlaceholder

.MuiDataGrid-columnHeaderDropZone

.MuiDataGrid-columnHeaderTitle

.MuiDataGrid-columnHeaderTitleContainer

.MuiDataGrid-columnHeaderTitleContainerContent

.MuiDataGrid-columnHeader--filledGroup

.MuiDataGrid-columnHeader--emptyGroup

.MuiDataGrid-columnHeader--showColumnBorder

.MuiDataGrid-columnHeaders

.MuiDataGrid-columnHeadersInner

.MuiDataGrid-columnHeadersInner--scrollable

.MuiDataGrid-columnSeparator--resizable

.MuiDataGrid-columnSeparator--resizing

.MuiDataGrid-columnSeparator--sideLeft

.MuiDataGrid-columnSeparator--sideRight

.MuiDataGrid-columnSeparator

.MuiDataGrid-columnsPanel

.MuiDataGrid-columnsPanelRow

.MuiDataGrid-detailPanel

.MuiDataGrid-detailPanels

.MuiDataGrid-detailPanelToggleCell

.MuiDataGrid-detailPanelToggleCell--expanded

.MuiDataGrid-footerCell

.MuiDataGrid-panel

.MuiDataGrid-panelHeader

.MuiDataGrid-panelWrapper

.MuiDataGrid-panelContent

.MuiDataGrid-panelFooter

.MuiDataGrid-paper

.MuiDataGrid-editBooleanCell

.MuiDataGrid-filterForm

.MuiDataGrid-filterFormDeleteIcon

.MuiDataGrid-filterFormLogicOperatorInput

.MuiDataGrid-filterFormColumnInput

.MuiDataGrid-filterFormOperatorInput

.MuiDataGrid-filterFormValueInput

.MuiDataGrid-editInputCell

.MuiDataGrid-filterIcon

.MuiDataGrid-footerContainer

.MuiDataGrid-iconButtonContainer

.MuiDataGrid-iconSeparator

.MuiDataGrid-headerFilterRow

.MuiDataGrid-main

.MuiDataGrid-menu

.MuiDataGrid-menuIcon

.MuiDataGrid-menuIconButton

.MuiDataGrid-menuOpen

.MuiDataGrid-menuList

.MuiDataGrid-overlayWrapper

.MuiDataGrid-overlayWrapperInner

.MuiDataGrid-overlay

.MuiDataGrid-virtualScroller

.MuiDataGrid-virtualScrollerContent

.MuiDataGrid-virtualScrollerContent--overflowed

.MuiDataGrid-virtualScrollerRenderZone

.MuiDataGrid-pinnedColumns

.MuiDataGrid-pinnedColumns--left

.MuiDataGrid-pinnedColumns--right

.MuiDataGrid-pinnedColumnHeaders

.MuiDataGrid-pinnedColumnHeaders--left

.MuiDataGrid-pinnedColumnHeaders--right

.MuiDataGrid-root

.MuiDataGrid-root--densityStandard

.MuiDataGrid-root--densityComfortable

.MuiDataGrid-root--densityCompact

.MuiDataGrid-root--disableUserSelection

.MuiDataGrid-row--editable

.MuiDataGrid-row--editing

.MuiDataGrid-row--dragging

.MuiDataGrid-row--lastVisible

.MuiDataGrid-row--dynamicHeight

.MuiDataGrid-row--detailPanelExpanded

.MuiDataGrid-row

.MuiDataGrid-rowCount

.MuiDataGrid-rowReorderCellContainer

.MuiDataGrid-rowReorderCell

.MuiDataGrid-rowReorderCell--draggable

.MuiDataGrid-scrollArea

.MuiDataGrid-scrollArea--left

.MuiDataGrid-scrollArea--right

.MuiDataGrid-selectedRowCount

.MuiDataGrid-sortIcon

.MuiDataGrid-toolbarContainer

.MuiDataGrid-toolbarFilterList

.MuiDataGrid-withBorderColor

.MuiDataGrid-cell--withRightBorder

.MuiDataGrid-columnHeader--withRightBorder

.MuiDataGrid-treeDataGroupingCell

.MuiDataGrid-treeDataGroupingCellToggle

.MuiDataGrid-groupingCriteriaCell

.MuiDataGrid-groupingCriteriaCellToggle

.MuiDataGrid-pinnedRows

.MuiDataGrid-pinnedRows--top

.MuiDataGrid-pinnedRows--bottom

.MuiDataGrid-pinnedRowsRenderZone


You can override the style of the component using one of these customization options:

Slots

baseButton

baseCheckbox

baseChip

baseFormControl

baseIconButton

baseInputAdornment

baseInputLabel

basePopper

baseSelect

baseSelectOption

baseSwitch

baseTextField

baseTooltip

booleanCellFalseIcon

booleanCellTrueIcon

cell

columnFilteredIcon

columnHeaderFilterIconButton

columnHeaders

columnMenu

columnMenuAggregationIcon

columnMenuClearIcon

columnMenuFilterIcon

columnMenuGroupIcon

columnMenuHideIcon

columnMenuIcon

columnMenuManageColumnsIcon

columnMenuPinLeftIcon

columnMenuPinRightIcon

columnMenuSortAscendingIcon

columnMenuSortDescendingIcon

columnMenuUngroupIcon

columnReorderIcon

columnResizeIcon

columnSelectorIcon

columnSortedAscendingIcon

columnSortedDescendingIcon

columnUnsortedIcon

columnsPanel

densityComfortableIcon

densityCompactIcon

densityStandardIcon

detailPanelCollapseIcon

detailPanelExpandIcon

exportIcon

filterPanel

filterPanelAddIcon

filterPanelDeleteIcon

filterPanelRemoveAllIcon

footer

footerRowCount

groupingCriteriaCollapseIcon

groupingCriteriaExpandIcon

headerFilterCell

headerFilterMenu

loadIcon

loadingOverlay

moreActionsIcon

noResultsOverlay

noRowsOverlay

openFilterButtonIcon

pagination

panel

preferencesPanel

quickFilterClearIcon

quickFilterIcon

row

rowReorderIcon

skeletonCell

toolbar

treeDataCollapseIcon

treeDataExpandIcon