@humanspeak/svelte-headless-table 5.0.0

package/dist/headerCells.js

@@ -0,0 +1,147 @@
+import { derived } from 'svelte/store';
+import { NBSP } from './constants.js';
+import { TableComponent } from './tableComponent.js';
+export class HeaderCell extends TableComponent {
+    label;
+    colspan;
+    colstart;
+    constructor({ id, label, colspan, colstart }) {
+        super({ id });
+        this.label = label;
+        this.colspan = colspan;
+        this.colstart = colstart;
+    }
+    render() {
+        if (this.label instanceof Function) {
+            if (this.state === undefined) {
+                throw new Error('Missing `state` reference');
+            }
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return this.label(this, this.state);
+        }
+        return this.label;
+    }
+    attrs() {
+        return derived(super.attrs(), ($baseAttrs) => {
+            return {
+                ...$baseAttrs,
+                role: 'columnheader',
+                colspan: this.colspan
+            };
+        });
+    }
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    isFlat() {
+        return '__flat' in this;
+    }
+    // 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
+    isFlatDisplay() {
+        return '__flat' in this && '__display' in this;
+    }
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    isGroup() {
+        return '__group' in this;
+    }
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    isGroupDisplay() {
+        return '__group' in this && '__display' in this;
+    }
+}
+export class FlatHeaderCell extends HeaderCell {
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    __flat = true;
+    constructor({ id, label, colstart }) {
+        super({ id, label, colspan: 1, colstart });
+    }
+    clone() {
+        return new FlatHeaderCell({
+            id: this.id,
+            label: this.label,
+            colstart: this.colstart
+        });
+    }
+}
+export class DataHeaderCell extends FlatHeaderCell {
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    __data = true;
+    accessorKey;
+    accessorFn;
+    constructor({ id, label, accessorKey, accessorFn, colstart }) {
+        super({ id, label, colstart });
+        this.accessorKey = accessorKey;
+        this.accessorFn = accessorFn;
+    }
+    clone() {
+        return new DataHeaderCell({
+            id: this.id,
+            label: this.label,
+            accessorFn: this.accessorFn,
+            accessorKey: this.accessorKey,
+            colstart: this.colstart
+        });
+    }
+}
+export class FlatDisplayHeaderCell extends FlatHeaderCell {
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    __display = true;
+    constructor({ id, label = NBSP, colstart }) {
+        super({ id, label, colstart });
+    }
+    clone() {
+        return new FlatDisplayHeaderCell({
+            id: this.id,
+            label: this.label,
+            colstart: this.colstart
+        });
+    }
+}
+export class GroupHeaderCell extends HeaderCell {
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    __group = true;
+    ids;
+    allId;
+    allIds;
+    constructor({ label, ids, allIds, colspan, colstart }) {
+        super({ id: `[${ids.join(',')}]`, label, colspan, colstart });
+        this.ids = ids;
+        this.allId = `[${allIds.join(',')}]`;
+        this.allIds = allIds;
+    }
+    setIds(ids) {
+        this.ids = ids;
+        this.id = `[${this.ids.join(',')}]`;
+    }
+    pushId(id) {
+        this.ids = [...this.ids, id];
+        this.id = `[${this.ids.join(',')}]`;
+    }
+    clone() {
+        return new GroupHeaderCell({
+            label: this.label,
+            ids: this.ids,
+            allIds: this.allIds,
+            colspan: this.colspan,
+            colstart: this.colstart
+        });
+    }
+}
+export class GroupDisplayHeaderCell extends GroupHeaderCell {
+    // TODO Workaround for https://github.com/vitejs/vite/issues/9528
+    __display = true;
+    constructor({ label = NBSP, ids, allIds, colspan = 1, colstart }) {
+        super({ label, ids, allIds, colspan, colstart });
+    }
+    clone() {
+        return new GroupDisplayHeaderCell({
+            label: this.label,
+            ids: this.ids,
+            allIds: this.allIds,
+            colspan: this.colspan,
+            colstart: this.colstart
+        });
+    }
+}

package/dist/headerRows.d.ts

