Reference

AG Grid is highly customizable and has hundreds of properties. Only a subset of these are defined in the Dash AgGrid component. Valid grid-level properties that are not listed in the reference section at the end of this page can be used by passing them to the dashGridOptions property on the Dash AgGrid component.

Example with dashGridOptions

Pagination is not defined as a prop on the grid level in Dash AG Grid. To enable pagination, instead of doing it like this:

# don't do it this way:
dag.AgGrid(
    pagination=True,
    # other props
)

You should specify it like this:

dag.AgGrid(
    dashGridOptions={'pagination': True}
)

Properties That Trigger Callbacks

The following AG Grid properties trigger callbacks in Dash:

Default Property Values

Some properties have some default values:

style: {height: '400px', width: '100%'},
className: 'ag-theme-alpine',
resetColumnState: false,
exportDataAsCsv: false,
selectAll: false,
deselectAll: false,
enableEnterpriseModules: false,
updateColumnState: false,
persisted_props: ['selectedRows'],
persistence_type: 'local',
suppressDragLeaveHidesColumns: true,
dangerously_allow_code: false,
rowModelType: 'clientSide'

Properties with Functions as Inputs

Some properties in AG Grid take functions. See JavaScript and Dash AG Grid for more details on using functions with AG Grid properties.

Grid Properties
Below is a list of properties that take functions as inputs. If a property isn’t in the properties list at the end of this page, use it with the dashGridOptions property.

// Accessories
getMainMenuItems,
postProcessPopup,

// Clipboard
processCellForClipboard,
processHeaderForClipboard,
processGroupHeaderForClipboard,
processCellFromClipboard,
sendToClipboard,
processDataFromClipboard,

// Filtering
isExternalFilterPresent,
doesExternalFilterPass,

// Integrated Charts
getChartToolbarItems,
createChartContainer,

// Keyboard Navigation
navigateToNextHeader,
tabToNextHeader,
navigateToNextCell,
tabToNextCell,

// Localisation
getLocaleText,

// Miscellaneous
getDocument,

// Pagination
paginationNumberFormatter,

// Pivot and Aggregation
processPivotResultColDef,
processPivotResultColGroupDef,
aggFuncs,
getGroupRowAgg,

// Rendering
getBusinessKeyForNode,
processRowPostCreate,

// Row Drag and Drop
rowDragText,

// Row Grouping
isGroupOpenByDefault,
initialGroupOrderComparator,

// RowModel: Server-Side
getChildCount,
getServerSideGroupLevelParams,
isServerSideGroupOpenByDefault,
isApplyServerSideTransaction,
isServerSideGroup,
getServerSideGroupKey,

// Selection
isRowSelectable,
fillOperation,

// Sorting
postSortRows,

// Styling
getRowHeight,
getRowStyle,
rowClassRules,
cellClassRules,
isFullWidthRow,

// templates
overlayLoadingTemplate,
overlayNoRowsTemplate,

// other
getRowId,
getDataPath,
detailCellRendererParams,
detailGridOptions,
tooltipComponentParams

Column Level Properties

The following column level properties take functions as inputs. If a property isn’t in the properties list at the end of this page, use it with columnDefs or defaultColDefs.


valueGetter,
valueFormatter,
valueParser,
valueSetter,
filterValueGetter,
headerValueGetter,
template,
cellClassRules,

// Columns
keyCreator,
equals,
checkboxSelection,
icons,
suppressNavigable,
suppressKeyboardEvent,
filterParams,

// Columns: Editing
editable,
cellEditor,
cellEditorSelector,

// Columns: Events
onCellDoubleClicked,
onCellContextMenu,

// Columns: Filter
getQuickFilterText,

// Columns: Headers
suppressHeaderKeyboardEvent,
headerCheckboxSelection,

// Columns: Pivoting
pivotComparator,

// Columns: Rendering and Styling
cellStyle,
cellClass,
cellClassRules,
tooltipComponent,
cellRendererSelector,

// Columns: Row Dragging
rowDrag,
rowDragText,
dndSource,
dndSourceOnRowDrag,

// Columns: Row Grouping
aggFunc,
initialAggFunc,

// Columns: Sort
comparator,

// Columns: Spanning
colSpan,
rowSpan,

// Columns: Tooltips
tooltipValueGetter,
tooltipComponentParams

// Groups
toolPanelClass,

// Groups: Header
headerClass,

// Header Component Parameters
showColumnMenu,
progressSort,
setSort,
headerComponentParams,


// Header Group Component Parameters
setExpanded,
headerGroupComponentsParams,

// In filterParams or filterParams.filterOptions[]
filterPlaceholder,
predicate,
filterParams,
filterOptions,

