Update DEMO.md to include tabs example

deephaven · Dec 13, 2023 · fc84ae7 · fc84ae7
1 parent a1769b2
commit fc84ae7
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 14 deletions.
diff --git a/docker/data/storage/notebooks/DEMO.md b/docker/data/storage/notebooks/DEMO.md
@@ -268,3 +268,32 @@ def order_table():
 
 result = order_table()
 ```
+
+## Using Tabs
+
+You can add [Tabs](https://react-spectrum.adobe.com/react-spectrum/Tabs.html) within a panel by using the `ui.tabs` method. In this example, we create a tabbed panel with multiple tabs:
+
+- Unfiltered table
+- Table filtered on sym `CAT`. We also include an icon in the tab header.
+- Table filtered on sym `DOG`
+
+```python
+@ui.component
+def table_tabs(source):
+    return ui.tabs(
+        ui.tab_list(
+            ui.item("Unfiltered", key="Unfiltered"),
+            ui.item(ui.icon("vsGithubAlt"), "CAT", key="CAT"),
+            ui.item("DOG", key="DOG"),
+        ),
+        ui.tab_panels(
+            ui.item(source, key="Unfiltered"),
+            ui.item(source.where("sym=`CAT`"), key="CAT"),
+            ui.item(source.where("sym=`DOG`"), key="DOG"),
+        ),
+        flex_grow=1,
+    )
+
+
+result = table_tabs(stocks)
+```
diff --git a/plugins/ui/examples/README.md b/plugins/ui/examples/README.md
@@ -729,20 +729,18 @@ stocks = dx.data.stocks()
 
 @ui.component
 def table_tabs(source):
-    return ui.panel(
-        ui.tabs(
-            ui.tab_list(
-                ui.item("Unfiltered", key="Unfiltered"),
-                ui.item(ui.icon("vsGithubAlt"), "CAT", key="CAT"),
-                ui.item("DOG", key="DOG"),
-            ),
-            ui.tab_panels(
-                ui.item(source, key="Unfiltered"),
-                ui.item(source.where("sym=`CAT`"), key="CAT"),
-                ui.item(source.where("sym=`DOG`"), key="DOG"),
-            ),
-            flex_grow=1,
-        )
+    return ui.tabs(
+        ui.tab_list(
+            ui.item("Unfiltered", key="Unfiltered"),
+            ui.item(ui.icon("vsGithubAlt"), "CAT", key="CAT"),
+            ui.item("DOG", key="DOG"),
+        ),
+        ui.tab_panels(
+            ui.item(source, key="Unfiltered"),
+            ui.item(source.where("sym=`CAT`"), key="CAT"),
+            ui.item(source.where("sym=`DOG`"), key="DOG"),
+        ),
+        flex_grow=1,
     )