Default

Name Role Items
AliceDesigner14
BobEngineer7
CarlaPM22

Striped + Sortable + Select-all

Name Role Qty
Alice Designer 14
Bob Engineer 7
Carla PM 22
Dan Engineer 3

Empty-state (auto-wired)

When a child element with data-brut-role="empty-state" is present, BRUT toggles it automatically based on tbody contents. Click the button to clear the rows and see the swap.

SKU Title Stock
B-001Raw concrete mug9
B-002Bone-white tee44

Compact + Bordered

SKU Title Stock
A-001Bone-white tee122
A-002Hard-shadow cap38

brut:sort listener

// Re-fetch sorted rows from a server endpoint when a header is clicked.
document.querySelector('[data-brut="table"]').addEventListener('brut:sort', function (e) {
  var key = e.detail.key;
  var direction = e.detail.direction; // "ascending" | "descending" | "none"
  // e.detail.value === { key, direction } — canonical state object.
  fetch('/api/rows?sort=' + encodeURIComponent(key) + '&dir=' + encodeURIComponent(direction))
    .then(function (r) { return r.json(); })
    .then(function (rows) { /* re-render tbody from rows */ });
});