Skip to content

Commit

Permalink
Added list_view actions examples (deephaven#445)
Browse files Browse the repository at this point in the history
  • Loading branch information
bmingles committed May 21, 2024
1 parent 75691dc commit 6881f0f
Showing 1 changed file with 107 additions and 0 deletions.
107 changes: 107 additions & 0 deletions plugins/ui/docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down

0 comments on commit 6881f0f

Please sign in to comment.