add demo panel 9

Author: clarasb

chartlets.py/demo/my_extension/__init__.py

@@ -11,6 +11,7 @@
 from .my_panel_6 import panel as my_panel_6
 from .my_panel_7 import panel as my_panel_7
 from .my_panel_8 import panel as my_panel_8
+from .my_panel_9 import panel as my_panel_9
 
 
 ext = Extension(__name__)
@@ -22,3 +23,4 @@
 ext.add(my_panel_6)
 ext.add(my_panel_7)
 ext.add(my_panel_8)
+ext.add(my_panel_9)

chartlets.py/demo/my_extension/my_panel_9.py

@@ -0,0 +1,74 @@
+#  Copyright (c) 2019-2026 by Brockmann Consult Development team
+#  Permissions are hereby granted under the terms of the MIT License:
+#  https://opensource.org/licenses/MIT.
+
+
+from chartlets import Component, State
+from chartlets.components import (
+    Accordion,
+    Typography,
+    Box,
+    Table
+)
+from chartlets.components.table import TableColumn, TableRow
+
+
+from server.context import Context
+from server.panel import Panel
+
+
+panel = Panel(__name__, title="Panel I")
+
+
+@panel.layout(State("@app", ))
+def render_panel(
+    ctx: Context,
+) -> Component:
+
+    columns: list[TableColumn] = [
+        {"id": "id", "label": "ID", "sortDirection": "desc"},
+        {
+            "id": "firstName",
+            "label": "First Name",
+            "align": "left",
+            "sortDirection": "desc",
+        },
+        {"id": "lastName", "label": "Last Name", "align": "center"},
+        {"id": "age", "label": "Age"},
+    ]
+
+    rows: TableRow = [
+        ["1", "John", "Doe", 30],
+        ["2", "Jane", "Smith", 25],
+        ["3", "Peter", "Jones", 40],
+    ]
+
+    table = Table(id="table", rows=rows, columns=columns, hover=True)
+
+    info_text = Typography(id="info_text", children=["This is a text."])
+
+    accordion1 = Accordion(
+        id="accordion1",
+        label="Accordion No.1",
+        icon="arrow_drop_down",
+        children=[info_text],
+    )
+
+    accordion2 = Accordion(
+        id="accordion2",
+        label="Accordion No.2",
+        icon="arrow_drop_down",
+        # expanded=True,
+        # disabled=True
+        children=[table],
+    )
+
+    return Box(
+        style={
+            "display": "flex",
+            "flexDirection": "column",
+            "width": "100%",
+            "height": "100%",
+        },
+        children=[accordion1, accordion2],
+    )