A semantic table component for displaying structured data in rows and columns. Tables support variants for visual...

A semantic table component for displaying structured data in rows and columns. Tables support variants for visual styling (zebra striping, hover effects) and full-width layouts. Use compound children (table-header, table-body, table-row, table-cell, table-header-cell) to structure tabular content with proper semantic HTML. Composition: - ed-table-header > ed-table-row > ed-table-header-cell (header row) - ed-table-body > ed-table-row > ed-table-cell (data rows) Use tables to: - Display structured datasets with clear row/column relationships - Compare properties across multiple items - Show financial, analytical, or inventory data - Create searchable/sortable data displays with table-header-cell behavior="sortable"

<ed-table></ed-table>

Properties

Name Type Default Description
variant String 'zebra' A semantic table component for displaying structured data in rows and columns. Tables support variants for visual styling (zebra striping, hover effects) and full-width layouts. Use compound children (table-header, table-body, table-row, table-cell, table-header-cell) to structure tabular content with proper semantic HTML. Composition: - ed-table-header > ed-table-row > ed-table-header-cell (header row) - ed-table-body > ed-table-row > ed-table-cell (data rows) Use tables to: - Display structured datasets with clear row/column relationships - Compare properties across multiple items - Show financial, analytical, or inventory data - Create searchable/sortable data displays with table-header-cell behavior="sortable" / export class EdTable extends EdElement { static get styles() { return unsafeCSS(styles); } /** Style variants <ed-text-passage size="sm"> <ul> <li>**zebra** Alternating row colors to improve readability in dense data tables</li> </ul> </ed-text-passage>
hoverRows Boolean boolean Hover rows variant 1) If set to true, rows can be hovered over and change color to help readability
fullWidth Boolean boolean Full-width variant 1) Table expands to the full width of its container when set to `true`

Slots

Name Description
- The table structure (ed-table-header and ed-table-body)

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/table/table.ts