Data

AppTableToolbar

The strip above a table: filters on the left, search and actions on the right, and a bulk bar while rows are selected.

<app-table-toolbar for="invoices"><app-table-toolbar-filters>…</app-table-toolbar-filters></app-table-toolbar>

Most lists need the same strip above them: a way to narrow the rows, a search box, a few actions. <app-table-toolbar> is that strip. Filters sit on the left, search and actions on the right. The moment a row is selected the same strip becomes a bulk bar: "3 selected", the actions that apply to a selection, and a Clear button.

Both rows are always in the markup and one is hidden, so the swap never shifts the table below it. The Razor <app-table-toolbar for="tableId"> watches the linked <app-data-table selectable="true"> and swaps itself; the React <AppTableToolbar> takes selectedCount from your selection state. Same look on every Webority surface.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server. Tick a row in the table below the toolbar to swap the strip for the bulk bar. The markup underneath is the exact call that produced the toolbar above it.

filters actions bulk-actions

Building	Status
Corporate Office	Draft
Warehouse Annexe	Compliant
Server Room	Draft

<app-table-toolbar for="tb-pg">
    <app-table-toolbar-filters>…</app-table-toolbar-filters>
    <app-table-toolbar-actions>…</app-table-toolbar-actions>
    <app-table-toolbar-bulk>…</app-table-toolbar-bulk>
</app-table-toolbar>
<app-data-table id="tb-pg" selectable="true">…</app-data-table>

No selectedCount hereReact's selectedCount and onClearSelection have no Razor attributes: the selection lives in the linked table, and the bar swaps itself from that table's selectionchange event. Clear is always rendered and unticks every row.

Above a table

Place the toolbar directly above the table and point for at the table's id. The table must be selectable="true"; it keeps owning the selection itself.

A filterable, selectable table

Tick rows: the strip turns into a bulk bar and Clear unticks everything.

Building	Status
Corporate Office	Draft
Warehouse Annexe	Compliant
Server Room	Draft
Canteen Block	Compliant
Logistics Hub	Compliant

Show code

<app-table-toolbar for="buildings">
    <app-table-toolbar-filters>
        <app-segmented name="status" value="all" label="Filter by status" size="sm">…</app-segmented>
    </app-table-toolbar-filters>
    <app-table-toolbar-actions>
        <app-search name="q" placeholder="Search buildings" aria-label="Search buildings"></app-search>
        <app-action-icon icon="download" label="Export all"></app-action-icon>
    </app-table-toolbar-actions>
    <app-table-toolbar-bulk>
        <app-button size="sm" variant="outline" left-icon="download">Export</app-button>
    </app-table-toolbar-bulk>
</app-table-toolbar>
<app-data-table id="buildings" selectable="true">…</app-data-table>

for must match the table's idThe bar listens to the selection of the table whose id equals for. Without a matching selectable table it stays a plain toolbar.

The bulk bar

While one or more rows are ticked, the filters and actions give way to the count, your bulk slot and a Clear button.

Three rows selected

Tick three rows below. Only actions that make sense for a selection belong here: send, export, delete.

Building	Status
Corporate Office	Draft
Warehouse Annexe	Compliant
Server Room	Draft

Show code

<app-table-toolbar for="buildings">
    <app-table-toolbar-bulk>
        <app-button size="sm" variant="outline" left-icon="send">Send reminder</app-button>
        <app-button size="sm" variant="outline" left-icon="download">Export</app-button>
    </app-table-toolbar-bulk>
</app-table-toolbar>

Clear is always thereUnlike React, where Clear appears only when you pass onClearSelection, the Razor bar always renders it. It unticks every row of the linked table.

When to use

Use it when

A table needs filters, a search box or export above it.
Rows are selectable and the selection has actions of its own.
You want the filter strip and the bulk bar to share one place, so the table never jumps.

Reach for something else when

The table has no filters, search or selection. → no toolbar
You are paging through rows. → app-table-pagination under the table
The action belongs to one row, not a selection. → row actions in the table

Best practices

Building
Corporate Office
Warehouse Annexe

Bulk actions appear only while rows are selected, with the count and a way out.

Don't

A row of always-visible, disabled bulk buttons takes space and explains nothing until something is selected.

Filters narrow the rows on the left; search and actions sit on the right.

Don't

AllDraftCompliant

Search first and filters last, scattered with no shared strip: the eye has no fixed place to look.

Every option

The whole surface of the component, one cell per value: the selection swap, the Clear button, and which sides of the strip are filled. Razor cannot pre-render a selection, so the selected states are live: tick rows in the cell's table.

selectedCount: toolbar or bulk bar

selectedCount=0 (toolbar): no rows ticked

selectedCount=3 (bulk bar): tick rows to drive it

Building
Corporate Office
Warehouse Annexe
Server Room

onClearSelection: the Clear button

Clear always rendered: tick rows to see it

Building
Corporate Office
Warehouse Annexe

onClearSelection: no Razor attribute

Razor always renders Clear and wires it to the linked table; there is no way to omit it.

slots: which sides are filled

app-table-toolbar-filters only

app-table-toolbar-actions only

filters + actions

Attributes

Attribute	Type	Default	Description
for	`string`	-	The `id` of the `<app-data-table selectable="true">` this toolbar serves. The bar swaps to the bulk bar while that table has rows selected and keeps "N selected" current. Replaces React's `selectedCount`.
app-table-toolbar-filters	`child`	-	The left side: status segments, chips, a filter menu. Razor equivalent of React's `filters`.
app-table-toolbar-actions	`child`	-	The right side: search, export, a columns menu. Razor equivalent of React's `actions`.
app-table-toolbar-bulk	`child`	-	The buttons shown in the bulk bar, beside the count. Razor equivalent of React's `bulkActions`.
selectedCount	`number`	-	React-only. Razor derives the count from the linked table's selection; there is no attribute.
onClearSelection	`() => void`	-	React-only. Razor always renders a Clear button and wires it to the linked table.