FilterBar

The toolbar above a list.

View code

tsx

<FilterBar
	id="monitors"
	url={request.url}
	tabs={[
		{ label: "Active", count: 1213, href: "?state=active", current: true },
		{ label: "Paused", count: 41, href: "?state=paused" },
		{ label: "Archived", count: 0, href: "?state=archived" },
	]}
	search={{ label: "Search monitors", placeholder: "Search monitors…" }}
	facets={[
		{ name: "status", label: "Status", options: [
			{ value: "up", label: "Up", count: 1204, icon: <StatusDot color="success" /> },
			{ value: "degraded", label: "Degraded", count: 7, icon: <StatusDot color="warning" /> },
			{ value: "down", label: "Down", count: 2, icon: <StatusDot color="danger" /> },
		] },
		{ name: "region", label: "Region", options: regions },
		{ name: "tag", label: "Tags", options: tags },
	]}
	sort={{ label: "Sort by", defaultValue: "name", options: [
		{ value: "name", label: "Name" },
		{ value: "-checked", label: "Last checked" },
		{ value: "-incidents", label: "Most incidents" },
	] }}
	options={<>
		<ViewOptions id="monitors-view" url={request.url} inline density={density} labels={viewLabels} />
		<AutoRefresh {...refresh} show="choices" />
	</>}
	status={<AutoRefresh {...refresh} show="status" />}
	labels={{
		toolbar: "Filter monitors", tabs: "Monitor states", filters: "Filters", options: "View", apply: "Apply",
		is: "is", isAnyOf: "is any of", clear: "Clear filters",
		remove: (field, values) => `Remove ${field}: ${values}`,
	}}
/>

Demo apps

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { FilterBar } from "@sdxc/ui/app";

Renders the toolbar. Facet checkboxes, the search field and the hidden carried parameters all belong to one GET form, so Apply or Enter submits the whole view and the URL holds one parameter per filter; tabs, sort orders and chip removal are plain links.

Examples

Facets collapsed behind Filters in a narrow pane

View code

tsx

<FilterBar
	id="issues"
	url={request.url}
	collapse
	tabs={[{ label: "Open", count: 26, href: "?state=open", current: true }, { label: "Closed", count: 2828, href: "?state=closed" }]}
	facets={[labelsFacet, assigneeFacet]}
	search={{ label: "Search issues", placeholder: "Search…" }}
	labels={labels}
/>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`id`	`string`	Yes	Prefix for the form and popover ids; unique on the page.
`url`	`URL \| string`	No	The page's current URL, where every applied value is read from.
`action`	`string`	No	Where the form submits. Defaults to the current path.
`tabs`	`Tab[]`	No	Count tabs at the start of the row.
`search`	`Search`	No	The search field, after the tabs, between 14rem and 20rem wide.
`facets`	`Facet[]`	No	Facet buttons after the search.
`sort`	`Sort`	No	Sort orders, the first group in the View menu.
`options`	`RemixNode`	No	The rest of the View menu, after sort: an inline `ViewOptions` and an `AutoRefresh` with `show="choices"`, each its own group.
`status`	`RemixNode`	No	Quiet text before the View menu, such as an `AutoRefresh` with `show="status"`: small, muted, and hidden while the bar is narrower than 56rem.
`collapse`	`boolean`	No	Moves the facets behind one "Filters (n)" popover while the bar is narrower than 32rem.
`locale`	`string`	No	Locale for the counts. Defaults to the runtime's.
`labels`	`Labels`	Yes

Also accepts everything in Omit<TagProps<"div">, "children" | "id">.