Column manager

For managing table column visibility and ordering

Demo

API

Tag

Name	Description
`<s-column-manager>`	Custom HTML tag, no content

Attributes

Name	Value	Description
`columnitems`	String	Stringified JSON array of column objects. See Guidelines below.
`id`	String	Unique ID. Recommended when multiple column manager components exist in the page (the `id` is present in `e.detail` when the `s-save` event is emitted).
`noreorder`	Boolean	Disables the ability to change the display order of columns by dragging and dropping them.
`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	Description
`columnItems`	String	Stringified JSON array of column objects. See Guidelines below.
`id`	String	Unique ID. Recommended when multiple column manager components exist in the page (the `id` is present in `e.detail` when the `s-save` event is emitted).
`noReorder`	Boolean	Disables the ability to change the display order of columns by dragging and dropping them.
`i18n`	object	A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Classes

Name	Description
`full-width`	Styles trigger button to span the full width of its container. Primarily for use in responsive table toolbar.

Events

Name	Detail	Description
`s-save`	The new columnItems object and the column manager's `id` are available on `e.detail`.	Fired when the save button is pressed.

Demo

API

Tag

Name
`<SColumnManager>`

Props

Name	Value	Description
`columnItems`	Array	Array of column objects. See Guidelines below.
`id`	String	Unique ID. Recommended when multiple column manager components exist in the page (the `id` is present in `e.detail` when the `s-save` event is emitted).
`noReorder`	Boolean	Disables the ability to change the display order of columns by dragging and dropping them.
`i18n`	object	A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.
`onS-save`	Function	Handles the `s-save` event emitted when the save button is pressed. The new columnItems object and the column manager's `id` are available on `e.detail`.

Classes

Name	Description
`full-width`	Styles trigger button to span the full width of its container. Primarily for use in responsive table toolbar.

Skylab React links

General information about using our React package

Typescript

Exported types

// Object provided (in array) to columnItems prop export type ColumnItem = { id?: string; label?: string; hidden?: boolean; }; // s-save event's e.detail export type SSaveEvent = { columnItems: Array; id: string; };

i18n Strings

ID	Description	Default value
`"columnManager.triggerButton"`	Trigger button text.	Manage columns
`"columnManager.applyButton"`	"Apply" button text.	Apply
`"columnManager.cancelButton"`	"Cancel" button text.	Cancel
`"columnManager.instructions"`	Instructions text.	Reorder columns with arrow keys.
`"columnManager.reorderAnnouncement"`	The text announced by screen readers when items are reordered. Must contain the strings `{ITEM_LABEL}` and `{POSITION}` as placeholders.	{ITEM_LABEL} is now in position {POSITION}.

Guidelines

Data persistence

UX guidance states that any changes made by the user to column order and visibility should persist throughout the session.

Creating column items

const columnItem { "id": string; // unique "label": string; "hidden"?: boolean; } const columnManager = document.querySelector("s-column-manager"); columnManager.columnItems = [columnItem];

Design

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