@svgrid/grid 1.0.2 → 1.1.0

package/dist/SvGridChart.svelte.d.ts

@@ -19,6 +19,23 @@ type Props = {
     formatValue?: (value: number) => string;
     /** Fired when a category / slice is clicked (drill into the grid). */
     onSelect?: (selection: ChartSelection) => void;
+    /** Like `onSelect`, but only fires when the spec carries `rowIds` and
+     *  includes them in the payload. Use this to filter / highlight the
+     *  source grid when the user clicks a chart element. */
+    onDrill?: (selection: ChartSelection) => void;
+    /** Allow drag-to-zoom on the plot area. Double-click resets.
+     *  Only meaningful for cartesian charts (not pie). Default false. */
+    zoomable?: boolean;
+    /** Show a compact brush / mini-map under the main chart. A draggable
+     *  window selects what the main chart shows. Pairs naturally with
+     *  `zoomable`. Default false. */
+    brush?: boolean;
+    /** Height of the brush strip in pixels. Default 88. */
+    brushHeight?: number;
+    /** Show a small toolbar above the chart: reset-zoom (when zoomed) and
+     *  export (PNG / SVG / copy). Default true when zoomable or onDrill is
+     *  set, otherwise false. Set to `false` to hide explicitly. */
+    toolbar?: boolean;
 };
 declare const SvGridChart: import("svelte").Component<Props, {}, "">;
 type SvGridChart = ReturnType<typeof SvGridChart>;

package/dist/build-api.d.ts

@@ -0,0 +1,5 @@
+import { type RowData, type SvGridApi, type TableFeatures } from "./index";
+import "./sv-grid-scrollbar";
+export declare function createGridApi<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(ctx: any): {
+    buildApi: () => SvGridApi<TFeatures, TData>;
+};

package/dist/build-api.js

