1. Dash Data Table interactivity
Let's learn how to style and add interactivity to Dash Data Tables.
2. Styling all Data Table cells
When styling a Dash Data Table, we can't use the familiar style property. However, there are more complex and useful options available when constructing our Data Table.
To style all cells, use the style_cell argument, which accepts familiar CSS constructs. Here we align the text to the left.
3. Styling some Data Table cells
We can also style specific cells using style_cell_conditional. This is a list of conditionals.
Each conditional is a nested dictionary that has a key 'if' followed by a dictionary of the conditions and then key-value pairs of the style to apply if the conditions are met. Here we will style the sales volume column by center-aligning the cell text.
Here, we can see our sales volume is center-aligned, but the other columns are left-aligned.
4. Styling Data Table headers
Styling column headers is similar to styling cells.
We can style all the headers using style_header. Let's have a black background using the background-color property and white text using the color property.
We can also style a specific header using style_header_conditional. Let's give the Sales Volume header a blue background instead.
Nice stuff, those headers look more professional.
5. Selecting cells
To take Data Table interactivity to the next level, we can select different parts of a table and use the data in a callback.
To allow cells to be clicked, we first set the cell_selectable argument, when creating the DataTable object, to True.
Let's create a callback. This will be triggered when a cell is selected, so we use the 'selected_cells' property as our input. We just want to see what's available, so we send the output to a text HTML object below our table.
Selecting a cell changes the style, and in the callback, we can use the row and column information from the selected cell.
6. Selecting rows
To allow an entire row to be selected, the row_selectable argument of the Data Table needs to be single or multi for whether only one row can be selected at a time or multiple.
Let's set up a callback to see what data is returned from selecting a row. This is similar to before; however, the input property has changed to selected_rows as this is the property that triggers callbacks on row selection.
We can see only the row index is returned.
7. Selecting columns
To allow an entire column to be selected, the column_selectable argument needs to be single or multi for whether only one column can be selected at a time or multiple.
An additional change is that the column definition dictionaries we previously created need to have an additional argument; selectable being True for each column that can be selected.
Let's set up a callback to see what data is returned from selecting a column, where only one can be selected at a time. This callback is similar to before but is triggered by the property selected_columns, which changes upon a column selection.
We can see only the column ID is returned.
8. Let's practice!
Let's practice styling and adding callback interactivity to Dash Data Tables.