Grouping and Row Detail

This example groups dogs by adoption region and expands details lazily only when a row is opened.

Library setup

Grouping and expandable rows are configured with groupBy and a rowDetail.render() callback.

const table = new DogTable("#app", {
  groupBy: "department",
  remote: {
    url: "https://api.rahmaanms.my.id/api/employees",
    mapResponse: (payload, state) => { /* ... */ }
  },
  columns: [
    { key: "id", label: "ID" },
    { key: "name", label: "Name" },
    { key: "role", label: "Role" },
  ],
  rowDetail: {
    render: (row) => `<div>Location: \${row.location}</div>`
  }
});