@humanspeak/svelte-headless-table 5.0.0

package/dist/plugins/addResizedColumns.js

@@ -0,0 +1,252 @@
+import { sum } from '../utils/math.js';
+import { keyed } from '@humanspeak/svelte-keyed';
+import { derived, writable } from 'svelte/store';
+const getDragXPos = (event) => {
+    if (event instanceof MouseEvent)
+        return event.clientX;
+    if (event instanceof TouchEvent)
+        return event.targetTouches[0].pageX;
+    return 0;
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isCellDisabled = (cell, disabledIds) => {
+    if (disabledIds.includes(cell.id))
+        return true;
+    if (cell.isGroup() && cell.ids.every((id) => disabledIds.includes(id))) {
+        return true;
+    }
+    return false;
+};
+export const addResizedColumns = ({ onResizeEnd } = {}) => ({ columnOptions }) => {
+    const disabledResizeIds = Object.entries(columnOptions)
+        .filter(([, option]) => option.disable === true)
+        .map(([columnId]) => columnId);
+    const initialWidths = Object.fromEntries(Object.entries(columnOptions)
+        .filter(([, option]) => option.initialWidth !== undefined)
+        .map(([columnId, { initialWidth }]) => [columnId, initialWidth]));
+    const columnsWidthState = writable({
+        current: initialWidths,
+        start: {}
+    });
+    const columnWidths = keyed(columnsWidthState, 'current');
+    const pluginState = { columnWidths };
+    const dragStartXPosForId = {};
+    const nodeForId = {};
+    return {
+        pluginState,
+        hooks: {
+            'thead.tr.th': (cell) => {
+                const dblClick = (event) => {
+                    if (isCellDisabled(cell, disabledResizeIds))
+                        return;
+                    const { target } = event;
+                    if (target === null)
+                        return;
+                    event.stopPropagation();
+                    event.preventDefault();
+                    if (cell.isGroup()) {
+                        cell.ids.forEach((id) => {
+                            const node = nodeForId[id];
+                            if (node !== undefined) {
+                                columnWidths.update(($columnWidths) => ({
+                                    ...$columnWidths,
+                                    [id]: initialWidths[id]
+                                }));
+                            }
+                        });
+                    }
+                    else {
+                        const node = nodeForId[cell.id];
+                        if (node !== undefined) {
+                            columnWidths.update(($columnWidths) => ({
+                                ...$columnWidths,
+                                [cell.id]: initialWidths[cell.id]
+                            }));
+                        }
+                    }
+                };
+                let tapedTwice = false;
+                const checkDoubleTap = (event) => {
+                    if (!tapedTwice) {
+                        tapedTwice = true;
+                        setTimeout(function () {
+                            tapedTwice = false;
+                        }, 300);
+                        return false;
+                    }
+                    event.preventDefault();
+                    dblClick(event);
+                };
+                const dragStart = (event) => {
+                    if (isCellDisabled(cell, disabledResizeIds))
+                        return;
+                    const { target } = event;
+                    if (target === null)
+                        return;
+                    event.stopPropagation();
+                    event.preventDefault();
+                    dragStartXPosForId[cell.id] = getDragXPos(event);
+                    columnsWidthState.update(($columnsWidthState) => {
+                        const $updatedState = {
+                            ...$columnsWidthState,
+                            start: { ...$columnsWidthState.start }
+                        };
+                        if (cell.isGroup()) {
+                            cell.ids.forEach((id) => {
+                                $updatedState.start[id] = $columnsWidthState.current[id];
+                            });
+                        }
+                        else {
+                            $updatedState.start[cell.id] = $columnsWidthState.current[cell.id];
+                        }
+                        return $updatedState;
+                    });
+                    if (event instanceof MouseEvent) {
+                        window.addEventListener('mousemove', dragMove);
+                        window.addEventListener('mouseup', dragEnd);
+                    }
+                    else {
+                        window.addEventListener('touchmove', dragMove);
+                        window.addEventListener('touchend', dragEnd);
+                    }
+                };
+                const dragMove = (event) => {
+                    event.stopPropagation();
+                    event.preventDefault();
+                    const deltaWidth = getDragXPos(event) - dragStartXPosForId[cell.id];
+                    columnsWidthState.update(($columnsWidthState) => {
+                        const $updatedState = {
+                            ...$columnsWidthState,
+                            current: { ...$columnsWidthState.current }
+                        };
+                        if (cell.isGroup()) {
+                            const enabledIds = cell.ids.filter((id) => !disabledResizeIds.includes(id));
+                            const totalStartWidth = sum(enabledIds.map((id) => $columnsWidthState.start[id]));
+                            enabledIds.forEach((id) => {
+                                const startWidth = $columnsWidthState.start[id];
+                                if (startWidth !== undefined) {
+                                    $updatedState.current[id] = Math.max(0, startWidth + deltaWidth * (startWidth / totalStartWidth));
+                                }
+                            });
+                        }
+                        else {
+                            const startWidth = $columnsWidthState.start[cell.id];
+                            const { minWidth = 0, maxWidth } = columnOptions[cell.id] ?? {};
+                            if (startWidth !== undefined) {
+                                $updatedState.current[cell.id] = Math.min(Math.max(minWidth, startWidth + deltaWidth), ...(maxWidth === undefined ? [] : [maxWidth]));
+                            }
+                        }
+                        return $updatedState;
+                    });
+                };
+                const dragEnd = (event) => {
+                    event.stopPropagation();
+                    event.preventDefault();
+                    if (cell.isGroup()) {
+                        cell.ids.forEach((id) => {
+                            const node = nodeForId[id];
+                            if (node !== undefined) {
+                                columnWidths.update(($columnWidths) => ({
+                                    ...$columnWidths,
+                                    [id]: node.getBoundingClientRect().width
+                                }));
+                            }
+                        });
+                    }
+                    else {
+                        const node = nodeForId[cell.id];
+                        if (node !== undefined) {
+                            columnWidths.update(($columnWidths) => ({
+                                ...$columnWidths,
+                                [cell.id]: node.getBoundingClientRect().width
+                            }));
+                        }
+                    }
+                    onResizeEnd?.(event);
+                    if (event instanceof MouseEvent) {
+                        window.removeEventListener('mousemove', dragMove);
+                        window.removeEventListener('mouseup', dragEnd);
+                    }
+                    else {
+                        window.removeEventListener('touchmove', dragMove);
+                        window.removeEventListener('touchend', dragEnd);
+                    }
+                };
+                const $props = (node) => {
+                    nodeForId[cell.id] = node;
+                    if (cell.isFlat()) {
+                        columnWidths.update(($columnWidths) => ({
+                            ...$columnWidths,
+                            [cell.id]: node.getBoundingClientRect().width
+                        }));
+                    }
+                    return {
+                        destroy() {
+                            delete nodeForId[cell.id];
+                        }
+                    };
+                };
+                $props.drag = (node) => {
+                    node.addEventListener('mousedown', dragStart);
+                    node.addEventListener('touchstart', dragStart);
+                    return {
+                        destroy() {
+                            node.removeEventListener('mousedown', dragStart);
+                            node.removeEventListener('touchstart', dragStart);
+                        }
+                    };
+                };
+                $props.reset = (node) => {
+                    node.addEventListener('dblclick', dblClick);
+                    node.addEventListener('touchend', checkDoubleTap);
+                    return {
+                        destroy() {
+                            node.removeEventListener('dblckick', dblClick);
+                            node.removeEventListener('touchend', checkDoubleTap);
+                        }
+                    };
+                };
+                $props.disabled = isCellDisabled(cell, disabledResizeIds);
+                const props = derived([], () => {
+                    return $props;
+                });
+                const attrs = derived(columnWidths, ($columnWidths) => {
+                    const width = cell.isGroup()
+                        ? sum(cell.ids.map((id) => $columnWidths[id]))
+                        : $columnWidths[cell.id];
+                    if (width === undefined) {
+                        return {};
+                    }
+                    const widthPx = `${width}px`;
+                    return {
+                        style: {
+                            width: widthPx,
+                            'min-width': widthPx,
+                            'max-width': widthPx,
+                            'box-sizing': 'border-box'
+                        }
+                    };
+                });
+                return { props, attrs };
+            },
+            'tbody.tr.td': (cell) => {
+                const attrs = derived(columnWidths, ($columnWidths) => {
+                    const width = $columnWidths[cell.id];
+                    if (width === undefined) {
+                        return {};
+                    }
+                    const widthPx = `${width}px`;
+                    return {
+                        style: {
+                            width: widthPx,
+                            'min-width': widthPx,
+                            'max-width': widthPx,
+                            'box-sizing': 'border-box'
+                        }
+                    };
+                });
+                return { attrs };
+            }
+        }
+    };
+};

package/dist/plugins/addSelectedRows.d.ts

@@ -0,0 +1,29 @@
+import type { BodyRow } from '../bodyRows.js';
+import type { NewTablePropSet, TablePlugin } from '../types/TablePlugin.js';
+import { type RecordSetStore } from '../utils/store.js';
+import { type Readable, type Writable } from 'svelte/store';
+export interface SelectedRowsConfig<Item> {
+    initialSelectedDataIds?: Record<string, boolean>;
+    linkDataSubRows?: boolean;
+}
+export interface SelectedRowsState<Item> {
+    selectedDataIds: RecordSetStore<string>;
+    allRowsSelected: Writable<boolean>;
+    someRowsSelected: Readable<boolean>;
+    allPageRowsSelected: Writable<boolean>;
+    somePageRowsSelected: Readable<boolean>;
+    getRowState: (row: BodyRow<Item>) => SelectedRowsRowState;
+}
+export interface SelectedRowsRowState {
+    isSelected: Writable<boolean>;
+    isSomeSubRowsSelected: Readable<boolean>;
+    isAllSubRowsSelected: Readable<boolean>;
+}
+export type SelectedRowsPropSet = NewTablePropSet<{
+    'tbody.tr': {
+        selected: boolean;
+        someSubRowsSelected: boolean;
+        allSubRowsSelected: boolean;
+    };
+}>;
+export declare const addSelectedRows: <Item>({ initialSelectedDataIds, linkDataSubRows }?: SelectedRowsConfig<Item>) => TablePlugin<Item, SelectedRowsState<Item>, Record<string, never>, SelectedRowsPropSet>;

package/dist/plugins/addSelectedRows.js

@@ -0,0 +1,190 @@
+import { nonNull } from '../utils/filter.js';
+import { recordSetStore } from '../utils/store.js';
+import { derived, get } from 'svelte/store';
+const isAllSubRowsSelectedForRow = (row, $selectedDataIds, linkDataSubRows) => {
+    if (row.isData()) {
+        if (!linkDataSubRows || row.subRows === undefined) {
+            return $selectedDataIds[row.dataId] === true;
+        }
+    }
+    if (row.subRows === undefined) {
+        return false;
+    }
+    return row.subRows.every((subRow) => isAllSubRowsSelectedForRow(subRow, $selectedDataIds, linkDataSubRows));
+};
+const isSomeSubRowsSelectedForRow = (row, $selectedDataIds, linkDataSubRows) => {
+    if (row.isData()) {
+        if (!linkDataSubRows || row.subRows === undefined) {
+            return $selectedDataIds[row.dataId] === true;
+        }
+    }
+    if (row.subRows === undefined) {
+        return false;
+    }
+    return row.subRows.some((subRow) => isSomeSubRowsSelectedForRow(subRow, $selectedDataIds, linkDataSubRows));
+};
+const writeSelectedDataIds = (row, value, $selectedDataIds, linkDataSubRows) => {
+    if (row.isData()) {
+        $selectedDataIds[row.dataId] = value;
+        if (!linkDataSubRows) {
+            return;
+        }
+    }
+    if (row.subRows === undefined) {
+        return;
+    }
+    row.subRows.forEach((subRow) => {
+        writeSelectedDataIds(subRow, value, $selectedDataIds, linkDataSubRows);
+    });
+};
+const getRowIsSelectedStore = (row, selectedDataIds, linkDataSubRows) => {
+    const { subscribe } = derived(selectedDataIds, ($selectedDataIds) => {
+        if (row.isData()) {
+            if (!linkDataSubRows) {
+                return $selectedDataIds[row.dataId] === true;
+            }
+            if ($selectedDataIds[row.dataId] === true) {
+                return true;
+            }
+        }
+        return isAllSubRowsSelectedForRow(row, $selectedDataIds, linkDataSubRows);
+    });
+    const update = (fn) => {
+        selectedDataIds.update(($selectedDataIds) => {
+            const oldValue = isAllSubRowsSelectedForRow(row, $selectedDataIds, linkDataSubRows);
+            const $updatedSelectedDataIds = { ...$selectedDataIds };
+            writeSelectedDataIds(row, fn(oldValue), $updatedSelectedDataIds, linkDataSubRows);
+            if (row.parentRow !== undefined && row.parentRow.isData()) {
+                $updatedSelectedDataIds[row.parentRow.dataId] = isAllSubRowsSelectedForRow(row.parentRow, $updatedSelectedDataIds, linkDataSubRows);
+            }
+            return $updatedSelectedDataIds;
+        });
+    };
+    const set = (value) => update(() => value);
+    return {
+        subscribe,
+        update,
+        set
+    };
+};
+export const addSelectedRows = ({ initialSelectedDataIds = {}, linkDataSubRows = true } = {}) => ({ tableState }) => {
+    const selectedDataIds = recordSetStore(initialSelectedDataIds);
+    const getRowState = (row) => {
+        const isSelected = getRowIsSelectedStore(row, selectedDataIds, linkDataSubRows);
+        const isSomeSubRowsSelected = derived([isSelected, selectedDataIds], ([$isSelected, $selectedDataIds]) => {
+            if ($isSelected)
+                return false;
+            return isSomeSubRowsSelectedForRow(row, $selectedDataIds, linkDataSubRows);
+        });
+        const isAllSubRowsSelected = derived(selectedDataIds, ($selectedDataIds) => {
+            return isAllSubRowsSelectedForRow(row, $selectedDataIds, linkDataSubRows);
+        });
+        return {
+            isSelected,
+            isSomeSubRowsSelected,
+            isAllSubRowsSelected
+        };
+    };
+    // all rows
+    const _allRowsSelected = derived([tableState.rows, selectedDataIds], ([$rows, $selectedDataIds]) => {
+        return $rows.every((row) => {
+            if (!row.isData()) {
+                return true;
+            }
+            return $selectedDataIds[row.dataId] === true;
+        });
+    });
+    const setAllRowsSelected = ($allRowsSelected) => {
+        if ($allRowsSelected) {
+            const $rows = get(tableState.rows);
+            const allDataIds = $rows
+                .map((row) => (row.isData() ? row.dataId : null))
+                .filter(nonNull);
+            selectedDataIds.addAll(allDataIds);
+        }
+        else {
+            selectedDataIds.clear();
+        }
+    };
+    const allRowsSelected = {
+        subscribe: _allRowsSelected.subscribe,
+        update(fn) {
+            const $allRowsSelected = get(_allRowsSelected);
+            setAllRowsSelected(fn($allRowsSelected));
+        },
+        set: setAllRowsSelected
+    };
+    const someRowsSelected = derived([tableState.rows, selectedDataIds], ([$rows, $selectedDataIds]) => {
+        return $rows.some((row) => {
+            if (!row.isData()) {
+                return false;
+            }
+            return $selectedDataIds[row.dataId] === true;
+        });
+    });
+    // page rows
+    const _allPageRowsSelected = derived([tableState.pageRows, selectedDataIds], ([$pageRows, $selectedDataIds]) => {
+        return $pageRows.every((row) => {
+            if (!row.isData()) {
+                return true;
+            }
+            return $selectedDataIds[row.dataId] === true;
+        });
+    });
+    const setAllPageRowsSelected = ($allPageRowsSelected) => {
+        const $pageRows = get(tableState.pageRows);
+        const pageDataIds = $pageRows
+            .map((row) => (row.isData() ? row.dataId : null))
+            .filter(nonNull);
+        if ($allPageRowsSelected) {
+            selectedDataIds.addAll(pageDataIds);
+        }
+        else {
+            selectedDataIds.removeAll(pageDataIds);
+        }
+    };
+    const allPageRowsSelected = {
+        subscribe: _allPageRowsSelected.subscribe,
+        update(fn) {
+            const $allPageRowsSelected = get(_allPageRowsSelected);
+            setAllPageRowsSelected(fn($allPageRowsSelected));
+        },
+        set: setAllPageRowsSelected
+    };
+    const somePageRowsSelected = derived([tableState.pageRows, selectedDataIds], ([$pageRows, $selectedDataIds]) => {
+        return $pageRows.some((row) => {
+            if (!row.isData()) {
+                return false;
+            }
+            return $selectedDataIds[row.dataId] === true;
+        });
+    });
+    const pluginState = {
+        selectedDataIds,
+        getRowState,
+        allRowsSelected,
+        someRowsSelected,
+        allPageRowsSelected,
+        somePageRowsSelected
+    };
+    return {
+        pluginState,
+        hooks: {
+            'tbody.tr': (row) => {
+                const props = derived(selectedDataIds, ($selectedDataIds) => {
+                    const someSubRowsSelected = isSomeSubRowsSelectedForRow(row, $selectedDataIds, linkDataSubRows);
+                    const allSubRowsSelected = isAllSubRowsSelectedForRow(row, $selectedDataIds, linkDataSubRows);
+                    const selected = row.isData()
+                        ? $selectedDataIds[row.dataId] === true
+                        : allSubRowsSelected;
+                    return {
+                        selected,
+                        someSubRowsSelected,
+                        allSubRowsSelected
+                    };
+                });
+                return { props };
+            }
+        }
+    };
+};

package/dist/plugins/addSortBy.d.ts

@@ -0,0 +1,46 @@
+import type { BodyRow } from '../bodyRows.js';
+import type { TablePlugin, NewTablePropSet } from '../types/TablePlugin.js';
+import { type Readable, type Writable } from 'svelte/store';
+export interface SortByConfig {
+    initialSortKeys?: SortKey[];
+    disableMultiSort?: boolean;
+    isMultiSortEvent?: (event: Event) => boolean;
+    toggleOrder?: ('asc' | 'desc' | undefined)[];
+    serverSide?: boolean;
+}
+export interface SortByState<Item> {
+    sortKeys: WritableSortKeys;
+    preSortedRows: Readable<BodyRow<Item>[]>;
+}
+export interface SortByColumnOptions {
+    disable?: boolean;
+    getSortValue?: (value: any) => string | number | (string | number)[];
+    compareFn?: (left: any, right: any) => number;
+    invert?: boolean;
+}
+export type SortByPropSet = NewTablePropSet<{
+    'thead.tr.th': {
+        order: 'asc' | 'desc' | undefined;
+        toggle: (event: Event) => void;
+        clear: () => void;
+        disabled: boolean;
+    };
+    'tbody.tr.td': {
+        order: 'asc' | 'desc' | undefined;
+    };
+}>;
+export interface SortKey {
+    id: string;
+    order: 'asc' | 'desc';
+}
+export declare const createSortKeysStore: (initKeys: SortKey[]) => WritableSortKeys;
+interface ToggleOptions {
+    multiSort?: boolean;
+    toggleOrder?: ('asc' | 'desc' | undefined)[];
+}
+export type WritableSortKeys = Writable<SortKey[]> & {
+    toggleId: (id: string, options: ToggleOptions) => void;
+    clearId: (id: string) => void;
+};
+export declare const addSortBy: <Item>({ initialSortKeys, disableMultiSort, isMultiSortEvent, toggleOrder, serverSide }?: SortByConfig) => TablePlugin<Item, SortByState<Item>, SortByColumnOptions, SortByPropSet>;
+export {};

package/dist/plugins/addSortBy.js

@@ -0,0 +1,176 @@
+import { compare } from '../utils/compare.js';
+import { isShiftClick } from '../utils/event.js';
+import { derived, writable } from 'svelte/store';
+const DEFAULT_TOGGLE_ORDER = ['asc', 'desc', undefined];
+export const createSortKeysStore = (initKeys) => {
+    const { subscribe, update, set } = writable(initKeys);
+    const toggleId = (id, { multiSort = true, toggleOrder = DEFAULT_TOGGLE_ORDER } = {}) => {
+        update(($sortKeys) => {
+            const keyIdx = $sortKeys.findIndex((key) => key.id === id);
+            const key = $sortKeys[keyIdx];
+            const order = key?.order;
+            const orderIdx = toggleOrder.findIndex((o) => o === order);
+            const nextOrderIdx = (orderIdx + 1) % toggleOrder.length;
+            const nextOrder = toggleOrder[nextOrderIdx];
+            if (!multiSort) {
+                if (nextOrder === undefined) {
+                    return [];
+                }
+                return [{ id, order: nextOrder }];
+            }
+            if (keyIdx === -1 && nextOrder !== undefined) {
+                return [...$sortKeys, { id, order: nextOrder }];
+            }
+            if (nextOrder === undefined) {
+                return [...$sortKeys.slice(0, keyIdx), ...$sortKeys.slice(keyIdx + 1)];
+            }
+            return [
+                ...$sortKeys.slice(0, keyIdx),
+                { id, order: nextOrder },
+                ...$sortKeys.slice(keyIdx + 1)
+            ];
+        });
+    };
+    const clearId = (id) => {
+        update(($sortKeys) => {
+            const keyIdx = $sortKeys.findIndex((key) => key.id === id);
+            if (keyIdx === -1) {
+                return $sortKeys;
+            }
+            return [...$sortKeys.slice(0, keyIdx), ...$sortKeys.slice(keyIdx + 1)];
+        });
+    };
+    return {
+        subscribe,
+        update,
+        set,
+        toggleId,
+        clearId
+    };
+};
+const getSortedRows = (rows, sortKeys, columnOptions) => {
+    // Shallow clone to prevent sort affecting `preSortedRows`.
+    const $sortedRows = [...rows];
+    $sortedRows.sort((a, b) => {
+        for (const key of sortKeys) {
+            const invert = columnOptions[key.id]?.invert ?? false;
+            // TODO check why cellForId returns `undefined`.
+            const cellA = a.cellForId[key.id];
+            const cellB = b.cellForId[key.id];
+            let order = 0;
+            const compareFn = columnOptions[key.id]?.compareFn;
+            const getSortValue = columnOptions[key.id]?.getSortValue;
+            // Only need to check properties of `cellA` as both should have the same
+            // properties.
+            if (!cellA.isData()) {
+                return 0;
+            }
+            const valueA = cellA.value;
+            const valueB = cellB.value;
+            if (compareFn !== undefined) {
+                order = compareFn(valueA, valueB);
+            }
+            else if (getSortValue !== undefined) {
+                const sortValueA = getSortValue(valueA);
+                const sortValueB = getSortValue(valueB);
+                order = compare(sortValueA, sortValueB);
+            }
+            else if (typeof valueA === 'string' || typeof valueA === 'number') {
+                // typeof `cellB.value` is logically equal to `cellA.value`.
+                order = compare(valueA, valueB);
+            }
+            else if (valueA instanceof Date || valueB instanceof Date) {
+                const sortValueA = valueA instanceof Date ? valueA.getTime() : 0;
+                const sortValueB = valueB instanceof Date ? valueB.getTime() : 0;
+                order = compare(sortValueA, sortValueB);
+            }
+            if (order !== 0) {
+                let orderFactor = 1;
+                // If the current key order is `'desc'`, reverse the order.
+                if (key.order === 'desc') {
+                    orderFactor *= -1;
+                }
+                // If `invert` is `true`, we want to invert the sort without
+                // affecting the view model's indication.
+                if (invert) {
+                    orderFactor *= -1;
+                }
+                return order * orderFactor;
+            }
+        }
+        return 0;
+    });
+    for (let i = 0; i < $sortedRows.length; i++) {
+        const { subRows } = $sortedRows[i];
+        if (subRows === undefined) {
+            continue;
+        }
+        const sortedSubRows = getSortedRows(subRows, sortKeys, columnOptions);
+        const clonedRow = $sortedRows[i].clone();
+        clonedRow.subRows = sortedSubRows;
+        $sortedRows[i] = clonedRow;
+    }
+    return $sortedRows;
+};
+export const addSortBy = ({ initialSortKeys = [], disableMultiSort = false, isMultiSortEvent = isShiftClick, toggleOrder, serverSide = false } = {}) => ({ columnOptions }) => {
+    const disabledSortIds = Object.entries(columnOptions)
+        .filter(([, option]) => option.disable === true)
+        .map(([columnId]) => columnId);
+    const sortKeys = createSortKeysStore(initialSortKeys);
+    const preSortedRows = writable([]);
+    const deriveRows = (rows) => {
+        return derived([rows, sortKeys], ([$rows, $sortKeys]) => {
+            preSortedRows.set($rows);
+            if (serverSide) {
+                return $rows;
+            }
+            return getSortedRows($rows, $sortKeys, columnOptions);
+        });
+    };
+    const pluginState = { sortKeys, preSortedRows };
+    return {
+        pluginState,
+        deriveRows,
+        hooks: {
+            'thead.tr.th': (cell) => {
+                const disabled = disabledSortIds.includes(cell.id);
+                const props = derived(sortKeys, ($sortKeys) => {
+                    const key = $sortKeys.find((k) => k.id === cell.id);
+                    const toggle = (event) => {
+                        if (!cell.isData())
+                            return;
+                        if (disabled)
+                            return;
+                        sortKeys.toggleId(cell.id, {
+                            multiSort: disableMultiSort ? false : isMultiSortEvent(event),
+                            toggleOrder
+                        });
+                    };
+                    const clear = () => {
+                        if (!cell.isData())
+                            return;
+                        if (disabledSortIds.includes(cell.id))
+                            return;
+                        sortKeys.clearId(cell.id);
+                    };
+                    return {
+                        order: key?.order,
+                        toggle,
+                        clear,
+                        disabled
+                    };
+                });
+                return { props };
+            },
+            'tbody.tr.td': (cell) => {
+                const props = derived(sortKeys, ($sortKeys) => {
+                    const key = $sortKeys.find((k) => k.id === cell.id);
+                    return {
+                        order: key?.order
+                    };
+                });
+                return { props };
+            }
+        }
+    };
+};