// other params
cellRendererParams,
cellEditorParams,
children,

AgGrid Properties

Access this documentation in your Python terminal with:
```python

help(dash_ag_grid.AgGrid)
```

Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise.

id (string; optional):
The ID used to identify this component in Dash callbacks.

style (dict; optional):
The CSS style for the component.

className (string; default 'ag-theme-alpine'):
The class for the ag-grid. Can specify the ag-grid theme here.

persistence (boolean | string | number; optional):
Used to allow user interactions in this component to be persisted when
the component - or the page - is refreshed. If persisted is truthy
and hasn’t changed from its previous value, a value that the user
has changed while using the app will keep that change, as long as the
new value also matches what was given originally. Used in
conjunction with persistence_type.

persisted_props (list of strings; default ['selectedRows']):
Properties whose user interactions will persist after refreshing the
component or the page.

persistence_type (a value equal to: ‘local’, ‘session’ or ‘memory’; default 'local'):
Where persisted user changes will be stored: memory: only kept in
memory, reset on page refresh. local: window.localStorage, data is
kept after the browser quit. session: window.sessionStorage, data is
cleared once the browser quit.

dangerously_allow_code (boolean; default False):
Allow strings containing JavaScript code or HTML in certain props. If
your app stores Dash layouts for later retrieval this is dangerous
because it can lead to cross-site-scripting attacks.

resetColumnState (boolean; default False):
If True, the internal method resetColumnState() will be called.

exportDataAsCsv (boolean; default False):
If True, the internal method exportDataAsCsv() will be called.

selectAll (dict; default False):
Set to True to cause all rows to be selected, Or pass an object of
options for which rows to select. Currently supports filtered, set
to True to only select filtered rows.

selectAll is a boolean | dict with keys:

  • filtered (boolean; optional)

deselectAll (boolean; default False):
If True, the internal method deselectAll() will be called.

updateColumnState (boolean; default False):
If True, the internal method updateColumnState() will be called.

deleteSelectedRows (boolean; optional):
If True, the internal method deleteSelectedRows() will be called.

rowTransaction (dict; optional):
If True, the internal method rowTransaction() will be used, if async
provided as False, applyTransaction() will be called, else
applyTransactionAsync().

rowTransaction is a dict with keys:

  • add (list; optional)

  • addIndex (number; optional)

  • async (boolean; optional)

  • remove (list; optional)

  • update (list; optional)

getRowId (string; optional):
This is required for change detection in rowData.

columnState (list; optional):
Current state of the columns.

csvExportParams (dict; optional):
Object with properties to pass to the exportDataAsCsv() method.

csvExportParams is a dict with keys:

  • allColumns (boolean; optional):
    If True, all columns will be exported in the order they appear in
    the columnDefs.

  • appendContent (string; optional):
    Content to put at the bottom of the file export.

  • columnKeys (list of strings; optional):
    Provide a list (an array) of column keys or Column objects if you
    want to export specific columns.

  • columnSeparator (string; optional):
    Delimiter to insert between cell values.

  • fileName (string; optional):
    String to use as the file name.

  • onlySelected (boolean; optional):
    Export only selected rows.

  • onlySelectedAllPages (boolean; optional):
    Only export selected rows including other pages (only makes sense
    when using pagination).

  • prependContent (string; optional):
    Content to put at the top of the file export. A 2D array of
    CsvCell objects.

  • skipColumnGroupHeaders (boolean; optional):
    Set to True to skip include header column groups.

  • skipColumnHeaders (boolean; optional):
    Set to True if you don’t want to export column headers.

  • skipPinnedBottom (boolean; optional):
    Set to True to suppress exporting rows pinned to the bottom of the
    grid.

  • skipPinnedTop (boolean; optional):
    Set to True to suppress exporting rows pinned to the top of the
    grid.

  • skipRowGroups (boolean; optional):
    Set to True to skip row group headers if grouping rows. Only
    relevant when grouping rows.

  • suppressQuotes (boolean; optional):
    Pass True to insert the value into the CSV file without escaping.
    In this case it is your responsibility to ensure that no cells
    contain the columnSeparator character.

columnSize (a value equal to: ‘sizeToFit’, ‘autoSize’, ‘responsiveSizeToFit’ or null; optional):
Size the columns autoSize changes the column sizes to fit the column’s
content, sizeToFit changes the column sizes to fit the width of the
table responsiveSizeToFit changes the column sizes to fit the width of
the table and also resizing upon grid or column changes and None
bypasses the altering of the column widths.

