Skip to content

GridApi API

The full grid API.

Demos

Import

import { GridApi } from '@mui/x-data-grid-premium'
// or
import { GridApi } from '@mui/x-data-grid-pro'
// or
import { GridApi } from '@mui/x-data-grid'

Properties

addRowGroupingCriteria

Adds the field to the row grouping model.

Type:(groupingCriteriaField: string, groupingIndex?: number) => void


applySorting

Applies the current sort model to the rows.

Type:() => void


autosizeColumns

Auto-size the columns of the grid based on the cells' content and the space available.

Type:(options?: GridAutosizeOptions) => Promise<void>


deleteFilterItem

Deletes a GridFilterItem.

Type:(item: GridFilterItem) => void


exportDataAsCsv

Downloads and exports a CSV of the grid's data.

Type:(options?: GridCsvExportOptions) => void


exportDataAsExcel

Downloads and exports an Excel file of the grid's data.

Type:(options?: GridExcelExportOptions) => Promise<void>


exportDataAsPrint

Print the grid's data.

Type:(options?: GridPrintExportOptions) => void


exportState

Generates a serializable object containing the exportable parts of the DataGrid state.
These values can then be passed to the initialState prop or injected using the restoreState method.

Type:(params?: GridExportStateParams) => InitialState


forceUpdate

Forces the grid to rerender. It's often used after a state update.

Type:() => void


getAllColumns

Returns an array of GridColDef containing all the column definitions.

Type:() => GridStateColDef[]


getAllGroupDetails

Returns the column group lookup.

Type:() => GridColumnGroupLookup


getAllRowIds

Gets the list of row ids.

Type:() => GridRowId[]


getCellElement

Gets the underlying DOM element for a cell at the given id and field.

Type:(id: GridRowId, field: string) => HTMLDivElement | null


getCellMode

Gets the mode of a cell.

Type:(id: GridRowId, field: string) => GridCellMode


getCellParams

Gets the GridCellParams object that is passed as argument in events.

Type:<R extends GridValidRowModel = any, V = unknown, F = V, N extends GridTreeNode = GridTreeNode>(id: GridRowId, field: string) => GridCellParams<R, V, F, N>


getCellSelectionModel

Returns an object containing the selection state of the cells.
The keys of the object correpond to the row IDs.
The value of each key is another object whose keys are the fields and values are the selection state.

Type:() => GridCellSelectionModel


getCellValue

Gets the value of a cell at the given id and field.

Type:<V extends any = any>(id: GridRowId, field: string) => V


getColumn

Returns the GridColDef for the given field.

Type:(field: string) => GridStateColDef


getColumnGroupPath

Returns the id of the groups leading to the requested column.
The array is ordered by increasing depth (the last element is the direct parent of the column).

Type:(field: string) => GridColumnGroup['groupId'][]


getColumnHeaderElement

Gets the underlying DOM element for the column header with the given field.

Type:(field: string) => HTMLDivElement | null


getColumnHeaderParams

Gets the GridColumnHeaderParams object that is passed as argument in events.

Type:(field: string) => GridColumnHeaderParams


getColumnIndex

Returns the index position of a column. By default, only the visible columns are considered.
Pass false to useVisibleColumns to consider all columns.

Type:(field: string, useVisibleColumns?: boolean) => number


getColumnIndexRelativeToVisibleColumns

Gets the index of a column relative to the columns that are reachable by scroll.

Type:(field: string) => number


getColumnPosition

Returns the left-position of a column relative to the inner border of the grid.

Type:(field: string) => number


getDataAsCsv

Returns the grid data as a CSV string.
This method is used internally by exportDataAsCsv.

Type:(options?: GridCsvExportOptions) => string


getDataAsExcel

Returns the grid data as an exceljs workbook.
This method is used internally by exportDataAsExcel.

Type:(options?: GridExcelExportOptions) => Promise<Excel.Workbook> | null


getExpandedDetailPanels

Returns the rows whose detail panel is open.

Type:() => GridRowId[]


getLocaleText

Returns the translation for the key.

Type:<T extends GridTranslationKeys>(key: T) => GridLocaleText[T]


getPinnedColumns

Returns which columns are pinned.

Type:() => GridPinnedColumnFields


getRootDimensions

Returns the dimensions of the grid

Type:() => GridDimensions


getRow

Gets the row data with a given id.

Type:<R extends GridValidRowModel = any>(id: GridRowId) => R | null


getRowElement

Gets the underlying DOM element for a row at the given id.

Type:(id: GridRowId) => HTMLDivElement | null


getRowGroupChildren

Gets the rows of a grouping criteria.
Only contains the rows provided to the grid, not the rows automatically generated by it.

Type:(params: GridRowGroupChildrenGetterParams) => GridRowId[]


getRowId

Gets the ID of a row given its data.

Type:<R extends GridValidRowModel = any>(row: R) => GridRowId


getRowIdFromRowIndex

Gets the GridRowId of a row at a specific index.
The index is based on the sorted but unfiltered row list.

Type:(index: number) => GridRowId


getRowIndexRelativeToVisibleRows

Gets the index of a row relative to the rows that are reachable by scroll.

