Skip to content

Table functions

vizro.tables

Built-in table functions.

Usage documentation

How to use tables

dash_ag_grid 

dash_ag_grid(data_frame, **kwargs)

Implementation of dash_ag_grid.AgGrid with sensible defaults to be used in AgGrid.

Usage documentation

How to use AG Grid

Parameters:

  • data_frame (DataFrame) –

    DataFrame containing the data to be displayed.

Other Parameters:

  • **kwargs (Any) –

    Additional keyword arguments to be passed to the dash_ag_grid.AgGrid component.

Returns:

  • AgGrid –

    A dash_ag_grid.AgGrid component with sensible defaults.

Example 
import vizro.models as vm
from vizro.tables import dash_ag_grid

vm.AgGrid(figure=dash_ag_grid(...))
Source code in src/vizro/tables/_dash_ag_grid.py 
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
@capture("ag_grid")
def dash_ag_grid(data_frame: pd.DataFrame, **kwargs: Any) -> dag.AgGrid:
    """Implementation of `dash_ag_grid.AgGrid` with sensible defaults to be used in [`AgGrid`][vizro.models.AgGrid].

    Abstract: Usage documentation
        [How to use AG Grid](../user-guides/table.md#ag-grid)

    Args:
        data_frame: DataFrame containing the data to be displayed.

    Keyword Arguments:
        **kwargs: Additional keyword arguments to be passed to the `dash_ag_grid.AgGrid` component.

    Returns:
        A `dash_ag_grid.AgGrid` component with sensible defaults.

    Example:
        ```python
        import vizro.models as vm
        from vizro.tables import dash_ag_grid

        vm.AgGrid(figure=dash_ag_grid(...))
        ```
    """
    defaults = {
        "className": "ag-theme-quartz-dark ag-theme-vizro",
        "columnDefs": [{"field": col} for col in data_frame.columns],
        "rowData": data_frame.apply(
            lambda x: (
                x.dt.strftime("%Y-%m-%d")  # set date columns to `dateString` for AG Grid filtering to function
                if pd.api.types.is_datetime64_any_dtype(x)
                else x
            )
        ).to_dict("records"),
        "defaultColDef": {
            "resizable": True,
            "sortable": True,
            "filter": True,
            "filterParams": {
                "buttons": ["apply", "reset"],
                "closeOnApply": True,
            },
        },
        "dashGridOptions": {
            "dataTypeDefinitions": _DATA_TYPE_DEFINITIONS,
            "animateRows": False,
            "domLayout": "autoHeight",
            "pagination": True,
            "paginationPageSize": 20,
            "rowSelection": {
                "mode": "singleRow",
                "checkboxes": False,
                "enableClickSelection": True,
            },
        },
        "columnSize": "responsiveSizeToFit",
    }
    kwargs = _set_defaults_nested(kwargs, defaults)

    return dag.AgGrid(**kwargs)

dash_data_table 

dash_data_table(data_frame, **kwargs)

Standard dash.dash_table.DataTable with sensible defaults to be used in Table.

Usage documentation

How to use Dash DataTable

Parameters:

  • data_frame (DataFrame) –

    DataFrame containing the data to be displayed.

Other Parameters:

  • **kwargs (Any) –

    Additional keyword arguments to be passed to the dash_table.DataTable component.

Returns:

  • DataTable –

    A dash.dash_table.DataTable component with sensible defaults.

Example 
import vizro.models as vm
from vizro.tables import dash_data_table

vm.Table(figure=dash_data_table(...))
Source code in src/vizro/tables/_dash_table.py 
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
@capture("table")
def dash_data_table(data_frame: pd.DataFrame, **kwargs: Any) -> dash_table.DataTable:
    """Standard `dash.dash_table.DataTable` with sensible defaults to be used in [`Table`][vizro.models.Table].

    Abstract: Usage documentation
        [How to use Dash DataTable](../user-guides/table.md#dash-datatable)

    Args:
        data_frame: DataFrame containing the data to be displayed.

    Keyword Arguments:
        **kwargs: Additional keyword arguments to be passed to the `dash_table.DataTable` component.

    Returns:
        A `dash.dash_table.DataTable` component with sensible defaults.

    Example:
        ```python
        import vizro.models as vm
        from vizro.tables import dash_data_table

        vm.Table(figure=dash_data_table(...))
        ```
    """
    defaults = {
        "columns": [{"name": col, "id": col} for col in data_frame.columns],
        "style_as_list_view": True,
        "style_cell": {"position": "static"},
        "style_data": {"border_bottom": "1px solid var(--bs-border-color)", "height": "40px"},
        "style_header": {
            "border_bottom": "1px solid var(--bs-border-color-translucent)",
            "border_top": "None",
            "height": "32px",
        },
        "style_data_conditional": [
            {
                "if": {"state": "active"},
                "backgroundColor": "var(--bs-primary-bg-subtle)",
                "border": "1px solid var(--bs-primary-bg-subtle)",
            }
        ],
    }
    kwargs = _set_defaults_nested(kwargs, defaults)
    return dash_table.DataTable(data=data_frame.to_dict("records"), **kwargs)