Column browser

A column browser component that visualizes tree-like models through concatenated columns. In contrast to a tree view, the control visualizes a single selection path at a time.


Description

The column browser requires a data source of type ColumnsDataSource. Use either an observable or a data source if the data is subject to changes. Currently, the data browser requires the data type to be the same for each level, i.e. hierarchical data of different types is not support yet.

Each column can have a distinct title. Add those via the titles input.

The component supports several keyboard shortcuts by passing down all keyboard events using the keyboardEvents input. These are:

Filter the column items by passing in a list of filter strings using the filter input.


Example with filter and keyboard navigation


Example with delayed loading


Column browser result: {{columnBrowserSelection}}