Dash AG Grid

Dash AG Grid includes both the AG Grid Community and Enterprise versions.

• Community Features: Includes core functionality like column interactions (resize, reorder, pin), pagination, sorting, row selection, cell editing, custom cell components, and CSV export.
• Enterprise Features: Requires a valid AG Grid license key. Includes advanced capabilities like Grouping/Aggregation, Advanced Filtering, Server-Side Records Operations, Excel Export, Pivoting, and Sparklines.

Note: While both versions are included in the component, Enterprise features will not function without a license.

To create a basic grid, import dash_ag_grid as dag. You need to provide rowData (a list of dictionaries representing your data) and columnDefs (a list of dictionaries defining the columns).

By default, the component enables the Alpine theme, sorting, column resizing/reordering/pinning, boolean checkboxes, and row animation on sort.

import dash_ag_grid as dag
from dash import Dash
import pandas as pd

app = Dash()

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/space-mission-data.csv")

app.layout = dag.AgGrid(
    rowData=df.to_dict("records"),
    columnDefs=[{"field": i} for i in df.columns],
)

app.run(debug=True)

To run the examples located in the more_examples directory, follow these steps:

1. Set up your development environment according to the project's contribution guidelines.
2. Install the necessary dependencies using the provided requirements file:

   pip install -r requires-docs.txt

3. Execute the specific application script you wish to run. For example, to run the stock portfolio demo:

   python more_examples/demo_stock_portfolio_dmc/app.py

Note: These examples have been moved to the official Dash documentation. This repository's examples are maintained for historical reference only.

The Dash ecosystem relies heavily on integration tests. To run the sample integration test provided in the boilerplate (which launches a sample Dash app in a browser), use the following command from the root directory:

python -m tests.test_render

To ensure compatibility with Dash documentation tools, provide basic documentation for your components using react docstrings. At a minimum, your documentation should include:

• A description of what the component does.
• A description of its props.
• An explanation of the features enabled by those props.

Ensure you use the correct formatting so that the docstrings are properly recognized by the Dash ecosystem.

Install the dash-ag-grid package using pip to use the AG Grid component wrapper in your Dash applications.

pip install dash-ag-grid

The AgGrid component is the primary entrypoint for rendering an AG Grid instance within a Dash application. It is imported from the dash-ag-grid package.

import { AgGrid } from 'dash-ag-grid';

// Usage within a React/Dash context
<AgGrid ... />

To interact with the underlying AG Grid instance (e.g., to trigger manual refreshes, export data, or manipulate columns programmatically), use getApi or getApiAsync.

• getApi: Synchronously retrieves the AG Grid API instance.
• getApiAsync: Asynchronously retrieves the AG Grid API instance, which is useful when the component might not be fully initialized yet.

import { getApi, getApiAsync } from 'dash-ag-grid';

// Synchronous access
const api = getApi();

// Asynchronous access
const api = await getApiAsync();