Dash AG Grid

Getting Started
<iframe>
<iframe>

Dash AG Grid is a high-performance and highly customizable component that wraps AG Grid, designed for creating rich datagrids.

Installation

To install Dash AG Grid, in your terminal run:

pip install dash-ag-grid

These docs are using Dash AG Grid version 2.3.0, which uses AG Grid version 29.3.5.

To learn the basics of Dash AG Grid, see the Migrating from 1.x to 2.0 guide.

Table of Contents

The first four pages below will help you get started with Dash AG Grid. The remaining pages contain additional examples, with sections broken down by different grid features, for example, columns, rows, and pagination. Many of the examples and explanations come directly from the official AG Grid docs and have been updated to apply to Dash AG Grid. Consult the AG Grid docs for additional explanations and examples that you can convert to use with Dash AG Grid. The AG Grid docs are MIT licensed and the content is available here in the AG Grid GitHub repo.

Getting Started — If you’ve previously used the Dash Enterprise version of Dash AG Grid (1.x), learn how to update your apps to use 2.0.

JavaScript and Dash AG Grid — Get up and running with Dash AG Grid and learn the basics of creating grids, including creating and configuring columns and headers, and using grids with callbacks.

Reference — Learn how to create custom JavaScript functions and components for your grid.

Column Definitions — Reference documentation for Dash AG Grid.

Columns

Updating Column Definitions — Column definitions and the different ways to define them for a grid.

Column State — How to update column definitions after they’ve been initially set.

Column Headers — How to work with the state of columns in a grid.

Column Groups — Configuring headers for a column and how to enable sorting and filtering for a column.

Column Sizing — Having multiple levels of columns in your grid’s headers.

Column Moving — Sizing the grid’s columns.

Column Pinning — Moving the grid’s columns, including examples of locking columns and moving animation.

Column Spanning — Pin columns to the left and right and lock pinning.

Row IDs — Configure the width of columns in the grid.

Rows

Row Sorting — How the grid assigns IDs.

Row Spanning — How to enable and use sorting in the grid.

Full Width Rows — Cells spanning multiple rows.

Row Pinning — How to create full width rows.

Row Height — Pin rows to always appear at the start or end of a grid.

Row Dragging — Configure the height of grid rows.

Row Dragging - External Dropzone — Rearrange rows in the grid.

Themes — Drag and drop rows in an external dropzone (including grid to grid).

Layout and Style

Styling Color and Font — How to use themes with your grid.

Styling Selections — Update the fonts and colors of text in the grid.

Styling Headers — Control how selected rows and cells appear.

Styling Borders — Style grid header cells and column groups.

Compactness — Control the style of borders around rows, cells and UI elements.

Custom Icons at Global Level — Add more white space or pack more data into the UI.

Styling Inputs and Widgets — Provide custom icons at global level.

Styling Menus and Popups — Styling text inputs, checkboxes, toggle buttons and range sliders.

Styling Rows — Style UI elements that float above the main UI, including menus.

Styling Cells — Styling the grid’s rows, including conditional styling.

Custom Icons at Grid and Column Level — Styling cells, including conditional styling.

Grid Size — Provide custom icons at grid/column level.

Printing — Configuring the size of the grid.

Row Model Overview — Use the grid’s print layout feature to create printer-friendly grids.

Client/Server-Side Data

Client-Side Row Model — An overview of row models.

Infinite Row Model (Server-Side) — Client-Side row model in Dash AG Grid.

Cell Selection — Using the grid’s infinite row model.

Selection

Cell Text Selection — Trigger callbacks by clicking on a cell and disable cell focus.

Row Selection — Enabling regular text selection.

Row Selection With Checkboxes — Row selections in Dash AG Grid.

Column Filters — Adding checkboxes to a grid for row selection.

Filtering

Filter Model & Dash Callbacks — Filters applied to a grid’s data at the column level.

Text Filters — Capturing the state of filters to use in a Dash callback.

Number Filters — Filter string values.

Date Filters — Filter number values.

Floating Filters — Filter date values.

Quick Filters — Filters that appear under the column headers.

Change Cell Renderers — Apply a quick filter that filters across the row.

Rendering

Value Getters — Cell renderers for animating changes to data.

Value Formatters — Use value getters as an alternative to field columns to get data.

D3 Value Formatters — Customize how values are displayed.

Custom Function Value Formatters — Use the d3-format library for formatting values.

Cell Editing — Creating your own functions to format values.

Editing

Editing and Callbacks — Enabling cell editing for a column.

Start/Stop Cell Editing — Access edited data in a callback.

Cell Editors — Different ways that cell editing can be started and stopped.

Provided Cell Editors — Add cell editors within cells to take care of edit operations.

Undo and Redo Cell Edits — Cell editors available to use with the grid.

Full Row Editing — Allow users to undo / redo their cell edits.

Export Data to CSV — Make all cells in a row editable at the same time.

Import and Export

Copying to the Clipboard — Export grid data to a CSV file.

Cell Renderer Components — Copying from the grid using dcc.Clipboard and regular text selection.

Components

Markdown Component — Use cell renderers to render something other than a string in a grid cell.

Cell Editor Components — Use the Markdown component included with Dash AG Grid.

Many Renderer Components One Column — Use custom components as cell editors.

Row Menu — Use different renderers for different rows in the same column.

Tooltips — Use the Row Menu component included with Dash AG Grid.

Overlay Component — Add tooltips to column headers and cells.

Pagination — Provide custom loading messages to the grid.

Scrolling and Pagination

Aligned Grids — Set a grid to use pagination instead of vertical scroll.

Infinite Scroll — Align the columns in two or more grids.

Scrolling Performance — Lazy-load rows in the grid using infinite scroll.

Scroll To — Improve The Grid Scrolling Performance.

Persistence — Scroll to a specific position in the grid.

Persistence

Using AG Grid Enterprise — Persist selected rows and filters when a page is refreshed.

Enterprise

Sparklines — Using an AG Grid license key with Dash AG Grid for enterprise features.

Master Detail — Mini charts you can add to your grid.

Group Cell Renderer — Expandable rows for your grid.

Row Aggregation with Conditional Formatting — Configuring group cell renderers for your grid.

Aggregation with Custom Functions — Apply row aggregation with conditional formatting to your grid.

Row Groupings — Write custom functions to use with your grid.

Sidebar — Configuring row grouping for your grid.

Pivot — Add a sidebar with columns and/or filters to your grid.

Tree Data — Turn a column’s values into columns with pivot.

Set Filter - Overview — Display data with parent-child relationships.

Set Filter - Filter List — Enabling Set Filter which works like Excel, providing checkboxes to select values from a set.

Set Filter - Data Updates — Manage the Set Filter List values through custom sorting and formatting.

Set Filter - Excel Mode — Describes how changing data through Cell Editing and the application Updating Data impacts the Set Filter’s values.

Virtual Row Data — How to enable Excel Mode to provide your users with an Excel-like experience with Set Filters.

More Examples

Crossfilter — Get Virtual Row Data.