Skip to content

🎉 v5 is out! Head to the documentation to get started.

GridApi Interface

The full grid API.

Import

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

Properties

Name Type Description
applyFilter (item: GridFilterItem, linkOperator?: GridLinkOperator) => void Applies a GridFilterItem on alls rows. If no linkOperator is given, the "and" operator is used.
applyFilterLinkOperator (operator: GridLinkOperator) => void Changes the GridLinkOperator used to connect the filters.
applyFilters () => void Applies all filters on all rows.
applySorting () => void Applies the current sort model to the rows.
commitCellChange (params: GridCommitCellChangeParams, event?: any) => boolean Updates the field at the given id with the value stored in the edit row model.
commitRowChange (id: GridRowId, event?: any) => boolean Updates the row at the given id with the values stored in the edit row model.
components GridApiRefComponentsProperty The set of overridable components used in the grid.
componentsProps? GridSlotsComponentsProps Overrideable components props dynamically passed to the component at rendering.
deleteFilter (item: GridFilterItem) => void Deletes a GridFilterItem.
exportDataAsCsv (options?: GridExportCsvOptions) => void Downloads and exports a CSV of the grid's data.
forceUpdate Dispatch<any> 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.
getAllRowIds () => GridRowId[] Gets the list of row ids.
getCellElement (id: GridRowId, field: string) => null | HTMLDivElement 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 (id: GridRowId, field: string) => GridCellParams Gets the GridCellParams object that is passed as argument in events.
getCellValue (id: GridRowId, field: string) => GridCellValue Gets the value of a cell at the given id and field.
getColumn (field: string) => GridStateColDef Returns the GridColDef for the given field.
getColumnHeaderElement (field: string) => null | HTMLDivElement 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.
getColumnPosition (field: string) => number Returns the left-position of a column relative to the inner border of the grid.
getColumnsMeta () => GridColumnsMeta Returns the GridColumnsMeta for each column.
getDataAsCsv (options?: GridExportCsvOptions) => string Returns the grid data as a CSV string.
This method is used internally by exportDataAsCsv.
getEditRowsModel () => GridEditRowsModel Gets the edit rows model of the grid.
getLocaleText <T extends keyof GridLocaleText>(key: T) => GridLocaleText[T] Returns the translation for the key.
getRow (id: GridRowId) => null | GridRowData Gets the row data with a given id.
getRowElement (id: GridRowId) => null | HTMLDivElement Gets the underlying DOM element for a row at the given id.
getRowIdFromRowIndex (index: number) => GridRowId Gets the GridRowId of a row at a specific index.
getRowIndex (id: GridRowId) => number Gets the row index of a row with a given id.
getRowMode (id: GridRowId) => GridRowMode Gets the mode of a row.
getRowModels () => Map<GridRowId, GridRowData> Gets the full set of rows as Map<GridRowId, GridRowModel>.
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.
getScrollPosition () => GridScrollParams Returns the current scroll position.
getSelectedRows () => Map<GridRowId, GridRowData> Returns an array of the selected rows.
getSortedRowIds () => GridRowId[] Returns all row ids sorted according to the active sort model.
getSortedRows () => GridRowData[] 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.
getVisibleRowModels () => Map<GridRowId, GridRowData> Returns a sorted Map containing only the visible rows.
hideColumnMenu () => void Hides the column menu that is open.
hideFilterPanel () => void Hides the filter panel.
hidePreferences () => void Hides the preferences panel.
isCellEditable (params: GridCellParams) => boolean Controls if a cell is editable.
publishEvent (name: string, params?: any, event?: MuiEvent<MouseEvent | UIEvent | Event | SyntheticEvent<Element, Event> | KeyboardEvent | ClipboardEvent | ProgressEvent<EventTarget> | ErrorEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | DragEvent | PointerEvent | SecurityPolicyViolationEvent | TouchEvent | TransitionEvent | WheelEvent>) => void Emits an event.
resize () => void Triggers a resize of the component and recalculation of width and height.
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.
selectRow (id: GridRowId, isSelected?: boolean, allowMultiple?: boolean) => void Change the selection state of a row.
selectRows (ids: GridRowId[], isSelected?: boolean, deselectOtherRows?: boolean) => void Change the selection state of multiple rows.
setCellFocus (id: GridRowId, field: string) => void Sets the focus to the cell at the given id and field.
setCellMode (id: GridRowId, field: string, mode: GridCellMode) => void Sets the mode of a cell.
setColumnHeaderFocus (field: string, event?: SyntheticEvent<Element, Event>) => 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.
setColumnWidth (field: string, width: number) => void Updates the width of a column.
setDensity (size: GridDensity, headerHeight?: number, rowHeight?: number) => void Sets the density of the grid.
setEditCellValue (params: GridEditCellValueParams, event?: SyntheticEvent<Element, Event>) => void Sets the value of the edit cell.
Commonly used inside the edit cell component.
setEditRowsModel (model: GridEditRowsModel) => void Set sthe edit rows model of the grid.
setFilterModel (model: GridFilterModel) => 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.
setRowMode (id: GridRowId, mode: GridRowMode) => void Sets the mode of a row.
setRows (rows: GridRowData[]) => void Sets a new set of rows.
setSelectionModel (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.
setState (state: GridState | ((previousState: GridState) => GridState)) => void Sets the whole state of the grid.
showColumnMenu (field: string) => void Display the column menu under the field column.
showError (props: any) => void Displays the error overlay component.
showFilterPanel (targetColumnField?: string) => void Shows the filter panel. If targetColumnField is given, a filter for this field is also added.
showPreferences (newValue: GridPreferencePanelsValue) => void Displays the preferences panel. The newValue argument controls the content of the panel.
sortColumn (column: GridColDef, direction?: GridSortDirection, allowMultipleSorting?: boolean) => void Sorts a column.
state GridState Property that contains the whole state of the grid.
subscribeEvent (event: string, handler: (params: any, event: MuiEvent< | MouseEvent | UIEvent | Event | SyntheticEvent<Element, Event> | KeyboardEvent | ClipboardEvent | ProgressEvent<EventTarget> | ErrorEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | DragEvent | PointerEvent | SecurityPolicyViolationEvent | TouchEvent | TransitionEvent | WheelEvent>, details: any) => void, options?: GridSubscribeEventOptions) => () => void Registers a handler for an event.
toggleColumnMenu (field: string) => void Toggles the column menu under the field column.
updateColumn (col: GridColDef) => void Updates the definition of a column.
updateColumns (cols: GridColDef[]) => void Updates the definition of multiple columns at the same time.
updateRows (updates: GridRowModelUpdate<>[]) => void Allows to updates, insert and delete rows in a single call.
upsertFilter (item: GridFilterItem) => void Updates or inserts a GridFilterItem.