Table + detail

BlockTable + Detail drawer

The bread-and-butter list screen: a sortable table where clicking a row opens a detail drawer with the full record. It’s simply the two components wired together — no new classes.

List with row detail

Open ↗

<div class="table-container">
  <table class="table" data-table>
    <thead>
      <tr>
        <th data-min-width data-table-index>#</th>
        <th>Currency</th>
        <th>Symbol</th>
        <th>Purchase</th>
        <th>Sale</th>
        <th>Date</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th data-format="number">1</th>
        <td>
          <button
            type="button"
            class="text-start font-medium text-foreground hover:text-foreground-primary"
            data-detail-drawer-trigger
            data-detail-drawer-id="rate-detail"
            data-detail-drawer-name="Dollar"
            data-detail-drawer-symbol="USD"
            data-detail-drawer-purchase="1455"
            data-detail-drawer-sale="1470"
            data-detail-drawer-date="2025-03-28T17:42:51Z"
            data-detail-drawer-user="Sardar Mohammed"
          >
            Dollar
          </button>
        </td>
        <td><span dir="ltr">USD</span></td>
        <td data-table-sort-content="1455"><span data-format="number">1455</span></td>
        <td data-table-sort-content="1470"><span data-format="number">1470</span></td>
        <td data-table-sort-content="2025-03-28"><span data-format="date">2025-03-28T17:42:51Z</span></td>
      </tr>

      <tr>
        <th data-format="number">2</th>
        <td>
          <button
            type="button"
            class="text-start font-medium text-foreground hover:text-foreground-primary"
            data-detail-drawer-trigger
            data-detail-drawer-id="rate-detail"
            data-detail-drawer-name="Euro"
            data-detail-drawer-symbol="EUR"
            data-detail-drawer-purchase="1570"
            data-detail-drawer-sale="1595"
            data-detail-drawer-date="2025-06-05T04:31:08Z"
            data-detail-drawer-user="Hama Ali"
          >
            Euro
          </button>
        </td>
        <td><span dir="ltr">EUR</span></td>
        <td data-table-sort-content="1570"><span data-format="number">1570</span></td>
        <td data-table-sort-content="1595"><span data-format="number">1595</span></td>
        <td data-table-sort-content="2025-06-05"><span data-format="date">2025-06-05T04:31:08Z</span></td>
      </tr>

      <tr>
        <th data-format="number">3</th>
        <td>
          <button
            type="button"
            class="text-start font-medium text-foreground hover:text-foreground-primary"
            data-detail-drawer-trigger
            data-detail-drawer-id="rate-detail"
            data-detail-drawer-name="Pound"
            data-detail-drawer-symbol="GBP"
            data-detail-drawer-purchase="1810"
            data-detail-drawer-sale="1840"
            data-detail-drawer-date="2025-08-19T22:07:36Z"
            data-detail-drawer-user="Karwan Hassan"
          >
            Pound
          </button>
        </td>
        <td><span dir="ltr">GBP</span></td>
        <td data-table-sort-content="1810"><span data-format="number">1810</span></td>
        <td data-table-sort-content="1840"><span data-format="number">1840</span></td>
        <td data-table-sort-content="2025-08-19"><span data-format="date">2025-08-19T22:07:36Z</span></td>
      </tr>
    </tbody>
  </table>
</div>

<!-- Drawer definition: fields = key:label:type[:width]; actions = key:label:variant:icon -->
<div
  data-detail-drawer-config
  data-detail-drawer-id="rate-detail"
  data-detail-drawer-title="Exchange rate"
  data-detail-drawer-fields="name:Currency;symbol:Symbol:badge;purchase:Purchase price:number;sale:Sale price:number;date:Registered:date;user:Registered by"
  data-detail-drawer-actions="edit:Quick edit:primary:edit;archive:Archive:secondary:archive;delete:Delete:danger:trash-x"
></div>

How it fits together

Declare one drawer with the fields/actions you want to show.
In each row, make the primary cell a trigger that carries that row’s values as data-detail-drawer-* attributes.

<table class="table" data-table>
  <tbody>
    <tr>
      <th data-format="number">1</th>

      <td>
        <button
          type="button"
          data-detail-drawer-trigger
          data-detail-drawer-id="rate-detail"
          data-detail-drawer-name="Dollar"
          data-detail-drawer-symbol="USD"
          data-detail-drawer-purchase="1455"
        >
          Dollar
        </button>
      </td>
    </tr>
  </tbody>
</table>

<!-- one declaration for the whole table -->
<div
  data-detail-drawer-config
  data-detail-drawer-id="rate-detail"
  data-detail-drawer-title="Exchange rate"
  data-detail-drawer-fields="name:Currency;symbol:Symbol:badge;purchase:Purchase:number"
  data-detail-drawer-actions="edit:Quick edit:primary:edit;delete:Delete:danger:trash-x"
></div>

See the Table and Detail drawer pages for the full attribute reference and dependencies.