Filters panel

A container for table filters

Demo

Header	Header	Header	Header	Header	Header
Cell text	Cell textSecondary text	Cell text	Cell text	90,600	Cell text
Cell text	Cell textSecondary text	Cell text	Cell text	20,150,421	Cell text
Cell text	Cell textSecondary text	Cell text	Cell text	118,252,800	Cell text

API

Tag

Name	Description
`<s-filters-panel>`	Custom Element, accepts any HTML content.

Slots

Name	Required	Description
`filters-panel-content`		Body content

Attributes

Name	Value	Required	Description
`open`	Boolean attribute		If present, the filters panel will be opened. When the open attribute is not set, the filters panel won't be shown to the user.
`i18n`	string		A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Properties

Name	Value	Required	Description
`open`	Boolean attribute		If present, the filters panel will be opened. When the open attribute is not set, the filters panel won't be shown to the user.
`i18n`	object		A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Events

Name	Detail	Description
`s-dismiss`	The closed filters panel's `id`	Fires after the filters panel is closed, which happens when the user presses the Escape key or clicks the dismiss button.
`s-reset`	The filters panel's `id`	Fires when the reset button is pressed.
`s-apply`	The filters panel's `id`	Fires when the done button is pressed.

Demo

API

Tag

Name
`<SFiltersPanel>`

Slots

Name	Required	Description
`filters-panel-content`		Body content

Props

Name	Value	Required	Description
`open`	Boolean		If `true`, the filters panel will be opened. When the open attribute is not set, the filters panel won't be shown to the user.
`i18n`	object		A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.
`onS-dismiss`	Function		Handles the `s-dismiss` event that is fired when the filters panel is closed.
`onS-reset`	Function		Handles the `s-reset` event that is fired when the reset button is pressed.
`onS-apply`	Function		Handles the `s-apply` event that is fired when the done button is pressed.

Skylab React links

General information about using our React package

i18n Strings

ID	Description	Default value
`"filtersPanel.header"`	The panel header text.	Filters
`"filtersPanel.ariaLabel.close"`	The aria-label used for the close icon button.	Close filters panel
`"filtersPanel.reset"`	The reset button text.	Reset
`"filtersPanel.done"`	The done button text.	Done

Typescript

Exported types

// s-dismiss event's e.detail export type SDismissData = { inputId: string; }; // s-reset event's e.detail export type SResetData = { inputId: string; }; // s-apply event's e.detail export type SApplyData = { inputId: string; };

Guidelines

Component placement

This component must be placed before the s-table-container (and must have the same parent as the s-table-container).

Opening/closing the panel

The filters panel component does not include a trigger button or logic for opening/closing the panel. Please see the code sample above for an example of the open/close logic that should be attached to the trigger button implemented in your app.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com