Table Cell

<wa-table-cell>

Experimental

added

Displays a data or column-header cell inside a table row.

wa-table-cell displays content in a wa-table-row. Use logical start, center, and end alignment values. In a header row, sort-key adds an accessible sort control.

  
    Name
    Total

<wa-table>
  <wa-table-row slot="head">
    <wa-table-cell sort-key="name">Name</wa-table-cell>
    <wa-table-cell align="end">Total</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-cell/table-cell.js';

After installing Web Awesome via npm, import this component:

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

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

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

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

import WaTableCell from '@yoummday/webawesome/dist/react/table-cell/index.js';

Slots

Link to This Section

Learn more about using slots.

Name	Description
(default)	The cell's content.

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`align` `align`	Aligns the cell's content using logical directions. Type `TableCellAlign` Default `'start'`
`sortDirection` `sort-direction`	The column's current sort direction. Type `TableSortDirection` Default `'none'`
`sortKey` `sort-key`	Identifies the data key used when this header requests sorting. Type `string` Default `''`

Events

Link to This Section

Learn more about events.

Name	Description
`wa-sort-change`	Emitted when a sortable column header is activated.

CSS Custom Properties

Link to This Section

Learn more about CSS custom properties.

Name	Description
`--width`	The cell's width. Default `auto`

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`sort-button`	The sortable column's button.	`::part(sort-button)`
`sort-icon`	The current sort-direction icon.	`::part(sort-icon)`
`table-cell`	The cell's inner wrapper.	`::part(table-cell)`
`base`	An alias for the cell's inner 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.

<wa-icon>

Need a hand?

Report a bug

Ask for help

Table Cell

API

Importing

Slots

Attributes & Properties

Events

CSS Custom Properties

CSS Parts

Dependencies

Quick Links

Recent Searches