feat: ui.table context menu items (deephaven#522)

Fixes deephaven#321

Here's an example with a context menu item on the row and a sub-menu
action item on the header

```py
from deephaven import empty_table, time_table, ui

@ui.component
def my_comp():
    t = time_table("PT1S").update(["X=i", "Y=i"])

    return ui.table(
        t,
        context_items=[{ "title": "Test", "action": lambda d: print(d)}],
        context_column_header_items=[
            {
                "title": "Header",
                "actions": [{ "title": "Header-sub", "action": lambda d: print(d)}]
            }
        ]
    )

c = my_comp()
```

plugins/ui/docs/README.md

@@ -204,6 +204,7 @@ my_checkbox = ui_checkbox()
 ![Checkbox](_assets/checkbox.png)
 
 ## ActionGroup (string values)
+
 An ActionGroup is a grouping of ActionButtons that are related to one another.
 
 ```python
@@ -227,6 +228,7 @@ my_action_group = ui_action_group()
 ```
 
 ## ActionMenu (string values)
+
 ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
 
 ```python
@@ -356,6 +358,7 @@ def ui_picker_table():
 
 pick_table = ui_picker_table()
 ```
+
 ![Use a picker to select from a table](_assets/pick_table.png)
 
 ## Picker (item table source)
@@ -402,6 +405,7 @@ pick_table_source = ui_picker_table_source()
 ![Use a picker to select from a table source](_assets/pick_table_source.png)
 
 ## ListView (string values)
+
 A list view that can be used to create a list of selectable items. Here's a basic example for selecting from a list of string values and displaying the selected key in a text field.
 
 ```python
@@ -487,6 +491,7 @@ def ui_list_view_table():
 
 lv_table = ui_list_view_table()
 ```
+
 ![Use a list view to select from a table](_assets/lv_table.png)
 
 ## ListView (item table source)
@@ -594,6 +599,7 @@ my_list_view_action_group = ui_list_view_action_group()
 ```
 
 ## ListView (list action menu)
+
 A list view can take a `list_action_menu` as its `actions` prop.
 
 ```python
@@ -1283,6 +1289,72 @@ te = ui.table(
 
 ![Table events](table_events.png)
 
+### ui.table Context Menu
+
+Items can be added to the bottom of the `ui.table` context menu (right-click menu) by using the `context_menu` or `context_header_menu` props. The `context_menu` prop adds items to the cell context menu, while the `context_header_menu` prop adds items to the column header context menu.
+
+Menu items must have a `title` and either an `action` or `actions` prop. They may have an `icon` which is the name of the icon that will be passed to `ui.icon`.
+
+The `action` prop is a callback that is called when the item is clicked and receives info about the cell that was clicked when the menu was opened.
+
+The `actions` prop is an array of menu items that will be displayed in a sub-menu. Sub-menus can contain other sub-menus for a nested menu.
+
+Menu items can be dynamically created by instead passing a function as the context item. The function will be called with the data of the cell that was clicked when the menu was opened, and must return the menu items or None.
+
+```py
+from deephaven import ui
+import deephaven.plot.express as dx
+
+t = ui.table(
+    dx.data.stocks(),
+    context_menu=[
+        {
+            "title": "Context item",
+            "icon": "dhTruck",
+            "action": lambda d: print("Context item", d)
+        },
+        {
+            "title": "Nested menu",
+            "actions": [
+                {
+                    "title": "Nested item 1",
+                    "action": lambda d: print("Nested item 1", d)
+                }
+                {
+                    "title": "Nested item 2",
+                    "icon": "vsCheck"
+                    "action": lambda d: print("Nested item 2", d)
+                }
+            ]
+        }
+    ],
+    context_header_menu={
+        "title": "Header context menu item",
+        "action": lambda d: print("Header context menu item", d)
+    }
+)
+```
+
+The following example shows creating context menu items dynamically so that the item only appears on the `sym` column. If multiple functions are passed in a list, each will be called and any items they return will be added to the context menu.
+
+```py
+from deephaven import ui
+import deephaven.plot.express as dx
+
+def create_context_menu(data):
+    if data["column_name"] == "sym":
+        return {
+            "title": f"Print {data['value']}",
+            "action": lambda d: print(d['value'])
+        }
+    return None
+
+t = ui.table(
+    dx.data.stocks(),
+    context_menu=create_context_menu
+)
+```
+
 ## Re-using components
 
 In a previous example, we created a text_filter_table component. We can re-use that component, and display two tables with an input filter side-by-side:

plugins/ui/src/deephaven/ui/components/table.py

@@ -8,6 +8,7 @@
     ColumnPressCallback,
     QuickFilterExpression,
     RowPressCallback,
+    ResolvableContextMenuItem,
 )
 
 
@@ -23,6 +24,12 @@ def table(
     quick_filters: dict[ColumnName, QuickFilterExpression] | None = None,
     show_quick_filters: bool = False,
     show_search: bool = False,
+    context_menu: (
+        ResolvableContextMenuItem | list[ResolvableContextMenuItem] | None
+    ) = None,
+    context_header_menu: (
+        ResolvableContextMenuItem | list[ResolvableContextMenuItem] | None
+    ) = None,
 ) -> UITable:
     """
     Customization to how a table is displayed, how it behaves, and listen to UI events.
@@ -48,6 +55,12 @@ def table(
         quick_filters: The quick filters to apply to the table. Dictionary of column name to filter value.
         show_quick_filters: Whether to show the quick filter bar by default.
         show_search: Whether to show the search bar by default.
+        context_menu: The context menu items to show when a cell is right clicked.
+                      May contain action items or submenu items.
+                      May also be a function that receives the cell data and returns the context menu items or None.
+        context_header_menu: The context menu items to show when a column header is right clicked.
+                             May contain action items or submenu items.
+                             May also be a function that receives the column header data and returns the context menu items or None.
     """
     props = locals()
     del props["table"]

plugins/ui/src/deephaven/ui/elements/UITable.py

@@ -18,12 +18,8 @@
     AggregationOperation,
     QuickFilterExpression,
     Color,
-    ContextMenuAction,
-    CellIndex,
     CellPressCallback,
     ColumnPressCallback,
-    RowData,
-    ContextMenuMode,
     DataBarAxis,
     DataBarValuePlacement,
     DataBarDirection,
@@ -307,42 +303,6 @@ def color_row(
         """
         raise NotImplementedError()
 
-    def context_menu(
-        self,
-        items: (
-            ContextMenuAction
-            | list[ContextMenuAction]
-            | Callable[
-                [CellIndex, RowData], ContextMenuAction | list[ContextMenuAction]
-            ]
-        ),
-        mode: ContextMenuMode = "CELL",
-    ) -> "UITable":
-        """
-        Add custom items to the context menu.
-        You can provide a list of actions that always appear,
-        or a callback that can process the selection and send back menu items asynchronously.
-        You can also specify whether you want the menu items provided for a cell context menu,
-        a header context menu, or some combination of those.
-        You can also chain multiple sets of menu items by calling `.context_menu` multiple times.
-
-        Args:
-            items: The items to add to the context menu.
-                May be a single `ContextMenuAction`, a list of `ContextMenuAction` objects,
-                or a callback function that takes the cell index and row data and returns either a single
-                `ContextMenuAction` or a list of `ContextMenuAction` objects.
-            mode: Which specific context menu(s) to add the menu item(s) to.
-                Can be one or more modes.
-                Using `None` will add menu items in all cases.
-                `CELL`: Triggered from a cell.
-                `ROW_HEADER`: Triggered from a row header.
-                `COLUMN_HEADER`: Triggered from a column header.
-
-        Returns:
-            A new UITable
-        """
-        raise NotImplementedError()
-
     def data_bar(
         self,
         col: str,

plugins/ui/src/deephaven/ui/types/types.py

@@ -1,6 +1,4 @@
-import datetime
-import pandas
-import numpy
+import sys
 from typing import (
     Any,
     Dict,
@@ -10,9 +8,18 @@
     List,
     Tuple,
     Callable,
-    TypedDict,
     Sequence,
 )
+
+if sys.version_info < (3, 11):
+    from typing_extensions import TypedDict, NotRequired
+else:
+    from typing import TypedDict, NotRequired
+
+import datetime
+import pandas
+import numpy
+
 from deephaven import SortDirection
 from deephaven.dtypes import DType
 
@@ -54,6 +61,105 @@ class RowDataValue(CellData):
     """
 
 
+class ContextMenuActionParams(TypedDict):
+    """
+    Parameters given to a context menu action
+    """
+
+    value: Any
+    """
+    Value of the cell.
+    """
+
+    text_value: str
+    """
+    Rendered text for the cell.
+    """
+
+    column_name: str
+    """
+    Name of the column.
+    """
+
+    is_column_header: bool
+    """
+    Whether the context menu was opened on a column header.
+    """
+
+    is_row_header: bool
+    """
+    Whether the context menu was opened on a row header.
+    """
+
+
+ContextMenuAction = Callable[[ContextMenuActionParams], None]
+"""
+The action to execute when the context menu item is clicked.
+"""
+
+
+class ContextMenuItemBase(TypedDict):
+    """
+    Base props that context menu items and submenu items share.
+    """
+
+    title: str
+    """
+    Title to display for the action.
+    """
+
+    icon: NotRequired[str]
+    """
+    The name of the icon to display next to the action.
+    The name must be a valid name for ui.icon.
+    """
+
+    description: NotRequired[str]
+    """
+    Description for the action. Will be used as a tooltip for the action.
+    """
+
+
+class ContextMenuActionItem(ContextMenuItemBase):
+    """
+    An item that appears in a context menu and performs an action when clicked.
+    """
+
+    action: ContextMenuAction
+    """
+    Action to run when the menu item is clicked.
+    """
+
+
+class ContextMenuSubmenuItem(ContextMenuItemBase):
+    """
+    An item that contains a submenu for a context menu.
+    """
+
+    actions: List["ResolvableContextMenuItem"]
+    """
+    A list of actions that will form the submenu for the item.
+    """
+
+
+ContextMenuItem = Union[ContextMenuActionItem, ContextMenuSubmenuItem]
+"""
+An item that can appear in a context menu.
+May contain an action item or a submenu item.
+"""
+
+ResolvableContextMenuItem = Union[
+    ContextMenuItem,
+    Callable[
+        [ContextMenuActionParams], Union[ContextMenuItem, List[ContextMenuItem], None]
+    ],
+]
+"""
+A context menu item or a function that returns a list of context menu items or None.
+This can be used to dynamically generate context menu items based on the cell the menu is opened on.
+"""
+
+
 class SliderChange(TypedDict):
     """
     Data for a range slider change event.
@@ -118,7 +224,6 @@ class SliderChange(TypedDict):
 DeephavenColor = Literal["salmon", "lemonchiffon"]
 HexColor = str
 Color = Union[DeephavenColor, HexColor]
-ContextMenuAction = Dict[str, Any]
 ContextMenuModeOption = Literal["CELL", "ROW_HEADER", "COLUMN_HEADER"]
 ContextMenuMode = Union[ContextMenuModeOption, List[ContextMenuModeOption], None]
 DataBarAxis = Literal["PROPORTIONAL", "MIDDLE", "DIRECTIONAL"]

plugins/ui/src/js/package.json

@@ -41,21 +41,21 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@deephaven/chart": "^0.81.1",
-    "@deephaven/components": "^0.81.1",
-    "@deephaven/dashboard": "^0.81.1",
-    "@deephaven/dashboard-core-plugins": "^0.81.1",
-    "@deephaven/grid": "^0.81.0",
-    "@deephaven/icons": "^0.81.0",
-    "@deephaven/iris-grid": "^0.81.1",
-    "@deephaven/jsapi-bootstrap": "^0.81.1",
-    "@deephaven/jsapi-components": "^0.81.1",
-    "@deephaven/jsapi-types": "^1.0.0-dev0.34.3",
-    "@deephaven/log": "^0.81.0",
-    "@deephaven/plugin": "^0.81.1",
-    "@deephaven/react-hooks": "^0.81.0",
-    "@deephaven/redux": "^0.81.1",
-    "@deephaven/utils": "^0.81.0",
+    "@deephaven/chart": "^0.84.0",
+    "@deephaven/components": "^0.84.0",
+    "@deephaven/dashboard": "^0.84.0",
+    "@deephaven/dashboard-core-plugins": "^0.84.0",
+    "@deephaven/grid": "^0.84.0",
+    "@deephaven/icons": "^0.84.0",
+    "@deephaven/iris-grid": "^0.84.0",
+    "@deephaven/jsapi-bootstrap": "^0.84.0",
+    "@deephaven/jsapi-components": "^0.84.0",
+    "@deephaven/jsapi-types": "^1.0.0-dev0.35.0",
+    "@deephaven/log": "^0.84.0",
+    "@deephaven/plugin": "^0.84.0",
+    "@deephaven/react-hooks": "^0.84.0",
+    "@deephaven/redux": "^0.84.0",
+    "@deephaven/utils": "^0.84.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@react-types/shared": "^3.22.0",
     "classnames": "^2.5.1",