Skip to content

How to use tables

This guide shows you how to use tables to visualize your data in the dashboard.

The Table model allows you to visualize data in a tabular format.

To add a Table to your page, do the following:

  • insert the Table model into the components argument of the Page model
  • enter any of the currently available table functions

See below for an overview of currently supported table functions.

Dash DataTable

The Dash DataTable is an interactive table component designed for viewing, editing, and exploring large datasets.

You can use the Dash DataTable in Vizro by importing

from vizro.tables import dash_data_table
The Vizro version of this table differs in one way from the original table: it requires the user to provide a pandas dataframe as source of data. This must be entered under the argument data_frame. All other parameters of the Dash DataTable can be entered as keyword arguments. Note that we are setting some defaults for some of the arguments to help with styling.

Dash DataTable

import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.tables import dash_data_table

df = px.data.gapminder().query("year == 2007")

page = vm.Page(
    title="Example of a Dash DataTable",
    components=[
        vm.Table(title="Dash DataTable", figure=dash_data_table(data_frame=df)),
    ],
)
dashboard = vm.Dashboard(pages=[page])

Vizro().build(dashboard).run()
# Still requires a .py to register data connector in Data Manager and parse yaml configuration
# See yaml_version example
pages:
- components:
  - figure:
      _target_: dash_data_table
      data_frame: gapminder_2007
    title: Dash DataTable
    type: table
  title: Example of a Dash DataTable

Table

Styling/Modifying the Dash DataTable

As mentioned above, all parameters of the Dash DataTable can be entered as keyword arguments. Below you can find an example of a styled table where some conditional formatting is applied. There are many more ways to alter the table beyond this showcase.

Styled Dash DataTable
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.tables import dash_data_table

df = px.data.gapminder().query("year == 2007")

column_definitions = [
    {"name": "country", "id": "country", "type": "text", "editable": False},
    {"name": "continent", "id": "continent", "type": "text"},
    {"name": "year", "id": "year", "type": "datetime"},
    {"name": "lifeExp", "id": "lifeExp", "type": "numeric"},
    {"name": "pop", "id": "pop", "type": "numeric"},
    {"name": "gdpPercap", "id": "gdpPercap", "type": "numeric"},
]

style_data_conditional = [
    {
        "if": {
            "column_id": "year",
        },
        "backgroundColor": "dodgerblue",
        "color": "white",
    },
    {"if": {"filter_query": "{lifeExp} < 55", "column_id": "lifeExp"}, "backgroundColor": "#85144b", "color": "white"},
    {
        "if": {"filter_query": "{gdpPercap} > 10000", "column_id": "gdpPercap"},
        "backgroundColor": "green",
        "color": "white",
    },
    {"if": {"column_type": "text"}, "textAlign": "left"},
    {
        "if": {"state": "active"},
        "backgroundColor": "rgba(0, 116, 217, 0.3)",
        "border": "1px solid rgb(0, 116, 217)",
    },
]

style_header_conditional = [{"if": {"column_type": "text"}, "textAlign": "left"}]

page = vm.Page(
    title="Example of a styled Dash DataTable",
    components=[
        vm.Table(
            title="Styled table",
            figure=dash_data_table(
                data_frame=df,
                columns=column_definitions,
                sort_action="native",
                editable=True,
                style_data_conditional=style_data_conditional,
                style_header_conditional=style_header_conditional,
            ),
        ),
    ],
)
dashboard = vm.Dashboard(pages=[page])

Vizro().build(dashboard).run()
# Still requires a .py to register data connector in Data Manager and parse yaml configuration
# See yaml_version example
pages:
  - components:
      - figure:
          _target_: dash_data_table
          data_frame: gapminder_2007
          sort_action: native
          editable: true
          columns:
            - name: country
              id: country
              type: text
              editable: false
            - name: continent
              id: continent
              type: text
            - name: year
              id: year
              type: datetime
            - name: lifeExp
              id: lifeExp
              type: numeric
            - name: pop
              id: pop
              type: numeric
            - name: gdpPercap
              id: gdpPercap
              type: numeric
          style_data_conditional:
            - if:
                column_id: year
              backgroundColor: dodgerblue
              color: white
            - if:
                filter_query: "{lifeExp} < 55"
                column_id: lifeExp
              backgroundColor: "#85144b"
              color: white
            - if:
                filter_query: "{gdpPercap} > 10000"
                column_id: gdpPercap
              backgroundColor: green
              color: white
            - if:
                column_type: text
              textAlign: left
            - if:
                state: active
              backgroundColor: rgba(0, 116, 217, 0.3)
              border: 1px solid rgb(0, 116, 217)
        type: table
    title: Dash DataTable

Table2

To enhance existing tables, please see our How-to-guide on creating custom tables.