4.37.0

Row actions

Row action buttons placed in a table cell

Demo

const allRowActions = Array.from(document.querySelectorAll("s-row-actions")); allRowActions.map((action, index) => { action.actionItems = [{label: "Action 1", iconName: "heart", classList: ["primary", "icon-leading"], id: `row-${index}-action-1`, disabled: true}, {label: "Action 2", iconName: "check", classList: ["secondary", "icon-leading"], id: `row-${index}-action-2`}, {label: "Action 3", iconName: "close", classList: ["secondary", "icon-leading"], id: `row-${index}-action-3`}, {label: "Action 4", iconName: "edit-pencil", classList: ["secondary", "icon-leading"], id: `row-${index}-action-4`}] })

API

Tag

Name Description
<s-row-actions> Custom element, accepts button children

Attributes

Name Value Required Description
icononly Boolean attribute

Add this attribute at narrow column widths to display only the icons in buttons that contain icons.
collapsed Boolean attribute

Add this attribute at very narrow column widths to display only the overflow menu.
actionitems String

Stringified JSON array of action objects. See Guidelines below.
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
iconOnly Boolean attribute

Add this attribute at narrow column widths to display only the icons in buttons that contain icons.
collapsed Boolean attribute

Add this attribute at very narrow column widths to display only the overflow menu.
actionItems Array Array of action objects. See Guidelines below.
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-select The selected action item's id

Fires when an action item button is clicked.

Demo

API

Tag

Name
<SRowActions>

Props

Name Value Required Description
menuId string

Unique id to be given to the overflow menu dropdown.
iconOnly Boolean

Add this prop at narrow column widths to display only the icons in buttons that contain icons.
collapsed Boolean

Add this prop at very narrow column widths to display only the overflow menu.
actionItems Array of objects

Array of action objects. See Guidelines below.
onS-select Function

Handles the s-select event that fires when an action item button is clicked. The selected item's id is available on e.detail.

i18n object

A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Skylab React links

General information about using our React package

Typescript

Exported types

// object provided (in array) to actionItems prop export type RowActionsItem = { label: string; iconName?: string; classList?: string[]; id: string; disabled?: boolean; }; // s-select event's e.detail export type SRowSelectData = { id: string };

i18n Strings

ID Description Default value
"rowActions.ariaLabel.menuTrigger" The aria-label used for the overflow menu trigger. More actions

Guidelines

Parent element required

The row actions component must be enclosed in a <td> element.

Creating action items

The action items (individual buttons) within the component are set via an array of objects.

const actionItems = [ { "label": string, // required "id": string, // required "iconName": string, // indicates icon, if any, to be displayed in button "classList": array of strings // required for button styling "disabled": boolean // to disable button }, ]; const allRowActions = Array.from(document.querySelectorAll("s-row-actions")); allRowActions.map((item) => { item.actionItems = actionItems; });

To pass the action items to the s-row-actions component, you can either set the actionItems property equal to your array of objects, as in the code sample above, or you can stringify your array and set the actionitems attribute.

Design

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