Skip to content

Commit

Permalink
Add a tab switcher based on table data
Browse files Browse the repository at this point in the history
- Allows switching between tabs for an already filtered table.
- Also added cases when _not_ to use `use_column_data`
  • Loading branch information
mofojed committed Nov 12, 2024
1 parent a10e556 commit cde7899
Showing 1 changed file with 30 additions and 0 deletions.
30 changes: 30 additions & 0 deletions plugins/ui/docs/hooks/use_column_data.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down

0 comments on commit cde7899

Please sign in to comment.