4.32.2

Row expander

Button that expands/collapses table rows

Demo

API

Tag

Name	Description
`<s-row-expander>`	Custom element

Attributes

Name	Value	Required	Description
`rowid`	string		The `id` of the row to be expanded/collapsed. Required for every row expander component, unless the component is placed in a `<th>`, in which case it will automatically expand/collapse all accordion rows in the table.
`expanded`	Boolean attribute		Indicates that the associated row should be expanded.

Properties

Name	Value	Required	Description
`rowId`	string		The `id` of the row to be expanded/collapsed. Required for every row expander component, unless the component is placed in a `<th>`, in which case it will automatically expand/collapse all accordion rows in the table.
`expanded`	Boolean attribute		Indicates that the associated row should be expanded.

Demo

API

Tag

Name
`<SRowExpander>`

Props

Name	Value	Required	Description
`rowId`	string		The `id` of the row to be expanded/collapsed. Required for each row expander component, unless the component is placed in a `<th>`, in which case it will automatically expand/collapse all accordion rows in the table.
`expanded`	Boolean		Indicates that the associated row should be expanded.

Skylab React links

General information about using our React package

Guidelines

Parent element required

The row expander component must be enclosed in a <td> or <th> element.

Use .hidden class

Add the hidden class to all rows that should be collapsed on initial page load.

Design

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