@@ -0,0 +1,527 @@
+import "./sv-grid-scrollbar";
+import { isGroupRow, columnDefMatchesId, } from "./cell-values";
+export function createGridApi(ctx) {
+    function buildApi() {
+        const findColumn = (columnId) => ctx.grid.getAllColumns().find((column) => column.id === columnId);
+        return {
+            getCellValue(rowIndex, columnId) {
+                const row = ctx.internalData[rowIndex];
+                const column = findColumn(columnId);
+                if (!row || !column)
+                    return undefined;
+                if (column.columnDef.accessorFn)
+                    return column.columnDef.accessorFn(row);
+                if (column.columnDef.field)
+                    return row[column.columnDef.field];
+                return undefined;
+            },
+            setCellValue(rowIndex, columnId, value) {
+                const row = ctx.internalData[rowIndex];
+                const column = findColumn(columnId);
+                if (!row || !column?.columnDef.field)
+                    return;
+                const next = ctx.internalData.slice();
+                next[rowIndex] = { ...row, [column.columnDef.field]: value };
+                ctx.internalData = next;
+            },
+            selectCells(ranges) {
+                // Engine supports a single anchor/focus rectangle today. Honour
+                // the first entry; ignore the rest. Empty array clears.
+                if (!ranges || ranges.length === 0) {
+                    ctx.selectionRange = { anchor: null, focus: null };
+                    return;
+                }
+                const [r1, c1, r2, c2] = ranges[0];
+                const rowCount = ctx.internalData.length;
+                const colCount = ctx.allColumns.length;
+                if (rowCount === 0 || colCount === 0)
+                    return;
+                // Clamp to the visible grid bounds so callers can pass open-ended
+                // values like `[0, 0, Infinity, Infinity]` to mean "select all".
+                const aRow = Math.max(0, Math.min(rowCount - 1, Math.min(r1, r2)));
+                const fRow = Math.max(0, Math.min(rowCount - 1, Math.max(r1, r2)));
+                const aCol = Math.max(0, Math.min(colCount - 1, Math.min(c1, c2)));
+                const fCol = Math.max(0, Math.min(colCount - 1, Math.max(c1, c2)));
+                ctx.selectionRange = {
+                    anchor: { rowIndex: aRow, colIndex: aCol },
+                    focus: { rowIndex: fRow, colIndex: fCol },
+                };
+                // Move the active cell to the range's top-left so keyboard
+                // navigation continues from there.
+                ctx.setActiveCell(aRow, aCol);
+            },
+            getSelected() {
+                const a = ctx.selectionRange.anchor;
+                const f = ctx.selectionRange.focus;
+                if (!a || !f)
+                    return [];
+                const r1 = Math.min(a.rowIndex, f.rowIndex);
+                const r2 = Math.max(a.rowIndex, f.rowIndex);
+                const c1 = Math.min(a.colIndex, f.colIndex);
+                const c2 = Math.max(a.colIndex, f.colIndex);
+                return [[r1, c1, r2, c2]];
+            },
+            addRow(row, position = "bottom") {
+                this.addRows([row], position);
+            },
+            addRows(rows, position = "bottom") {
+                const next = ctx.internalData.slice();
+                if (position === "top")
+                    next.unshift(...rows);
+                else if (position === "bottom")
+                    next.push(...rows);
+                else if (typeof position === "number")
+                    next.splice(Math.max(0, Math.min(position, next.length)), 0, ...rows);
+                ctx.internalData = next;
+            },
+            removeRow(rowIndex) {
+                this.removeRows([rowIndex]);
+            },
+            removeRows(rowIndices) {
+                const drop = new Set(rowIndices);
+                ctx.internalData = ctx.internalData.filter((_, i) => !drop.has(i));
+            },
+            applyTransaction(tx) {
+                const getId = ctx.props.getRowId;
+                let next = ctx.internalData.slice();
+                let added = 0;
+                let updated = 0;
+                let removed = 0;
+                if (tx.remove?.length) {
+                    const removeIds = new Set();
+                    const removeRefs = new Set();
+                    for (const r of tx.remove) {
+                        if (typeof r === "string")
+                            removeIds.add(r);
+                        else
+                            removeRefs.add(r);
+                    }
+                    next = next.filter((row, i) => {
+                        const hit = removeRefs.has(row) ||
+                            (getId ? removeIds.has(getId(row, i)) : false);
+                        if (hit)
+                            removed += 1;
+                        return !hit;
+                    });
+                }
+                if (tx.update?.length && getId) {
+                    const byId = new Map();
+                    for (const u of tx.update)
+                        byId.set(getId(u, 0), u);
+                    next = next.map((row, i) => {
+                        const u = byId.get(getId(row, i));
+                        if (u) {
+                            updated += 1;
+                            return u;
+                        }
+                        return row;
+                    });
+                }
+                if (tx.add?.length) {
+                    next.push(...tx.add);
+                    added += tx.add.length;
+                }
+                ctx.internalData = next;
+                return { added, updated, removed };
+            },
+            addColumn(column, position = "right") {
+                this.addColumns([column], position);
+            },
+            addColumns(columns, position = "right") {
+                const next = ctx.internalColumns.slice();
+                if (position === "left")
+                    next.unshift(...columns);
+                else if (position === "right")
+                    next.push(...columns);
+                else if (typeof position === "number")
+                    next.splice(Math.max(0, Math.min(position, next.length)), 0, ...columns);
+                ctx.internalColumns = next;
+            },
+            removeColumn(columnId) {
+                ctx.internalColumns = ctx.internalColumns.filter((def) => !columnDefMatchesId(def, columnId));
+            },
+            setColumnVisible(columnId, visible) {
+                if (visible) {
+                    const next = { ...ctx.hiddenColumns };
+                    delete next[columnId];
+                    ctx.hiddenColumns = next;
+                }
+                else {
+                    ctx.hiddenColumns = { ...ctx.hiddenColumns, [columnId]: true };
+                }
+            },
+            isColumnVisible(columnId) {
+                return !ctx.hiddenColumns[columnId];
+            },
+            setSort(columnId, direction) {
+                // Honour the column's `sortable` opt-out. Asking the engine
+                // whether the column can sort folds in both the feature toggle
+                // AND the per-column flag.
+                const col = ctx.allColumns.find((c) => c.id === columnId);
+                if (col && !col.getCanSort?.())
+                    return;
+                const clauses = direction
+                    ? [{ id: columnId, desc: direction === "desc" }]
+                    : (ctx.grid.getState().sorting ?? []).filter((entry) => entry.id !== columnId);
+                ctx.grid.store.setState((prev) => ({ ...prev, sorting: clauses }));
+            },
+            clearSort() {
+                ctx.grid.store.setState((prev) => ({ ...prev, sorting: [] }));
+            },
+            setGroupBy(columnIds) {
+                ctx.grid.setGrouping([...columnIds]);
+            },
+            setFilter(columnId, filter) {
+                // Honour the column's `filterable` opt-out. Same approach as
+                // `setSort` - `getCanFilter()` already combines the feature flag
+                // and the per-column field.
+                const col = ctx.allColumns.find((c) => c.id === columnId);
+                if (col && !col.getCanFilter?.())
+                    return;
+                if (!filter) {
+                    this.clearFilter(columnId);
+                    return;
+                }
+                ctx.filterMenuValues = {
+                    ...ctx.filterMenuValues,
+                    [columnId]: {
+                        operator: filter.operator,
+                        value: filter.value ?? "",
+                        ...(filter.operator === "between"
+                            ? { valueTo: filter.valueTo ?? "" }
+                            : {}),
+                    },
+                };
+            },
+            setFacetFilter(columnId, values) {
+                // Empty array OR null both mean "clear this column's facet" -
+                // mirrors how the column menu treats unchecking the last value.
+                if (!values || values.length === 0) {
+                    if (ctx.valueFilters[columnId]) {
+                        const next = { ...ctx.valueFilters };
+                        delete next[columnId];
+                        ctx.valueFilters = next;
+                    }
+                    return;
+                }
+                ctx.valueFilters = {
+                    ...ctx.valueFilters,
+                    [columnId]: new Set(values),
+                };
+            },
+            clearFilter(columnId) {
+                ctx.clearColumnFilter(columnId);
+            },
+            clearAllFilters() {
+                // Wipe every filter surface in one go: column-menu, filter-row, set
+                // filters, and the global search box.
+                ctx.filterMenuValues = {};
+                ctx.filterRowValues = {};
+                ctx.valueFilters = {};
+                if (ctx.globalFilter !== "")
+                    ctx.globalFilter = "";
+            },
+            getFilters() {
+                // Return a defensive copy so callers can't mutate internal state.
+                const out = {};
+                for (const [columnId, filter] of Object.entries(ctx.filterMenuValues)) {
+                    out[columnId] = {
+                        operator: filter.operator,
+                        value: filter.value,
+                        ...(filter.operator === "between" && filter.valueTo
+                            ? { valueTo: filter.valueTo }
+                            : {}),
+                    };
+                }
+                return out;
+            },
+            getDisplayedRows() {
+                // `allRows` is the final, post-filter, post-sort, post-group,
+                // post-pagination list - exactly what the body renders. Skip group
+                // header rows (they wrap an aggregate, not a TData row).
+                const out = [];
+                for (const row of ctx.allRows) {
+                    if (row.subRows && row.subRows.length > 0)
+                        continue;
+                    out.push(row.original);
+                }
+                return out;
+            },
+            getData() {
+                return ctx.internalData;
+            },
+            getColumns() {
+                // Snapshot every column in visual order with its human-readable
+                // label and visibility flag. Used by external code (exporters,
+                // column pickers) so they don't have to re-walk the columnDef
+                // tree themselves.
+                return ctx.allColumns.map((c) => ({
+                    id: c.id,
+                    field: c.columnDef.field,
+                    header: typeof c.columnDef.header === "string"
+                        ? c.columnDef.header
+                        : c.id,
+                    visible: !ctx.hiddenColumns[c.id],
+                }));
+            },
+            clearRowSelection() {
+                // Wipe the internal selection map AND emit the change so any
+                // consumer holding a derived `selectedRows` resets too.
+                ctx.grid.setRowSelection(() => ({}));
+                ctx.props.onRowSelectionChange?.({}, []);
+            },
+            setColumnWidth(columnId, width) {
+                const clamped = Math.max(ctx.MIN_COLUMN_WIDTH, Math.floor(width));
+                ctx.columnWidths = { ...ctx.columnWidths, [columnId]: clamped };
+            },
+            getColumnWidths() {
+                // Resolve every column's effective width by consulting both the
+                // resize overrides (`columnWidths`) AND the columnDef defaults,
+                // so the snapshot is round-trippable through setColumnWidth.
+                const out = {};
+                for (const c of ctx.allColumns)
+                    out[c.id] = ctx.getColumnWidth(c.id);
+                return out;
+            },
+            autosizeColumn(columnId) {
+                ctx.autosizeColumn(columnId);
+            },
+            autosizeAllColumns() {
+                ctx.autosizeAllColumns();
+            },
+            setColumnPinning(pinning) {
+                // Defensive copy + dedupe so callers can't mutate our state.
+                const left = Array.from(new Set(pinning.left ?? []));
+                const right = Array.from(new Set(pinning.right ?? []));
+                ctx.columnPinning = { left, right };
+            },
+            getColumnPinning() {
+                return {
+                    left: ctx.columnPinning.left.slice(),
+                    right: ctx.columnPinning.right.slice(),
+                };
+            },
+            // ---- Column reorder
+            setColumnOrder(order) {
+                ctx.setColumnOrderInternal(order);
+            },
+            getColumnOrder() {
+                return ctx.getCurrentColumnOrder();
+            },
+            setRowExpanded(id, expanded) {
+                ctx.grid.setExpanded((prev) => ({ ...prev, [id]: !!expanded }));
+            },
+            expandAllGroups() {
+                // Walk the current grouped row model and flip every group node on.
+                const next = {};
+                const walk = (rows) => {
+                    for (const row of rows) {
+                        if (row.getCanExpand?.())
+                            next[row.id] = true;
+                        const sub = row.subRows;
+                        if (sub && sub.length > 0)
+                            walk(sub);
+                    }
+                };
+                walk(ctx.grid.getRowModel().rows);
+                ctx.grid.setExpanded(() => next);
+            },
+            collapseAllGroups() {
+                ctx.grid.setExpanded(() => ({}));
+            },
+            // ---- Undo / redo (history + pointer)
+            undo() {
+                if (ctx.historyPtr < 0)
+                    return false;
+                const step = ctx.history[ctx.historyPtr];
+                if (!step)
+                    return false;
+                ctx.applyHistoryStep(step, 'undo');
+                ctx.historyPtr -= 1;
+                ctx.historyVersion += 1;
+                return true;
+            },
+            redo() {
+                if (ctx.historyPtr >= ctx.history.length - 1)
+                    return false;
+                const step = ctx.history[ctx.historyPtr + 1];
+                if (!step)
+                    return false;
+                ctx.applyHistoryStep(step, 'redo');
+                ctx.historyPtr += 1;
+                ctx.historyVersion += 1;
+                return true;
+            },
+            canUndo() { void ctx.historyVersion; return ctx.historyPtr >= 0; },
+            canRedo() { void ctx.historyVersion; return ctx.historyPtr < ctx.history.length - 1; },
+            clearHistory() { ctx.history = []; ctx.historyPtr = -1; ctx.historyVersion += 1; },
+            // ---- Find
+            openFind() { ctx.findOpen = true; },
+            closeFind() { ctx.findOpen = false; ctx.findQuery = ''; },
+            setFindQuery(q) { ctx.findQuery = q; ctx.findHitIndex = 0; },
+            getFindHits() { return ctx.findHits.slice(); },
+            // ---- Row selection (read + write)
+            getSelectedRows() {
+                const out = [];
+                for (const row of ctx.allRows) {
+                    if (isGroupRow(row))
+                        continue;
+                    if (ctx.rowSelectionState[row.id])
+                        out.push(row.original);
+                }
+                return out;
+            },
+            getSelectedRowIds() {
+                const out = [];
+                for (const row of ctx.allRows) {
+                    if (!isGroupRow(row) && ctx.rowSelectionState[row.id])
+                        out.push(row.id);
+                }
+                return out;
+            },
+            selectRows(ids, additive = false) {
+                const set = new Set(ids);
+                ctx.grid.setRowSelection((prev) => {
+                    const next = additive ? { ...prev } : {};
+                    for (const id of set)
+                        next[id] = true;
+                    return next;
+                });
+            },
+            selectAllRows() {
+                const next = {};
+                for (const row of ctx.allRows)
+                    if (!isGroupRow(row))
+                        next[row.id] = true;
+                ctx.grid.setRowSelection(() => next);
+            },
+            toggleRowSelected(id) {
+                ctx.toggleRowSelectionById(id);
+            },
+            // ---- Pagination
+            getPageInfo() {
+                const { pageIndex, pageSize } = ctx.paginationState;
+                const total = ctx.allRowsBeforePagination.length;
+                const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
+                return { pageIndex, pageSize, pageCount, total };
+            },
+            setPage(pageIndex) {
+                const total = ctx.allRowsBeforePagination.length;
+                const pageCount = Math.max(1, Math.ceil(total / Math.max(1, ctx.paginationState.pageSize)));
+                ctx.goToPage(Math.max(0, Math.min(pageIndex, pageCount - 1)));
+            },
+            nextPage() {
+                this.setPage(ctx.paginationState.pageIndex + 1);
+            },
+            prevPage() {
+                this.setPage(ctx.paginationState.pageIndex - 1);
+            },
+            firstPage() {
+                this.setPage(0);
+            },
+            lastPage() {
+                const total = ctx.allRowsBeforePagination.length;
+                const pageCount = Math.max(1, Math.ceil(total / Math.max(1, ctx.paginationState.pageSize)));
+                this.setPage(pageCount - 1);
+            },
+            setPageSize(size) {
+                // Calls the component-level helper (lexical scope), not this method.
+                ctx.setPageSize(Math.max(1, Math.floor(size)));
+            },
+            // ---- Navigation / scrolling
+            scrollToRow(rowIndex) {
+                if (!ctx.scrollContainer)
+                    return;
+                const maxIndex = Math.max(0, ctx.allRows.length - 1);
+                const clamped = Math.max(0, Math.min(rowIndex, maxIndex));
+                // Logical offset from the virtualizer (honors uniform OR per-row
+                // sizing), then mapped into the capped DOM scroll space so it lands
+                // correctly on huge grids where the DOM height is scaled down.
+                const logical = ctx.virtualizer.getOffsetForIndex(clamped);
+                ctx.scrollContainer.scrollTop = ctx.logicalToDomRowOffset(logical);
+                ctx.scheduleScrollSync(ctx.scrollContainer.scrollTop, ctx.scrollContainer.scrollLeft);
+            },
+            getActiveCell() {
+                const a = ctx.activeCell;
+                if (!a || a.rowIndex < 0 || a.colIndex < 0)
+                    return null;
+                const col = ctx.allColumns[a.colIndex];
+                return {
+                    rowIndex: a.rowIndex,
+                    colIndex: a.colIndex,
+                    columnId: col?.id ?? "",
+                };
+            },
+            setActiveCell(rowIndex, colIndex) {
+                const r = Math.max(0, Math.min(rowIndex, Math.max(0, ctx.allRows.length - 1)));
+                const c = Math.max(0, Math.min(colIndex, Math.max(0, ctx.allColumns.length - 1)));
+                // Calls the component-level helper (lexical scope), not this method.
+                ctx.setActiveCell(r, c);
+            },
+            // ---- View state (save / restore)
+            getState() {
+                return {
+                    sorting: (ctx.grid.getState().sorting ?? []).map((s) => ({ id: s.id, desc: s.desc })),
+                    grouping: [...(ctx.grid.getState().grouping ?? [])],
+                    pagination: {
+                        pageIndex: ctx.paginationState.pageIndex,
+                        pageSize: ctx.paginationState.pageSize,
+                    },
+                    columnWidths: this.getColumnWidths(),
+                    columnPinning: this.getColumnPinning(),
+                    columnOrder: ctx.getCurrentColumnOrder(),
+                    hiddenColumns: Object.keys(ctx.hiddenColumns).filter((k) => ctx.hiddenColumns[k]),
+                    globalFilter: ctx.globalFilter,
+                    columnFilters: this.getFilters(),
+                    facetFilters: Object.fromEntries(Object.entries(ctx.valueFilters).map(([k, set]) => [
+                        k,
+                        Array.from(set),
+                    ])),
+                };
+            },
+            setState(state) {
+                if (state.sorting) {
+                    const sorting = state.sorting.map((s) => ({ id: s.id, desc: s.desc }));
+                    ctx.grid.store.setState((prev) => ({ ...prev, sorting }));
+                }
+                if (state.grouping)
+                    ctx.grid.setGrouping([...state.grouping]);
+                if (state.pagination) {
+                    const p = state.pagination;
+                    ctx.grid.setPagination((prev) => ({ ...prev, ...p }));
+                }
+                if (state.columnWidths)
+                    ctx.columnWidths = { ...state.columnWidths };
+                if (state.columnPinning)
+                    ctx.columnPinning = {
+                        left: [...(state.columnPinning.left ?? [])],
+                        right: [...(state.columnPinning.right ?? [])],
+                    };
+                if (state.columnOrder)
+                    ctx.setColumnOrderInternal(state.columnOrder);
+                if (state.hiddenColumns) {
+                    const next = {};
+                    for (const id of state.hiddenColumns)
+                        next[id] = true;
+                    ctx.hiddenColumns = next;
+                }
+                if (state.globalFilter !== undefined)
+                    ctx.globalFilter = state.globalFilter;
+                if (state.columnFilters)
+                    ctx.filterMenuValues = { ...state.columnFilters };
+                if (state.facetFilters) {
+                    const next = {};
+                    for (const [k, arr] of Object.entries(state.facetFilters))
+                        next[k] = new Set(arr);
+                    ctx.valueFilters = next;
+                }
+            },
+            refresh() {
+                ctx.grid.store.setState((prev) => ({ ...prev }));
+            },
+        };
+    }
+    return {
+        buildApi,
+    };
+}