columnSizeOptions (dict; optional):
Options to customize the columnSize operation. autoSize calls either
autoSizeColumns or autoSizeAllColumns, see:
https://www.ag-grid.com/react-data-grid/column-sizing/#autosize-column-api,
and sizeToFit and responsiveSizeToFit call sizeColumnsToFit, see:
https://www.ag-grid.com/react-data-grid/column-sizing/#size-columns-to-fit.

columnSizeOptions is a dict with keys:

  • columnLimits (list of dicts; optional):
    for (responsive)sizeToFit: per-column minimum and maximum width,
    in pixels.

    columnLimits is a list of dicts with keys:

    • key (string; optional)

    • maxWidth (number; optional)

    • minWidth (number; optional)

  • defaultMaxWidth (number; optional):
    for (responsive)sizeToFit: default maximum width, in pixels, if
    not overridden by columnLimits.

  • defaultMinWidth (number; optional):
    for (responsive)sizeToFit: default minimum width, in pixels, if
    not overridden by columnLimits.

  • keys (list of strings; optional):
    for autoSize: list of column keys to autosize. If omitted, all
    columns will be autosized.

  • skipHeader (boolean; optional):
    for autoSize: If skipHeader=True, the header won’t be included
    when calculating the column widths. default: False.

getRowStyle (dict; optional):
Object used to perform the row styling. See AG-Grid Row Style.

getRowStyle is a dict with keys:

  • defaultStyle (dict; optional)

  • styleConditions (list of dicts; optional)

    styleConditions is a list of dicts with keys:

    • condition (string; required)

    • style (dict; required)

getRowsRequest (dict; optional):
Infinite Scroll, Datasource interface See
https://www.ag-grid.com/react-grid/infinite-scrolling/#datasource-interface.

getRowsRequest is a dict with keys:

  • context (boolean | number | string | list | dict; optional):
    The grid context object.

  • endRow (number; optional):
    The first row index to NOT get.

  • failCallback (optional):
    Callback to call when the request fails.

  • filterModel (dict; optional):
    If filtering, what the filter model is.

  • sortModel (list of dicts; optional):
    If sorting, what the sort model is.

  • startRow (number; optional):
    The first row index to get.

  • successCallback (optional):
    Callback to call when the request is successful.

paginationInfo (dict; optional):
If in pagination mode, this will be populated with info from the
pagination API:
https://www.ag-grid.com/react-data-grid/grid-api/#reference-pagination.

paginationInfo is a dict with keys:

  • currentPage (number; optional)

  • isLastPageFound (boolean; optional)

  • pageSize (number; optional)

  • rowCount (number; optional)

  • totalPages (number; optional)

paginationGoTo (a value equal to: ‘first’, ‘last’, ‘next’, ‘previous’ or null | number; optional):
If in pagination mode, this will navigate to: [‘next’, ‘previous’,
‘last’, ‘first’, number]
https://www.ag-grid.com/react-data-grid/grid-api/#reference-pagination.

filterModel (dict; optional):
If filtering client-side rowModel, what the filter model is. Passing a
model back to this prop will apply it to the grid.

getDetailRequest (dict; optional):
Request from Dash AgGrid when suppressCallback is disabled and a user
opens a row with a detail grid.

getDetailRequest is a dict with keys:

  • data (boolean | number | string | list | dict; optional):
    Details about the row that was opened.

  • requestTime (boolean | number | string | list | dict; optional):
    Datetime representing when the grid was requested.

getDetailResponse (list of dicts; optional):
RowData to populate the detail grid when callbacks are used to
populate.

cellRendererData (dict; optional):
Special prop to allow feedback from cell renderer to the grid.

cellRendererData is a dict with keys:

  • colId (string; optional):
    Column ID from where the event was fired.

  • rowId (boolean | number | string | list | dict; optional):
    Row Id from the grid, this could be a number automatically, or set
    via getRowId.

  • rowIndex (number; optional):
    Row Index from the grid, this is associated with the row count.

  • timestamp (boolean | number | string | list | dict; optional):
    Timestamp of when the event was fired.

  • value (boolean | number | string | list | dict; optional):
    Value set from the function.

getRowsResponse (dict; optional):
Serverside model data response object. See
https://www.ag-grid.com/react-grid/server-side-model-datasource/.

getRowsResponse is a dict with keys:

  • rowCount (number; optional):
    Current row count, if known.

  • rowData (list of dicts; optional):
    Data retreived from the server.

  • storeInfo (boolean | number | string | list | dict; optional):
    Any extra info for the grid to associate with this load.

licenseKey (string; optional):
License key for ag-grid enterprise. If using Enterprise modules,
enableEnterpriseModules must also be True.

enableEnterpriseModules (boolean; default False):
If True, enable ag-grid Enterprise modules. Recommended to use with
licenseKey.

