@undevy-org/tablewright 0.8.1 → 0.9.1

package/dist/es/components/data-table/sticky-utils.js

@@ -1,3 +1,46 @@
+function columnWidthPx(columnId, meta, columnWidths) {
+  return columnWidths?.[columnId] ?? meta[columnId]?.minW ?? 0;
+}
+function applyColumnPinningToMeta(baseMeta, pinning, options) {
+  const order = options?.columnOrder ?? Object.keys(baseMeta);
+  const pinnedLeft = new Set(pinning.left ?? []);
+  const pinnedRight = new Set(pinning.right ?? []);
+  const result = {};
+  for (const [id, meta] of Object.entries(baseMeta)) {
+    if (pinnedLeft.has(id)) {
+      result[id] = { ...meta, sticky: "left" };
+    } else if (pinnedRight.has(id)) {
+      result[id] = { ...meta, sticky: "right" };
+    } else {
+      result[id] = { ...meta };
+    }
+  }
+  let leftOffset = 0;
+  for (const id of order) {
+    const meta = result[id];
+    if (meta?.sticky !== "left") continue;
+    const width = columnWidthPx(id, baseMeta, options?.columnWidths);
+    if (pinnedLeft.has(id)) {
+      result[id] = { ...meta, stickyOffset: leftOffset };
+      leftOffset += width;
+    } else {
+      leftOffset = (meta.stickyOffset ?? 0) + width;
+    }
+  }
+  let rightOffset = 0;
+  for (const id of [...order].reverse()) {
+    const meta = result[id];
+    if (meta?.sticky !== "right") continue;
+    const width = columnWidthPx(id, baseMeta, options?.columnWidths);
+    if (pinnedRight.has(id)) {
+      result[id] = { ...meta, stickyOffset: rightOffset };
+      rightOffset += width;
+    } else {
+      rightOffset = (meta.stickyOffset ?? 0) + width;
+    }
+  }
+  return result;
+}
 function stickyStyle(meta, isHeader) {
   if (isHeader) {
     return {
@@ -20,6 +63,8 @@ function stickyBorderClass(meta) {
   return edge === "right" ? "[box-shadow:1px_0_0_0_var(--border-subtle)]" : "[box-shadow:-1px_0_0_0_var(--border-subtle)]";
 }
 export {
+  applyColumnPinningToMeta,
+  columnWidthPx,
   stickyBorderClass,
   stickyStyle
 };

package/dist/es/hooks/table-orchestration-store.js

@@ -28,6 +28,7 @@ function createTableOrchestrationStore({
       requestOpenFilterId: null,
       currentSort: null,
       columnVisibility: initialColumnVisibility ?? {},
+      columnPinning: { left: [], right: [] },
       page: 1,
       rowsPerPage: initialRowsPerPage,
       density: "normal",
@@ -108,6 +109,19 @@ function createTableOrchestrationStore({
         set({ columnVisibility: {} });
         goCustom();
       },
+      pinColumn: (columnId, side) => set((s) => {
+        const left = (s.columnPinning.left ?? []).filter((id) => id !== columnId);
+        const right = (s.columnPinning.right ?? []).filter((id) => id !== columnId);
+        if (side === "left") left.push(columnId);
+        else right.push(columnId);
+        return { columnPinning: { left, right } };
+      }),
+      unpinColumn: (columnId) => set((s) => ({
+        columnPinning: {
+          left: (s.columnPinning.left ?? []).filter((id) => id !== columnId),
+          right: (s.columnPinning.right ?? []).filter((id) => id !== columnId)
+        }
+      })),
       setPage: (p) => set({ page: p }),
       setRowsPerPage: (n) => set({ rowsPerPage: n, page: 1 }),
       setDensity: (v) => set({ density: v }),

package/dist/es/hooks/useTableOrchestration.js

@@ -1,6 +1,7 @@
 import { useState, useRef, useMemo, useCallback, useLayoutEffect, useEffect } from "react";
 import { useStore } from "zustand";
 import { useColumnResize } from "../components/data-table/hooks/use-column-resize.js";
+import { applyColumnPinningToMeta } from "../components/data-table/sticky-utils.js";
 import { getVisiblePageNumbers } from "../components/data-table/hooks/use-table-pagination.js";
 import { createTableOrchestrationStore } from "./table-orchestration-store.js";
 import { useColumnFilterStats } from "./table-orchestration/use-column-filter-stats.js";
@@ -8,6 +9,26 @@ import { useColumnGaps } from "./table-orchestration/use-column-gaps.js";
 import { useFilteredRows } from "./table-orchestration/use-filtered-rows.js";
 import { useOrchestrationActions } from "./table-orchestration/use-orchestration-actions.js";
 import { useResponsiveColumns } from "./table-orchestration/use-responsive-columns.js";
+import { gapColumnId } from "../lib/column-gaps.js";
+function computeVisibleColumnOrder(input) {
+  const { columnMeta, toggleableColumnIds, columnVisibility, columnGaps } = input;
+  const order = [];
+  if (columnMeta.rowControl) order.push("rowControl");
+  for (const id of toggleableColumnIds) {
+    if (columnVisibility[id] !== false) order.push(id);
+  }
+  for (const gap of columnGaps) {
+    const gapId = gapColumnId(gap.afterColumnId);
+    if (gap.afterColumnId === null) {
+      order.unshift(gapId);
+    } else {
+      const afterIdx = order.indexOf(gap.afterColumnId);
+      if (afterIdx >= 0) order.splice(afterIdx + 1, 0, gapId);
+    }
+  }
+  if (columnMeta.actions) order.push("actions");
+  return order;
+}
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function useTableOrchestration(config) {
   const {
@@ -40,6 +61,9 @@ function useTableOrchestration(config) {
   const requestOpenFilterId = useStore(store, (s) => s.requestOpenFilterId);
   const currentSort = useStore(store, (s) => s.currentSort);
   const columnVisibility = useStore(store, (s) => s.columnVisibility);
+  const columnPinning = useStore(store, (s) => s.columnPinning);
+  const pinColumn = useStore(store, (s) => s.pinColumn);
+  const unpinColumn = useStore(store, (s) => s.unpinColumn);
   const storedPage = useStore(store, (s) => s.page);
   const rowsPerPage = useStore(store, (s) => s.rowsPerPage);
   const density = useStore(store, (s) => s.density);
@@ -120,13 +144,29 @@ function useTableOrchestration(config) {
   );
   const allOnPageSelected = pageIds.size > 0 && selectedOnPage === pageIds.size;
   const headerCheckState = allOnPageSelected ? true : selectedOnPage > 0 ? "indeterminate" : false;
-  const { columnGaps, extendedColumnMeta, extendedWidths } = useColumnGaps({
+  const { columnGaps, extendedColumnMeta: gapExtendedColumnMeta, extendedWidths } = useColumnGaps({
     columnGroups,
     toggleableColumnIds,
     columnVisibility,
     columnMeta,
     widths
   });
+  const visibleColumnOrder = useMemo(
+    () => computeVisibleColumnOrder({
+      columnMeta,
+      toggleableColumnIds,
+      columnVisibility,
+      columnGaps
+    }),
+    [columnGaps, columnMeta, columnVisibility, toggleableColumnIds]
+  );
+  const extendedColumnMeta = useMemo(
+    () => applyColumnPinningToMeta(gapExtendedColumnMeta, columnPinning, {
+      columnOrder: visibleColumnOrder,
+      columnWidths: extendedWidths
+    }),
+    [columnPinning, extendedWidths, gapExtendedColumnMeta, visibleColumnOrder]
+  );
   const hiddenColumnsCount = useMemo(() => {
     return toggleableColumnIds.filter((id) => columnVisibility[id] === false).length;
   }, [toggleableColumnIds, columnVisibility]);
@@ -185,6 +225,9 @@ function useTableOrchestration(config) {
     currentSort,
     columnVisibility,
     setColumnVisibility,
+    columnPinning,
+    pinColumn,
+    unpinColumn,
     page,
     rowsPerPage,
     density,
@@ -249,5 +292,6 @@ function useTableOrchestration(config) {
   };
 }
 export {
+  computeVisibleColumnOrder,
   useTableOrchestration
 };

package/dist/es/index.js

@@ -67,6 +67,7 @@ import { useTableOrchestration } from "./hooks/useTableOrchestration.js";
 import { createTableOrchestrationStore, defaultValueForFilter } from "./hooks/table-orchestration-store.js";
 import { useRowDragOverride } from "./hooks/useRowDragOverride.js";
 import { downloadCsvFile, exportTableToCsv } from "./lib/export-table-csv.js";
+import { applyColumnPinningToMeta } from "./components/data-table/sticky-utils.js";
 import { computeColumnGaps, gapColumnId } from "./lib/column-gaps.js";
 import { computeColumnStats } from "./lib/filter-stats.js";
 import { formatEnumLabel } from "./lib/format-enum.js";
@@ -176,6 +177,7 @@ export {
   TopBar,
   TwoPanelMenuBase,
   ViewChip,
+  applyColumnPinningToMeta,
   applyManagedChanges,
   badgeVariants,
   buttonVariants,

package/dist/styles.css

@@ -402,6 +402,9 @@
 .collapse {
     visibility: collapse
 }
+.static {
+    position: static
+}
 .fixed {
     position: fixed
 }

package/dist/tablewright.cjs

@@ -931,6 +931,49 @@ function ScrollArea({ children, className }) {
   );
 }
 TableLayout.ScrollArea = ScrollArea;
+function columnWidthPx(columnId, meta, columnWidths) {
+  return columnWidths?.[columnId] ?? meta[columnId]?.minW ?? 0;
+}
+function applyColumnPinningToMeta(baseMeta, pinning, options) {
+  const order = options?.columnOrder ?? Object.keys(baseMeta);
+  const pinnedLeft = new Set(pinning.left ?? []);
+  const pinnedRight = new Set(pinning.right ?? []);
+  const result = {};
+  for (const [id, meta] of Object.entries(baseMeta)) {
+    if (pinnedLeft.has(id)) {
+      result[id] = { ...meta, sticky: "left" };
+    } else if (pinnedRight.has(id)) {
+      result[id] = { ...meta, sticky: "right" };
+    } else {
+      result[id] = { ...meta };
+    }
+  }
+  let leftOffset = 0;
+  for (const id of order) {
+    const meta = result[id];
+    if (meta?.sticky !== "left") continue;
+    const width = columnWidthPx(id, baseMeta, options?.columnWidths);
+    if (pinnedLeft.has(id)) {
+      result[id] = { ...meta, stickyOffset: leftOffset };
+      leftOffset += width;
+    } else {
+      leftOffset = (meta.stickyOffset ?? 0) + width;
+    }
+  }
+  let rightOffset = 0;
+  for (const id of [...order].reverse()) {
+    const meta = result[id];
+    if (meta?.sticky !== "right") continue;
+    const width = columnWidthPx(id, baseMeta, options?.columnWidths);
+    if (pinnedRight.has(id)) {
+      result[id] = { ...meta, stickyOffset: rightOffset };
+      rightOffset += width;
+    } else {
+      rightOffset = (meta.stickyOffset ?? 0) + width;
+    }
+  }
+  return result;
+}
 function stickyStyle(meta, isHeader) {
   if (isHeader) {
     return {
@@ -4868,6 +4911,7 @@ function createTableOrchestrationStore({
       requestOpenFilterId: null,
       currentSort: null,
       columnVisibility: initialColumnVisibility ?? {},
+      columnPinning: { left: [], right: [] },
       page: 1,
       rowsPerPage: initialRowsPerPage,
       density: "normal",
@@ -4948,6 +4992,19 @@ function createTableOrchestrationStore({
         set({ columnVisibility: {} });
         goCustom();
       },
+      pinColumn: (columnId, side) => set((s) => {
+        const left = (s.columnPinning.left ?? []).filter((id) => id !== columnId);
+        const right = (s.columnPinning.right ?? []).filter((id) => id !== columnId);
+        if (side === "left") left.push(columnId);
+        else right.push(columnId);
+        return { columnPinning: { left, right } };
+      }),
+      unpinColumn: (columnId) => set((s) => ({
+        columnPinning: {
+          left: (s.columnPinning.left ?? []).filter((id) => id !== columnId),
+          right: (s.columnPinning.right ?? []).filter((id) => id !== columnId)
+        }
+      })),
       setPage: (p) => set({ page: p }),
       setRowsPerPage: (n) => set({ rowsPerPage: n, page: 1 }),
       setDensity: (v) => set({ density: v }),
@@ -5372,6 +5429,25 @@ function useResponsiveColumns(columnPriorities, wideBreakpoint, compactBreakpoin
   }, [isWide, columnPriorities]);
   return { responsiveHiddenColumnIds, isCompact };
 }
+function computeVisibleColumnOrder(input) {
+  const { columnMeta, toggleableColumnIds, columnVisibility, columnGaps } = input;
+  const order = [];
+  if (columnMeta.rowControl) order.push("rowControl");
+  for (const id of toggleableColumnIds) {
+    if (columnVisibility[id] !== false) order.push(id);
+  }
+  for (const gap of columnGaps) {
+    const gapId = gapColumnId(gap.afterColumnId);
+    if (gap.afterColumnId === null) {
+      order.unshift(gapId);
+    } else {
+      const afterIdx = order.indexOf(gap.afterColumnId);
+      if (afterIdx >= 0) order.splice(afterIdx + 1, 0, gapId);
+    }
+  }
+  if (columnMeta.actions) order.push("actions");
+  return order;
+}
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 function useTableOrchestration(config) {
   const {
@@ -5404,6 +5480,9 @@ function useTableOrchestration(config) {
   const requestOpenFilterId = zustand.useStore(store, (s) => s.requestOpenFilterId);
   const currentSort = zustand.useStore(store, (s) => s.currentSort);
   const columnVisibility = zustand.useStore(store, (s) => s.columnVisibility);
+  const columnPinning = zustand.useStore(store, (s) => s.columnPinning);
+  const pinColumn = zustand.useStore(store, (s) => s.pinColumn);
+  const unpinColumn = zustand.useStore(store, (s) => s.unpinColumn);
   const storedPage = zustand.useStore(store, (s) => s.page);
   const rowsPerPage = zustand.useStore(store, (s) => s.rowsPerPage);
   const density = zustand.useStore(store, (s) => s.density);
@@ -5484,13 +5563,29 @@ function useTableOrchestration(config) {
   );
   const allOnPageSelected = pageIds.size > 0 && selectedOnPage === pageIds.size;
   const headerCheckState = allOnPageSelected ? true : selectedOnPage > 0 ? "indeterminate" : false;
-  const { columnGaps, extendedColumnMeta, extendedWidths } = useColumnGaps({
+  const { columnGaps, extendedColumnMeta: gapExtendedColumnMeta, extendedWidths } = useColumnGaps({
     columnGroups,
     toggleableColumnIds,
     columnVisibility,
     columnMeta,
     widths
   });
+  const visibleColumnOrder = React.useMemo(
+    () => computeVisibleColumnOrder({
+      columnMeta,
+      toggleableColumnIds,
+      columnVisibility,
+      columnGaps
+    }),
+    [columnGaps, columnMeta, columnVisibility, toggleableColumnIds]
+  );
+  const extendedColumnMeta = React.useMemo(
+    () => applyColumnPinningToMeta(gapExtendedColumnMeta, columnPinning, {
+      columnOrder: visibleColumnOrder,
+      columnWidths: extendedWidths
+    }),
+    [columnPinning, extendedWidths, gapExtendedColumnMeta, visibleColumnOrder]
+  );
   const hiddenColumnsCount = React.useMemo(() => {
     return toggleableColumnIds.filter((id) => columnVisibility[id] === false).length;
   }, [toggleableColumnIds, columnVisibility]);
@@ -5549,6 +5644,9 @@ function useTableOrchestration(config) {
     currentSort,
     columnVisibility,
     setColumnVisibility,
+    columnPinning,
+    pinColumn,
+    unpinColumn,
     page,
     rowsPerPage,
     density,
@@ -6089,6 +6187,7 @@ exports.TimestampCell = TimestampCell;
 exports.TopBar = TopBar;
 exports.TwoPanelMenuBase = TwoPanelMenuBase;
 exports.ViewChip = ViewChip;
+exports.applyColumnPinningToMeta = applyColumnPinningToMeta;
 exports.applyManagedChanges = applyManagedChanges;
 exports.badgeVariants = badgeVariants;
 exports.buttonVariants = buttonVariants;

package/dist/tablewright.css

@@ -250,6 +250,9 @@
 .collapse {
     visibility: collapse
 }
+.static {
+    position: static
+}
 .fixed {
     position: fixed
 }

package/dist/types/components/data-table/sticky-utils.d.ts

@@ -1,4 +1,15 @@
+import type { ColumnPinningState } from "@tanstack/react-table";
 import type { CSSProperties } from "react";
 import type { ColumnMetaDef } from "./types.js";
+export interface ApplyColumnPinningToMetaOptions {
+    /** Visible columns in left-to-right display order (include gap columns when present). */
+    columnOrder: readonly string[];
+    /** Resolved widths in px; falls back to `meta.minW`. */
+    columnWidths?: Record<string, number>;
+}
+/** @internal Exported for unit tests (not re-exported from package entry). */
+export declare function columnWidthPx(columnId: string, meta: Record<string, ColumnMetaDef>, columnWidths?: Record<string, number>): number;
+/** Merges TanStack `ColumnPinningState` into column meta sticky fields for rendering. */
+export declare function applyColumnPinningToMeta(baseMeta: Record<string, ColumnMetaDef>, pinning: ColumnPinningState, options?: ApplyColumnPinningToMetaOptions): Record<string, ColumnMetaDef>;
 export declare function stickyStyle(meta: ColumnMetaDef | undefined, isHeader: boolean): CSSProperties | undefined;
 export declare function stickyBorderClass(meta: ColumnMetaDef | undefined): string;

package/dist/types/hooks/table-orchestration-store.d.ts

@@ -1,4 +1,4 @@
-import type { VisibilityState } from "@tanstack/react-table";
+import type { ColumnPinningState, VisibilityState } from "@tanstack/react-table";
 import type { ActiveFilter, ActiveFilterValue, ColumnFilterConfig } from "../components/data-table/filter-types.js";
 export interface TableOrchestrationState<TViewKey extends string = string> {
     searchInput: string;
@@ -11,6 +11,7 @@ export interface TableOrchestrationState<TViewKey extends string = string> {
         direction: "asc" | "desc";
     } | null;
     columnVisibility: VisibilityState;
+    columnPinning: ColumnPinningState;
     page: number;
     rowsPerPage: number;
     density: "normal" | "dense";
@@ -39,6 +40,8 @@ export interface TableOrchestrationActions<TViewKey extends string = string> {
     hideColumn: (columnId: string) => void;
     showColumns: (columnIds: string[]) => void;
     resetColumns: () => void;
+    pinColumn: (columnId: string, side: "left" | "right") => void;
+    unpinColumn: (columnId: string) => void;
     setPage: (p: number) => void;
     setRowsPerPage: (n: number) => void;
     setDensity: (v: "normal" | "dense") => void;

package/dist/types/hooks/useTableOrchestration.d.ts

@@ -1,7 +1,14 @@
-import type { VisibilityState } from "@tanstack/react-table";
+import type { ColumnPinningState, VisibilityState } from "@tanstack/react-table";
 import type { ColumnMetaDef, SortDirection } from "../components/data-table/types.js";
 import type { ActiveFilter, ActiveFilterValue, ColumnFilterConfig, ColumnGap, ColumnGroup, FilterStatsSlice, ViewPreset } from "../components/data-table/filter-types.js";
 import { type TableOrchestrationStoreApi } from "./table-orchestration-store.js";
+/** @internal Exported for unit tests (not re-exported from package entry). */
+export declare function computeVisibleColumnOrder(input: {
+    columnMeta: Record<string, ColumnMetaDef>;
+    toggleableColumnIds: readonly string[];
+    columnVisibility: VisibilityState;
+    columnGaps: ColumnGap[];
+}): string[];
 export interface TableOrchestrationConfig<TRow extends object, TViewKey extends string> {
     rows: TRow[];
     getRowId: (row: TRow) => string;
@@ -49,6 +56,9 @@ export interface TableOrchestrationReturn<TRow extends object, TViewKey extends
     } | null;
     columnVisibility: VisibilityState;
     setColumnVisibility: React.Dispatch<React.SetStateAction<VisibilityState>>;
+    columnPinning: ColumnPinningState;
+    pinColumn: (columnId: string, side: "left" | "right") => void;
+    unpinColumn: (columnId: string) => void;
     page: number;
     rowsPerPage: number;
     density: "normal" | "dense";

package/dist/types/index.d.ts

@@ -104,6 +104,8 @@ export { useRowDragOverride } from "./hooks/useRowDragOverride.js";
 export type { UseRowDragOverrideResult } from "./hooks/useRowDragOverride.js";
 export { downloadCsvFile, exportTableToCsv, } from "./lib/export-table-csv.js";
 export type { DownloadCsvFileOptions, ExportTableToCsvOptions, } from "./lib/export-table-csv.js";
+export { applyColumnPinningToMeta } from "./components/data-table/sticky-utils.js";
+export type { ApplyColumnPinningToMetaOptions } from "./components/data-table/sticky-utils.js";
 export { computeColumnGaps, gapColumnId } from "./lib/column-gaps.js";
 export { computeColumnStats } from "./lib/filter-stats.js";
 export { formatEnumLabel } from "./lib/format-enum.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@undevy-org/tablewright",
-  "version": "0.8.1",
+  "version": "0.9.1",
   "description": "React data-table and application-shell components: filters, drawers, row controls, sortable and resizable columns, built on Radix UI and TanStack Table.",
   "license": "MIT",
   "repository": {