PyCafe - Dash - Interactive Countries Table with Dash and iTables

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
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
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
"""
This is an example Dash application in which we update the table.

Launch the app by running `python 3_update_table.py`.
"""

import logging

from dash import Dash, Input, Output, State, callback, callback_context, dcc, html

from itables.dash import ITable, ITableOutputs, updated_itable_outputs
from itables.sample_dfs import get_countries

logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
logger.setLevel(logging.DEBUG)

app = Dash(__name__)

df = get_countries(html=False)

# Create the layout with sidebar
app.layout = html.Div(
    [
        html.Div(
            className="container",
            children=[
                # Sidebar
                html.Div(
                    className="sidebar",
                    children=[
                        html.H2("Controls"),
                        html.Label("Table Options:"),
                        dcc.Checklist(
                            ["Select", "Buttons", "HTML", "Fixed Columns"],
                            ["Select"],
                            id="checklist",
                            style={"marginBottom": "20px"},
                        ),
                        html.Label("Table Caption:"),
                        dcc.Input(
                            id="caption",
                            value="table caption",
                            style={"width": "100%", "marginBottom": "20px"},
                        ),
                    ],
                ),
                # Main content
                html.Div(
                    className="main-content",
                    children=[
                        html.H1("ITable in a Dash application"),
                        ITable(id="my_dataframe"),
                        html.Div(id="output", style={"marginTop": "20px"}),
                    ],
                ),
            ],
        )
    ]
)


@callback(
    ITableOutputs("my_dataframe"),
    [
        Input("checklist", "value"),
        Input("caption", "value"),
        State("my_dataframe", "selected_rows"),
        State("my_dataframe", "dt_args"),
    ],
)
def update_table(checklist, caption, selected_rows, dt_args):
    if checklist is None:
        checklist = []

    kwargs = {}

    # When df=None and when the dt_args don't change, the table is not updated
    if callback_context.triggered_id in {None, "checklist"}:
        kwargs["df"] = get_countries(html="HTML" in checklist)

    kwargs["select"] = "Select" in checklist
    if "Buttons" in checklist:
        kwargs["buttons"] = ["copyHtml5", "csvHtml5", "excelHtml5"]

    if "Fixed Columns" in checklist:
        kwargs["fixedColumns"] = {
            "left": 1,
            "right": 1,
        }
        kwargs['scrollX'] = True

    return updated_itable_outputs(
        caption=caption, selected_rows=selected_rows, current_dt_args=dt_args, **kwargs
    )


@callback(
    Output("output", "children"),
    Input("my_dataframe", "selected_rows"),
)
def show_selection(selected_rows):
    return f"Selected rows: {selected_rows}"


if __name__ == "__main__":
    app.run(debug=True)
Py.Cafe

itables_for_dash

Interactive Countries Table with Dash and iTables
