From cde78997eaf342311f2c7bb851c6accd4f7b6d30 Mon Sep 17 00:00:00 2001 From: mikebender Date: Tue, 12 Nov 2024 14:14:03 -0500 Subject: [PATCH] Add a tab switcher based on table data - Allows switching between tabs for an already filtered table. - Also added cases when _not_ to use `use_column_data` --- plugins/ui/docs/hooks/use_column_data.md | 30 ++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/plugins/ui/docs/hooks/use_column_data.md b/plugins/ui/docs/hooks/use_column_data.md index 216dbce6d..b1f43d817 100644 --- a/plugins/ui/docs/hooks/use_column_data.md +++ b/plugins/ui/docs/hooks/use_column_data.md @@ -23,6 +23,36 @@ In the above example, `ui_table_column` is a component that listens to the last 1. **Use `use_column_data` for listening to table updates**: If you need to listen to a table for one column of data, use `use_column_data`. 2. **Use table operations to filter to one column**: If your table has multiple rows and columns, use table operations such as `.where` and `.select` to filter to the column you want to listen to. `use_column_data` always uses the first column of the table. +3. **Do not use `use_column_data` with [`list_view`](../components/list_view.md) or [`picker`](../components/picker.md)**: Some components are optimized to work with large tables of data, and will take a table passed in directly as their data source, only pulling in the options currently visible to the user. In those cases, pass the table directly to the component, otherwise you will fetch the entire column of data unnecessarily. + +## Tab switcher with `use_column_data` + +In the example below, use the `use_column_data` hook to get all the options for the `Exchange` columns, then build tabs for each option. When you click on a tab, the table is filtered to show only the rows where the `Exchange` column matches the tab name. + +```python +from deephaven import ui +from deephaven.table import Table +from deephaven.plot import express as dx + + +@ui.component +def ui_table_tabs(source: Table, column_name: str): + table_options = ui.use_memo( + lambda: source.select_distinct("Exchange"), [source, column_name] + ) + exchanges = ui.use_column_data(table_options) + + return ui.tabs( + *[ + ui.tab(source.where(f"{column_name}=`{exchange}`"), title=exchange) + for exchange in exchanges + ] + ) + + +_stocks = dx.data.stocks() +table_tabs = ui_table_tabs(_stocks, "Exchange") +``` ## API Reference