@humanspeak/svelte-headless-table 5.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2024-2025 Humanspeak, Inc.
+
+Copyright (c) 2022-2024 Bryan Lee
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,122 @@
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/42545742/169733428-295e2678-e509-4175-aeb3-cb3a9c9894e1.svg" alt="svelte-headless-table" width="400px"/>
+</p>
+<h1 align="center">Svelte Headless Table</h1>
+
+<div align="center">
+
+[![npm version](http://img.shields.io/npm/v/@humanspeak/svelte-headless-table.svg)](https://www.npmjs.com/package/svelte-headless-table)
+[![npm downloads](https://img.shields.io/npm/dm/@humanspeak/svelte-headless-table.svg)](https://www.npmjs.com/package/svelte-headless-table)
+![license](https://img.shields.io/npm/l/@humanspeak/svelte-headless-table)
+![build](https://img.shields.io/github/actions/workflow/status/humanspeak/svelte-headless-table/publish.yml)
+
+<!--[![coverage](https://coveralls.io/repos/github/humanspeak/svelte-headless-table/badge.svg?branch=main)](https://coveralls.io/github/humanspeak/svelte-headless-table?branch=main)-->
+
+</div>
+
+**Unopinionated and extensible data tables for Svelte**
+
+> Build and design powerful datagrid experiences while retaining 100% control over styles and markup.
+
+Visit the [documentation](https://svelte-headless-table.bryanmylee.com/) for code examples and API reference, and get started with the [quick start guide](https://svelte-headless-table.bryanmylee.com/docs/getting-started/quick-start)!
+
+## Why Svelte Headless Table?
+
+Svelte Headless Table is designed to work **seamlessly** with Svelte. If you love Svelte, you will love Svelte Headless Table.
+
+- **Full TypeScript support**
+- Compatible with **SvelteKit** and SSR
+- Manage state with Svelte stores
+- Headless and fully customizable
+- Intuitive column-first declarative model
+- Highly performant
+- Feature-rich
+
+## All the features you could ever need!
+
+Svelte Headless Table comes with an extensive suite of plugins.
+
+Easily extend Svelte Headless Table with complex **sorting**, **filtering**, **grouping**, **pagination**, and much more.
+
+### Plugin roadmap
+
+- [x] [addSortBy](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-sort-by)
+- [x] [addColumnFilters](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-column-filters)
+- [x] [addTableFilter](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-table-filter)
+- [x] [addColumnOrder](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-column-order)
+- [x] [addHiddenColumns](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-hidden-columns)
+- [x] [addPagination](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-pagination)
+- [x] [addSubRows](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-sub-rows)
+- [x] [addGroupBy](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-group-by)
+- [x] [addExpandedRows](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-expanded-rows)
+- [x] [addSelectedRows](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-selected-rows)
+- [x] [addResizedColumns](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-resized-columns)
+- [x] [addGridLayout](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-grid-layout)
+
+## Examples
+
+<!-- prettier-ignore -->
+```svelte
+<script>
+  const data = readable([
+    { name: 'Ada Lovelace', age: 21 },
+    { name: 'Barbara Liskov', age: 52 },
+    { name: 'Richard Hamming', age: 38 },
+  ]);
+
+  const table = createTable(data);
+
+  const columns = table.createColumns([
+    table.column({
+      header: 'Name',
+      accessor: 'name',
+    }),
+    table.column({
+      header: 'Age',
+      accessor: 'age',
+    }),
+  ]);
+
+  const {
+    headerRows,
+    rows,
+    tableAttrs,
+    tableBodyAttrs,
+  } = table.createViewModel(columns);
+</script>
+
+<table {...$tableAttrs}>
+  <thead>
+    {#each $headerRows as headerRow (headerRow.id)}
+      <Subscribe rowAttrs={headerRow.attrs()} let:rowAttrs>
+        <tr {...rowAttrs}>
+          {#each headerRow.cells as cell (cell.id)}
+            <Subscribe attrs={cell.attrs()} let:attrs>
+              <th {...attrs}>
+                <Render of={cell.render()} />
+              </th>
+            </Subscribe>
+          {/each}
+        </tr>
+      </Subscribe>
+    {/each}
+  </thead>
+  <tbody {...$tableBodyAttrs}>
+    {#each $rows as row (row.id)}
+      <Subscribe rowAttrs={row.attrs()} let:rowAttrs>
+        <tr {...rowAttrs}>
+          {#each row.cells as cell (cell.id)}
+            <Subscribe attrs={cell.attrs()} let:attrs>
+              <td {...attrs}>
+                <Render of={cell.render()} />
+              </td>
+            </Subscribe>
+          {/each}
+        </tr>
+      </Subscribe>
+    {/each}
+  </tbody>
+</table>
+```
+
+For more complex examples with advanced features, visit the [documentation site](https://svelte-headless-table.bryanmylee.com/docs/plugins/overview).

package/dist/bodyCells.d.ts

@@ -0,0 +1,53 @@
+import { type Readable } from 'svelte/store';
+import type { BodyRow } from './bodyRows.js';
+import type { DataColumn, DisplayColumn, FlatColumn } from './columns.js';
+import { TableComponent } from './tableComponent.js';
+import type { DataLabel, DisplayLabel } from './types/Label.js';
+import type { AnyPlugins } from './types/TablePlugin.js';
+import type { RenderConfig } from '@humanspeak/svelte-subscribe';
+export type BodyCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = {
+    id: string;
+    row: BodyRow<Item, Plugins>;
+};
+export type BodyCellAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = {
+    role: 'cell';
+};
+export declare abstract class BodyCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends TableComponent<Item, Plugins, 'tbody.tr.td'> {
+    abstract column: FlatColumn<Item, Plugins>;
+    row: BodyRow<Item, Plugins>;
+    constructor({ id, row }: BodyCellInit<Item, Plugins>);
+    abstract render(): RenderConfig;
+    attrs(): Readable<BodyCellAttributes<Item, Plugins>>;
+    abstract clone(): BodyCell<Item, Plugins>;
+    rowColId(): string;
+    dataRowColId(): string | undefined;
+    isData(): this is DataBodyCell<Item, Plugins>;
+    isDisplay(): this is DisplayBodyCell<Item, Plugins>;
+}
+export type DataBodyCellInit<Item, Plugins extends AnyPlugins = AnyPlugins, Value = unknown> = Omit<BodyCellInit<Item, Plugins>, 'id'> & {
+    column: DataColumn<Item, Plugins>;
+    label?: DataLabel<Item, Plugins, Value>;
+    value: Value;
+};
+export type DataBodyCellAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = BodyCellAttributes<Item, Plugins>;
+export declare class DataBodyCell<Item, Plugins extends AnyPlugins = AnyPlugins, Value = unknown> extends BodyCell<Item, Plugins> {
+    __data: boolean;
+    column: DataColumn<Item, Plugins>;
+    label?: DataLabel<Item, Plugins, Value>;
+    value: Value;
+    constructor({ row, column, label, value }: DataBodyCellInit<Item, Plugins, Value>);
+    render(): RenderConfig;
+    clone(): DataBodyCell<Item, Plugins>;
+}
+export type DisplayBodyCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<BodyCellInit<Item, Plugins>, 'id'> & {
+    column: DisplayColumn<Item, Plugins>;
+    label: DisplayLabel<Item, Plugins>;
+};
+export declare class DisplayBodyCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends BodyCell<Item, Plugins> {
+    __display: boolean;
+    column: DisplayColumn<Item, Plugins>;
+    label: DisplayLabel<Item, Plugins>;
+    constructor({ row, column, label }: DisplayBodyCellInit<Item, Plugins>);
+    render(): RenderConfig;
+    clone(): DisplayBodyCell<Item, Plugins>;
+}

package/dist/bodyCells.js

@@ -0,0 +1,90 @@
+import { derived } from 'svelte/store';
+import { TableComponent } from './tableComponent.js';
+export class BodyCell extends TableComponent {
+    row;
+    constructor({ id, row }) {
+        super({ id });
+        this.row = row;
+    }
+    attrs() {
+        return derived(super.attrs(), ($baseAttrs) => {
+            return {
+                ...$baseAttrs,
+                role: 'cell'
+            };
+        });
+    }
+    rowColId() {
+        return `${this.row.id}:${this.column.id}`;
+    }
+    dataRowColId() {
+        if (!this.row.isData()) {
+            return undefined;
+        }
+        return `${this.row.dataId}:${this.column.id}`;
+    }
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    isData() {
+        return '__data' in this;
+    }
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    isDisplay() {
+        return '__display' in this;
+    }
+}
+export class DataBodyCell extends BodyCell {
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    __data = true;
+    column;
+    label;
+    value;
+    constructor({ row, column, label, value }) {
+        super({ id: column.id, row });
+        this.column = column;
+        this.label = label;
+        this.value = value;
+    }
+    render() {
+        if (this.label === undefined) {
+            return `${this.value}`;
+        }
+        if (this.state === undefined) {
+            throw new Error('Missing `state` reference');
+        }
+        return this.label(this, this.state);
+    }
+    clone() {
+        const clonedCell = new DataBodyCell({
+            row: this.row,
+            column: this.column,
+            label: this.label,
+            value: this.value
+        });
+        return clonedCell;
+    }
+}
+export class DisplayBodyCell extends BodyCell {
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    __display = true;
+    column;
+    label;
+    constructor({ row, column, label }) {
+        super({ id: column.id, row });
+        this.column = column;
+        this.label = label;
+    }
+    render() {
+        if (this.state === undefined) {
+            throw new Error('Missing `state` reference');
+        }
+        return this.label(this, this.state);
+    }
+    clone() {
+        const clonedCell = new DisplayBodyCell({
+            row: this.row,
+            column: this.column,
+            label: this.label
+        });
+        return clonedCell;
+    }
+}

package/dist/bodyRows.d.ts

@@ -0,0 +1,82 @@
+import { type Readable } from 'svelte/store';
+import { BodyCell } from './bodyCells.js';
+import type { FlatColumn } from './columns.js';
+import { TableComponent } from './tableComponent.js';
+import type { AnyPlugins } from './types/TablePlugin.js';
+export type BodyRowInit<Item, Plugins extends AnyPlugins = AnyPlugins> = {
+    id: string;
+    cells: BodyCell<Item, Plugins>[];
+    cellForId: Record<string, BodyCell<Item, Plugins>>;
+    depth?: number;
+    parentRow?: BodyRow<Item, Plugins>;
+};
+export type BodyRowAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = {
+    role: 'row';
+};
+export declare abstract class BodyRow<Item, Plugins extends AnyPlugins = AnyPlugins> extends TableComponent<Item, Plugins, 'tbody.tr'> {
+    cells: BodyCell<Item, Plugins>[];
+    /**
+     * Get the cell with a given column id.
+     *
+     * **This includes hidden cells.**
+     */
+    cellForId: Record<string, BodyCell<Item, Plugins>>;
+    depth: number;
+    parentRow?: BodyRow<Item, Plugins>;
+    subRows?: BodyRow<Item, Plugins>[];
+    constructor({ id, cells, cellForId, depth, parentRow }: BodyRowInit<Item, Plugins>);
+    attrs(): Readable<BodyRowAttributes<Item, Plugins>>;
+    abstract clone(props?: BodyRowCloneProps): BodyRow<Item, Plugins>;
+    isData(): this is DataBodyRow<Item, Plugins>;
+    isDisplay(): this is DisplayBodyRow<Item, Plugins>;
+}
+type BodyRowCloneProps = {
+    includeCells?: boolean;
+    includeSubRows?: boolean;
+};
+export type DataBodyRowInit<Item, Plugins extends AnyPlugins = AnyPlugins> = BodyRowInit<Item, Plugins> & {
+    dataId: string;
+    original: Item;
+};
+export declare class DataBodyRow<Item, Plugins extends AnyPlugins = AnyPlugins> extends BodyRow<Item, Plugins> {
+    __data: boolean;
+    dataId: string;
+    original: Item;
+    constructor({ id, dataId, original, cells, cellForId, depth, parentRow }: DataBodyRowInit<Item, Plugins>);
+    clone({ includeCells, includeSubRows }?: BodyRowCloneProps): DataBodyRow<Item, Plugins>;
+}
+export type DisplayBodyRowInit<Item, Plugins extends AnyPlugins = AnyPlugins> = BodyRowInit<Item, Plugins>;
+export declare class DisplayBodyRow<Item, Plugins extends AnyPlugins = AnyPlugins> extends BodyRow<Item, Plugins> {
+    __display: boolean;
+    constructor({ id, cells, cellForId, depth, parentRow }: DisplayBodyRowInit<Item, Plugins>);
+    clone({ includeCells, includeSubRows }?: BodyRowCloneProps): DisplayBodyRow<Item, Plugins>;
+}
+export interface BodyRowsOptions<Item> {
+    rowDataId?: (item: Item, index: number) => string;
+}
+/**
+ * Converts an array of items into an array of table `BodyRow`s based on the column structure.
+ * @param data The data to display.
+ * @param flatColumns The column structure.
+ * @returns An array of `BodyRow`s representing the table structure.
+ */
+export declare const getBodyRows: <Item, Plugins extends AnyPlugins = AnyPlugins>(data: Item[], flatColumns: FlatColumn<Item, Plugins>[], { rowDataId }?: BodyRowsOptions<Item>) => BodyRow<Item, Plugins>[];
+/**
+ * Arranges and hides columns in an array of `BodyRow`s based on
+ * `columnIdOrder` by transforming the `cells` property of each row.
+ *
+ * `cellForId` should remain unaffected.
+ *
+ * @param rows The rows to transform.
+ * @param columnIdOrder The column order to transform to.
+ * @returns A new array of `BodyRow`s with corrected row references.
+ */
+export declare const getColumnedBodyRows: <Item, Plugins extends AnyPlugins = AnyPlugins>(rows: BodyRow<Item, Plugins>[], columnIdOrder: string[]) => BodyRow<Item, Plugins>[];
+/**
+ * Converts an array of items into an array of table `BodyRow`s based on a parent row.
+ * @param subItems The sub data to display.
+ * @param parentRow The parent row.
+ * @returns An array of `BodyRow`s representing the child rows of `parentRow`.
+ */
+export declare const getSubRows: <Item, Plugins extends AnyPlugins = AnyPlugins>(subItems: Item[], parentRow: BodyRow<Item, Plugins>, { rowDataId }?: BodyRowsOptions<Item>) => BodyRow<Item, Plugins>[];
+export {};

package/dist/bodyRows.js

@@ -0,0 +1,256 @@
+import { derived } from 'svelte/store';
+import { BodyCell, DataBodyCell, DisplayBodyCell } from './bodyCells.js';
+import { TableComponent } from './tableComponent.js';
+import { nonUndefined } from './utils/filter.js';
+export class BodyRow extends TableComponent {
+    cells;
+    /**
+     * Get the cell with a given column id.
+     *
+     * **This includes hidden cells.**
+     */
+    cellForId;
+    depth;
+    parentRow;
+    subRows;
+    constructor({ id, cells, cellForId, depth = 0, parentRow }) {
+        super({ id });
+        this.cells = cells;
+        this.cellForId = cellForId;
+        this.depth = depth;
+        this.parentRow = parentRow;
+    }
+    attrs() {
+        return derived(super.attrs(), ($baseAttrs) => {
+            return {
+                ...$baseAttrs,
+                role: 'row'
+            };
+        });
+    }
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    isData() {
+        return '__data' in this;
+    }
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    isDisplay() {
+        return '__display' in this;
+    }
+}
+export class DataBodyRow extends BodyRow {
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    __data = true;
+    dataId;
+    original;
+    constructor({ id, dataId, original, cells, cellForId, depth = 0, parentRow }) {
+        super({ id, cells, cellForId, depth, parentRow });
+        this.dataId = dataId;
+        this.original = original;
+    }
+    clone({ includeCells = false, includeSubRows = false } = {}) {
+        const clonedRow = new DataBodyRow({
+            id: this.id,
+            dataId: this.dataId,
+            cellForId: this.cellForId,
+            cells: this.cells,
+            original: this.original,
+            depth: this.depth
+        });
+        if (includeCells) {
+            const clonedCellsForId = Object.fromEntries(Object.entries(clonedRow.cellForId).map(([id, cell]) => {
+                const clonedCell = cell.clone();
+                clonedCell.row = clonedRow;
+                return [id, clonedCell];
+            }));
+            const clonedCells = clonedRow.cells.map(({ id }) => clonedCellsForId[id]);
+            clonedRow.cellForId = clonedCellsForId;
+            clonedRow.cells = clonedCells;
+        }
+        if (includeSubRows) {
+            const clonedSubRows = this.subRows?.map((row) => row.clone({ includeCells, includeSubRows }));
+            clonedRow.subRows = clonedSubRows;
+        }
+        else {
+            clonedRow.subRows = this.subRows;
+        }
+        return clonedRow;
+    }
+}
+export class DisplayBodyRow extends BodyRow {
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    __display = true;
+    constructor({ id, cells, cellForId, depth = 0, parentRow }) {
+        super({ id, cells, cellForId, depth, parentRow });
+    }
+    clone({ includeCells = false, includeSubRows = false } = {}) {
+        const clonedRow = new DisplayBodyRow({
+            id: this.id,
+            cellForId: this.cellForId,
+            cells: this.cells,
+            depth: this.depth
+        });
+        clonedRow.subRows = this.subRows;
+        if (includeCells) {
+            const clonedCellsForId = Object.fromEntries(Object.entries(clonedRow.cellForId).map(([id, cell]) => {
+                const clonedCell = cell.clone();
+                clonedCell.row = clonedRow;
+                return [id, clonedCell];
+            }));
+            const clonedCells = clonedRow.cells.map(({ id }) => clonedCellsForId[id]);
+            clonedRow.cellForId = clonedCellsForId;
+            clonedRow.cells = clonedCells;
+        }
+        if (includeSubRows) {
+            const clonedSubRows = this.subRows?.map((row) => row.clone({ includeCells, includeSubRows }));
+            clonedRow.subRows = clonedSubRows;
+        }
+        else {
+            clonedRow.subRows = this.subRows;
+        }
+        return clonedRow;
+    }
+}
+/**
+ * Converts an array of items into an array of table `BodyRow`s based on the column structure.
+ * @param data The data to display.
+ * @param flatColumns The column structure.
+ * @returns An array of `BodyRow`s representing the table structure.
+ */
+export const getBodyRows = (data, 
+/**
+ * Flat columns before column transformations.
+ */
+flatColumns, { rowDataId } = {}) => {
+    const rows = data.map((item, idx) => {
+        const id = idx.toString();
+        return new DataBodyRow({
+            id,
+            dataId: rowDataId !== undefined ? rowDataId(item, idx) : id,
+            original: item,
+            cells: [],
+            cellForId: {}
+        });
+    });
+    data.forEach((item, rowIdx) => {
+        const cells = flatColumns.map((col) => {
+            if (col.isData()) {
+                const dataCol = col;
+                const value = dataCol.getValue(item);
+                return new DataBodyCell({
+                    row: rows[rowIdx],
+                    column: dataCol,
+                    label: col.cell,
+                    value
+                });
+            }
+            if (col.isDisplay()) {
+                const displayCol = col;
+                return new DisplayBodyCell({
+                    row: rows[rowIdx],
+                    column: displayCol,
+                    label: col.cell
+                });
+            }
+            throw new Error('Unrecognized `FlatColumn` implementation');
+        });
+        rows[rowIdx].cells = cells;
+        flatColumns.forEach((c, colIdx) => {
+            rows[rowIdx].cellForId[c.id] = cells[colIdx];
+        });
+    });
+    return rows;
+};
+/**
+ * Arranges and hides columns in an array of `BodyRow`s based on
+ * `columnIdOrder` by transforming the `cells` property of each row.
+ *
+ * `cellForId` should remain unaffected.
+ *
+ * @param rows The rows to transform.
+ * @param columnIdOrder The column order to transform to.
+ * @returns A new array of `BodyRow`s with corrected row references.
+ */
+export const getColumnedBodyRows = (rows, columnIdOrder) => {
+    const columnedRows = rows.map((row) => {
+        const clonedRow = row.clone();
+        clonedRow.cells = [];
+        clonedRow.cellForId = {};
+        return clonedRow;
+    });
+    if (rows.length === 0 || columnIdOrder.length === 0)
+        return rows;
+    rows.forEach((row, rowIdx) => {
+        // Create a shallow copy of `row.cells` to reassign each `cell`'s `row`
+        // reference.
+        const cells = row.cells.map((cell) => {
+            const clonedCell = cell.clone();
+            clonedCell.row = columnedRows[rowIdx];
+            return clonedCell;
+        });
+        const visibleCells = columnIdOrder
+            .map((cid) => {
+            return cells.find((c) => c.id === cid);
+        })
+            .filter(nonUndefined);
+        columnedRows[rowIdx].cells = visibleCells;
+        // Include hidden cells in `cellForId` to allow row transformations on
+        // hidden cells.
+        cells.forEach((cell) => {
+            columnedRows[rowIdx].cellForId[cell.id] = cell;
+        });
+    });
+    return columnedRows;
+};
+/**
+ * Converts an array of items into an array of table `BodyRow`s based on a parent row.
+ * @param subItems The sub data to display.
+ * @param parentRow The parent row.
+ * @returns An array of `BodyRow`s representing the child rows of `parentRow`.
+ */
+export const getSubRows = (subItems, parentRow, { rowDataId } = {}) => {
+    const subRows = subItems.map((item, idx) => {
+        const id = `${parentRow.id}>${idx}`;
+        return new DataBodyRow({
+            id,
+            dataId: rowDataId !== undefined ? rowDataId(item, idx) : id,
+            original: item,
+            cells: [],
+            cellForId: {},
+            depth: parentRow.depth + 1,
+            parentRow
+        });
+    });
+    subItems.forEach((item, rowIdx) => {
+        // parentRow.cells only include visible cells.
+        // We have to derive all cells from parentRow.cellForId
+        const cellForId = Object.fromEntries(Object.values(parentRow.cellForId).map((cell) => {
+            const { column } = cell;
+            if (column.isData()) {
+                const dataCol = column;
+                const value = dataCol.getValue(item);
+                return [
+                    column.id,
+                    new DataBodyCell({
+                        row: subRows[rowIdx],
+                        column,
+                        label: column.cell,
+                        value
+                    })
+                ];
+            }
+            if (column.isDisplay()) {
+                return [
+                    column.id,
+                    new DisplayBodyCell({ row: subRows[rowIdx], column, label: column.cell })
+                ];
+            }
+            throw new Error('Unrecognized `FlatColumn` implementation');
+        }));
+        subRows[rowIdx].cellForId = cellForId;
+        const cells = parentRow.cells.map((cell) => {
+            return cellForId[cell.id];
+        });
+        subRows[rowIdx].cells = cells;
+    });
+    return subRows;
+};