@cerberus-design/data-grid 0.25.3

package/dist/store.cjs

@@ -0,0 +1,287 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const signals = require('@cerberus-design/signals');
+const utils = require('./utils.cjs');
+const _const = require('./const.cjs');
+
+function createGridStore(options) {
+  const [containerWidth, setContainerWidth] = signals.createSignal(0);
+  const [rows, setRows] = signals.createSignal(options.data);
+  const [rowSize] = signals.createSignal(utils.determineRowHeight(options.rowSize));
+  const [globalFilter, setGlobalFilter] = signals.createSignal("");
+  const [sorting, setSorting] = signals.createSignal([]);
+  const [pageIndex, setPageIndex] = signals.createSignal(
+    utils.determinePageIndex(options.initialState?.pagination)
+  );
+  const [pageSize, setPageSize] = signals.createSignal(
+    utils.determinePageSize(options.initialState?.pagination)
+  );
+  const [pageRange] = signals.createSignal(
+    utils.determinePageRange(options.initialState?.pagination)
+  );
+  const [isServerPaginated] = signals.createSignal(
+    Boolean(utils.determineInitialCount(options.initialState?.pagination))
+  );
+  const initialCols = options.columns.map((col) => {
+    const pinnable = Boolean(col.features?.pinning);
+    const filterable = Boolean(col.features?.filter);
+    const sortable = Boolean(col.features?.sort);
+    const hasFeatures = pinnable || filterable || sortable;
+    const minWForFeatures = 100;
+    let finalWidth = col.width ?? 150;
+    if (hasFeatures && col.width && col.width < minWForFeatures) {
+      finalWidth = minWForFeatures;
+    }
+    const [isVisible] = signals.createSignal(true);
+    const [isFlex, setFlex] = signals.createSignal(col.width === void 0);
+    const [pinned, setPinned] = signals.createSignal(
+      col.features?.pinning?.defaultPosition ?? false
+    );
+    const [width, setColWidth] = signals.createSignal(finalWidth);
+    return {
+      id: col.id,
+      isFlex,
+      isVisible,
+      original: col,
+      pinned,
+      width,
+      getValue: col.accessor,
+      // feature flags
+      pinnable,
+      filterable,
+      sortable,
+      // setters
+      setFlex,
+      setPinned,
+      setColWidth
+    };
+  });
+  const [columns] = signals.createSignal(initialCols);
+  const currentPageRange = signals.createComputed(
+    () => {
+      const dataIdx = pageIndex() - 1;
+      const isFirstPage = dataIdx === 0;
+      const start = isFirstPage ? 0 : dataIdx * pageSize() - 1;
+      return {
+        start,
+        end: pageIndex() * pageSize()
+      };
+    }
+  );
+  const processedRows = signals.createComputed(() => {
+    let result = [...rows()];
+    const filter = globalFilter().toLowerCase();
+    const sortState = sorting();
+    if (filter) {
+      result = result.filter((row) => {
+        return columns().some((col) => {
+          if (!col.filterable) return false;
+          const val = String(col.getValue(row)).toLowerCase();
+          return val.includes(filter);
+        });
+      });
+    }
+    if (sortState.length > 0) {
+      result.sort((a, b) => {
+        for (const sort of sortState) {
+          const col = columns().find((c) => c.id === sort.id);
+          if (!col) continue;
+          const valA = col.getValue(a);
+          const valB = col.getValue(b);
+          if (valA === valB) continue;
+          let comparison = 0;
+          const customComparator = typeof col.original.features?.sort === "object" ? col.original.features.sort.comparator : void 0;
+          if (customComparator) {
+            comparison = customComparator(valA, valB);
+          } else {
+            comparison = valA > valB ? 1 : -1;
+          }
+          return sort.desc ? -comparison : comparison;
+        }
+        return 0;
+      });
+    }
+    return result;
+  });
+  const rowCount = signals.createComputed(
+    () => utils.determineInitialCount(options?.initialState?.pagination) ?? processedRows().length
+  );
+  const pageCount = signals.createComputed(() => Math.ceil(rowCount() / pageSize()));
+  const orderedColumns = signals.createComputed(() => {
+    const left = [];
+    const center = [];
+    const right = [];
+    columns().forEach((col) => {
+      const pin = col.pinned();
+      if (pin === "left") left.push(col);
+      else if (pin === "right") right.push(col);
+      else center.push(col);
+    });
+    return [...left, ...center, ...right];
+  });
+  const visibleRows = signals.createComputed(() => {
+    if (pageSize() && pageCount() > 1) {
+      const currentRange = currentPageRange();
+      return processedRows().slice(currentRange.start, currentRange.end);
+    }
+    return processedRows();
+  });
+  const rootCssVars = signals.createComputed(() => {
+    const vars = {};
+    const visibleCols = [];
+    const cols = columns();
+    const cWidth = containerWidth();
+    let fixedSpace = 0;
+    let flexCount = 0;
+    for (let i = 0; i < cols.length; i++) {
+      const col = cols[i];
+      if (!col.isVisible()) continue;
+      visibleCols.push(col);
+      if (col.isFlex()) {
+        flexCount++;
+      } else {
+        fixedSpace += col.width();
+      }
+      const order = orderedColumns().findIndex(
+        (orderedCol) => orderedCol.id === col.id
+      );
+      vars[`--col-${col.id}-order`] = `${order}`;
+    }
+    const remainingSpace = Math.max(0, cWidth - fixedSpace);
+    const flexWidth = flexCount > 0 ? remainingSpace / flexCount : 0;
+    let leftOffset = 0;
+    let totalW = 0;
+    const computedWidths = new Float64Array(visibleCols.length);
+    for (let i = 0; i < visibleCols.length; i++) {
+      const col = visibleCols[i];
+      let finalWidth = col.width();
+      if (col.isFlex()) {
+        finalWidth = Math.max(col.original.minWidth ?? 150, flexWidth);
+      }
+      computedWidths[i] = finalWidth;
+      totalW += finalWidth;
+      vars[`--col-${col.id}-width`] = `${finalWidth}px`;
+      if (col.pinned() === "left") {
+        vars[`--col-${col.id}-left`] = `${leftOffset}px`;
+        leftOffset += finalWidth;
+      }
+    }
+    let rightOffset = 0;
+    for (let i = visibleCols.length - 1; i >= 0; i--) {
+      const col = visibleCols[i];
+      if (col.pinned() === "right") {
+        vars[`--col-${col.id}-right`] = `${rightOffset}px`;
+        rightOffset += computedWidths[i];
+      }
+    }
+    vars["--total-grid-width"] = `${totalW}px`;
+    vars["--row-height"] = `${rowSize()}px`;
+    return vars;
+  });
+  const totalWidth = signals.createComputed(
+    () => columns().reduce((acc, c) => acc + c.width(), 0)
+  );
+  return {
+    columns,
+    rows,
+    globalFilter,
+    sorting,
+    pageCount,
+    pageIndex,
+    pageSize,
+    pageRange,
+    currentPageRange,
+    isServerPaginated,
+    rootCssVars,
+    rowCount,
+    rowSize,
+    totalWidth,
+    visibleRows,
+    // Actions
+    updateData: (newData) => {
+      setRows(newData);
+    },
+    setSort: (colId, direction, multi = false) => {
+      if (direction === null) {
+        setSorting(sorting().filter((s) => s.id !== colId));
+        return;
+      }
+      const current = sorting();
+      const newSort = { id: colId, desc: direction === "desc" };
+      if (multi) {
+        const existingIndex = current.findIndex((s) => s.id === colId);
+        if (existingIndex >= 0) {
+          const next = [...current];
+          next[existingIndex] = newSort;
+          setSorting(next);
+        } else {
+          setSorting([...current, newSort]);
+        }
+      } else {
+        setSorting([newSort]);
+      }
+    },
+    togglePinned: (colId, state) => {
+      const col = columns().find((c) => c.id === colId);
+      if (col) col.setPinned(state ?? false);
+    },
+    toggleSort: (colId, multi) => {
+      const current = sorting();
+      const exists = current.findIndex((s) => s.id === colId) !== -1;
+      const updatedSort = current.map((s) => {
+        if (s.id === colId) {
+          return { ...s, desc: !s.desc };
+        }
+        return s;
+      });
+      if (exists) {
+        setSorting(multi ? [...current, ...updatedSort] : [...updatedSort]);
+      } else {
+        const newSort = { id: colId, desc: true };
+        setSorting(multi ? [...current, newSort] : [newSort]);
+      }
+    },
+    setPage: (details) => {
+      setPageIndex(details.page);
+      options.onPageChange?.(details);
+    },
+    setPageSize: (size) => {
+      if (isServerPaginated()) {
+        setPageIndex(_const.DEFAULT_PAGE_IDX);
+      }
+      setPageSize(size);
+    },
+    setGlobalFilter: (val) => {
+      signals.batch(() => {
+        setGlobalFilter(val);
+        setPageIndex(_const.DEFAULT_PAGE_IDX);
+      });
+    },
+    setContainerWidth: (w) => {
+      setContainerWidth(w);
+    },
+    resizeColumn: (colId, delta) => {
+      const col = columns().find((c) => c.id === colId);
+      if (col) {
+        if (col.isFlex()) {
+          const fixedSpace = columns().filter((c) => !c.isFlex()).reduce((a, b) => a + b.width(), 0);
+          const flexCount = columns().filter((c) => c.isFlex()).length;
+          const currentFlexWidth = Math.max(
+            col.original.minWidth ?? 150,
+            (containerWidth() - fixedSpace) / flexCount
+          );
+          col.setColWidth(currentFlexWidth);
+          col.setFlex(false);
+        }
+        col.setColWidth(
+          Math.max(col.original.minWidth ?? 50, col.width() + delta)
+        );
+      }
+    }
+  };
+}
+
+exports.createGridStore = createGridStore;

