Skip to content

Action bar

Action bars are toolbars commonly used alongside data tables. They can display a primary action, a search bar, and a filter button. Filters are typically displayed within a flyout containing a window.

Filter
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque neque nobis quasi recusandae reprehenderit. Ad amet, blanditiis, delectus dolorem dolorum error, esse expedita explicabo mollitia quam quia quisquam reiciendis temporibus?

Required icons

filter
xmark

Props

is-resettable?: boolean
Indicates that the applied filter is resettable.

Emits

reset: []
Triggered when the filter reset button is clicked. This is not available if a custom filter opener button is used.

Slots

primary
A place for the primary action.

actions-end
The space at the end of the action bar.

actions-start
The space at the start of the action bar.

actions-after-search
The space after the search bar.

actions-before-search
The space before the search bar.

search
A place for the search bar.

filter ({
    readonly paneX: number;
    readonly paneY: number;
    readonly openerWidth: number;
    readonly openerHeight: number;
    close(): void;
})

A place for the filter, which is shown in a flyout.

filter-opener ({
    close(): void;
    open(): void;
    toggle(): void;
})

A place for the filter opener button.

Examples

Todo

Used components