Dash Data Table introduction

Building Dashboards with Dash and Plotly

Alex Scriven

Data Scientist

What is a Dash Data Table?

 

  • HTML has a native table tag (available in Dash html.Table())
  • Problem: HTML tables are static
  • Introducing Dash Data Tables (component for the app.layout)
    • Many visual & interactive customizations
      • e.g., Filter, hiding, export, pagination, hover, styling
    • Enhance user experience
Building Dashboards with Dash and Plotly

The basic table

 

from dash_table import DataTable

d_columns = [
 {"name": 'Major Category', 
  "id": "Major Category"},
 {"name": 'Total Sales ($)', 
  "id": "Total Sales ($)"},
 {"name": 'Sales Volume', 
  "id": "Sales Volume"}]

 

d_table = DataTable(
  columns=d_columns,

  data=major_cat_tb.to_dict('records'),

  cell_selectable = False)

A table with 3 columns and four rows containing data from the familiar e-commerce dataset. The column headers are "Major Category," which contains text in the cells below, "Total Sales ($)" which has values below with many decimal places, and "Sales Volume" which has integer values below

Building Dashboards with Dash and Plotly

Format the numbers

 

  • Problem 1: Financial number formatting
    • Solution: FormatTemplate
from dash_table import FormatTemplate

money_format = FormatTemplate.money(2)

d_columns=[{"name": 'Total Sales ($)', 
   "id": "Total Sales ($)", 
   'type':'numeric', 
   'format':money_format}
  # Other column definitions
]

 

Nicely formatted!

The same table that was on the previous slide. However, the Total Sales column now has values that are formatted with a preceding dollar sign and are rounded to 2 decimal places. The full table is a table with 3 columns and four rows containing data from the familiar e-commerce dataset. The column headers are "Major Category," which contains text in the cells below, "Total Sales ($)" and "Sales Volume" which has integer values below

Building Dashboards with Dash and Plotly

Add sorting

Adding sorting:

d_table = DataTable(
  columns=d_columns,
  data=major_cat_tb.to_dict('records'),
  cell_selectable=False,
  # Add sort ability
  sort_action='native')

With Sorting: A gif of the basic table from the first slides, instead now the headers contain two arrows inside. The mouse clicks the first two columns, in turn, to sort the Major Category column alphabetically and then the Total Sales column, which sorts by value

Building Dashboards with Dash and Plotly

Add filtering

Adding Filtering:

d_table = DataTable(
  columns=d_columns,
  data=major_cat_tb.to_dict('records'),
  cell_selectable=False,
  # Add filter ability
  filter_action='native'
)

With Filtering: A gif of the basic table from the first slides, instead now there is a row below the header that contains the placeholder text 'filter values'. The mouse clicks into this new cell on the first column and writes 'den,' which filters to the row containing the Major Category of Garden. Only one row is now seen in the table. The mouse deletes this, which causes all rows to appear again. The mouse then clicks into the final column, Sales Volume, and enters ">176," which leaves only one row of data that has a value of 189 in that column. It then deletes this and enters 176, which filters to show only the row that has 176 in the Sales Volume column.

Building Dashboards with Dash and Plotly

Pagination

  Problem: long tables

  • Pagination: show (n) entries per 'page' with navigation buttons
    • page_current = page to start on
    • page_size = entries per page
d_table = DataTable(
   # Previous options
   page_current= 0,

   page_size= 2,
   page_action="native")

 

Pagination in action:

  • Next, previous, first and last buttons
  • Enter page number
  • Filter and sort still works!

A gif of the same basic table from previous slides, however, there are only two rows of data and in the bottom-right of the table is a pagination toggle which has right and left arrows and a counter noting how many pages (2) and the current page. The current page box is a text box that can have data entered. The mouse clicks to the second page, changing the data seen and then back to the first page. It also manually enters a number in the pagination page box to directly take the user to that page of data

Building Dashboards with Dash and Plotly

Let's practice!

Building Dashboards with Dash and Plotly

Preparing Video For Download...