GridApi API
Extended documentation for the GridApi interface with detailed information on the module's properties and available APIs.
Demos
Import
import { GridApi } from '@mui/x-data-grid';
// or
import { GridApi } from '@mui/x-data-grid-pro';
// or
import { GridApi } from '@mui/x-data-grid-premium';The full grid API.
Adds the field to the row grouping model.
Type:(groupingCriteriaField: string, groupingIndex?: number) => void
The AI assistant API.
Type:{ processPrompt: (value: string) => Promise<Error | PromptResponse>, setConversations: (conversations: (prevConversations: Conversation[]) => Conversation[] | Conversation[]) => void, setActiveConversationIndex: (index: number) => { id?: string, title?: string, prompts: Prompt[] } }
Auto-size the columns of the grid based on the cells' content and the space available.
Type:(options?: { columns?: string[], includeHeaders?: boolean, includeHeaderFilters?: boolean, includeOutliers?: boolean, outliersFactor?: number, expand?: boolean, disableColumnVirtualization?: boolean }) => Promise<void>
Downloads and exports a CSV of the grid's data.
Type:(options?: { delimiter?: string, fileName?: string, utf8WithBom?: boolean, includeHeaders?: boolean, includeColumnGroupsHeaders?: boolean, getRowsToExport?: (params: { apiRef: RefObject<GridApiCommunity> }) => GridRowId[], shouldAppendQuotes?: boolean, escapeFormulas?: boolean, fields?: string[], allColumns?: boolean }) => void
Downloads and exports an Excel file of the grid's data.
Type:(options?: GridExcelExportOptions) => Promise<void>
Print the grid's data.
Type:(options?: { fileName?: string, hideToolbar?: boolean, hideFooter?: boolean, includeCheckboxes?: boolean, copyStyles?: boolean, bodyClassName?: string, pageStyle?: () => string | string, getRowsToExport?: (params: { apiRef: RefObject<GridApiCommunity> }) => GridRowId[], fields?: string[], allColumns?: boolean }) => 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?: { exportOnlyDirtyModels?: boolean }) => GridInitialStatePremium
Returns an array of [[GridColDef]] containing all the column definitions.
Type:() => GridStateColDef[]
Gets the [[GridCellParams]] object that is passed as argument in events.
Type:(id: number | string, field: string) => HTMLDivElement
Gets the [[GridCellParams]] object that is passed as argument in events.
Type:(id: number | string, field: string) => GridCellParams<R, V, F, N>
Returns an object containing the selection state of the cells. The keys of the object correspond to the row IDs. The value of each key is also an object, which has a column field for a key and a boolean value for its selection state.
Type:() => GridCellSelectionModel
Gets the value of a cell at the given `id` and `field`.
Type:(id: number | string, 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) => string[]
Gets the underlying DOM element for the column header with the given `field`.
Type:(field: string) => HTMLDivElement
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?: { delimiter?: string, fileName?: string, utf8WithBom?: boolean, includeHeaders?: boolean, includeColumnGroupsHeaders?: boolean, getRowsToExport?: (params: { apiRef: RefObject<GridApiCommunity> }) => GridRowId[], shouldAppendQuotes?: boolean, escapeFormulas?: boolean, fields?: string[], allColumns?: boolean }) => string
Returns the grid data as an exceljs workbook. This method is used internally by `exportDataAsExcel`.
Type:(options?: GridExcelExportOptions) => Promise<Workbook>
Returns the filter state for the given filter model without applying it to the Data Grid.
Type:(filterModel: { items: GridFilterItem[], logicOperator?: 'and' | 'or', quickFilterValues?: any[], quickFilterLogicOperator?: 'and' | 'or', quickFilterExcludeHiddenColumns?: boolean }) => { filterModel: { items: GridFilterItem[], logicOperator?: 'and' | 'or', quickFilterValues?: any[], quickFilterLogicOperator?: 'and' | 'or', quickFilterExcludeHiddenColumns?: boolean }, filteredRowsLookup: Record<GridRowId, false>, filteredChildrenCountLookup: Record<GridRowId, number>, filteredDescendantCountLookup: Record<GridRowId, number> }
Returns the modified selection model after applying row selection propagation. Use this to achieve proper `rowSelectionPropagation` behavior when setting the selection model using `setRowSelectionModel`.
Type:(inputSelectionModel: { type: 'exclude' | 'include', ids: Set<GridRowId> }) => { type: 'exclude' | 'include', ids: Set<GridRowId> }
Gets the underlying DOM element for a row at the given `id`.
Type:(id: number | string) => HTMLDivElement
Gets the rows of a grouping criteria. Only contains the rows provided to the grid, not the rows automatically generated by it.
Type:(params: { groupId: number | string, skipAutoGeneratedRows?: boolean, applyFiltering?: boolean, applySorting?: boolean, directChildrenOnly?: boolean }) => 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) => number | string
Gets the index of a row relative to the rows that are reachable by scroll.
Type:(id: number | string) => number
Gets the [[GridRowParams]] object that is passed as argument in events.
Type:(id: number | string) => { id: number | string, row: any, columns: GridColDef[] }
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: number | string, field: string) => GridValidRowModel
Returns the current scroll position.
Type:() => { left: number, top: number, renderContext?: { firstRowIndex: number, lastRowIndex: number, firstColumnIndex: number, lastColumnIndex: number } }
Returns an array containing only the selected cells. Each item is an object with the ID and field of the cell.
Type:() => GridCellCoordinates[]
Returns all rows sorted according to the active sort model.
Type:() => GridValidRowModel[]
The history API.
Type:{ undo: () => Promise<boolean>, redo: () => Promise<boolean>, clear: () => void, canUndo: () => boolean, canRedo: () => boolean }
Controls if a cell is editable.
Type:(params: GridCellParams<any, unknown, unknown, GridTreeNode>) => boolean
Determines if a cell is selected or not.
Type:(id: number | string, field: string) => boolean
Returns which side a column is pinned to.
Type:(field: string) => 'left' | 'right' | boolean
Pins a column to the left or right side of the grid.
Type:(field: string, side: 'left' | 'right') => 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: GridInitialStatePremium) => void
Triggers the viewport to scroll to the given positions (in pixels).
Type:(params: { left?: number, top?: number, renderContext?: { firstRowIndex: number, lastRowIndex: number, firstColumnIndex: number, lastColumnIndex: number } }) => 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: { colIndex?: number, rowIndex?: number }) => boolean
Selects all cells that are inside the range given by `start` and `end` coordinates.
Type:(start: { id: number | string, field: string }, end: { id: number | string, field: string }, keepOtherSelected?: boolean) => void
Change the selection state of a row.
Type:(id: number | string, isSelected?: boolean, resetSelection?: boolean) => void
Change the selection state of all the selectable rows in a range.
Type:(range: { startId: number | string, endId: number | string }, 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: number | string, field: string) => void
Updates the cell selection model according to the value passed to the `newModel` argument. Any cell already selected will be unselected.
Type:(newModel: GridCellSelectionModel) => void
Sets whether the charts side panel is open.
Type:(open: (prev: boolean) => boolean | boolean) => void
Sets the synchronization state for a chart.
Type:(chartId: string, synced: boolean) => void
Sets the focus to the column header filter at the given `field`.
Type:(field: string, event?: AnimationEvent | ClipboardEvent | CompositionEvent | DragEvent | ErrorEvent | Event | FocusEvent | FormDataEvent | InputEvent | KeyboardEvent | MouseEvent | PointerEvent | ProgressEvent<EventTarget> | SecurityPolicyViolationEvent | SubmitEvent | SyntheticEvent<HTMLElement, Event> | ToggleEvent | TouchEvent | TransitionEvent | UIEvent | WheelEvent | {}) => void
Sets the focus to the column header at the given `field`.
Type:(field: string, event?: AnimationEvent | ClipboardEvent | CompositionEvent | DragEvent | ErrorEvent | Event | FocusEvent | FormDataEvent | InputEvent | KeyboardEvent | MouseEvent | PointerEvent | ProgressEvent<EventTarget> | SecurityPolicyViolationEvent | SubmitEvent | SyntheticEvent<HTMLElement, Event> | ToggleEvent | TouchEvent | TransitionEvent | UIEvent | WheelEvent | {}) => 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 density of the grid.
Type:(density: 'comfortable' | 'compact' | 'standard') => void
Sets the value of the edit cell. Commonly used inside the edit cell component.
Type:(params: { id: number | string, field: string, value: any, debounceMs?: number, unstable_skipValueParser?: boolean }, event?: AnimationEvent | ClipboardEvent | CompositionEvent | DragEvent | ErrorEvent | Event | FocusEvent | FormDataEvent | InputEvent | KeyboardEvent | MouseEvent | PointerEvent | ProgressEvent<EventTarget> | SecurityPolicyViolationEvent | SubmitEvent | SyntheticEvent<HTMLElement, Event> | ToggleEvent | TouchEvent | TransitionEvent | UIEvent | WheelEvent | {}) => Promise<boolean> | void
Changes which rows to expand the detail panel.
Type:(ids: Set<GridRowId>) => void
Changes the [[GridLogicOperator]] used to connect the filters.
Type:(operator: 'and' | 'or') => void
Sets the filter model to the one given by `model`.
Type:(model: { items: GridFilterItem[], logicOperator?: 'and' | 'or', quickFilterValues?: any[], quickFilterLogicOperator?: 'and' | 'or', quickFilterExcludeHiddenColumns?: boolean }, reason?: 'changeLogicOperator' | 'deleteFilterItem' | 'removeAllFilterItems' | 'restoreState' | 'upsertFilterItem' | 'upsertFilterItems') => void
Sets the number of displayed rows to the value given by `pageSize`.
Type:(pageSize: number) => void
Sets the `paginationMeta` to a new value.
Type:(paginationMeta: { hasNextPage?: boolean }) => void
Sets the `paginationModel` to a new value.
Type:(model: { pageSize: number, page: number }) => void
Changes the pinned columns.
Type:(pinnedColumns: { left?: string[], right?: string[] }) => void
Sets whether the pivot mode is active.
Type:(active: (prev: boolean) => boolean | boolean) => void
Sets the pivot model to use in the pivot mode.
Type:(model: GridPivotModel | ((prev: GridPivotModel) => GridPivotModel)) => void
Sets whether the pivot panel is open.
Type:(open: (prev: boolean) => boolean | boolean) => void
Set the quick filter values to the one given by `values`
Type:(values: any[]) => void
Expand or collapse a row children. Only works for the client side data or to collapse already fetched server side rows. For server-side data, use `dataSource.fetchRows(childId)` to fetch and expand the children.
Type:(id: number | string, 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`. Doesn't support tree data ordering. Use `setRowPosition()` instead.
Type:(rowId: number | string, targetIndex: number) => Promise<void> | void
Moves a row to a new position relative to another row.
Type:(sourceRowId: number | string, targetRowId: number | string, position: 'above' | 'below' | 'inside') => Promise<void> | void
Sets the new row selection model. ⚠️ Caution: `setRowSelectionModel` doesn't apply the selection propagation automatically. Pass model returned by API method `getPropagatedRowSelectionModel` instead to apply the selection propagation.
Type:(rowSelectionModel: { type: 'exclude' | 'include', ids: Set<GridRowId> }, reason?: 'multipleRowsSelection' | 'singleRowSelection') => 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
Displays the preferences panel. The `newValue` argument controls the content of the panel.
Type:(newValue: 'aiAssistant' | 'columns' | 'filters', panelId?: string, labelId?: string) => void
Displays the sidebar. The `newValue` argument controls the content of the sidebar.
Type:(newValue: 'charts' | 'pivot', sidebarId?: string, labelId?: string) => void
Sorts a column.
Type:(field: string, direction?: 'asc' | 'desc', allowMultipleSorting?: boolean) => void
Puts the cell corresponding to the given row id and field into edit mode.
Type:(params: { id: number | string, field: string, deleteValue?: boolean, initialValue?: any }) => void
Puts the cell corresponding to the given row id and field into edit mode.
Type:(field: string) => void
Puts the row corresponding to the given id into edit mode.
Type:(params: { id: number | string, fieldToFocus?: string, deleteValue?: boolean, initialValue?: string }) => 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: { id: number | string, field: string, ignoreModifications?: boolean, cellToFocusAfter?: 'below' | 'left' | 'none' | 'right' }) => 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: { id: number | string, ignoreModifications?: boolean, field?: string, cellToFocusAfter?: 'below' | 'left' | 'none' | 'right' }) => void
Registers a handler for an event.
Type:(event: E, handler: (params: GridEventLookup[E] extends { params: any; } ? GridEventLookup[E]['params'] : undefined, event: GridEventLookup[E] extends { event: MuiBaseEvent; } ? MuiEvent<GridEventLookup[E]['event']> : { defaultMuiPrevented?: boolean | undefined; }, details: { reason?: any, api: GridApiCommon<GridStateCommunity, GridInitialStateCommunity> }) => void, options?: { isFirst?: boolean }) => () => void
Replace a set of rows with new rows.
Type:(firstRowToReplace: number, newRows: GridValidRowModel[]) => void
Enable/disable column virtualization.
Type:(enabled: boolean) => void
Changes the pinned rows.
Type:(pinnedRows?: { top?: readonly GridValidRowModel[], bottom?: readonly GridValidRowModel[] }) => void
Updates the dimensions data selection for the charts integration.
Type:(chartId: string, dimensions: (prev: GridChartsIntegrationItem[]) => GridChartsIntegrationItem[] | GridChartsIntegrationItem[]) => void
Updates the values data selection for the charts integration.
Type:(chartId: string, values: (prev: GridChartsIntegrationItem[]) => GridChartsIntegrationItem[] | GridChartsIntegrationItem[]) => void
Updates the definition of multiple columns at the same time.
Type:(cols: GridColDef[]) => void