1. Dash Data Table introduction
Let's learn how to add interactive Dash tables into our apps.
2. What is a Dash Data Table?
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.
Let's look at a powerful alternative to HTML tables; the Dash Data Tables module.
This module has a huge array of visual and interactive customizations.
These include; allowing the user to filter column data, hide columns, export data, and advanced styling and customization options, even to specific cells!
With all these possibilities, we can greatly enhance the end user experience.
3. The basic table
Let's create a basic table then build some cool features incrementally. First, we need to import a new library, dash_table.
Next, we set up our columns as a list of dictionaries. There are many options available, but at minimum, each column (as seen here) needs to have an id, to identify the column in further code and a name, which will appear in the table header.
Now, we can construct the data table. A data table requires, at minimum, columns and data. We have created the columns in the desired format, so we reference them here.
The data needs to be in a dictionary format that can be conveniently generated using Pandas' to_dict method.
By default, cells highlight on selection, but since we haven't configured any interactivity yet, we will turn that off to avoid confusion by setting cell_selectable to False.
This object is inserted in the app layout like any other component. Our table is pretty boring, huh? Let's fix that!
4. Format the numbers
The first problem with our basic table is the formatting of our financial numbers doesn't look great.
We can solve this using the FormatTemplate module.
To use it, we create a format object. FormatTemplate has both money and percentage methods, which accept an argument for the number of decimal places to display. Two decimal places are used in this example.
We slightly change the definition of our total sales column, adding a numeric type and setting the format to the format object.
Nice, our total sales column is appropriately formatted.
5. Add sorting
Let's really make this table interactive with sorting and filtering functionality.
The sort_action argument set to native adds this classic sorting ability. It works on text and numbers. We can set this argument to 'custom' to use a callback for custom sorting.
6. Add filtering
Filtering is added in a similar way.
We use the filter_action argument, and like sorting, this is set to native but can be custom. For text fields, the filtering function pattern matches. The string 'den' matches only 'garden' and leaves that row. Number columns can also be filtered using comparative symbols such as greater than, less than, or an exact number.
7. Pagination
What about when we have a long table to display?
We can paginate the results, that is, show a smaller table, or 'page', containing a batch of entries. Navigation buttons can be used to move between pages.
In Dash, we can do this with three arguments. page_current sets what page to start on,
page_size sets how many entries to show on each page, and page_action is 'native', like sorting and filtering.
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.
Or enter a page number to go straight there.
Note that filter and sort still work and are applied over the entire table, not just the displayed page.
8. Let's practice!
Let's practice building some interactive Data Tables.