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.
Styling Rows — Add more white space or pack more data into the UI.
Styling Cells — Styling the grid’s rows, including conditional styling.
Grid Size — Styling cells, including conditional styling.
Printing — Configuring the size of the grid.
Overview — Use the grid’s print layout feature to create printer-friendly grids.
Clientside Data
Updating Data — An overview of clientside data and rowData.
Row Model — How to update data in the grid.
Serverside Data
Infinite Row Model — An overview of row models.
Cell Selections — Using the grid’s infinite row model.
Selection
Single Row Selection — Trigger callbacks by clicking on a cell.
Multiple Row Selection — Selecting a single row in the grid.
Multiple Row Selection On Click — Enabling multi-row selection in the grid.
Checkbox Row Selection — Enabling multi-row selection on click in the grid.
Text Selection — Adding checkboxes to a grid for row selection.
Column Filters — Enabling regular text 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.
Scroll To — Lazy-load rows in the grid using infinite scroll.
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.
Popup from Cell Click — How to enable Excel Mode to provide your users with an Excel-like experience with Set Filters.