Thank you for the thoughtful comparison! It’s always great to see such a detailed overview.
That said, I’m a bit concerned that based on the article some people might not try Dash AG Grid because they think it’s too complex or requires JavaScript. I know your article wasn’t focused solely on Dash AG Grid, so I wanted to take a moment to highlight some of its beginner-friendly features.
While Dash AG Grid offers a wide range of advanced features, it doesn’t require JavaScript unless you’re working with more advanced customizations.
What makes Dash AG Grid so powerful is that many of its features come pre-configured by default, allowing users to get started quickly with very little setup. This makes it a great choice not only for advanced users but also for those new to Dash or data grids.
Using the dataset from the blog, here is an example:
from dash import Dash, html
import dash_ag_grid as dag
import pandas as pd
app = Dash(__name__)
url = "https://raw.githubusercontent.com/datasciencedojo/datasets/master/titanic.csv"
df = pd.read_csv(url)
df["Survived"] = df["Survived"].astype(bool)
app.layout = html.Div([
dag.AgGrid(
rowData=df.to_dict('records'),
columnDefs=[{"field": i} for i in df.columns],
defaultColDef={"filter":True, "editable":True},
)
])
if __name__ == '__main__':
app.run_server(debug=True)
This simple app, which takes only five lines of code to configure the grid, already enables all these features:
Basic grid features enabled by default:
-
Alpine Theme Styling: The grid comes styled with the Alpine theme, available in both light and dark modes. To see the grid in a dark theme add className="ag-theme-alpine-dark"
-
Column Resizing: Resize columns by dragging the vertical handle in the header.
-
Sorting Rows: Click on the header to sort rows; use shift-click for sorting by multiple columns.
-
Animation: See the smooth row animation during sorting and filtering.
-
Boolean Values as Checkboxes: Boolean values are automatically rendered as checkboxes.
-
Column Reordering: Change the order of the columns by dragging the column header.
-
Column Pinning: Pin a column to the right or left side of the grid by dragging the column header.
Sorting and filter, editing defaults:
Based on the data type of the column, the following features are automatically configured:
-
The Text columns : Uses a text editor and the values are sorted and filtered as strings.
-
The Number columns : Uses a number editor and number filter.
-
The Boolean columns: The value renders as a checkbox and it uses a checkbox filter.
-
The dateString columns: If there was a date column in this dataset, you would see that the date editor, date filter and sort works automatically if the date is in the format yyyy-mm-dd.
Note how the filter is menu-driven and it changes based on the column type.
Built-in Components (no JavaScript Required)
Dash AG Grid comes with a library of built-in components, eliminating the need for custom components in most cases. For instance:
Cell Editors cell editors
-
Text Cell Editor: The default editor, is a standard HTML input component
-
Large Text Cell Editor: is an HTML textarea component
-
Select Cell Editor: is an HTML select component
-
Rich Select Cell Editor (Enterprise only): A custom dropdown component
-
Number Cell Editor*: is an HTML number input
-
Date Cell Editor*: is an HTML date input
-
Checkbox Cell Editor*: is an HTML checkbox input
Other Components:
-
Markdown Component Use markdown syntax in cells
-
Show changes Cell Renderer - provides annimation when cell values change
-
Tooltips Configure basic tooltips to show in cells and headers
-
Buttons: There is not built-in button, but any cell can act as a button by using the n_clicks prop in a callback. If you don’t want to create a custom button, you can simply style the cell with CSS to look like a button.
For those of you who have not tried Dash AG Grid yet, I recommend starting with something simple—like exploring a dataframe using the sample app. Then check out the docs to add more features. Give Dash AG Grid a try—you’ll be amazed at what it can do!
@spriteware Your blog posts are fantastic! I agree that the Dash AG Grid docs are detailed and thorough, which is great for reference but can feel a bit overwhelming for someone new to the grid. More step-by-step tutorials, like the ones you’ve created, would really help new users get started. If you’re thinking about making more on Dash AG Grid, I’d be happy to help, if you like!
