Expandable Table Row

<wa-table-row-exp>

Experimental

added

Groups a table row with detail rows that can be expanded and collapsed.

wa-table-row-exp pairs one summary row with detail rows assigned to the details slot. Its button supports keyboard interaction and emits wa-expand and wa-collapse.

  
    Police Squad
    
      Owner: Frank Drebin

<wa-table>
  <wa-table-row-exp expand-label="Show account details" collapse-label="Hide account details">
    <wa-table-cell>Police Squad</wa-table-cell>
    <wa-table-row slot="details">
      <wa-table-cell>Owner: Frank Drebin</wa-table-cell>
    </wa-table-row>
  </wa-table-row-exp>
</wa-table>

API

Link to This Section

Importing

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://cdn.yoummday.com/packages/@yoummday/webawesome/0.5.1/dist/components/table-row-exp/table-row-exp.js';

After installing Web Awesome via npm, import this component:

import '@yoummday/webawesome/dist/components/table-row-exp/table-row-exp.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/table-row-exp/table-row-exp.js';

To import this component for React 18 or below, use the following code:

import WaTableRowExp from '@yoummday/webawesome/dist/react/table-row-exp/index.js';

Slots

Link to This Section

Learn more about using slots.

Name	Description
(default)	The row that toggles the details.
`details`	One or more detail rows.

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`collapseLabel` `collapse-label`	Accessible label for the button while the details are expanded. Type `string` Default `'Collapse row'`
`expanded` `expanded`	Shows the detail rows. Type `boolean` Default `false`
`expandLabel` `expand-label`	Accessible label for the button while the details are collapsed. Type `string` Default `'Expand row'`
`role` `role`	Shows the detail rows. Type `string` Default `'row'`

Events

Link to This Section

Learn more about events.

Name	Description
`wa-collapse`	Emitted when the details collapse.
`wa-expand`	Emitted when the details expand.

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`details`	The details slot.	`::part(details)`
`toggle-row`	The toggle-row slot.	`::part(toggle-row)`

Dependencies

Link to This Section

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

<wa-icon>

Need a hand?

Report a bug

Ask for help

Expandable Table Row

API

Importing

Slots

Attributes & Properties

Events

CSS Parts

Dependencies

Quick Links

Recent Searches