@@ -0,0 +1,35 @@
+import type { Column } from './columns.js';
+import { type HeaderCell } from './headerCells.js';
+import { TableComponent } from './tableComponent.js';
+import type { Matrix } from './types/Matrix.js';
+import type { AnyPlugins } from './types/TablePlugin.js';
+export type HeaderRowAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = {
+    role: 'row';
+};
+export interface HeaderRowInit<Item, Plugins extends AnyPlugins = AnyPlugins> {
+    id: string;
+    cells: HeaderCell<Item, Plugins>[];
+}
+export declare class HeaderRow<Item, Plugins extends AnyPlugins = AnyPlugins> extends TableComponent<Item, Plugins, 'thead.tr'> {
+    cells: HeaderCell<Item, Plugins>[];
+    constructor({ id, cells }: HeaderRowInit<Item, Plugins>);
+    attrs(): import("svelte/store").Readable<{
+        role: "row";
+    }>;
+    clone(): HeaderRow<Item, Plugins>;
+}
+export declare const getHeaderRows: <Item, Plugins extends AnyPlugins = AnyPlugins>(columns: Column<Item, Plugins>[], flatColumnIds?: string[]) => HeaderRow<Item, Plugins>[];
+export declare const getHeaderRowMatrix: <Item, Plugins extends AnyPlugins = AnyPlugins>(columns: Column<Item, Plugins>[]) => Matrix<HeaderCell<Item, Plugins>>;
+export declare const getOrderedColumnMatrix: <Item, Plugins extends AnyPlugins = AnyPlugins>(columnMatrix: Matrix<HeaderCell<Item, Plugins>>, flatColumnIds: string[]) => Matrix<HeaderCell<Item, Plugins>>;
+export declare const headerRowsForRowMatrix: <Item, Plugins extends AnyPlugins = AnyPlugins>(rowMatrix: Matrix<HeaderCell<Item, Plugins>>) => HeaderRow<Item, Plugins>[];
+/**
+ * Multi-colspan cells will appear as multiple adjacent cells on the same row.
+ * Join these adjacent multi-colspan cells and update the colspan property.
+ *
+ * Non-adjacent multi-colspan cells (due to column ordering) must be cloned
+ * from the original .
+ *
+ * @param cells An array of cells.
+ * @returns An array of cells with no duplicate consecutive cells.
+ */
+export declare const getMergedRow: <Item, Plugins extends AnyPlugins = AnyPlugins>(cells: HeaderCell<Item, Plugins>[]) => HeaderCell<Item, Plugins>[];

package/dist/headerRows.js

