Holo Table

The <holo-table> component renders the actual <table> element inside its shadow root and projects light-DOM children through a default slot. Because slotted elements keep their original tag names in the flattened accessibility tree, this preserves full native table semantics (row/column headers, scope, accessible name via caption) exactly as authored. Put <thead>, <tbody>, <tr>, <th scope="col">, and <td> elements directly inside <holo-table> — do not include your own <table> element. Set responsive to wrap the table in a horizontally-scrollable container (overflow-x: auto) instead of breaking table semantics with layout hacks.

Live Previews

Default

NameRoleLocationAda LovelaceMathematicianLondonGrace HopperComputer ScientistNew York

<holo-table caption="Team roster">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Role</th>
      <th scope="col">Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ada Lovelace</td>
      <td>Mathematician</td>
      <td>London</td>
    </tr>
  </tbody>
</holo-table>

Responsive

Wraps the table in a horizontally-scrollable container on narrow viewports.

<holo-table caption="Team roster" responsive>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ada Lovelace</td>
      <td>Mathematician</td>
    </tr>
  </tbody>
</holo-table>

---

API Reference

Properties

| Property | Attribute | Description | Type | Default | | ------------ | ------------ | ------------------------------------------------------------------------- | --------- | ----------- | | caption | caption | Accessible caption/title for the table, rendered as a native <caption>. | string | undefined | | responsive | responsive | If true, wraps the table in a horizontally-scrollable container. | boolean | false |