addGroupBy

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-headless-table",
-	"version": "0.6.1",
+	"version": "0.7.0",
 	"scripts": {
 		"dev": "svelte-kit dev",
 		"build": "svelte-kit build",

src/lib/bodyCells.HeaderCell.render.test.ts

@@ -10,7 +10,17 @@ interface User {
 	status: string;
 }
 
-class TestHeaderCell<Item> extends HeaderCell<Item> {}
+class TestHeaderCell<Item> extends HeaderCell<Item> {
+	clone(): TestHeaderCell<Item> {
+		return new TestHeaderCell({
+			id: this.id,
+			colspan: this.colspan,
+			label: this.label,
+			isData: this.isData,
+			isFlat: this.isFlat,
+		});
+	}
+}
 
 it('renders string label', () => {
 	const actual = new TestHeaderCell({

src/lib/bodyCells.ts

@@ -32,8 +32,10 @@ export abstract class BodyCell<
 
 	abstract attrs(): Readable<BodyCellAttributes<Item, Plugins>>;
 
+	abstract clone(): BodyCell<Item, Plugins>;
+
 	rowColId(): string {
-		return `${this.row.id}-${this.column.id}`;
+		return `${this.row.id}:${this.column.id}`;
 	}
 }
 
@@ -81,6 +83,17 @@ export class DataBodyCell<
 			return {};
 		});
 	}
+
+	clone(): DataBodyCell<Item, Plugins> {
+		const clonedCell = new DataBodyCell({
+			row: this.row,
+			column: this.column,
+			label: this.label,
+			value: this.value,
+		});
+		clonedCell.metadataForName = this.metadataForName;
+		return clonedCell;
+	}
 }
 
 export type DisplayBodyCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<
@@ -115,4 +128,14 @@ export class DisplayBodyCell<Item, Plugins extends AnyPlugins = AnyPlugins> exte
 			return {};
 		});
 	}
+
+	clone(): DisplayBodyCell<Item, Plugins> {
+		const clonedCell = new DisplayBodyCell({
+			row: this.row,
+			column: this.column,
+			label: this.label,
+		});
+		clonedCell.metadataForName = this.metadataForName;
+		return clonedCell;
+	}
 }

src/lib/bodyRows.ts

@@ -3,7 +3,6 @@ import { BodyCell, DataBodyCell, DisplayBodyCell } from './bodyCells';
 import { DataColumn, DisplayColumn, type FlatColumn } from './columns';
 import { TableComponent } from './tableComponent';
 import type { AnyPlugins } from './types/TablePlugin';
-import { getCloned } from './utils/clone';
 import { nonUndefined } from './utils/filter';
 
 export interface BodyRowInit<Item, Plugins extends AnyPlugins = AnyPlugins> {
@@ -17,6 +16,10 @@ export interface BodyRowInit<Item, Plugins extends AnyPlugins = AnyPlugins> {
 // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-interface
 export interface BodyRowAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> {}
 
+interface BodyRowCloneProps {
+	includeCells?: boolean;
+}
+
 export class BodyRow<Item, Plugins extends AnyPlugins = AnyPlugins> extends TableComponent<
 	Item,
 	Plugins,
@@ -45,6 +48,31 @@ export class BodyRow<Item, Plugins extends AnyPlugins = AnyPlugins> extends Tabl
 			return {};
 		});
 	}
