Dash AG Grid introduction

1. Dash AG Grid introduction

Let's learn how to add interactive tables to our apps using Dash AG Grid.

2. What is a Dash AG Grid?

In HTML, the table tag renders tables. Dash wraps this with the html-dot-Table function. However, HTML tables are static, just like titles and text tags. Now let's look at a more powerful alternative - the Dash AG Grid library. This library offers a wide range of visual and interactive features. These include filtering column data, hiding columns, exporting data, and even styling specific cells.

3. The basic table

Let's create a basic table and incrementally build some cool features. First, we import the Dash AG Grid library to use the AgGrid component. Then we define the column structure as a list of dictionaries. Each column needs a field key that matches a column name in the dataset. We also pass in the data, formatted as a list of dictionaries. This is easy to generate using Pandas' to_dict method. Once configured, we place the grid in the app layout like any other Dash component. Our table looks pretty basic for now - let's enhance it in the next steps!

4. Format the numbers

One problem with the default table is the way financial numbers are displayed. We can solve this using a valueFormatter in the column definition. A value formatter tells the table how to display cell values. Behind the scenes, it uses a JavaScript formatting function. For our money format value formatter we set up with params dot value which refers to the raw number in the cell, and the JavaScript function toLocaleString with arguments to tell the browser to format it as a US currency. This adds the dollar sign, commas, and two decimal places automatically. We then add this formatter to the total sales column definition.

5. Format numbers output

Nice, we can see our total sales column is appropriately formatted.

6. Add sorting

Dash AG Grid enables sorting by default. We can turn this off in the AG Grid definition by setting the sortable parameter to False in the default col def argument when constructing the grid. We can also turn on or off for specific columns when setting column definitions.

7. Add filtering

Filtering is added in a similar way. When constructing the grid, set the filter and floating filter arguments to the global default col def argument to both be true. The second argument places the filter in the column header itself. This lets users filter by value or apply conditions like "greater than" to specific columns.

8. Pagination

What about when we have a long table to display? To manage this, we can use pagination - breaking the table into smaller pages. In AG Grid, we can do this by setting the pagination argument to true in the dash grid options argument to the A G constructor. The argument pagination page size sets how many rows to show per page. Let's see the result. We had four lines, so setting a page size of 2 creates 2 pages. We can toggle between them using the next, previous, first, and last buttons. Note that filter and sort still work and are applied over the entire table, not just the displayed page.

9. Let's practice!

Let's practice building some interactive Dash AG Grid Tables.

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.