API REFERENCE · DATA GRID PLUGINS

@dojo-ng/data-grid-tree

Tree rows for <dj-data-grid>: rows with children can be expanded and collapsed.

Try it in the playground

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

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

Nested children arrays become an expandable tree; ArrowRight/ArrowLeft expand and collapse the active row.

<dj-data-grid id="g"></dj-data-grid>
<script type="module">
  import "@dojo-ng/data-grid";
  import { treePlugin } from "@dojo-ng/data-grid-tree";
  const g = document.getElementById("g");
  g.columns = [{ id: "name", header: "Name" }, { id: "size", header: "Size" }];
  g.data = [
    { name: "src", size: "", children: [
      { name: "index.ts", size: "2 KB" },
      { name: "lib", size: "", children: [{ name: "util.ts", size: "1 KB" }] },
    ] },
  ];
  g.plugins = [treePlugin()];
</script>

{
  row: Row;
  expanded: boolean;
}

function expanderButton(row: TableRow<Row>, ctx: DataGridContext): TemplateResult;

function treePlugin({ childrenKey }?: TreeOptions): DataGridPlugin;

interface TreeOptions {
  childrenKey?: string;
}