+
+	clone({ includeCells = false }: BodyRowCloneProps = {}): BodyRow<Item, Plugins> {
+		const clonedRow = new BodyRow({
+			id: this.id,
+			cellForId: this.cellForId,
+			cells: this.cells,
+			original: this.original,
+			depth: this.depth,
+		});
+		clonedRow.metadataForName = this.metadataForName;
+		if (!includeCells) {
+			return clonedRow;
+		}
+		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;
+		return clonedRow;
+	}
 }
 
 /**
@@ -120,9 +148,9 @@ export const getColumnedBodyRows = <Item, Plugins extends AnyPlugins = AnyPlugin
 		// Create a shallow copy of `row.cells` to reassign each `cell`'s `row`
 		// reference.
 		const cells = row.cells.map((cell) => {
-			return getCloned(cell, {
-				row: columnedRows[rowIdx],
-			});
+			const clonedCell = cell.clone();
+			clonedCell.row = columnedRows[rowIdx];
+			return clonedCell;
 		});
 		const visibleCells = columnIdOrder
 			.map((cid) => {

src/lib/headerCells.ts

@@ -51,6 +51,8 @@ export abstract class HeaderCell<
 			};
 		});
 	}
+
+	abstract clone(): HeaderCell<Item, Plugins>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -72,6 +74,14 @@ export class FlatHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> exten
 	constructor({ id, label, isData }: FlatHeaderCellInit<Item, Plugins>) {
 		super({ id, label, isData, colspan: 1, isFlat: true });
 	}
+
+	clone(): FlatHeaderCell<Item, Plugins> {
+		return new FlatHeaderCell({
+			id: this.id,
+			label: this.label,
+			isData: this.isData,
+		});
+	}
 }
 
 export type DataHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<
@@ -93,6 +103,15 @@ export class DataHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> exten
 		this.accessorKey = accessorKey;
 		this.accessorFn = accessorFn;
 	}
+
+	clone(): DataHeaderCell<Item, Plugins> {
+		return new DataHeaderCell({
+			id: this.id,
+			label: this.label,
+			accessorFn: this.accessorFn,
+			accessorKey: this.accessorKey,
+		});
+	}
 }
 
 export type DisplayHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<
@@ -109,6 +128,13 @@ export class DisplayHeaderCell<
 	constructor({ id, label = NBSP }: DisplayHeaderCellInit<Item, Plugins>) {
 		super({ id, label });
 	}
+
+	clone(): DisplayHeaderCell<Item, Plugins> {
+		return new DisplayHeaderCell({
+			id: this.id,
+			label: this.label,
+		});
+	}
 }
 
 export type GroupHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<
@@ -132,12 +158,23 @@ export class GroupHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> exte
 		this.allId = `[${allIds.join(',')}]`;
 		this.allIds = allIds;
 	}
+
 	setIds(ids: string[]) {
 		this.ids = ids;
 		this.id = `[${this.ids.join(',')}]`;
 	}
+
 	pushId(id: string) {
 		this.ids = [...this.ids, id];
 		this.id = `[${this.ids.join(',')}]`;
 	}
+
+	clone(): GroupHeaderCell<Item, Plugins> {
+		return new GroupHeaderCell({
+			label: this.label,
+			colspan: this.colspan,
+			ids: this.ids,
+			allIds: this.allIds,
+		});
+	}
 }

src/lib/headerRows.ts

@@ -9,7 +9,6 @@ import {
 import { TableComponent } from './tableComponent';
 import type { Matrix } from './types/Matrix';
 import type { AnyPlugins } from './types/TablePlugin';
-import { getCloned } from './utils/clone';
 import { sum } from './utils/math';
 import { getNullMatrix, getTransposed } from './utils/matrix';
 
@@ -31,6 +30,13 @@ export class HeaderRow<Item, Plugins extends AnyPlugins = AnyPlugins> extends Ta
 		super({ id });
 		this.cells = cells;
 	}
+
+	clone(): HeaderRow<Item, Plugins> {
+		return new HeaderRow({
+			id: this.id,
+			cells: this.cells,
+		});
+	}
 }
 
 export const getHeaderRows = <Item, Plugins extends AnyPlugins = AnyPlugins>(
@@ -173,7 +179,7 @@ export const getMergedRow = <Item, Plugins extends AnyPlugins = AnyPlugins>(
 	let startIdx = 0;
 	let endIdx = 1;
 	while (startIdx < cells.length) {
-		const cell = getCloned(cells[startIdx]);
+		const cell = cells[startIdx].clone();
 		if (!(cell instanceof GroupHeaderCell)) {
 			mergedCells.push(cell);
 			startIdx++;

src/lib/plugins/addColumnFilters.ts

@@ -6,7 +6,6 @@ import type { RenderConfig } from '$lib/render';
 import type { PluginInitTableState } from '$lib/createViewModel';
 import { DataBodyCell } from '$lib/bodyCells';
 import { DataHeaderCell } from '$lib/headerCells';
-import { getCloned } from '$lib/utils/clone';
 
 export interface ColumnFiltersState<Item> {
 	filterValues: Writable<Record<string, unknown>>;
@@ -54,17 +53,17 @@ const getFilteredRows = <Item, Row extends BodyRow<Item>>(
 	filterValues: Record<string, unknown>,
 	columnOptions: Record<string, ColumnFiltersColumnOptions<Item>>
 ): Row[] => {
-	const _filteredRows = rows
+	const $filteredRows = rows
 		// Filter `subRows`
 		.map((row) => {
 			const { subRows } = row;
 			if (subRows === undefined) {
 				return row;
 			}
 			const filteredSubRows = getFilteredRows(subRows, filterValues, columnOptions);
-			return getCloned(row, {
-				subRows: filteredSubRows,
-			} as unknown as Row);
+			const clonedRow = row.clone() as Row;
+			clonedRow.subRows = filteredSubRows;
+			return clonedRow;
 		})
 		.filter((row) => {
 			if ((row.subRows?.length ?? 0) !== 0) {
@@ -87,7 +86,7 @@ const getFilteredRows = <Item, Row extends BodyRow<Item>>(
 			}
 			return true;
 		});
-	return _filteredRows;
+	return $filteredRows;
 };
 
 export const addColumnFilters =