@humanspeak/svelte-headless-table/dist/plugins/addColumnOrder.js

A powerful, headless table library for Svelte that provides complete control over table UI while handling complex data operations like sorting, filtering, pagination, grouping, and row expansion. Build custom, accessible data tables with zero styling opin

import { derived, writable } from 'svelte/store';
/**
 * Creates a column order plugin that enables reordering table columns.
 * Columns are displayed in the order specified by columnIdOrder.
 *
 * @template Item - The type of data items in the table.
 * @param config - Configuration options.
 * @returns A TablePlugin that provides column ordering functionality.
 * @example
 * ```typescript
 * const table = createTable(data, {
 *   order: addColumnOrder({
 *     initialColumnIdOrder: ['name', 'age', 'email'],
 *     hideUnspecifiedColumns: false
 *   })
 * })
 *
 * // Reorder columns dynamically
 * const { columnIdOrder } = table.pluginStates.order
 * columnIdOrder.set(['email', 'name', 'age'])
 * ```
 */
export const addColumnOrder = ({ initialColumnIdOrder = [], hideUnspecifiedColumns = false } = {}) => () => {
    const columnIdOrder = writable(initialColumnIdOrder);
    const pluginState = { columnIdOrder };
    const deriveFlatColumns = (flatColumns) => {
        return derived([flatColumns, columnIdOrder], ([$flatColumns, $columnIdOrder]) => {
            const colById = new Map($flatColumns.map((c) => [c.id, c]));
            const orderedFlatColumns = [];
            $columnIdOrder.forEach((id) => {
                const col = colById.get(id);
                if (col !== undefined) {
                    orderedFlatColumns.push(col);
                    colById.delete(id);
                }
            });
            if (!hideUnspecifiedColumns) {
                // Remaining entries preserve original $flatColumns order.
                for (const col of colById.values()) {
                    orderedFlatColumns.push(col);
                }
            }
            return orderedFlatColumns;
        });
    };
    return {
        pluginState,
        deriveFlatColumns
    };
};