@@ -0,0 +1,185 @@
+import { derived } from 'svelte/store';
+import { DataHeaderCell, FlatDisplayHeaderCell, GroupDisplayHeaderCell, GroupHeaderCell } from './headerCells.js';
+import { TableComponent } from './tableComponent.js';
+import { sum } from './utils/math.js';
+import { getNullMatrix, getTransposed } from './utils/matrix.js';
+export class HeaderRow extends TableComponent {
+    cells;
+    constructor({ id, cells }) {
+        super({ id });
+        this.cells = cells;
+    }
+    attrs() {
+        return derived(super.attrs(), ($baseAttrs) => {
+            return {
+                ...$baseAttrs,
+                role: 'row'
+            };
+        });
+    }
+    clone() {
+        return new HeaderRow({
+            id: this.id,
+            cells: this.cells
+        });
+    }
+}
+export const getHeaderRows = (columns, flatColumnIds = []) => {
+    const rowMatrix = getHeaderRowMatrix(columns);
+    // Perform all column operations on the transposed columnMatrix. This helps
+    // to reduce the number of expensive transpose operations required.
+    let columnMatrix = getTransposed(rowMatrix);
+    columnMatrix = getOrderedColumnMatrix(columnMatrix, flatColumnIds);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    populateGroupHeaderCellIds(columnMatrix);
+    return headerRowsForRowMatrix(getTransposed(columnMatrix));
+};
+export const getHeaderRowMatrix = (columns) => {
+    const maxColspan = sum(columns.map((c) => (c.isGroup() ? c.ids.length : 1)));
+    const maxHeight = Math.max(...columns.map((c) => c.height));
+    const rowMatrix = getNullMatrix(maxColspan, maxHeight);
+    let cellOffset = 0;
+    columns.forEach((c) => {
+        const heightOffset = maxHeight - c.height;
+        loadHeaderRowMatrix(rowMatrix, c, heightOffset, cellOffset);
+        cellOffset += c.isGroup() ? c.ids.length : 1;
+    });
+    // Replace null cells with blank display cells.
+    return rowMatrix.map((cells, rowIdx) => cells.map((cell, columnIdx) => {
+        if (cell !== null)
+            return cell;
+        if (rowIdx === maxHeight - 1)
+            return new FlatDisplayHeaderCell({ id: columnIdx.toString(), colstart: columnIdx });
+        const flatId = rowMatrix[maxHeight - 1][columnIdx]?.id ?? columnIdx.toString();
+        return new GroupDisplayHeaderCell({ ids: [], allIds: [flatId], colstart: columnIdx });
+    }));
+};
+const loadHeaderRowMatrix = (rowMatrix, column, rowOffset, cellOffset) => {
+    if (column.isData()) {
+        // `DataHeaderCell` should always be in the last row.
+        rowMatrix[rowMatrix.length - 1][cellOffset] = new DataHeaderCell({
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            label: column.header,
+            accessorFn: column.accessorFn,
+            accessorKey: column.accessorKey,
+            id: column.id,
+            colstart: cellOffset
+        });
+        return;
+    }
+    if (column.isDisplay()) {
+        rowMatrix[rowMatrix.length - 1][cellOffset] = new FlatDisplayHeaderCell({
+            id: column.id,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            label: column.header,
+            colstart: cellOffset
+        });
+        return;
+    }
+    if (column.isGroup()) {
+        // Fill multi-colspan cells.
+        for (let i = 0; i < column.ids.length; i++) {
+            rowMatrix[rowOffset][cellOffset + i] = new GroupHeaderCell({
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                label: column.header,
+                colspan: 1,
+                allIds: column.ids,
+                ids: [],
+                colstart: cellOffset
+            });
+        }
+        let childCellOffset = 0;
+        column.columns.forEach((c) => {
+            loadHeaderRowMatrix(rowMatrix, c, rowOffset + 1, cellOffset + childCellOffset);
+            childCellOffset += c.isGroup() ? c.ids.length : 1;
+        });
+        return;
+    }
+};
+export const getOrderedColumnMatrix = (columnMatrix, flatColumnIds) => {
+    if (flatColumnIds.length === 0) {
+        return columnMatrix;
+    }
+    const orderedColumnMatrix = [];
+    // Each row of the transposed matrix represents a column.
+    // The `FlatHeaderCell` should be the last cell of each column.
+    flatColumnIds.forEach((key, columnIdx) => {
+        const nextColumn = columnMatrix.find((columnCells) => {
+            const flatCell = columnCells[columnCells.length - 1];
+            if (!flatCell.isFlat()) {
+                throw new Error('The last element of each column must be a `FlatHeaderCell`');
+            }
+            return flatCell.id === key;
+        });
+        if (nextColumn !== undefined) {
+            orderedColumnMatrix.push(nextColumn.map((column) => {
+                const clonedColumn = column.clone();
+                clonedColumn.colstart = columnIdx;
+                return clonedColumn;
+            }));
+        }
+    });
+    return orderedColumnMatrix;
+};
+const populateGroupHeaderCellIds = (columnMatrix) => {
+    columnMatrix.forEach((columnCells) => {
+        const lastCell = columnCells[columnCells.length - 1];
+        if (!lastCell.isFlat()) {
+            throw new Error('The last element of each column must be a `FlatHeaderCell`');
+        }
+        columnCells.forEach((c) => {
+            if (c.isGroup()) {
+                c.pushId(lastCell.id);
+            }
+        });
+    });
+};
+export const headerRowsForRowMatrix = (rowMatrix) => {
+    return rowMatrix.map((rowCells, rowIdx) => {
+        return new HeaderRow({ id: rowIdx.toString(), cells: getMergedRow(rowCells) });
+    });
+};
+/**
+ * Multi-colspan cells will appear as multiple adjacent cells on the same row.
+ * Join these adjacent multi-colspan cells and update the colspan property.
+ *
+ * Non-adjacent multi-colspan cells (due to column ordering) must be cloned
+ * from the original .
+ *
+ * @param cells An array of cells.
+ * @returns An array of cells with no duplicate consecutive cells.
+ */
+export const getMergedRow = (cells) => {
+    if (cells.length === 0) {
+        return cells;
+    }
+    const mergedCells = [];
+    let startIdx = 0;
+    let endIdx = 1;
+    while (startIdx < cells.length) {
+        const cell = cells[startIdx].clone();
+        if (!cell.isGroup()) {
+            mergedCells.push(cell);
+            startIdx++;
+            continue;
+        }
+        endIdx = startIdx + 1;
+        const ids = [...cell.ids];
+        while (endIdx < cells.length) {
+            const nextCell = cells[endIdx];
+            if (!nextCell.isGroup()) {
+                break;
+            }
+            if (cell.allId !== nextCell.allId) {
+                break;
+            }
+            ids.push(...nextCell.ids);
+            endIdx++;
+        }
+        cell.setIds(ids);
+        cell.colspan = endIdx - startIdx;
+        mergedCells.push(cell);
+        startIdx = endIdx;
+    }
+    return mergedCells;
+};

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export * from '@humanspeak/svelte-render';
+export { Subscribe } from '@humanspeak/svelte-subscribe';
+export { createTable } from './createTable.js';
+export { Table } from './createTable.js';
+export { HeaderRow } from './headerRows.js';
+export { HeaderCell, FlatHeaderCell, DataHeaderCell, FlatDisplayHeaderCell, GroupHeaderCell, GroupDisplayHeaderCell } from './headerCells.js';
+export * from './bodyRows.js';
+export * from './bodyCells.js';
+export * from './columns.js';
+export type * from './createViewModel.js';
+export type * from './types/Label.js';

