Detail drawer

JavaScriptdetail-drawer.jsRequires Preline + _defaults.js

The detail drawer is a slide-in panel driven entirely by configuration. You declare the fields and actions once, then any trigger passes a record’s values as data-* attributes. detail-drawer.js builds the panel’s DOM, fills it, and opens it via Preline.

Table row → detail drawer

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>

1. Declare the drawer

One config element defines the drawer’s fields and actions. Fields are key:label:type[:width], separated by ;. Actions are 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:number;date:Registered:date"
  data-detail-drawer-actions="edit:Quick edit:primary:edit;delete:Delete:danger:trash-x"
></div>

Field types: text (default), number, currency, date, badge / status (pill), note (full-width, wraps). Add :full as the 4th part to span both columns.

Action variants: primary, secondary (default), danger. The 4th part is an icon key from window._icons; add :close as a 5th part to close the drawer on click.

Instead of attributes you can supply a JSON config (and even a records array to look rows up by id):

<script type="application/json" data-detail-drawer-json="rate-detail">
  { "title": "Exchange rate", "fields": [ … ], "actions": [ … ] }
</script>

2. Trigger it

Any element with data-detail-drawer-trigger opens the drawer named by data-detail-drawer-id. Pass each field’s value as data-detail-drawer-<key>:

<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"
  data-detail-drawer-date="2025-03-28T17:42:51Z"
>
  Dollar
</button>

The keys after data-detail-drawer- must match the field keys in the config.

Reference

Attribute	On	Role
`data-detail-drawer-config`	config element	Declares a drawer from attributes.
`data-detail-drawer-id`	config & trigger	Links a trigger to its drawer.
`data-detail-drawer-fields`	config	`key:label:type[:width];…`
`data-detail-drawer-actions`	config	`key:label:variant:icon[:close];…`
`data-detail-drawer-title`	config	Panel heading.
`data-detail-drawer-trigger`	trigger	Marks the click target.
`data-detail-drawer-<key>`	trigger	A field’s value for this record.
`data-detail-drawer-record-id`	trigger	Alternative: look the record up in the JSON `records` array.

JavaScript API — `window.DetailDrawer`

Method	Purpose
`DetailDrawer.create()`	(Re)scan the page for configs and triggers.
`DetailDrawer.open(id)`	Open a drawer programmatically.
`DetailDrawer.refresh()`	Re-init the Preline overlays.