virtualRowData (list of dicts; optional):
The rowData in the grid after inline filters are applied.

scrollTo (dict; optional):
Scrolls to a specific position.

scrollTo is a dict with keys:

  • column (string; optional):
    Column to scroll to, must be equal to one field in columnDefs.

  • columnPosition (a value equal to: ‘auto’, ‘start’, ‘middle’ or ‘end’; optional):
    Position of the column in the grid after scrolling. Default auto.

  • data (dict; optional):
    Data of the row to scroll to.

  • rowId (string; optional):
    Id of the row to scroll to.

  • rowIndex (number; optional):
    rowIndex, typically a row number.

  • rowPosition (a value equal to: ‘top’, ‘bottom’ or ‘middle’; optional):
    Position of the row in the grid after scrolling. Default top.

columnDefs (list of dicts; optional):
Array of Column Definitions.

defaultColDef (dict; optional):
A default column definition.

rowModelType (a value equal to: ‘clientSide’, ‘infinite’, ‘viewport’ or ‘serverSide’; default 'clientSide'):
Sets the Row Model type. Default Value: ‘clientSide’.

rowData (list of dicts; optional):
(Client-Side Row Model only) Set the data to be displayed as rows in
the grid.

masterDetail (boolean; optional):
Used to enable Master Detail. See Enabling Master Detail. Default
Value: False.

detailCellRendererParams (dict; optional):
Specifies the params to be used by the default detail Cell Renderer.
See Detail Grids.

detailCellRendererParams is a dict with keys:

  • detailColName (string; optional):
    Column name where detail grid data is located in main dataset, for
    master-detail view.

  • detailGridOptions (boolean | number | string | list | dict; optional):
    Grid options for detail grid in master-detail view.

  • suppressCallback (boolean; optional):
    Default: True. If True, suppresses the Dash callback in favor of
    using the data embedded in rowData at the given detailColName.

rowStyle (dict; optional):
The style to give a particular row. See Row Style.

rowClass (string; optional):
The class to give a particular row. See Row Class.

rowClassRules (dict; optional):
Rules which can be applied to include certain CSS classes. See Row
Class Rules.

suppressDragLeaveHidesColumns (boolean; default True):
If True, when you drag a column out of the grid (e.g. to the group
zone) the column is not hidden.

cellClicked (dict; optional):
Cell is clicked.

cellClicked is a dict with keys:

  • colId (boolean | number | string | list | dict; optional):
    column where the cell was clicked.

  • rowId (boolean | number | string | list | dict; optional):
    Row Id from the grid, this could be a number automatically, or set
    via getRowId.

  • rowIndex (number; optional):
    rowIndex, typically a row number.

  • timestamp (boolean | number | string | list | dict; optional):
    timestamp of last action.

  • value (boolean | number | string | list | dict; optional):
    value of the clicked cell.

cellDoubleClicked (dict; optional):
Cell is double clicked.

cellDoubleClicked is a dict with keys:

  • colId (boolean | number | string | list | dict; optional):
    column where the cell was double-clicked.

  • rowId (boolean | number | string | list | dict; optional):
    Row Id from the grid, this could be a number automatically, or set
    via getRowId.

  • rowIndex (number; optional):
    rowIndex, typically a row number.

  • timestamp (boolean | number | string | list | dict; optional):
    timestamp of last action.

  • value (boolean | number | string | list | dict; optional):
    value of the double-clicked cell.

selectedRows (list of dicts; optional):
The actively selected rows from the grid (may include filtered rows)
Can take one of three forms: (1) an array of row objects - if you have
defined getRowId, you only need the fields it uses. (2) an object
containing function with a function string - see:
https://www.ag-grid.com/react-data-grid/row-selection/#example-using-foreachnode
(selectAllAmerican function) (3) an object containing ids with a
list of row IDs.

selectedRows is a list of dicts | dict with keys:

  • function (string; required) | dict with keys:

  • ids (list of strings; required)

cellValueChanged (list of dicts; optional):
Value has changed after editing.

cellValueChanged is a list of dicts with keys:

  • colId (boolean | number | string | list | dict; optional):
    column where the cell was changed.

  • data (dict; optional):
    data, data object from the row.

  • newValue (boolean | number | string | list | dict; optional):
    new value of the cell.

  • oldValue (boolean | number | string | list | dict; optional):
    old value of the cell.

  • rowId (boolean | number | string | list | dict; optional):
    Row Id from the grid, this could be a number automatically, or set
    via getRowId.

  • rowIndex (number; optional):
    rowIndex, typically a row number.

  • timestamp (boolean | number | string | list | dict; optional):
    Timestamp of when the event was fired.

dashGridOptions (dict; optional):
Other ag-grid options.