A semantic table component for displaying key-value pair data. Renders as an HTML table with key-value-table-row...

A semantic table component for displaying key-value pair data. Renders as an HTML table with key-value-table-row children. Each row displays a property name (key) and its value side-by-side. Use key-value tables for: - Product specifications and attributes - Configuration settings or properties - Business details (address, phone, email) - Metadata displays (file properties, creation date, etc.) - Comparisons between two items Simpler and more compact than a standard table when displaying distinct key-value pairs (not columnar data with multiple rows). Uses proper semantic `<table>`, `<tbody>`, `<tr>`, `<th scope="row">`, `<td>` elements. The fullWidth property controls whether the table expands to container width. Child ed-key-value-table-row elements display each key-value pair.

<ed-key-value-table></ed-key-value-table>

Properties

Name Type Default Description
fullWidth Boolean boolean A semantic table component for displaying key-value pair data. Renders as an HTML table with key-value-table-row children. Each row displays a property name (key) and its value side-by-side. Use key-value tables for: - Product specifications and attributes - Configuration settings or properties - Business details (address, phone, email) - Metadata displays (file properties, creation date, etc.) - Comparisons between two items Simpler and more compact than a standard table when displaying distinct key-value pairs (not columnar data with multiple rows). Uses proper semantic `<table>`, `<tbody>`, `<tr>`, `<th scope="row">`, `<td>` elements. The fullWidth property controls whether the table expands to container width. Child ed-key-value-table-row elements display each key-value pair. / export class EdKeyValueTable extends EdElement { static get styles() { return unsafeCSS(styles); } /** Full width variant 1) Expands the key value table the full width of its container

Slots

Name Description
- Table rows (ed-key-value-table-row elements)

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/key-value-table/key-value-table.ts