package/dist/index.js

@@ -0,0 +1,12 @@
+// components
+export * from '@humanspeak/svelte-render';
+export { Subscribe } from '@humanspeak/svelte-subscribe';
+// table core
+export { createTable } from './createTable.js';
+// models
+export { Table } from './createTable.js';
+export { HeaderRow } from './headerRows.js';
+export { HeaderCell, FlatHeaderCell, DataHeaderCell, FlatDisplayHeaderCell, GroupHeaderCell, GroupDisplayHeaderCell } from './headerCells.js';
+export * from './bodyRows.js';
+export * from './bodyCells.js';
+export * from './columns.js';

package/dist/plugins/addColumnFilters.d.ts

@@ -0,0 +1,39 @@
+import type { RenderConfig } from '@humanspeak/svelte-subscribe';
+import type { BodyRow } from '../bodyRows.js';
+import type { TablePlugin, NewTablePropSet } from '../types/TablePlugin.js';
+import { type Readable, type Writable } from 'svelte/store';
+import type { PluginInitTableState } from '../createViewModel.js';
+export interface ColumnFiltersConfig {
+    serverSide?: boolean;
+}
+export interface ColumnFiltersState<Item> {
+    filterValues: Writable<Record<string, unknown>>;
+    preFilteredRows: Readable<BodyRow<Item>[]>;
+}
+export interface ColumnFiltersColumnOptions<Item, FilterValue = any> {
+    fn: ColumnFilterFn<FilterValue>;
+    initialFilterValue?: FilterValue;
+    render?: (props: ColumnRenderConfigPropArgs<Item, FilterValue>) => RenderConfig;
+}
+interface ColumnRenderConfigPropArgs<Item, FilterValue = any, Value = any> extends PluginInitTableState<Item> {
+    id: string;
+    filterValue: Writable<FilterValue>;
+    values: Readable<Value[]>;
+    preFilteredRows: Readable<BodyRow<Item>[]>;
+    preFilteredValues: Readable<Value[]>;
+}
+export type ColumnFilterFn<FilterValue = any, Value = any> = (props: ColumnFilterFnProps<FilterValue, Value>) => boolean;
+export type ColumnFilterFnProps<FilterValue = any, Value = any> = {
+    filterValue: FilterValue;
+    value: Value;
+};
+export type ColumnFiltersPropSet = NewTablePropSet<{
+    'thead.tr.th': {
+        render?: RenderConfig;
+    } | undefined;
+}>;
+export declare const addColumnFilters: <Item>({ serverSide }?: ColumnFiltersConfig) => TablePlugin<Item, ColumnFiltersState<Item>, ColumnFiltersColumnOptions<Item>, ColumnFiltersPropSet>;
+export declare const matchFilter: ColumnFilterFn<unknown, unknown>;
+export declare const textPrefixFilter: ColumnFilterFn<string, string>;
+export declare const numberRangeFilter: ColumnFilterFn<[number | null, number | null], number>;
+export {};

package/dist/plugins/addColumnFilters.js

