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'Adds the field to the row grouping model.
Type:(groupingCriteriaField: string, groupingIndex?: number) => void
Auto-size the columns of the grid based on the cells' content and the space available.
Type:(options?: GridAutosizeOptions) => Promise<void>
Downloads and exports a CSV of the grid's data.
Type:(options?: GridCsvExportOptions) => void
Downloads and exports an Excel file of the grid's data.
Type:(options?: GridExcelExportOptions) => Promise<void>
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
Returns an array of GridColDef containing all the column definitions.
Type:() => GridStateColDef[]
Gets the underlying DOM element for a cell at the given id and field.
Type:(id: GridRowId, field: string) => HTMLDivElement | null
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>
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
Gets the value of a cell at the given id and field.
Type:<V extends any = any>(id: GridRowId, field: string) => V
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'][]
Gets the underlying DOM element for the column header with the given field.
Type:(field: string) => HTMLDivElement | null
Gets the GridColumnHeaderParams object that is passed as argument in events.
Type:(field: string) => GridColumnHeaderParams
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
Gets the index of a column relative to the columns that are reachable by scroll.
Type:(field: string) => number
Returns the left-position of a column relative to the inner border of the grid.
Type:(field: string) => number
Returns the grid data as a CSV string.
This method is used internally by exportDataAsCsv.
Type:(options?: GridCsvExportOptions) => string
Returns the grid data as an exceljs workbook.
This method is used internally by exportDataAsExcel.
Type:(options?: GridExcelExportOptions) => Promise<Excel.Workbook> | null
Returns the translation for the key.
Type:<T extends GridTranslationKeys>(key: T) => GridLocaleText[T]
Gets the row data with a given id.
Type:<R extends GridValidRowModel = any>(id: GridRowId) => R | null
Gets the underlying DOM element for a row at the given id.
Type:(id: GridRowId) => HTMLDivElement | null
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[]
Gets the ID of a row given its data.
Type:<R extends GridValidRowModel = any>(row: R) => GridRowId
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
Gets the index of a row relative to the rows that are reachable by scroll.
Type:(id: GridRowId) => number
Gets the full set of rows as Map<GridRowId, GridRowModel>.
Type:() => Map<GridRowId, GridRowModel>
Gets the row node from the internal tree structure.
Type:<N extends GridTreeNode>(id: GridRowId) => N | null
Gets the GridRowParams object that is passed as argument in events.
Type:(id: GridRowId) => GridRowParams
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
Returns an array containing only the selected cells.
Each item is an object with the ID and field of the cell.
Type:() => GridCellCoordinates[]
Returns the value of the ignoreDiacritics prop.
Type:DataGridProcessedProps['ignoreDiacritics']
Determines if a cell is selected or not.
Type:(id: GridRowId, field: GridColDef['field']) => boolean
Returns which side a column is pinned to.
Type:(field: string) => GridPinnedColumnPosition | false
Pins a column to the left or right side of the grid.
Type:(field: string, side: GridPinnedColumnPosition) => void
Remove the field from the row grouping model.
Type:(groupingCriteriaField: string) => void
Inject the given values into the state of the DataGrid.
Type:(stateToRestore: InitialState) => void
Triggers the viewport to scroll to the given positions (in pixels).
Type:(params: Partial<GridScrollParams>) => void
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
Selects all cells that are inside the range given by start and end coordinates.
Type:(start: GridCellCoordinates, end: GridCellCoordinates, keepOtherSelected?: boolean) => void
Change the selection state of a row.
Type:(id: GridRowId, isSelected?: boolean, resetSelection?: boolean) => void
Change the selection state of all the selectable rows in a range.
Type:(range: { startId: GridRowId; endId: GridRowId }, isSelected?: boolean, resetSelection?: boolean) => void
Change the selection state of multiple rows.
Type:(ids: GridRowId[], isSelected?: boolean, resetSelection?: boolean) => void
Sets the aggregation model to the one given by model.
Type:(model: GridAggregationModel) => void
Sets the focus to the cell at the given id and field.
Type:(id: GridRowId, field: string) => void
Updates the selected cells to be those passed to the newModel argument.
Any cell already selected will be unselected.
Type:(newModel: GridCellSelectionModel) => void
Sets the focus to the column header filter at the given field.
Type:(field: string, event?: MuiBaseEvent) => void
Sets the focus to the column header at the given field.
Type:(field: string, event?: MuiBaseEvent) => void
Moves a column from its original position to the position given by targetIndexPosition.
Type:(field: string, targetIndexPosition: number) => void
Changes the visibility of the column referred by field.
Type:(field: string, isVisible: boolean) => void
Sets the column visibility model to the one given by model.
Type:(model: GridColumnVisibilityModel) => void
Sets the value of the edit cell.
Commonly used inside the edit cell component.
Type:(params: GridEditCellValueParams, event?: MuiBaseEvent) => Promise<boolean> | void
Changes which rows to expand the detail panel.
Type:(ids: GridRowId[]) => void
Changes the GridLogicOperator used to connect the filters.
Type:(operator: GridLogicOperator) => void
Sets the filter model to the one given by model.
Type:(model: GridFilterModel, reason?: GridControlledStateReasonLookup['filter']) => void
Sets the number of displayed rows to the value given by pageSize.
Type:(pageSize: number) => void
Set the quick filter values to the one given by values
Type:(values: any[]) => void
Expand or collapse a row children.
Type:(id: GridRowId, isExpanded: boolean) => void
Sets the grouping index of a grouping criteria.
Type:(groupingCriteriaField: string, groupingIndex: number) => void
Sets the columns to use as grouping criteria.
Type:(model: GridRowGroupingModel) => void
Moves a row from its original position to the position given by targetIndex.
Type:(rowId: GridRowId, targetIndex: number) => void
Updates the selected rows to be those passed to the rowIds argument.
Any row already selected will be unselected.
Type:(rowIds: GridRowId[]) => void
Updates the sort model and triggers the sorting of rows.
Type:(model: GridSortModel) => void
Shows the filter panel. If targetColumnField is given, a filter for this field is also added.
Type:(targetColumnField?: string, panelId?: string, labelId?: string) => void
Opens the header filter menu for the given field.
Type:(field: GridColDef['field']) => void
Displays the preferences panel. The newValue argument controls the content of the panel.
Type:(newValue: GridPreferencePanelsValue, panelId?: string, labelId?: string) => void
Sorts a column.
Type:(field: GridColDef['field'], direction?: GridSortDirection, allowMultipleSorting?: boolean) => void
Puts the cell corresponding to the given row id and field into edit mode.
Type:(params: GridStartCellEditModeParams) => void
Puts the cell corresponding to the given row id and field into edit mode.
Type:(field: GridColDef['field']) => void
Puts the row corresponding to the given id into edit mode.
Type:(params: GridStartRowEditModeParams) => void
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
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
Registers a handler for an event.
Type:<E extends GridEvents>(event: E, handler: GridEventListener<E>, options?: EventListenerOptions) => () => void
Replace a set of rows with new rows.
Type:(firstRowToReplace: number, newRows: GridRowModel[]) => void
Enable/disable column virtualization.
Type:(enabled: boolean) => void
Updates the definition of multiple columns at the same time.
Type:(cols: GridColDef[]) => void