From 6881f0f20cb8ffaa3db2dda3f44246fb64f04775 Mon Sep 17 00:00:00 2001
From: Brian Ingles <brianingles@deephaven.io>
Date: Tue, 21 May 2024 12:40:51 -0500
Subject: [PATCH] Added list_view actions examples (#445)

---
 plugins/ui/docs/README.md | 107 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 107 insertions(+)

diff --git a/plugins/ui/docs/README.md b/plugins/ui/docs/README.md
index 8c473c2f3..984d42084 100644
--- a/plugins/ui/docs/README.md
+++ b/plugins/ui/docs/README.md
@@ -509,6 +509,113 @@ lv_table_source = ui_list_view_table_source()
 
 ![Use a list view to select from a table source](_assets/lv_table_source.png)
 
+## ListView (list action group)
+
+A list view can take a `list_action_group` as its `actions` prop.
+
+```python
+from deephaven import time_table, ui
+import datetime
+
+# Ticking table with initial row count of 200 that adds a row every second
+initial_row_count = 200
+_column_types = time_table(
+    "PT1S",
+    start_time=datetime.datetime.now() - datetime.timedelta(seconds=initial_row_count),
+).update(
+    [
+        "Id=new String(`key-`+i)",
+        "Display=new String(`Display `+i)",
+    ]
+)
+
+# `ui.list_view`` with `ui.list_action_group` actions
+@ui.component
+def ui_list_view_action_group():
+    value, set_value = ui.use_state(["key-2", "key-4", "key-5"])
+
+    action_item_keys, set_action_item_idx = ui.use_state(["", ""])
+    on_action = ui.use_callback(
+        lambda action_key, item_key: set_action_item_idx([action_key, str(item_key)]),
+        [],
+    )
+
+    lv = ui.list_view(
+        _column_types,
+        key_column="Id",
+        label_column="Display",
+        aria_label="List View",
+        on_change=set_value,
+        selected_keys=value,
+        actions=ui.list_action_group(
+            "Edit",
+            "Delete",
+            on_action=on_action,
+        ),
+    )
+
+    text_selection = ui.text("Selection: " + ", ".join(map(str, value)))
+    text_action = ui.text("Action: " + " ".join(map(str, action_item_keys)))
+
+    return lv, text_selection, text_action
+
+
+lv_action_group = ui_list_view_action_group()
+```
+
+## ListView (list action menu)
+A list view can take a `list_view_menu` as its `actions` prop.
+
+```python
+from deephaven import time_table, ui
+import datetime
+
+# Ticking table with initial row count of 200 that adds a row every second
+initial_row_count = 200
+_column_types = time_table(
+    "PT1S",
+    start_time=datetime.datetime.now() - datetime.timedelta(seconds=initial_row_count),
+).update(
+    [
+        "Id=new String(`key-`+i)",
+        "Display=new String(`Display `+i)",
+    ]
+)
+
+# `ui.list_view`` with `ui.list_action_menu` actions
+@ui.component
+def ui_list_view_action_menu():
+    value, set_value = ui.use_state(["key-2", "key-4", "key-5"])
+
+    action_item_keys, set_action_item_idx = ui.use_state(["", ""])
+    on_action = ui.use_callback(
+        lambda action_key, item_key: set_action_item_idx([action_key, str(item_key)]),
+        [],
+    )
+
+    lv = ui.list_view(
+        _column_types,
+        key_column="Id",
+        label_column="Display",
+        aria_label="List View",
+        on_change=set_value,
+        selected_keys=value,
+        actions=ui.list_action_menu(
+            "Edit",
+            "Delete",
+            on_action=on_action,
+        ),
+    )
+
+    text_selection = ui.text("Selection: " + ", ".join(map(str, value)))
+    text_action = ui.text("Action: " + " ".join(map(str, action_item_keys)))
+
+    return lv, text_selection, text_action
+
+
+lv_action_menu = ui_list_view_action_menu()
+```
+
 ## Form (two variables)
 
 You can have state with multiple different variables in one component. This example creates a [text field](https://react-spectrum.adobe.com/react-spectrum/TextField.html) and a [slider](https://react-spectrum.adobe.com/react-spectrum/Slider.html), and we display the values of both of them.