Type:(id: GridRowId) => number


getRowMode

Gets the mode of a row.

Type:(id: GridRowId) => GridRowMode


getRowModels

Gets the full set of rows as Map<GridRowId, GridRowModel>.

Type:() => Map<GridRowId, GridRowModel>


getRowNode

Gets the row node from the internal tree structure.

Type:<N extends GridTreeNode>(id: GridRowId) => N | null


getRowParams

Gets the GridRowParams object that is passed as argument in events.

Type:(id: GridRowId) => GridRowParams


getRowsCount

Gets the total number of rows in the grid.

Type:() => number


getRowWithUpdatedValues

Returns the row with the values that were set by editing the cells.
In row editing, field is ignored and all fields are considered.

Type:(id: GridRowId, field: string) => GridRowModel


getScrollPosition

Returns the current scroll position.

Type:() => GridScrollParams


getSelectedCellsAsArray

Returns an array containing only the selected cells.
Each item is an object with the ID and field of the cell.

Type:() => GridCellCoordinates[]


getSelectedRows

Returns an array of the selected rows.

Type:() => Map<GridRowId, GridRowModel>


getSortedRowIds

Returns all row ids sorted according to the active sort model.

Type:() => GridRowId[]


getSortedRows

Returns all rows sorted according to the active sort model.

Type:() => GridRowModel[]


getSortModel

Returns the sort model currently applied to the grid.

Type:() => GridSortModel


getVisibleColumns

Returns the currently visible columns.

Type:() => GridStateColDef[]


hideColumnMenu

Hides the column menu that is open.

Type:() => void


hideFilterPanel

Hides the filter panel.

Type:() => void


hideHeaderFilterMenu

Hides the header filter menu.

Type:() => void


hidePreferences

Hides the preferences panel.

Type:() => void


ignoreDiacritics

Returns the value of the ignoreDiacritics prop.

Type:DataGridProcessedProps['ignoreDiacritics']


isCellEditable

Controls if a cell is editable.

Type:(params: GridCellParams) => boolean


isCellSelected

Determines if a cell is selected or not.

Type:(id: GridRowId, field: GridColDef['field']) => boolean


isColumnPinned

Returns which side a column is pinned to.

Type:(field: string) => GridPinnedColumnPosition | false


isRowSelectable

Determines if a row can be selected or not.

Type:(id: GridRowId) => boolean


isRowSelected

Determines if a row is selected or not.

Type:(id: GridRowId) => boolean


pinColumn

Pins a column to the left or right side of the grid.

Type:(field: string, side: GridPinnedColumnPosition) => void


publishEvent

Emits an event.

Type:GridEventPublisher


removeRowGroupingCriteria

Remove the field from the row grouping model.

Type:(groupingCriteriaField: string) => void


resetRowHeights

Forces the recalculation of the heights of all rows.

Type:() => void


resize

Triggers a resize of the component and recalculation of width and height.

Type:() => void


restoreState

Inject the given values into the state of the DataGrid.

Type:(stateToRestore: InitialState) => void


scroll

Triggers the viewport to scroll to the given positions (in pixels).

Type:(params: Partial<GridScrollParams>) => void


scrollToIndexes

Triggers the viewport to scroll to the cell at indexes given by params.
Returns true if the grid had to scroll to reach the target.

Type:(params: Partial<GridCellIndexCoordinates>) => boolean


selectCellRange

Selects all cells that are inside the range given by start and end coordinates.

Type:(start: GridCellCoordinates, end: GridCellCoordinates, keepOtherSelected?: boolean) => void


selectRow

Change the selection state of a row.

Type:(id: GridRowId, isSelected?: boolean, resetSelection?: boolean) => void


selectRowRange

Change the selection state of all the selectable rows in a range.

Type:(range: { startId: GridRowId; endId: GridRowId }, isSelected?: boolean, resetSelection?: boolean) => void


selectRows

Change the selection state of multiple rows.

Type:(ids: GridRowId[], isSelected?: boolean, resetSelection?: boolean) => void


setAggregationModel

Sets the aggregation model to the one given by model.

Type:(model: GridAggregationModel) => void


setCellFocus

Sets the focus to the cell at the given id and field.

Type:(id: GridRowId, field: string) => void


setCellSelectionModel

Updates the selected cells to be those passed to the newModel argument.
Any cell already selected will be unselected.

Type:(newModel: GridCellSelectionModel) => void


setColumnHeaderFilterFocus

Sets the focus to the column header filter at the given field.

Type:(field: string, event?: MuiBaseEvent) => void


setColumnHeaderFocus

Sets the focus to the column header at the given field.

Type:(field: string, event?: MuiBaseEvent) => void


setColumnIndex

Moves a column from its original position to the position given by targetIndexPosition.

Type:(field: string, targetIndexPosition: number) => void


setColumnVisibility

Changes the visibility of the column referred by field.

Type:(field: string, isVisible: boolean) => void


setColumnVisibilityModel

Sets the column visibility model to the one given by model.

Type:(model: GridColumnVisibilityModel) => void


setColumnWidth

Updates the width of a column.

Type:(field: string, width: number) => void


