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,
getRowClass,
rowClassRules,
cellClassRules,
isFullWidthRow,

// templates
overlayLoadingTemplate,
overlayNoRowsTemplate,

// other
frameworkComponents,
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,
rowClassRules,

// 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:

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:

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:

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:

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

getRowStyle is a dict with keys:

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:

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:

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:

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:

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:

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.

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:

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:

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

cellDoubleClicked is a dict with keys:

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:

cellValueChanged (dict; optional):
Value has changed after editing.

cellValueChanged is a dict with keys:

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