Dash Data Table interactivity

Building Dashboards with Dash and Plotly

Alex Scriven

Data Scientist

Styling all Data Table cells

Can't use the 'style'
For all cells use style_cell

d_table = DataTable(
  # Other table properties            
  style_cell=(
    {'textAlign':'left'}
))

The first two columns of the table from the previous lesson. It has the headers "Major Category" and "Total Sales ($)" with four rows of data. All the data in the cells is aligned to the left.

Styling some Data Table cells

For a specific cell use style_cell_conditional

d_table = DataTable(
  # Other table properties            
  style_cell=(
    {'textAlign':'left'}), 
  style_cell_conditional=[
 {'if': {'column_id':'Sales Volume'},
 'textAlign':'center'}])

This is the same table as the previous slide; however, an additional column has been added, "Sales Volume". The first two columns of the table have the headers "Major Category" and "Total Sales ($)" with four rows of data. All the data in the cells is aligned to the left in the first two columns, but the data in the last column is center-aligned.

Styling Data Table headers

Styling column headers is similar
- All: style_header
- Specific: style_header_conditional

d_table = DataTable(
    # Other table properties   
style_header={
  'background-color':'black', 
  'color':'white'},

style_header_conditional=[
  {'if': {'column_id':'Sales Volume'},
   'background-color':'blue'}])

Styled column headers; The same table with three columns and four rows as has been built on the previous slides. However, the first two column headers have black background with white text, and the last column header has a blue background with white text

Selecting cells

Selecting cells first (then rows, columns)
Set DataTable's cell_selectable argument to True
A callback to print available data

@app.callback(
  Output('test_text', 'children'),
  Input('my_dt', 'selected_cells'))
def print_it(input):
  return str(input)

Selecting cells: A gif of the same table that has been present in the slideshow so far. Below the table is the words "Select input," and below this the word None. The mouse clicks several different cells in turn, and the word None changes to a dictionary that notes the row and column number as well as the column label.

Selecting rows

Set Data Table row_selectable to single or multi
A callback to print available data

@app.callback(
  Output('test_text', 'children'),
  Input('my_dt', 'selected_rows'))
def print_it(input):
  return str(input)

The row index is returned; A gif of the same table that has been present in the slideshow so far. Below the table is the words "Select input," and below this is the word None. However, each row has a radio button to the left. The mouse moves and selects the radio buttons for the first three rows in turn, and the word None changes to a number (1,2,3 in turn) in square brackets

Selecting columns

Set Data Table column_selectable to single or multi
- Add 'selectable': True to column definitions
- e.g., {"name": "Sales Volume", "id": "Sales Volume", "selectable":True}
A callback to print available data

@app.callback(
  Output('test_text', 'children'),
  Input('my_dt', 'selected_columns'))
def print_it(input):
  return str(input)

Column ID is returned

Let's practice!

Building Dashboards with Dash and Plotly