@@ -0,0 +1,117 @@
+import { keyed } from '@humanspeak/svelte-keyed';
+import { derived, writable } from 'svelte/store';
+const getFilteredRows = (rows, filterValues, columnOptions) => {
+    const $filteredRows = rows
+        // Filter `subRows`
+        .map((row) => {
+        const { subRows } = row;
+        if (subRows === undefined) {
+            return row;
+        }
+        const filteredSubRows = getFilteredRows(subRows, filterValues, columnOptions);
+        const clonedRow = row.clone();
+        clonedRow.subRows = filteredSubRows;
+        return clonedRow;
+    })
+        .filter((row) => {
+        if ((row.subRows?.length ?? 0) !== 0) {
+            return true;
+        }
+        for (const [columnId, columnOption] of Object.entries(columnOptions)) {
+            const bodyCell = row.cellForId[columnId];
+            if (!bodyCell.isData()) {
+                continue;
+            }
+            const { value } = bodyCell;
+            const filterValue = filterValues[columnId];
+            if (filterValue === undefined) {
+                continue;
+            }
+            const isMatch = columnOption.fn({ value, filterValue });
+            if (!isMatch) {
+                return false;
+            }
+        }
+        return true;
+    });
+    return $filteredRows;
+};
+export const addColumnFilters = ({ serverSide = false } = {}) => ({ columnOptions, tableState }) => {
+    const filterValues = writable({});
+    const preFilteredRows = writable([]);
+    const filteredRows = writable([]);
+    const pluginState = { filterValues, preFilteredRows };
+    const deriveRows = (rows) => {
+        return derived([rows, filterValues], ([$rows, $filterValues]) => {
+            preFilteredRows.set($rows);
+            if (serverSide) {
+                filteredRows.set($rows);
+                return $rows;
+            }
+            const _filteredRows = getFilteredRows($rows, $filterValues, columnOptions);
+            filteredRows.set(_filteredRows);
+            return _filteredRows;
+        });
+    };
+    return {
+        pluginState,
+        deriveRows,
+        hooks: {
+            'thead.tr.th': (headerCell) => {
+                const filterValue = keyed(filterValues, headerCell.id);
+                const props = derived([], () => {
+                    const columnOption = columnOptions[headerCell.id];
+                    if (columnOption === undefined) {
+                        return undefined;
+                    }
+                    filterValue.set(columnOption.initialFilterValue);
+                    const preFilteredValues = derived(preFilteredRows, ($rows) => {
+                        if (headerCell.isData()) {
+                            return $rows.map((row) => {
+                                // TODO check and handle different BodyCell types
+                                const cell = row.cellForId[headerCell.id];
+                                return cell?.value;
+                            });
+                        }
+                        return [];
+                    });
+                    const values = derived(filteredRows, ($rows) => {
+                        if (headerCell.isData()) {
+                            return $rows.map((row) => {
+                                // TODO check and handle different BodyCell types
+                                const cell = row.cellForId[headerCell.id];
+                                return cell?.value;
+                            });
+                        }
+                        return [];
+                    });
+                    const render = columnOption.render?.({
+                        id: headerCell.id,
+                        filterValue,
+                        ...tableState,
+                        values,
+                        preFilteredRows,
+                        preFilteredValues
+                    });
+                    return { render };
+                });
+                return { props };
+            }
+        }
+    };
+};
+export const matchFilter = ({ filterValue, value }) => {
+    if (filterValue === undefined) {
+        return true;
+    }
+    return filterValue === value;
+};
+export const textPrefixFilter = ({ filterValue, value }) => {
+    if (filterValue === '') {
+        return true;
+    }
+    return String(value).toLowerCase().startsWith(String(filterValue).toLowerCase());
+};
+export const numberRangeFilter = ({ filterValue: [min, max], value }) => {
+    return (min ?? -Infinity) <= value && value <= (max ?? Infinity);
+};

package/dist/plugins/addColumnOrder.d.ts

@@ -0,0 +1,10 @@
+import type { NewTablePropSet, TablePlugin } from '../types/TablePlugin.js';
+import { type Writable } from 'svelte/store';
+export interface ColumnOrderConfig {
+    initialColumnIdOrder?: string[];
+    hideUnspecifiedColumns?: boolean;
+}
+export interface ColumnOrderState {
+    columnIdOrder: Writable<string[]>;
+}
+export declare const addColumnOrder: <Item>({ initialColumnIdOrder, hideUnspecifiedColumns }?: ColumnOrderConfig) => TablePlugin<Item, ColumnOrderState, Record<string, never>, NewTablePropSet<never>>;

package/dist/plugins/addColumnOrder.js

