Table

<wa-table>

Experimental

added

Presents structured data in rows and columns.

  
    Name
    Cases
  
    Frank Drebin
    42

<wa-table>
  <wa-table-row slot="head">
    <wa-table-cell>Name</wa-table-cell>
    <wa-table-cell align="end">Cases</wa-table-cell>
  </wa-table-row>
  <wa-table-row>
    <wa-table-cell>Frank Drebin</wa-table-cell>
    <wa-table-cell align="end">42</wa-table-cell>
  </wa-table-row>
</wa-table>

Examples

Link to This Section

Sorting

Link to This Section

Set sort-key on header cells. Activating a header emits wa-sort-change with Web Awesome's current sort descriptor. When the table's data property is set, the table replaces it with a sorted array before the event bubbles; rendering remains controlled by the application.

  
    Name
    Cases
  
  Frank42
  Ed8

<wa-table id="sortable-table">
  <wa-table-row slot="head">
    <wa-table-cell sort-key="name">Name</wa-table-cell>
    <wa-table-cell sort-key="cases" align="end">Cases</wa-table-cell>
  </wa-table-row>
  <wa-table-row><wa-table-cell>Frank</wa-table-cell><wa-table-cell align="end">42</wa-table-cell></wa-table-row>
  <wa-table-row><wa-table-cell>Ed</wa-table-cell><wa-table-cell align="end">8</wa-table-cell></wa-table-row>
</wa-table>

Loading

Link to This Section

Use loading, skeleton-rows, and skeleton-effect to replace rows with a loading representation.

  
    Name
    Status

<wa-table loading skeleton-rows="4" skeleton-effect="sheen">
  <wa-table-row slot="head">
    <wa-table-cell>Name</wa-table-cell>
    <wa-table-cell>Status</wa-table-cell>
  </wa-table-row>
</wa-table>

Sticky content

Link to This Section

Sticky features are useful when a table is placed in a scrolling container.

  
      Name
      Email
      Status
    
      Frank Drebin
      frank@example.com
      Active

<div style="max-width: 28rem; overflow: auto;">
  <wa-table sticky-head sticky-first-column fixed-layout style="min-width: 42rem;">
    <wa-table-row slot="head">
      <wa-table-cell style="--width: 12rem">Name</wa-table-cell>
      <wa-table-cell>Email</wa-table-cell>
      <wa-table-cell>Status</wa-table-cell>
    </wa-table-row>
    <wa-table-row>
      <wa-table-cell>Frank Drebin</wa-table-cell>
      <wa-table-cell>frank@example.com</wa-table-cell>
      <wa-table-cell>Active</wa-table-cell>
    </wa-table-row>
  </wa-table>
</div>

Expandable rows

Link to This Section

Use wa-table-row-exp to associate detail rows with a summary row. Leave room in the first cell for the toggle button.

  AccountStatus
  
    Police SquadActive
    Owner: Frank DrebinSince 1982

<wa-table>
  <wa-table-row slot="head"><wa-table-cell>Account</wa-table-cell><wa-table-cell>Status</wa-table-cell></wa-table-row>
  <wa-table-row-exp>
    <wa-table-row><wa-table-cell style="padding-inline-start: 2rem">Police Squad</wa-table-cell><wa-table-cell>Active</wa-table-cell></wa-table-row>
    <wa-table-row slot="details"><wa-table-cell>Owner: Frank Drebin</wa-table-cell><wa-table-cell>Since 1982</wa-table-cell></wa-table-row>
  </wa-table-row-exp>
</wa-table>

Row states

Link to This Section

Rows support selected and the current semantic variants brand, neutral, success, warning, and danger.

  Selected
  Successful
  Needs attention

<wa-table>
  <wa-table-row selected><wa-table-cell>Selected</wa-table-cell></wa-table-row>
  <wa-table-row variant="success"><wa-table-cell>Successful</wa-table-cell></wa-table-row>
  <wa-table-row variant="danger"><wa-table-cell>Needs attention</wa-table-cell></wa-table-row>
</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/table.js';

After installing Web Awesome via npm, import this component:

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

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

import './webawesome/dist/components/table/table.js';

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

import WaTable from '@yoummday/webawesome/dist/react/table/index.js';

Slots

Link to This Section

Learn more about using slots.

Name	Description
(default)	Body rows and expandable row groups.
`head`	One or more header rows.

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`data`	Optional records to sort when a sortable header is activated. The component does not render these records. Type `TableRecord[] \| undefined`
`fixedLayout` `fixed-layout`	Uses a fixed-width table layout. Type `boolean` Default `false`
`loading` `loading`	Replaces the slotted rows with a skeleton table. Type `boolean` Default `false`
`skeletonEffect` `skeleton-effect`	The animation used by loading skeletons. Type `'pulse' \| 'sheen' \| 'none'` Default `'pulse'`
`skeletonRows` `skeleton-rows`	The number of body skeleton rows shown while loading. Type `number` Default `7`
`stickyFirstColumn` `sticky-first-column`	Keeps the first column visible while scrolling horizontally. Type `boolean` Default `false`
`stickyHead` `sticky-head`	Keeps the header visible while the table scrolls beneath it. Type `boolean` Default `false`
`stickyLastColumn` `sticky-last-column`	Keeps the last column visible while scrolling horizontally. Type `boolean` Default `false`

Events

Link to This Section

Learn more about events.

Name	Description
`wa-sort-change`	Emitted when a sortable header is activated. When `data` is set, it is sorted before the event leaves the table.

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`body`	The table's body row group.	`::part(body)`
`head`	The table's header row group.	`::part(head)`
`skeleton`	Skeletons rendered while loading.	`::part(skeleton)`
`table`	The table's outer wrapper.	`::part(table)`
`base`	An alias for the table's outer wrapper.	`::part(base)`

Dependencies

Link to This Section

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

Need a hand?

Report a bug

Ask for help

Table

Examples

Sorting

Loading

Sticky content

Expandable rows

Row states

API

Importing

Slots

Attributes & Properties

Events

CSS Parts

Dependencies

Quick Links

Recent Searches