GridApi Interface
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
Name | Type | Description |
---|---|---|
addRowGroupingCriteria | (groupingCriteriaField: string, groupingIndex?: number) => void | Adds the field to the row grouping model. |
applySorting | () => void | Applies the current sort model to the rows. |
autosizeColumns | (options?: GridAutosizeOptions) => Promise<void> | Auto-size the columns of the grid based on the cells' content and the space available. |
deleteFilterItem | (item: GridFilterItem) => void | Deletes a GridFilterItem. |
exportDataAsCsv | (options?: GridCsvExportOptions) => void | Downloads and exports a CSV of the grid's data. |
exportDataAsExcel | (options?: GridExcelExportOptions) => Promise<void> | Downloads and exports an Excel file of the grid's data. |
exportDataAsPrint | (options?: GridPrintExportOptions) => void | Print the grid's data. |
exportState | (params?: GridExportStateParams) => InitialState | 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. |
forceUpdate | () => void | Forces the grid to rerender. It's often used after a state update. |
getAllColumns | () => GridStateColDef[] | Returns an array of GridColDef containing all the column definitions. |
getAllGroupDetails | () => GridColumnGroupLookup | Returns the column group lookup. |
getAllRowIds | () => GridRowId[] | Gets the list of row ids. |
getCellElement | (id: GridRowId, field: string) => HTMLDivElement | null | Gets the underlying DOM element for a cell at the given id and field . |
getCellMode | (id: GridRowId, field: string) => GridCellMode | Gets the mode of a cell. |
getCellParams | <R extends GridValidRowModel = any, V = unknown, F = V, N extends GridTreeNode = GridTreeNode>(id: GridRowId, field: string) => GridCellParams<R, V, F, N> | Gets the GridCellParams object that is passed as argument in events. |
getCellSelectionModel | () => GridCellSelectionModel | 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. |
getCellValue | <V extends any = any>(id: GridRowId, field: string) => V | Gets the value of a cell at the given id and field . |
getColumn | (field: string) => GridStateColDef | Returns the GridColDef for the given field . |
getColumnGroupPath | (field: string) => GridColumnGroup['groupId'][] | 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). |
getColumnHeaderElement | (field: string) => HTMLDivElement | null | Gets the underlying DOM element for the column header with the given field . |
getColumnHeaderParams | (field: string) => GridColumnHeaderParams | Gets the GridColumnHeaderParams object that is passed as argument in events. |
getColumnIndex | (field: string, useVisibleColumns?: boolean) => number | Returns the index position of a column. By default, only the visible columns are considered. Pass false to useVisibleColumns to consider all columns. |
getColumnIndexRelativeToVisibleColumns | (field: string) => number | Gets the index of a column relative to the columns that are reachable by scroll. |
getColumnPosition | (field: string) => number | Returns the left-position of a column relative to the inner border of the grid. |
getDataAsCsv | (options?: GridCsvExportOptions) => string | Returns the grid data as a CSV string. This method is used internally by exportDataAsCsv . |
getDataAsExcel | (options?: GridExcelExportOptions) => Promise<Excel.Workbook> | null | Returns the grid data as an exceljs workbook. This method is used internally by exportDataAsExcel . |
getExpandedDetailPanels | () => GridRowId[] | Returns the rows whose detail panel is open. |
getLocaleText | <T extends GridTranslationKeys>(key: T) => GridLocaleText[T] | Returns the translation for the key . |
getPinnedColumns | () => GridPinnedColumnFields | Returns which columns are pinned. |
getRootDimensions | () => GridDimensions | Returns the dimensions of the grid |
getRow | <R extends GridValidRowModel = any>(id: GridRowId) => R | null | Gets the row data with a given id. |
getRowElement | (id: GridRowId) => HTMLDivElement | null | Gets the underlying DOM element for a row at the given id . |
getRowGroupChildren | (params: GridRowGroupChildrenGetterParams) => GridRowId[] | Gets the rows of a grouping criteria. Only contains the rows provided to the grid, not the rows automatically generated by it. |
getRowId | <R extends GridValidRowModel = any>(row: R) => GridRowId | Gets the ID of a row given its data. |
getRowIdFromRowIndex | (index: number) => GridRowId | Gets the GridRowId of a row at a specific index.The index is based on the sorted but unfiltered row list. |
getRowIndexRelativeToVisibleRows | (id: GridRowId) => number | Gets the index of a row relative to the rows that are reachable by scroll. |
getRowMode | (id: GridRowId) => GridRowMode | Gets the mode of a row. |
getRowModels | () => Map<GridRowId, GridRowModel> | Gets the full set of rows as Map<GridRowId, GridRowModel>. |
getRowNode | <N extends GridTreeNode>(id: GridRowId) => N | null | Gets the row node from the internal tree structure. |
getRowParams | (id: GridRowId) => GridRowParams | Gets the GridRowParams object that is passed as argument in events. |
getRowsCount | () => number | Gets the total number of rows in the grid. |
getRowWithUpdatedValues | (id: GridRowId, field: string) => GridRowModel | Returns the row with the values that were set by editing the cells. In row editing, field is ignored and all fields are considered. |
getScrollPosition | () => GridScrollParams | Returns the current scroll position. |
getSelectedCellsAsArray | () => GridCellCoordinates[] | Returns an array containing only the selected cells. Each item is an object with the ID and field of the cell. |
getSelectedRows | () => Map<GridRowId, GridRowModel> | Returns an array of the selected rows. |
getSortedRowIds | () => GridRowId[] | Returns all row ids sorted according to the active sort model. |
getSortedRows | () => GridRowModel[] | Returns all rows sorted according to the active sort model. |
getSortModel | () => GridSortModel | Returns the sort model currently applied to the grid. |
getVisibleColumns | () => GridStateColDef[] | Returns the currently visible columns. |
hideColumnMenu | () => void | Hides the column menu that is open. |
hideFilterPanel | () => void | Hides the filter panel. |
hideHeaderFilterMenu | () => void | Hides the header filter menu. |
hidePreferences | () => void | Hides the preferences panel. |
ignoreDiacritics | DataGridProcessedProps['ignoreDiacritics'] | Returns the value of the ignoreDiacritics prop. |
isCellEditable | (params: GridCellParams) => boolean | Controls if a cell is editable. |
isCellSelected | (id: GridRowId, field: GridColDef['field']) => boolean | Determines if a cell is selected or not. |
isColumnPinned | (field: string) => GridPinnedColumnPosition | false | Returns which side a column is pinned to. |
isRowSelectable | (id: GridRowId) => boolean | Determines if a row can be selected or not. |
isRowSelected | (id: GridRowId) => boolean | Determines if a row is selected or not. |
pinColumn | (field: string, side: GridPinnedColumnPosition) => void | Pins a column to the left or right side of the grid. |
publishEvent | GridEventPublisher | Emits an event. |
removeRowGroupingCriteria | (groupingCriteriaField: string) => void | Remove the field from the row grouping model. |
resetRowHeights | () => void | Forces the recalculation of the heights of all rows. |
resize | () => void | Triggers a resize of the component and recalculation of width and height. |
restoreState | (stateToRestore: InitialState) => void | Inject the given values into the state of the DataGrid. |
scroll | (params: Partial<GridScrollParams>) => void | Triggers the viewport to scroll to the given positions (in pixels). |
scrollToIndexes | (params: Partial<GridCellIndexCoordinates>) => boolean | 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. |
selectCellRange | (start: GridCellCoordinates, end: GridCellCoordinates, keepOtherSelected?: boolean) => void | Selects all cells that are inside the range given by start and end coordinates. |
selectRow | (id: GridRowId, isSelected?: boolean, resetSelection?: boolean) => void | Change the selection state of a row. |
selectRowRange | (range: { startId: GridRowId; endId: GridRowId }, isSelected?: boolean, resetSelection?: boolean) => void | Change the selection state of all the selectable rows in a range. |
selectRows | (ids: GridRowId[], isSelected?: boolean, resetSelection?: boolean) => void | Change the selection state of multiple rows. |
setAggregationModel | (model: GridAggregationModel) => void | Sets the aggregation model to the one given by model . |
setCellFocus | (id: GridRowId, field: string) => void | Sets the focus to the cell at the given id and field . |
setCellSelectionModel | (newModel: GridCellSelectionModel) => void | Updates the selected cells to be those passed to the newModel argument.Any cell already selected will be unselected. |
setColumnHeaderFilterFocus | (field: string, event?: MuiBaseEvent) => void | Sets the focus to the column header filter at the given field . |
setColumnHeaderFocus | (field: string, event?: MuiBaseEvent) => void | Sets the focus to the column header at the given field . |
setColumnIndex | (field: string, targetIndexPosition: number) => void | Moves a column from its original position to the position given by targetIndexPosition . |
setColumnVisibility | (field: string, isVisible: boolean) => void | Changes the visibility of the column referred by field . |
setColumnVisibilityModel | (model: GridColumnVisibilityModel) => void | Sets the column visibility model to the one given by model . |
setColumnWidth | (field: string, width: number) => void | Updates the width of a column. |
setDensity | (density: GridDensity) => void | Sets the density of the grid. |
setEditCellValue | (params: GridEditCellValueParams, event?: MuiBaseEvent) => Promise<boolean> | void | Sets the value of the edit cell. Commonly used inside the edit cell component. |
setExpandedDetailPanels | (ids: GridRowId[]) => void | Changes which rows to expand the detail panel. |
setFilterLogicOperator | (operator: GridLogicOperator) => void | Changes the GridLogicOperator used to connect the filters. |
setFilterModel | (model: GridFilterModel, reason?: GridControlledStateReasonLookup['filter']) => void | Sets the filter model to the one given by model . |
setPage | (page: number) => void | Sets the displayed page to the value given by page . |
setPageSize | (pageSize: number) => void | Sets the number of displayed rows to the value given by pageSize . |
setPaginationModel | (model: GridPaginationModel) => void | Sets the paginationModel to a new value. |
setPinnedColumns | (pinnedColumns: GridPinnedColumnFields) => void | Changes the pinned columns. |
setQuickFilterValues | (values: any[]) => void | Set the quick filter values to the one given by values |
setRowChildrenExpansion | (id: GridRowId, isExpanded: boolean) => void | Expand or collapse a row children. |
setRowGroupingCriteriaIndex | (groupingCriteriaField: string, groupingIndex: number) => void | Sets the grouping index of a grouping criteria. |
setRowGroupingModel | (model: GridRowGroupingModel) => void | Sets the columns to use as grouping criteria. |
setRowIndex | (rowId: GridRowId, targetIndex: number) => void | Moves a row from its original position to the position given by targetIndex . |
setRows | (rows: GridRowModel[]) => void | Sets a new set of rows. |
setRowSelectionModel | (rowIds: GridRowId[]) => void | Updates the selected rows to be those passed to the rowIds argument.Any row already selected will be unselected. |
setSortModel | (model: GridSortModel) => void | Updates the sort model and triggers the sorting of rows. |
showColumnMenu | (field: string) => void | Display the column menu under the field column. |
showFilterPanel | (targetColumnField?: string, panelId?: string, labelId?: string) => void | Shows the filter panel. If targetColumnField is given, a filter for this field is also added. |
showHeaderFilterMenu | (field: GridColDef['field']) => void | Opens the header filter menu for the given field. |
showPreferences | (newValue: GridPreferencePanelsValue, panelId?: string, labelId?: string) => void | Displays the preferences panel. The newValue argument controls the content of the panel. |
sortColumn | (field: GridColDef['field'], direction?: GridSortDirection, allowMultipleSorting?: boolean) => void | Sorts a column. |
startCellEditMode | (params: GridStartCellEditModeParams) => void | Puts the cell corresponding to the given row id and field into edit mode. |
startHeaderFilterEditMode | (field: GridColDef['field']) => void | Puts the cell corresponding to the given row id and field into edit mode. |
startRowEditMode | (params: GridStartRowEditModeParams) => void | Puts the row corresponding to the given id into edit mode. |
state | State | Property that contains the whole state of the grid. |
stopCellEditMode | (params: GridStopCellEditModeParams) => 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. |
stopHeaderFilterEditMode | () => void | Stops the edit mode for the current field. |
stopRowEditMode | (params: GridStopRowEditModeParams) => 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. |
subscribeEvent | <E extends GridEvents>(event: E, handler: GridEventListener<E>, options?: EventListenerOptions) => () => void | Registers a handler for an event. |
toggleColumnMenu | (field: string) => void | Toggles the column menu under the field column. |
toggleDetailPanel | (id: GridRowId) => void | Expands or collapses the detail panel of a row. |
unpinColumn | (field: string) => void | Unpins a column. |
unstable_replaceRows | (firstRowToReplace: number, newRows: GridRowModel[]) => void | Replace a set of rows with new rows. |
unstable_setColumnVirtualization | (enabled: boolean) => void | Enable/disable column virtualization. |
unstable_setPinnedRows | (pinnedRows?: GridPinnedRowsProp) => void | Changes the pinned rows. |
unstable_setVirtualization | (enabled: boolean) => void | Enable/disable virtualization. |
updateColumns | (cols: GridColDef[]) => void | Updates the definition of multiple columns at the same time. |
updateRows | (updates: GridRowModelUpdate[]) => void | Allows to update, insert and delete rows. |
upsertFilterItem | (item: GridFilterItem) => void | Updates or inserts a GridFilterItem. |
upsertFilterItems | (items: GridFilterItem[]) => void | Updates or inserts many GridFilterItem. |