Tree Data

import { createDataGrid, sorting, tree } from '@sv5ui/datagrid';

interface Unit {
  id: string;
  name: string;
  kind: 'Department' | 'Team' | 'Person';
  headcount: number;
  children?: Unit[];
}

const units: Unit[] = [
  {
    id: 'eng', name: 'Engineering', kind: 'Department', headcount: 7,
    children: [
      {
        id: 'core', name: 'Core Platform', kind: 'Team', headcount: 3,
        children: [
          { id: 'p1', name: 'Ada Kowalski', kind: 'Person', headcount: 1 },
          { id: 'p2', name: 'Bruno Silva', kind: 'Person', headcount: 1 }
        ]
      }
    ]
  }
];

const grid = createDataGrid<Unit>({
  columns,
  data: units,                 // roots only
  getRowId: (unit) => unit.id,
  features: [
    sorting<Unit>(),
    tree<Unit>({
      getChildren: (unit) => unit.children,
      defaultExpandedDepth: 1
    })
  ]
});

interface Unit {
  id: string;
  name: string;
  parent: string | null;
}

const units: Unit[] = [
  { id: 'eng',  name: 'Engineering',   parent: null },
  { id: 'core', name: 'Core Platform', parent: 'eng' },
  { id: 'p1',   name: 'Ada Kowalski',  parent: 'core' },
  { id: 'p2',   name: 'Bruno Silva',   parent: 'core' }
];

const grid = createDataGrid<Unit>({
  columns,
  data: units,                 // every row, roots and descendants alike
  getRowId: (unit) => unit.id,
  features: [
    sorting<Unit>(),
    tree<Unit>({ getParentId: (unit) => unit.parent, defaultExpandedDepth: 1 })
  ]
});

// Use getChildren or getParentId, never both.

const grid = createDataGrid<Unit>({
  columns,
  data: units,
  getRowId: (unit) => unit.id,
  features: [
    filtering(),
    // 99 so the whole hierarchy is open before the filter runs, which is what
    // the grid above does. Promotion does not depend on it: a promoted row is
    // a root, and roots are shown at any depth.
    tree<Unit>({ getParentId: (unit) => unit.parent, defaultExpandedDepth: 99 })
  ]
});

// No Department or Team is called Ito, so every ancestor is filtered away.
grid.api.setQuickFilter?.('Ito');

grid.preWindowNodes.map((node) => [node.row.name, node.meta?.level]);
// [['Chi Ito', 0], ['Grace Ito', 0], ['Jonas Ito', 0]]
//
// Three people from three different teams, all at the root.

tree<Unit>({ getChildren, defaultExpandedDepth: 0 });   // roots only
tree<Unit>({ getChildren, defaultExpandedDepth: 1 });   // and children
tree<Unit>({ getChildren, defaultExpandedDepth: 99 });  // everything

// It is read once, when the tree is first built, so offer a choice of depth
// by building a grid per depth rather than by changing this on a live one.
const grids = [0, 1, 2].map((depth) =>
  createDataGrid<Unit>({
    columns,
    data: units,
    getRowId: (unit) => unit.id,
    features: [tree<Unit>({ getChildren, defaultExpandedDepth: depth })]
  })
);

// A tree the browser never holds in full. tree() builds one from rows it
// already has; this builds one from rows it has not asked for yet.
const grid = createDataGrid<ServerRow>({
  columns, data: [], getRowId: (row) => String(row.id),
  rowModel: 'server',
  features: [
    virtualization({ rowHeight: 40, overscan: 6 }),
    serverRowModel(source, {
      mode: 'infinite', blockSize: 100, placeholder,
      groupBy: ['team', 'role'],

      // Depth and the chevron. A leaf sits one below the deepest branch.
      getRowMeta: (row) =>
        isNode(row) ? { level: row.level, expandable: true } : { level: 2 },

      // Opening a node asks for its children, identified by the whole path
      // rather than by its own key: Manager under Design is not Manager
      // under Core.
      groupKeysOf: (node) => node.row.path,

      // And closing it drops whatever is under that path again.
      isChildOf: (node) => (row) => startsWith(pathOf(row), node.row.path)
    })
  ]
});

// The endpoint answers whichever level it was asked for, because the depth
// is readable from the request: groupKeys shorter than groupBy means a
// branch was opened, and the two are equal at the leaves.
const { groupBy = [], groupKeys = [] } = await request.json();
if (groupKeys.length < groupBy.length) {
  return json({ rows: groupLevel(within(rows, groupBy, groupKeys), groupBy[groupKeys.length]) });
}
return json({ rows: within(rows, groupBy, groupKeys) });