Data

AppColumnMenu

A Columns menu for a table: one checkbox per optional column, so people choose what they see.

<app-column-menu for="invoices" view-key="invoices" />

A wide table shows more than any one person needs. <app-column-menu> is a small Columns button for the strip above it: open it and tick the optional columns you want. Only columns you mark data-hideable appear in the menu, so the ones that identify a row can never be hidden by accident.

Point for at the table's id and the menu does the rest in the browser: it lists the hideable headers, hides the columns people untick and, when you give it a view-key, remembers the choice. The React <AppColumnMenu> is handed the same list by the useTableView hook. Same look on every Webority surface.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server. Open the Columns button above the table and untick a column. The markup underneath is the exact call that produced the menu above it. Give it a view-key and the choice survives a reload.

label view-key

Building	Owner	Floors	Status
Corporate Office	Asha Rao	12	Draft
Warehouse Annexe	Vikram Shah	3	Compliant
Server Room	Asha Rao	1	Draft

<app-column-menu for="cm-pg" />
<app-data-table id="cm-pg">
    <thead><tr>…<th data-key="owner" data-hideable>Owner</th>…</tr></thead>
</app-data-table>

No columns or hiddenColumns hereReact's columns, hiddenColumns and onToggle have no Razor attributes: the columns come from the linked table's <th data-hideable> headers, and the hidden list is read from the browser by the menu itself.

Above a table

Put the menu in the actions side of <app-table-toolbar> and point for at the table's id. Mark each optional header with data-key and data-hideable.

Hide the Owner or Floors column

Open the Columns button and untick a column. The choice survives a reload, because the view-key remembers it in this browser.

Building	Owner	Floors	Status
Corporate Office	Asha Rao	12	Draft
Warehouse Annexe	Vikram Shah	3	Compliant
Server Room	Asha Rao	1	Draft
Canteen Block	Meera Iyer	2	Compliant

Show code

<app-table-toolbar>
    <app-table-toolbar-actions>
        <app-column-menu for="buildings" view-key="buildings"></app-column-menu>
    </app-table-toolbar-actions>
</app-table-toolbar>
<app-data-table id="buildings">
    <thead><tr>
        <th>Building</th>
        <th data-key="owner" data-hideable>Owner</th>
        <th data-key="floors" data-hideable>Floors</th>
    </tr></thead>
    …
</app-data-table>

Mark the optional columns hideableA header needs both data-key (the name the menu and the remembered view use) and data-hideable. A header without them always shows and never appears in the menu.

The view hook

On Razor there is no hook to call: the menu keeps the hidden columns itself. The React side uses useTableView for the same job, and both write the same browser entry.

view-key names the view. Two tables that share a key share a view, so pick a key per table.
The choice is stored in localStorage under wui-view:<view-key> as { "hidden": [...], "sort": { "key", "dir" } }. Without a view-key nothing is remembered.
React's useTableView(viewKey, { sort }) returns hiddenColumns, toggleColumn, sort and setSort, and reads the same entry. A view built on one surface opens as it was left on the other.

Stored under wui-view:<view-key>When storage is blocked (private mode, site data off) the menu still works for that visit, it just is not remembered.

When to use

Use it when

A table has columns that only some people need, such as an owner, a created date or an internal code.
People return to the same table and expect it the way they left it.
The columns that identify a row must stay visible while the rest are optional.

Reach for something else when

The table has only a few columns that all matter. → no menu
You want to narrow which rows show. → filters in app-table-toolbar
You want the table in a different order. → sortable on app-data-table

Best practices

Building	Owner
Corporate Office	Asha Rao

One Columns button in the toolbar actions, beside search and export.

Don't

Owner

Floors

A permanent row of checkboxes takes space above the table and pushes the data down.

Keep identifying columns out of the menuLeave data-hideable off the header people use to recognise a row (the name, the number). A table with that column hidden is hard to read and harder to support.

Every option

The whole surface of the component, one cell per value: which columns are hidden, and the name on the button. Razor cannot pre-hide a column, so the hidden state is live: untick a box in the cell's menu.

hiddenColumns: which columns are shown

hiddenColumns none: every column shown

Building	Owner	Floors	Status
Corporate Office	Asha Rao	12	Draft
Warehouse Annexe	Vikram Shah	3	Compliant

hiddenColumns one hidden (owner): untick Owner to drive it

Building	Owner	Floors	Status
Corporate Office	Asha Rao	12	Draft
Warehouse Annexe	Vikram Shah	3	Compliant

label: the button name

label default (Columns)

label="Choose columns"

Attributes

Attribute	Type	Default	Description
for	`string`	-	The `id` of the `<app-data-table>` whose columns this menu controls. Replaces React's `columns` and `hiddenColumns`.
view-key	`string`	-	Names the remembered view, stored in this browser under `wui-view:<view-key>`. React's `useTableView` uses the same key. Leave it off to remember nothing.
label	`string`	'Columns'	The accessible name and tooltip of the button, and the heading of the menu.
th data-key	`string`	-	On a `<th>` in the linked table: the column's name in the menu and in the remembered view. Equivalent to a React column's `key`.
th data-hideable	`boolean`	-	On a `<th>` that also has `data-key`: adds a checkbox for the column. Equivalent to a React column's `hideable`.
hiddenColumns	`string[]`	-	React-only. Razor reads the hidden columns from the remembered view; there is no attribute.
onToggle	`(key) => void`	-	React-only. The Razor menu hides and shows the columns itself.