We’re excited to announce that Dash AG Grid 2.0.0 has been released 
pip install dash-ag-grid==2.0.0
Dash AG Grid has many great features right out of the box - many of which are customizable.
Thank you to @jinnyzor and @AnnMarieW for leading the development efforts.
Here are just a few examples of the flexibility behind Dash AG Grid, written by @AnnMarieW. See the docs for more information and even more examples.
Quickstart
from dash import Dash, html, Input, Output
import dash_ag_grid as dag
import pandas as pd
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")
app = Dash(__name__)
grid = dag.AgGrid(
id="quickstart-grid",
rowData=df.to_dict("records"),
columnDefs=[{"field": i} for i in df.columns],
defaultColDef={"resizable": True, "sortable": True, "filter": True, "minWidth":125},
columnSize="sizeToFit",
)
app.layout = html.Div([grid, html.Div(id="quickstart-output")])
@app.callback(
Output("quickstart-output", "children"), Input("quickstart-grid", "cellClicked")
)
def display_cell_clicked_on(cell):
if cell is None:
return "Click on a cell"
return f"clicked on cell value: {cell['value']}, column: {cell['colId']}, row index: {cell['rowIndex']}"
if __name__ == "__main__":
app.run_server(debug=True)
Column size
See more info in the Column Size docs
Sticky header labels
See this example in the Column Groups docs.
Date and Number Formatting
Dash AG Grid includes the d3-format and d3-time-format libraries - making it easy to format numbers and dates.
See more examples in the Value Formatters with d3-format section of the docs.
Selectable Rows
Here’s a simple JavaScript function that determines whether a row is selectable. (Only rows having a year earlier than 2007 are selectable.)
dag.AgGrid(
dashGridOptions = {'isRowSelectable': {"function": "params.data ? params.data.year < 2007 : false" }},
# other props
)
See the full example in the Selection Checkbox section of Dash AG Grid docs.
Column Spanning
By using a function to set the column width of certain rows, you can make reports that look like this:
See complete example in the docs in the Column Spanning section. This works with Row Spanning too!
Cell Class Rules and Row Class Rules
You can now use class names with condition formatting. In this example, we use Bootstrap class names – so the background colors of the highlighted cells will match your selected Bootstrap theme.
See this example in the Cell Styling section. You can learn how to use class names with conditional formatting to set Row Styles too.
Date Filters
We have Included examples in the docs of how to make the date filters to work “out-of-the-box” using d3.time-format to convert string dates into date objects.
See more examples in the Filtering section of the docs.
Cell Renderer Components Examples
See these examples --and more! – in the Cell Renderer Componets docs.
Dash Mantine Components Button with icons from DashIconify
Dash Bootstrap Component Buttons with Font Awesome and Bootstrap Icons
Render figures in a dcc.Graph component
Image Component with a callback to display the full sized image in a dbc.Modal
Custom Tooltip
Custom datepicker component
Conditional dropdowns
See this example in the Editing/cell editing Docs
Note the different city dropdown options based on the country
Aligned Grids
You can now align two or more grids. If a user changes things like column order or width, the grids stay in sync.
See two examples in the Aligned Grids docs. The second examples shows a more typical use-case where one grid has summary data.
Pinned rows
Just in case you missed this example, you can also pin one or more rows either on the top or bottom of the grid. This is another way to get a summary row in the grid.
See examples in the Row Pinning docs.
Custom Pagination
You can use the grid’s default pagination, or provide your own component to control the grid’s pagination.
See an example of how to use the dash-bootstrap-components dbc.Pagination buttons to navigate to pages in the grid in the Pagination docs.
Custom Number Input Component
This is a new custom component example we added to this release. The NumberInput component is a great way to ensure that only numeric data is entered into an editable grid cell. Note also that we use valueFormatter to format the number as currency with two decimal places and thousands separator.
See this example in the Cell Editor Components docs
Filter Model
The AG Grid Filter Model is now available. Use this to set a filter for the grid. You can also access to the filters that users set in a Dash callback.
See this example in the Filter Callbacks docs
Aggregation with Custom Functions (AG Grid Enterprise)
See complete example in the Enterprise Examples
Pivot example (AG Grid Enterprise only)
Here is a new example for AG Grid Enterprise customers. Note that many Enterprise features are available in dash-ag-grid, but haven’t been documented yet. To get you started, this is the first example of the Pivot feature from the AG Grid docs.
See this in the Enterprise section of the docs.