package/dist/store.d.cts

@@ -0,0 +1,6 @@
+import { GridOptions, GridStore } from './types';
+/**
+ * Internal signal-based Store engine driving the state. We expose this in
+ * the public Context API.
+ */
+export declare function createGridStore<TData>(options: GridOptions<TData>): GridStore<TData>;

package/dist/store.d.ts

@@ -0,0 +1,6 @@
+import { GridOptions, GridStore } from './types';
+/**
+ * Internal signal-based Store engine driving the state. We expose this in
+ * the public Context API.
+ */
+export declare function createGridStore<TData>(options: GridOptions<TData>): GridStore<TData>;

package/dist/store.js

@@ -0,0 +1,283 @@
+'use client';
+import { createSignal, createComputed, batch } from '@cerberus-design/signals';
+import { determineRowHeight, determinePageIndex, determinePageSize, determinePageRange, determineInitialCount } from './utils.js';
+import { DEFAULT_PAGE_IDX } from './const.js';
+
+function createGridStore(options) {
+  const [containerWidth, setContainerWidth] = createSignal(0);
+  const [rows, setRows] = createSignal(options.data);
+  const [rowSize] = createSignal(determineRowHeight(options.rowSize));
+  const [globalFilter, setGlobalFilter] = createSignal("");
+  const [sorting, setSorting] = createSignal([]);
+  const [pageIndex, setPageIndex] = createSignal(
+    determinePageIndex(options.initialState?.pagination)
+  );
+  const [pageSize, setPageSize] = createSignal(
+    determinePageSize(options.initialState?.pagination)
+  );
+  const [pageRange] = createSignal(
+    determinePageRange(options.initialState?.pagination)
+  );
+  const [isServerPaginated] = createSignal(
+    Boolean(determineInitialCount(options.initialState?.pagination))
+  );
+  const initialCols = options.columns.map((col) => {
+    const pinnable = Boolean(col.features?.pinning);
+    const filterable = Boolean(col.features?.filter);
+    const sortable = Boolean(col.features?.sort);
+    const hasFeatures = pinnable || filterable || sortable;
+    const minWForFeatures = 100;
+    let finalWidth = col.width ?? 150;
+    if (hasFeatures && col.width && col.width < minWForFeatures) {
+      finalWidth = minWForFeatures;
+    }
+    const [isVisible] = createSignal(true);
+    const [isFlex, setFlex] = createSignal(col.width === void 0);
+    const [pinned, setPinned] = createSignal(
+      col.features?.pinning?.defaultPosition ?? false
+    );
+    const [width, setColWidth] = createSignal(finalWidth);
+    return {
+      id: col.id,
+      isFlex,
+      isVisible,
+      original: col,
+      pinned,
+      width,
+      getValue: col.accessor,
+      // feature flags
+      pinnable,
+      filterable,
+      sortable,
+      // setters
+      setFlex,
+      setPinned,
+      setColWidth
+    };
+  });
+  const [columns] = createSignal(initialCols);
+  const currentPageRange = createComputed(
+    () => {
+      const dataIdx = pageIndex() - 1;
+      const isFirstPage = dataIdx === 0;
+      const start = isFirstPage ? 0 : dataIdx * pageSize() - 1;
+      return {
+        start,
+        end: pageIndex() * pageSize()
+      };
+    }
+  );
+  const processedRows = createComputed(() => {
+    let result = [...rows()];
+    const filter = globalFilter().toLowerCase();
+    const sortState = sorting();
+    if (filter) {
+      result = result.filter((row) => {
+        return columns().some((col) => {
+          if (!col.filterable) return false;
+          const val = String(col.getValue(row)).toLowerCase();
+          return val.includes(filter);
+        });
+      });
+    }
+    if (sortState.length > 0) {
+      result.sort((a, b) => {
+        for (const sort of sortState) {
+          const col = columns().find((c) => c.id === sort.id);
+          if (!col) continue;
+          const valA = col.getValue(a);
+          const valB = col.getValue(b);
+          if (valA === valB) continue;
+          let comparison = 0;
+          const customComparator = typeof col.original.features?.sort === "object" ? col.original.features.sort.comparator : void 0;
+          if (customComparator) {
+            comparison = customComparator(valA, valB);
+          } else {
+            comparison = valA > valB ? 1 : -1;
+          }
+          return sort.desc ? -comparison : comparison;
+        }
+        return 0;
+      });
+    }
+    return result;
+  });
+  const rowCount = createComputed(
+    () => determineInitialCount(options?.initialState?.pagination) ?? processedRows().length
+  );
+  const pageCount = createComputed(() => Math.ceil(rowCount() / pageSize()));
+  const orderedColumns = createComputed(() => {
+    const left = [];
+    const center = [];
+    const right = [];
+    columns().forEach((col) => {
+      const pin = col.pinned();
+      if (pin === "left") left.push(col);
+      else if (pin === "right") right.push(col);
+      else center.push(col);
+    });
+    return [...left, ...center, ...right];
+  });
+  const visibleRows = createComputed(() => {
+    if (pageSize() && pageCount() > 1) {
+      const currentRange = currentPageRange();
+      return processedRows().slice(currentRange.start, currentRange.end);
+    }
+    return processedRows();
+  });
+  const rootCssVars = createComputed(() => {
+    const vars = {};
+    const visibleCols = [];
+    const cols = columns();
+    const cWidth = containerWidth();
+    let fixedSpace = 0;
+    let flexCount = 0;
+    for (let i = 0; i < cols.length; i++) {
+      const col = cols[i];
+      if (!col.isVisible()) continue;
+      visibleCols.push(col);
+      if (col.isFlex()) {
+        flexCount++;
+      } else {
+        fixedSpace += col.width();
+      }
+      const order = orderedColumns().findIndex(
+        (orderedCol) => orderedCol.id === col.id
+      );
+      vars[`--col-${col.id}-order`] = `${order}`;
+    }
+    const remainingSpace = Math.max(0, cWidth - fixedSpace);
+    const flexWidth = flexCount > 0 ? remainingSpace / flexCount : 0;
+    let leftOffset = 0;
+    let totalW = 0;
+    const computedWidths = new Float64Array(visibleCols.length);
+    for (let i = 0; i < visibleCols.length; i++) {
+      const col = visibleCols[i];
+      let finalWidth = col.width();
+      if (col.isFlex()) {
+        finalWidth = Math.max(col.original.minWidth ?? 150, flexWidth);
+      }
+      computedWidths[i] = finalWidth;
+      totalW += finalWidth;
+      vars[`--col-${col.id}-width`] = `${finalWidth}px`;
+      if (col.pinned() === "left") {
+        vars[`--col-${col.id}-left`] = `${leftOffset}px`;
+        leftOffset += finalWidth;
+      }
+    }
+    let rightOffset = 0;
+    for (let i = visibleCols.length - 1; i >= 0; i--) {
+      const col = visibleCols[i];
+      if (col.pinned() === "right") {
+        vars[`--col-${col.id}-right`] = `${rightOffset}px`;
+        rightOffset += computedWidths[i];
+      }
+    }
+    vars["--total-grid-width"] = `${totalW}px`;
+    vars["--row-height"] = `${rowSize()}px`;
+    return vars;
+  });
+  const totalWidth = createComputed(
+    () => columns().reduce((acc, c) => acc + c.width(), 0)
+  );
+  return {
+    columns,
+    rows,
+    globalFilter,
+    sorting,
+    pageCount,
+    pageIndex,
+    pageSize,
+    pageRange,
+    currentPageRange,
+    isServerPaginated,
+    rootCssVars,
+    rowCount,
+    rowSize,
+    totalWidth,
+    visibleRows,
+    // Actions
+    updateData: (newData) => {
+      setRows(newData);
+    },
+    setSort: (colId, direction, multi = false) => {
+      if (direction === null) {
+        setSorting(sorting().filter((s) => s.id !== colId));
+        return;
+      }
+      const current = sorting();
+      const newSort = { id: colId, desc: direction === "desc" };
+      if (multi) {
+        const existingIndex = current.findIndex((s) => s.id === colId);
+        if (existingIndex >= 0) {
+          const next = [...current];
+          next[existingIndex] = newSort;
+          setSorting(next);
+        } else {
+          setSorting([...current, newSort]);
+        }
+      } else {
+        setSorting([newSort]);
+      }
+    },
+    togglePinned: (colId, state) => {
+      const col = columns().find((c) => c.id === colId);
+      if (col) col.setPinned(state ?? false);
+    },
+    toggleSort: (colId, multi) => {
+      const current = sorting();
+      const exists = current.findIndex((s) => s.id === colId) !== -1;
+      const updatedSort = current.map((s) => {
+        if (s.id === colId) {
+          return { ...s, desc: !s.desc };
+        }
+        return s;
+      });
+      if (exists) {
+        setSorting(multi ? [...current, ...updatedSort] : [...updatedSort]);
+      } else {
+        const newSort = { id: colId, desc: true };
+        setSorting(multi ? [...current, newSort] : [newSort]);
+      }
+    },
+    setPage: (details) => {
+      setPageIndex(details.page);
+      options.onPageChange?.(details);
+    },
+    setPageSize: (size) => {
+      if (isServerPaginated()) {
+        setPageIndex(DEFAULT_PAGE_IDX);
+      }
+      setPageSize(size);
+    },
+    setGlobalFilter: (val) => {
+      batch(() => {
+        setGlobalFilter(val);
+        setPageIndex(DEFAULT_PAGE_IDX);
+      });
+    },
+    setContainerWidth: (w) => {
+      setContainerWidth(w);
+    },
+    resizeColumn: (colId, delta) => {
+      const col = columns().find((c) => c.id === colId);
+      if (col) {
+        if (col.isFlex()) {
+          const fixedSpace = columns().filter((c) => !c.isFlex()).reduce((a, b) => a + b.width(), 0);
+          const flexCount = columns().filter((c) => c.isFlex()).length;
+          const currentFlexWidth = Math.max(
+            col.original.minWidth ?? 150,
+            (containerWidth() - fixedSpace) / flexCount
+          );
+          col.setColWidth(currentFlexWidth);
+          col.setFlex(false);
+        }
+        col.setColWidth(
+          Math.max(col.original.minWidth ?? 50, col.width() + delta)
+        );
+      }
+    }
+  };
+}
+
+export { createGridStore };