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,

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

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 (character; optional):
The ID used to identify this component in Dash callbacks.

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

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

persistence (logical | character | numeric; 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 (unnamed list of characters; 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 (logical; 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 (logical; default FALSE):
If TRUE, the internal method resetColumnState() will be called.

exportDataAsCsv (logical; default FALSE):
If TRUE, the internal method exportDataAsCsv() will be called.

selectAll (named list; 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 logical | named list with keys:

  • filtered (logical; optional)

deselectAll (logical; default FALSE):
If TRUE, the internal method deselectAll() will be called.

updateColumnState (logical; default FALSE):
If TRUE, the internal method updateColumnState() will be called.

deleteSelectedRows (logical; optional):
If TRUE, the internal method deleteSelectedRows() will be called.

rowTransaction (named list; optional):
If TRUE, the internal method rowTransaction() will be used, if async
provided as FALSE, applyTransaction() will be called, else
applyTransactionAsync().

rowTransaction is a named list with keys:

  • add (unnamed list; optional)

  • addIndex (numeric; optional)

  • async (logical; optional)

  • remove (unnamed list; optional)

  • update (unnamed list; optional)

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

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

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

csvExportParams is a named list with keys:

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

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

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

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

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

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

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

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

  • skipColumnGroupHeaders (logical; optional):
    Set to TRUE to skip include header column groups.

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

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

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

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

  • suppressQuotes (logical; 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 NULL
bypasses the altering of the column widths.

columnSizeOptions (named list; 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 named list with keys:

  • columnLimits (list where each item is a named list; optional):
    for (responsive)sizeToFit: per-column minimum and maximum width,
    in pixels.

    columnLimits is a list where each item is a named list with
    keys:

    • key (character; optional)

    • maxWidth (numeric; optional)

    • minWidth (numeric; optional)

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

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

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

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

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

getRowStyle is a named list with keys:

  • defaultStyle (named list; optional)

  • styleConditions (list where each item is a named list; optional)

    styleConditions is a list where each item is a named list with
    keys:

    • condition (character; required)

    • style (named list; required)

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

getRowsRequest is a named list with keys:

  • context (logical | numeric | character | unnamed list | named list; optional):
    The grid context object.

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

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

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

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

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

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

paginationInfo (named list; 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 named list with keys:

  • currentPage (numeric; optional)

  • isLastPageFound (logical; optional)

  • pageSize (numeric; optional)

  • rowCount (numeric; optional)

  • totalPages (numeric; optional)

paginationGoTo (a value equal to: ‘first’, ‘last’, ‘next’, ‘previous’ or null | numeric; 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 (named list; 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 (named list; optional):
Request from Dash AgGrid when suppressCallback is disabled and a user
opens a row with a detail grid.

getDetailRequest is a named list with keys:

  • data (logical | numeric | character | unnamed list | named list; optional):
    Details about the row that was opened.

  • requestTime (logical | numeric | character | unnamed list | named list; optional):
    Datetime representing when the grid was requested.

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

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

cellRendererData is a named list with keys:

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

  • rowId (logical | numeric | character | unnamed list | named list; optional):
    Row Id from the grid, this could be a number automatically, or set
    via getRowId.

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

  • timestamp (logical | numeric | character | unnamed list | named list; optional):
    Timestamp of when the event was fired.

  • value (logical | numeric | character | unnamed list | named list; optional):
    Value set from the function.

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

getRowsResponse is a named list with keys:

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

  • rowData (unnamed list of named lists; optional):
    Data retreived from the server.

  • storeInfo (logical | numeric | character | unnamed list | named list; optional):
    Any extra info for the grid to associate with this load.

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

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

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

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

scrollTo is a named list with keys:

  • column (character; 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 (named list; optional):
    Data of the row to scroll to.

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

  • rowIndex (numeric; 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.

eventListeners (named list with characters as keys and values of type unnamed list; optional):
Object of Eventlisteners to add upon grid ready. These listeners are
only added upon grid ready. To add or remove an event listener after
this point, please utilize the getApi or getApiAsync methods.

columnDefs (unnamed list of named lists; optional):
Array of Column Definitions.

defaultColDef (named list; 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 (unnamed list of named lists; optional):
(Client-Side Row Model only) Set the data to be displayed as rows in
the grid.

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

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

detailCellRendererParams is a named list with keys:

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

  • detailGridOptions (logical | numeric | character | unnamed list | named list; optional):
    Grid options for detail grid in master-detail view.

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

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

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

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

suppressDragLeaveHidesColumns (logical; 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 (named list; optional):
Cell is clicked.

cellClicked is a named list with keys:

  • colId (logical | numeric | character | unnamed list | named list; optional):
    column where the cell was clicked.

  • rowId (logical | numeric | character | unnamed list | named list; optional):
    Row Id from the grid, this could be a number automatically, or set
    via getRowId.

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

  • timestamp (logical | numeric | character | unnamed list | named list; optional):
    timestamp of last action.

  • value (logical | numeric | character | unnamed list | named list; optional):
    value of the clicked cell.

cellDoubleClicked (named list; optional):
Cell is double clicked.

cellDoubleClicked is a named list with keys:

  • colId (logical | numeric | character | unnamed list | named list; optional):
    column where the cell was double-clicked.

  • rowId (logical | numeric | character | unnamed list | named list; optional):
    Row Id from the grid, this could be a number automatically, or set
    via getRowId.

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

  • timestamp (logical | numeric | character | unnamed list | named list; optional):
    timestamp of last action.

  • value (logical | numeric | character | unnamed list | named list; optional):
    value of the double-clicked cell.

selectedRows (list where each item is a named list; 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 where each item is a named list | named list
with keys:

  • function (character; required) | named list with keys:

  • ids (unnamed list of characters; required)

cellValueChanged (list where each item is a named list; optional):
Value has changed after editing.

cellValueChanged is a list where each item is a named list with
keys:

  • colId (logical | numeric | character | unnamed list | named list; optional):
    column where the cell was changed.

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

  • newValue (logical | numeric | character | unnamed list | named list; optional):
    new value of the cell.

  • oldValue (logical | numeric | character | unnamed list | named list; optional):
    old value of the cell.

  • rowId (logical | numeric | character | unnamed list | named list; optional):
    Row Id from the grid, this could be a number automatically, or set
    via getRowId.

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

  • timestamp (logical | numeric | character | unnamed list | named list; optional):
    Timestamp of when the event was fired.

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