ViewOptions

The "Display" popover beside a list.

View code

tsx

<ViewOptions
	id="monitors-view"
	url={request.url}
	layout={{ defaultValue: "table", options: [
		{ value: "list", label: "List", icon: <LayoutListIcon /> },
		{ value: "table", label: "Table", icon: <TableIcon /> },
		{ value: "grid", label: "Grid", icon: <LayoutGridIcon /> },
	] }}
	grouping={{ defaultValue: "none", options: [
		{ value: "none", label: "No grouping" }, { value: "status", label: "Status" }, { value: "region", label: "Region" },
	] }}
	ordering={{ defaultValue: "name", options: [
		{ value: "name", label: "Name" }, { value: "-checked", label: "Last checked" },
	] }}
	density={{ defaultValue: "compact", options: [
		{ value: "compact", label: "Compact" }, { value: "comfortable", label: "Comfortable" },
	] }}
	properties={{ defaultValue: ["status", "uptime", "response"], options: [
		{ value: "status", label: "Status" }, { value: "uptime", label: "Uptime" },
		{ value: "response", label: "Response time" }, { value: "region", label: "Region" },
		{ value: "tags", label: "Tags" },
	] }}
	setDefault={{ action: "/settings/views/monitors" }}
	labels={{ trigger: "Display", layout: "Layout", grouping: "Grouping", ordering: "Ordering",
		density: "Density", properties: "Properties", apply: "Apply", setDefault: "Set as default" }}
/>

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 { ViewOptions } from "@sdxc/ui/app";

Renders the trigger and its popover. Every field reads its value from url, falling back to the field's default, and Apply submits them with every other parameter carried as hidden fields, so the filters and tab the page shows survive a view change.

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 popover and form 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 Apply submits. Defaults to the current path.
`layout`	`Field`	No
`grouping`	`Field`	No
`ordering`	`Field`	No
`density`	`Field`	No
`properties`	`Properties`	No
`setDefault`	`{ action: string }`	No	Where "Set as default" posts the fields; omitted hides the button.
`inline`	`boolean`	No	Draws the form in place, without its own trigger and popover, for a menu that holds it among other view controls, such as a filter bar's `options`.
`labels`	`Labels`	Yes

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