setDensity

Sets the density of the grid.

Type:(density: GridDensity) => void


setEditCellValue

Sets the value of the edit cell.
Commonly used inside the edit cell component.

Type:(params: GridEditCellValueParams, event?: MuiBaseEvent) => Promise<boolean> | void


setExpandedDetailPanels

Changes which rows to expand the detail panel.

Type:(ids: GridRowId[]) => void


setFilterLogicOperator

Changes the GridLogicOperator used to connect the filters.

Type:(operator: GridLogicOperator) => void


setFilterModel

Sets the filter model to the one given by model.

Type:(model: GridFilterModel, reason?: GridControlledStateReasonLookup['filter']) => void


setPage

Sets the displayed page to the value given by page.

Type:(page: number) => void


setPageSize

Sets the number of displayed rows to the value given by pageSize.

Type:(pageSize: number) => void


setPaginationModel

Sets the paginationModel to a new value.

Type:(model: GridPaginationModel) => void


setPinnedColumns

Changes the pinned columns.

Type:(pinnedColumns: GridPinnedColumnFields) => void


setQuickFilterValues

Set the quick filter values to the one given by values

Type:(values: any[]) => void


setRowChildrenExpansion

Expand or collapse a row children.

Type:(id: GridRowId, isExpanded: boolean) => void


setRowCount

Sets the rowCount to a new value.

Type:(rowCount: number) => void


setRowGroupingCriteriaIndex

Sets the grouping index of a grouping criteria.

Type:(groupingCriteriaField: string, groupingIndex: number) => void


setRowGroupingModel

Sets the columns to use as grouping criteria.

Type:(model: GridRowGroupingModel) => void


setRowIndex

Moves a row from its original position to the position given by targetIndex.

Type:(rowId: GridRowId, targetIndex: number) => void


setRows

Sets a new set of rows.

Type:(rows: GridRowModel[]) => void


setRowSelectionModel

Updates the selected rows to be those passed to the rowIds argument.
Any row already selected will be unselected.

Type:(rowIds: GridRowId[]) => void


setSortModel

Updates the sort model and triggers the sorting of rows.

Type:(model: GridSortModel) => void


showColumnMenu

Display the column menu under the field column.

Type:(field: string) => void


showFilterPanel

Shows the filter panel. If targetColumnField is given, a filter for this field is also added.

Type:(targetColumnField?: string, panelId?: string, labelId?: string) => void


showHeaderFilterMenu

Opens the header filter menu for the given field.

Type:(field: GridColDef['field']) => void


showPreferences

Displays the preferences panel. The newValue argument controls the content of the panel.

Type:(newValue: GridPreferencePanelsValue, panelId?: string, labelId?: string) => void


sortColumn

Sorts a column.

Type:(field: GridColDef['field'], direction?: GridSortDirection, allowMultipleSorting?: boolean) => void


startCellEditMode

Puts the cell corresponding to the given row id and field into edit mode.

Type:(params: GridStartCellEditModeParams) => void


startHeaderFilterEditMode

Puts the cell corresponding to the given row id and field into edit mode.

Type:(field: GridColDef['field']) => void


startRowEditMode

Puts the row corresponding to the given id into edit mode.

Type:(params: GridStartRowEditModeParams) => void


state

Property that contains the whole state of the grid.

Type:State


stopCellEditMode

Puts the cell corresponding to the given row id and field into view mode and updates the original row with the new value stored.
If params.ignoreModifications is true it will discard the modifications made.

Type:(params: GridStopCellEditModeParams) => void


stopHeaderFilterEditMode

Stops the edit mode for the current field.

Type:() => void


stopRowEditMode

Puts the row corresponding to the given id and into view mode and updates the original row with the new values stored.
If params.ignoreModifications is true it will discard the modifications made.

Type:(params: GridStopRowEditModeParams) => void


subscribeEvent

Registers a handler for an event.

Type:<E extends GridEvents>(event: E, handler: GridEventListener<E>, options?: EventListenerOptions) => () => void


toggleColumnMenu

Toggles the column menu under the field column.

Type:(field: string) => void


toggleDetailPanel

Expands or collapses the detail panel of a row.

Type:(id: GridRowId) => void


unpinColumn

Unpins a column.

Type:(field: string) => void


unstable_replaceRows

Replace a set of rows with new rows.

Type:(firstRowToReplace: number, newRows: GridRowModel[]) => void


unstable_setColumnVirtualization

Enable/disable column virtualization.

Type:(enabled: boolean) => void


unstable_setPinnedRows

Changes the pinned rows.

Type:(pinnedRows?: GridPinnedRowsProp) => void


unstable_setVirtualization

Enable/disable virtualization.

Type:(enabled: boolean) => void


updateColumns

Updates the definition of multiple columns at the same time.

Type:(cols: GridColDef[]) => void


updateRows

Allows to update, insert and delete rows.

Type:(updates: GridRowModelUpdate[]) => void


upsertFilterItem

Updates or inserts a GridFilterItem.

Type:(item: GridFilterItem) => void


upsertFilterItems

Updates or inserts many GridFilterItem.

Type:(items: GridFilterItem[]) => void