package/dist/cell-render.d.ts

@@ -0,0 +1,15 @@
+import { type CellEditorOption, type Column, type Row, type RowData, type TableFeatures } from "./index";
+import "./sv-grid-scrollbar";
+import { type ResolvedCellFormat } from "./conditional-formatting";
+export declare function createCellRender<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData>(ctx: any): {
+    cellConditionalFormat: (row: Row<TData>, column: Column<TData>, value: unknown) => ResolvedCellFormat | null;
+    computeRowClass: (row: Row<TData>, rowIndex: number) => string;
+    computeCellClass: (row: Row<TData>, column: Column<TData>) => string;
+    computeCellTooltip: (row: Row<TData>, column: Column<TData>) => string | null;
+    computeCellNote: (row: Row<TData>, column: Column<TData>) => string | null;
+    getColumnEditorOptions: (column: Column<TData>, row?: Row<TData> | null) => CellEditorOption[];
+    formatListCellValue: (column: Column<TData>, value: unknown, row?: Row<TData> | null) => string;
+    formatCellValue: (column: Column<TData>, value: unknown, row: Row<TData>) => string;
+    formatPinnedValue: (column: Column<TData>, value: unknown) => string;
+    computePinnedCellClass: (rowData: TData, column: Column<TData>) => string;
+};