API REFERENCE · DATA GRID PLUGINS

@dojo-ng/data-grid-detail

Master-detail rows for <dj-data-grid>: an expanded row shows extra content below it.

Try it in the playground

@dojo-ng/data-grid-detail · v0.1.1 · A plugin for <dj-data-grid>, not a custom element

npm install @dojo-ng/data-grid-detail

Each row gains an expander; the detail panel renders any template — here a nested dj-data-grid (the subgrid case).

<dj-data-grid id="g"></dj-data-grid>
<script type="module">
  import { html } from "lit";
  import "@dojo-ng/data-grid";
  import { detailPlugin } from "@dojo-ng/data-grid-detail";
  const g = document.getElementById("g");
  g.columns = [{ id: "order", header: "Order" }, { id: "customer", header: "Customer" }];
  g.data = [
    { order: "A-1", customer: "Acme", items: [{ sku: "W-1", qty: 2 }, { sku: "G-9", qty: 1 }] },
  ];
  g.plugins = [detailPlugin({
    render: (row) => html`<dj-data-grid
      height="8rem"
      .columns=${[{ id: "sku", header: "SKU" }, { id: "qty", header: "Qty" }]}
      .data=${row.original.items}></dj-data-grid>`,
  })];
</script>

function detailPlugin({ render }: DetailOptions): DataGridPlugin;

interface DetailOptions {
  render: (row: TableRow<Row>, ctx: DataGridContext) => TemplateResult;
}