@@ -0,0 +1,24 @@
+import { derived, writable } from 'svelte/store';
+export const addColumnOrder = ({ initialColumnIdOrder = [], hideUnspecifiedColumns = false } = {}) => () => {
+    const columnIdOrder = writable(initialColumnIdOrder);
+    const pluginState = { columnIdOrder };
+    const deriveFlatColumns = (flatColumns) => {
+        return derived([flatColumns, columnIdOrder], ([$flatColumns, $columnIdOrder]) => {
+            const _flatColumns = [...$flatColumns];
+            const orderedFlatColumns = [];
+            $columnIdOrder.forEach((id) => {
+                const colIdx = _flatColumns.findIndex((c) => c.id === id);
+                orderedFlatColumns.push(..._flatColumns.splice(colIdx, 1));
+            });
+            if (!hideUnspecifiedColumns) {
+                // Push the remaining unspecified columns.
+                orderedFlatColumns.push(..._flatColumns);
+            }
+            return orderedFlatColumns;
+        });
+    };
+    return {
+        pluginState,
+        deriveFlatColumns
+    };
+};

package/dist/plugins/addDataExport.d.ts

@@ -0,0 +1,21 @@
+import type { TablePlugin } from '../types/TablePlugin.js';
+import { type Readable } from 'svelte/store';
+export type DataExportFormat = 'object' | 'json' | 'csv';
+type ExportForFormat = {
+    object: Record<string, unknown>[];
+    json: string;
+    csv: string;
+};
+export type DataExport<F extends DataExportFormat> = ExportForFormat[F];
+export interface DataExportConfig<F extends DataExportFormat> {
+    childrenKey?: string;
+    format?: F;
+}
+export interface DataExportState<F extends DataExportFormat> {
+    exportedData: Readable<DataExport<F>>;
+}
+export interface DataExportColumnOptions {
+    exclude?: boolean;
+}
+export declare const addDataExport: <Item, F extends DataExportFormat = "object">({ format, childrenKey }?: DataExportConfig<F>) => TablePlugin<Item, DataExportState<F>, DataExportColumnOptions>;
+export {};

package/dist/plugins/addDataExport.js

@@ -0,0 +1,68 @@
+import { isReadable } from '../utils/store.js';
+import { derived, get } from 'svelte/store';
+const getObjectsFromRows = (rows, ids, childrenKey) => {
+    return rows.map((row) => {
+        const dataObject = Object.fromEntries(ids.map((id) => {
+            const cell = row.cellForId[id];
+            if (cell.isData()) {
+                return [id, cell.value];
+            }
+            if (cell.isDisplay() && cell.column.data !== undefined) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                let data = cell.column.data(cell, row.state);
+                if (isReadable(data)) {
+                    data = get(data);
+                }
+                return [id, data];
+            }
+            return [id, null];
+        }));
+        if (row.subRows !== undefined) {
+            dataObject[childrenKey] = getObjectsFromRows(row.subRows, ids, childrenKey);
+        }
+        return dataObject;
+    });
+};
+const getCsvFromRows = (rows, ids) => {
+    const dataLines = rows.map((row) => {
+        const line = ids.map((id) => {
+            const cell = row.cellForId[id];
+            if (cell.isData()) {
+                return cell.value;
+            }
+            if (cell.isDisplay() && cell.column.data !== undefined) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                let data = cell.column.data(cell, row.state);
+                if (isReadable(data)) {
+                    data = get(data);
+                }
+                return data;
+            }
+            return null;
+        });
+        return line.join(',');
+    });
+    const headerLine = ids.join(',');
+    return headerLine + '\n' + dataLines.join('\n');
+};
+export const addDataExport = ({ format = 'object', childrenKey = 'children' } = {}) => ({ tableState, columnOptions }) => {
+    const excludedIds = Object.entries(columnOptions)
+        .filter(([, option]) => option.exclude === true)
+        .map(([columnId]) => columnId);
+    const { visibleColumns, rows } = tableState;
+    const exportedIds = derived(visibleColumns, ($visibleColumns) => $visibleColumns.map((c) => c.id).filter((id) => !excludedIds.includes(id)));
+    const exportedData = derived([rows, exportedIds], ([$rows, $exportedIds]) => {
+        switch (format) {
+            case 'json':
+                return JSON.stringify(getObjectsFromRows($rows, $exportedIds, childrenKey));
+            case 'csv':
+                return getCsvFromRows($rows, $exportedIds);
+            default:
+                return getObjectsFromRows($rows, $exportedIds, childrenKey);
+        }
+    });
+    const pluginState = { exportedData };
+    return {
+        pluginState
+    };
+};