<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-gridThese docs are using Dash AG Grid version 31.2.0, which uses AG Grid version 31.2.1.
To learn the basics of Dash AG Grid, see the Getting Started
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.
Migration Guide — If you’ve previously used the Dash Enterprise version of Dash AG Grid (1.x) or the open source versions 2.x, learn how to update your apps to use the 31.x versions.
Getting Started — 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.
JavaScript and Dash AG Grid — Learn how to create custom JavaScript functions and components for your grid.
Reference — Reference documentation for Dash AG Grid.
Columns
Column Definitions — Column definitions and the different ways to define them for a grid.
Updating Column Definitions — How to update column definitions after they’ve been initially set.
Column State — How to work with the state of columns in a grid.
Column Headers — Configuring headers for a column and how to enable sorting and filtering for a column.
Column Groups — Having multiple levels of columns in your grid’s headers.
Column Sizing — Sizing the grid’s columns.
Column Moving — Moving the grid’s columns, including examples of locking columns and moving animation.
Cell Data Types — How to use cell data types in Dash AG Grid.
Column Pinning — Pin columns to the left and right and lock pinning.
Column Spanning — Configure the width of columns in the grid.
Rows
Row IDs — How the grid assigns IDs.
Row Sorting — How to enable and use sorting in the grid.
Row Spanning — Cells spanning multiple rows.
Full Width Rows — How to create full width rows.
Row Pinning — Pin rows to always appear at the start or end of a grid.
Row Height — Configure the height of grid rows.
Row Dragging — Rearrange rows in the grid.
Row Dragging - External Dropzone — Drag and drop rows in an external dropzone (including grid to grid).
Layout and Style
Themes — How to use themes with your grid.
Styling Color and Font — Update the fonts and colors of text in the grid.
Styling Selections — Control how selected rows and cells appear.
Styling Headers — Style grid header cells and column groups.
Styling Borders — Control the style of borders around rows, cells and UI elements.
Compactness — Add more white space or pack more data into the UI.
Custom Icons at Global Level — Provide custom icons at global level.
Styling Inputs and Widgets — Styling text inputs, checkboxes, toggle buttons and range sliders.
Styling Menus and Popups — Style UI elements that float above the main UI, including menus.
Styling Rows — Styling the grid’s rows, including conditional styling.
Styling Cells — Styling cells, including conditional styling.
Custom Icons at Grid and Column Level — Provide custom icons at grid/column level.
Grid Size — Configuring the size of the grid.
Printing — Use the grid’s print layout feature to create printer-friendly grids.
Client/Server-Side Data
Row Model Overview — An overview of row models.
Client-Side Row Model — Client-Side row model in Dash AG Grid.
Infinite Row Model (Server-Side) — Using the grid’s infinite row model.
Selection
Cell Selection — Trigger callbacks by clicking on a cell and disable cell focus.
Cell Text Selection — Enabling regular text selection.
Row Selection — Row selections in Dash AG Grid.
Row Selection With Checkboxes — Adding checkboxes to a grid for row selection.
Filtering
Filtering Overview — Overview of filtering in Dash AG Grid.
Column Filters - Overview — Filters applied to a grid’s data at the column level.
Column Filters - Text Filters — Filter string values.
Column Filters - Number Filters — Filter number values.
Column Filters - Date Filters — Filter date values.
Column Filters - Filter Conditions — Filter Conditions in Dash AG Grid.
Column Filters - Applying Filters — Applying Filters in Dash AG Grid.
Column Filters - Floating Filters — Filters that appear under the column headers.
— Capturing the state of filters to use in a Dash callback.
Quick Filters — Apply a quick filter that filters across the row.
External Filter — Apply an external filter that filters across the row.
Rendering
Value Getters — Use value getters as an alternative to field columns to get data.
Value Formatters — Customize how values are displayed.
D3 Value Formatters — Use the d3-format library for formatting values.
Custom Function Value Formatters — Creating your own functions to format values.
Cell Rendering — Customize the cell rendering in Dash AG Grid.
Flashing Cells — How to flash cells to highlight data changes in Dash AG Grid.
Tooltips — Add tooltips to the grid.
Editing
Cell Editing — Enabling cell editing for a column.
Editing and Callbacks — Access edited data in a callback.
Start/Stop Cell Editing — Different ways that cell editing can be started and stopped.
Parsing Values — Parsing values after editing.
Saving Values — Value Setters provides an alternative to using field for setting the data.
Cell Editors — Add cell editors within cells to take care of edit operations.
Provided Cell Editors — Cell editors available to use with the grid.
Undo and Redo Cell Edits — Allow users to undo / redo their cell edits.
Full Row Editing — Make all cells in a row editable at the same time.
Import and Export
Export Data to CSV — Export grid data to a CSV file.
Copying to the Clipboard — Copying from the grid using dcc.Clipboard and regular text selection.
Components
Cell Renderer Components — Use cell renderers to render something other than a string in a grid cell.
Markdown Component — Use the Markdown component included with Dash AG Grid.
Cell Editor Components — Use custom components as cell editors.
Many Renderer Components One Column — Use different renderers for different rows in the same column.
Row Menu — Use the Row Menu component included with Dash AG Grid.
Tooltip Component — Custom tooltip component in Dash AG Grid.
Overlay Component — Provide custom loading messages to the grid.
Scrolling and Pagination
Pagination — Set a grid to use pagination instead of vertical scroll.
Aligned Grids — Align the columns in two or more grids.
Infinite Scroll — Lazy-load rows in the grid using infinite scroll.
Scrolling Performance — Improve The Grid Scrolling Performance.
Scroll To — Scroll to a specific position in the grid.
Persistence
Persistence — Persist selected rows and filters when a page is refreshed.
Enterprise
Using AG Grid Enterprise — Using an AG Grid license key with Dash AG Grid for enterprise features.
Sparklines — Mini charts you can add to your grid.
Master Detail — Expandable rows for your grid.
Group Cell Renderer — Configuring group cell renderers for your grid.
Row Aggregation with Conditional Formatting — Apply row aggregation with conditional formatting to your grid.
Aggregation with Custom Functions — Write custom functions to use with your grid.
Row Groupings — Configuring row grouping for your grid.
Sidebar — Add a sidebar with columns and/or filters to your grid.
Pivot — Turn a column’s values into columns with pivot.
Tree Data — Display data with parent-child relationships.
Set Filter - Overview — Enabling Set Filter which works like Excel, providing checkboxes to select values from a set.
Set Filter - Filter List — Manage the Set Filter List values through custom sorting and formatting.
Set Filter - Data Updates — Describes how changing data through Cell Editing and the application Updating Data impacts the Set Filter’s values.
Set Filter - Excel Mode — How to enable Excel Mode to provide your users with an Excel-like experience with Set Filters.
More Examples
Virtual Row Data — Get Virtual Row Data.
Crossfilter — Crossfilter between Grid and Plots.
