@shadng/sng-ui 1.0.0

package/src/lib/sng-table-core/features/column-ordering.ts

@@ -0,0 +1,159 @@
+/**
+ * @fileoverview Column ordering feature for sng-table-core
+ *
+ * Provides column reordering functionality via drag-and-drop or programmatic API.
+ */
+
+import {
+  Column,
+  ColumnOrderState,
+  Updater,
+  functionalUpdate,
+  TableFeature,
+  ColumnPinningPosition,
+} from '../core/types';
+
+// ============================================================================
+// COLUMN ORDERING FEATURE
+// ============================================================================
+
+/**
+ * Create the column ordering feature
+ */
+export function createColumnOrderingFeature<TData>(): TableFeature<TData> {
+  return {
+    getInitialState: (initialState) => ({
+      columnOrder: initialState?.columnOrder ?? [],
+    }),
+
+    createTable: (table) => {
+      table.setColumnOrder = (updater: Updater<ColumnOrderState>) => {
+        table.setState((prev) => ({
+          ...prev,
+          columnOrder: functionalUpdate(updater, prev.columnOrder),
+        }));
+        table.options.onColumnOrderChange?.(updater);
+      };
+
+      table.resetColumnOrder = (defaultState?: boolean) => {
+        table.setColumnOrder?.(
+          defaultState ? [] : (table.initialState.columnOrder ?? [])
+        );
+      };
+    },
+
+    createColumn: (column, table) => {
+      // Add getCanDrag method to check if column can be reordered
+      column.getCanDrag = () => {
+        // Check column-level enableOrdering (defaults to true if not specified)
+        const columnDef = column.columnDef;
+        if (columnDef.enableOrdering === false) {
+          return false;
+        }
+        // Check table-level enableColumnOrdering (defaults to true)
+        if (table.options.enableColumnOrdering === false) {
+          return false;
+        }
+        return true;
+      };
+
+      // Extend existing getIndex to respect column order
+      const originalGetIndex = column.getIndex;
+
+      column.getIndex = (position?: ColumnPinningPosition) => {
+        const { columnOrder } = table.getState();
+
+        // If no explicit order, use original behavior
+        if (!columnOrder.length) {
+          return originalGetIndex(position);
+        }
+
+        // Get ordered columns
+        const orderedColumns = orderColumnsByState(
+          table.getAllLeafColumns(),
+          columnOrder
+        );
+
+        // Filter by position if specified
+        let columns = orderedColumns;
+        if (position === 'left') {
+          columns = orderedColumns.filter((c) => c.getIsPinned?.() === 'left');
+        } else if (position === 'right') {
+          columns = orderedColumns.filter((c) => c.getIsPinned?.() === 'right');
+        } else if (position === false) {
+          columns = orderedColumns.filter((c) => !c.getIsPinned?.());
+        }
+
+        return columns.findIndex((c) => c.id === column.id);
+      };
+    },
+  };
+}
+
+// ============================================================================
+// HELPERS
+// ============================================================================
+
+/**
+ * Order columns by column order state
+ */
+function orderColumnsByState<TData>(
+  columns: Column<TData, unknown>[],
+  columnOrder: string[]
+): Column<TData, unknown>[] {
+  if (!columnOrder.length) return columns;
+
+  const columnMap = new Map(columns.map((col) => [col.id, col]));
+  const ordered: Column<TData, unknown>[] = [];
+
+  // Add columns in specified order
+  for (const id of columnOrder) {
+    const col = columnMap.get(id);
+    if (col) {
+      ordered.push(col);
+      columnMap.delete(id);
+    }
+  }
+
+  // Add remaining columns
+  for (const col of columnMap.values()) {
+    ordered.push(col);
+  }
+
+  return ordered;
+}
+
+/**
+ * Move a column to a new position in the order
+ */
+export function moveColumn(
+  columnOrder: ColumnOrderState,
+  columnId: string,
+  targetIndex: number
+): ColumnOrderState {
+  const newOrder = columnOrder.filter((id) => id !== columnId);
+  newOrder.splice(targetIndex, 0, columnId);
+  return newOrder;
+}
+
+/**
+ * Swap two columns in the order
+ */
+export function swapColumns(
+  columnOrder: ColumnOrderState,
+  columnIdA: string,
+  columnIdB: string
+): ColumnOrderState {
+  const newOrder = [...columnOrder];
+  const indexA = newOrder.indexOf(columnIdA);
+  const indexB = newOrder.indexOf(columnIdB);
+
+  if (indexA === -1 || indexB === -1) {
+    return columnOrder;
+  }
+
+  newOrder[indexA] = columnIdB;
+  newOrder[indexB] = columnIdA;
+
+  return newOrder;
+}

package/src/lib/sng-table-core/features/column-pinning.ts

@@ -0,0 +1,219 @@
+/**
+ * @fileoverview Column pinning feature for sng-table-core
+ *
+ * Provides column pinning (left/right sticky columns) functionality.
+ */
+
+import {
+  Column,
+  HeaderGroup,
+  ColumnPinningState,
+  ColumnPinningPosition,
+  Updater,
+  functionalUpdate,
+  TableFeature,
+} from '../core/types';
+
+// ============================================================================
+// COLUMN PINNING FEATURE
+// ============================================================================
+
+/**
+ * Create the column pinning feature
+ */
+export function createColumnPinningFeature<TData>(): TableFeature<TData> {
+  return {
+    getInitialState: (initialState) => ({
+      columnPinning: initialState?.columnPinning ?? {
+        left: [],
+        right: [],
+      },
+    }),
+
+    getDefaultOptions: (_table) => ({
+      enablePinning: true,
+      enableColumnPinning: true,
+    }),
+
+    createTable: (table) => {
+      table.setColumnPinning = (updater: Updater<ColumnPinningState>) => {
+        table.setState((prev) => ({
+          ...prev,
+          columnPinning: functionalUpdate(updater, prev.columnPinning),
+        }));
+        table.options.onColumnPinningChange?.(updater);
+      };
+
+      table.resetColumnPinning = (defaultState?: boolean) => {
+        table.setColumnPinning?.(
+          defaultState
+            ? { left: [], right: [] }
+            : (table.initialState.columnPinning ?? { left: [], right: [] })
+        );
+      };
+
+      table.getIsSomeColumnsPinned = (position?: ColumnPinningPosition) => {
+        const { columnPinning } = table.getState();
+
+        if (position === 'left') {
+          return (columnPinning.left?.length ?? 0) > 0;
+        }
+        if (position === 'right') {
+          return (columnPinning.right?.length ?? 0) > 0;
+        }
+
+        return (
+          (columnPinning.left?.length ?? 0) > 0 ||
+          (columnPinning.right?.length ?? 0) > 0
+        );
+      };
+
+      table.getLeftLeafColumns = () => {
+        const { columnPinning } = table.getState();
+        const leftIds = columnPinning.left ?? [];
+        return table.getAllLeafColumns().filter((col) => leftIds.includes(col.id));
+      };
+
+      table.getRightLeafColumns = () => {
+        const { columnPinning } = table.getState();
+        const rightIds = columnPinning.right ?? [];
+        return table.getAllLeafColumns().filter((col) => rightIds.includes(col.id));
+      };
+
+      table.getCenterLeafColumns = () => {
+        const { columnPinning } = table.getState();
+        const pinnedIds = [
+          ...(columnPinning.left ?? []),
+          ...(columnPinning.right ?? []),
+        ];
+        return table.getAllLeafColumns().filter((col) => !pinnedIds.includes(col.id));
+      };
+
+      table.getLeftVisibleLeafColumns = () => {
+        return table.getLeftLeafColumns?.()?.filter(
+          (col) => col.getIsVisible?.() ?? true
+        ) ?? [];
+      };
+
+      table.getRightVisibleLeafColumns = () => {
+        return table.getRightLeafColumns?.()?.filter(
+          (col) => col.getIsVisible?.() ?? true
+        ) ?? [];
+      };
+
+      table.getCenterVisibleLeafColumns = () => {
+        return table.getCenterLeafColumns?.()?.filter(
+          (col) => col.getIsVisible?.() ?? true
+        ) ?? [];
+      };
+
+      // Header groups by position
+      table.getLeftHeaderGroups = () => {
+        const leftColumns = table.getLeftLeafColumns?.() ?? [];
+        return filterHeaderGroupsByColumns(table.getHeaderGroups(), leftColumns);
+      };
+
+      table.getRightHeaderGroups = () => {
+        const rightColumns = table.getRightLeafColumns?.() ?? [];
+        return filterHeaderGroupsByColumns(table.getHeaderGroups(), rightColumns);
+      };
+
+      table.getCenterHeaderGroups = () => {
+        const centerColumns = table.getCenterLeafColumns?.() ?? [];
+        return filterHeaderGroupsByColumns(table.getHeaderGroups(), centerColumns);
+      };
+
+      // Flat headers by position
+      table.getLeftFlatHeaders = () => {
+        return table.getLeftHeaderGroups?.()?.flatMap((g) => g.headers) ?? [];
+      };
+
+      table.getRightFlatHeaders = () => {
+        return table.getRightHeaderGroups?.()?.flatMap((g) => g.headers) ?? [];
+      };
+
+      table.getCenterFlatHeaders = () => {
+        return table.getCenterHeaderGroups?.()?.flatMap((g) => g.headers) ?? [];
+      };
+    },
+
+    createColumn: (column, table) => {
+      column.getCanPin = () => {
+        const { enablePinning, enableColumnPinning } = table.options;
+        const { enablePinning: columnEnablePinning } = column.columnDef;
+
+        if (columnEnablePinning === false) return false;
+        if (enableColumnPinning === false) return false;
+        if (enablePinning === false) return false;
+
+        return true;
+      };
+
+      column.getIsPinned = (): ColumnPinningPosition => {
+        const { columnPinning } = table.getState();
+
+        if (columnPinning.left?.includes(column.id)) {
+          return 'left';
+        }
+        if (columnPinning.right?.includes(column.id)) {
+          return 'right';
+        }
+
+        return false;
+      };
+
+      column.getPinnedIndex = () => {
+        const position = column.getIsPinned?.();
+        if (!position) return -1;
+
+        const { columnPinning } = table.getState();
+        const pinnedIds = position === 'left'
+          ? columnPinning.left ?? []
+          : columnPinning.right ?? [];
+
+        return pinnedIds.indexOf(column.id);
+      };
+
+      column.pin = (position: ColumnPinningPosition) => {
+        if (!column.getCanPin?.()) return;
+
+        table.setColumnPinning?.((prev) => {
+          const left = (prev.left ?? []).filter((id) => id !== column.id);
+          const right = (prev.right ?? []).filter((id) => id !== column.id);
+
+          if (position === 'left') {
+            left.push(column.id);
+          } else if (position === 'right') {
+            right.push(column.id);
+          }
+          // If position is false, column is unpinned (already removed above)
+
+          return { left, right };
+        });
+      };
+    },
+  };
+}
+
+// ============================================================================
+// HELPERS
+// ============================================================================
+
+/**
+ * Filter header groups to only include headers for specified columns
+ */
+function filterHeaderGroupsByColumns<TData>(
+  headerGroups: HeaderGroup<TData>[],
+  columns: Column<TData, unknown>[]
+): HeaderGroup<TData>[] {
+  const columnIds = new Set(columns.map((col) => col.id));
+
+  return headerGroups.map((group) => ({
+    ...group,
+    headers: group.headers.filter((header) => {
+      // Check if this header or any of its leaf columns are in the set
+      const leafColumns = header.column.getLeafColumns();
+      return leafColumns.some((col) => columnIds.has(col.id));
+    }),
+  })).filter((group) => group.headers.length > 0);
+}

package/src/lib/sng-table-core/features/column-sizing.ts

@@ -0,0 +1,268 @@
+/**
+ * @fileoverview Column sizing feature for sng-table-core
+ *
+ * Provides column resizing functionality.
+ */
+
+import {
+  ColumnSizingState,
+  ColumnSizingInfoState,
+  Updater,
+  functionalUpdate,
+  TableFeature,
+  ColumnPinningPosition,
+} from '../core/types';
+
+// ============================================================================
+// DEFAULT VALUES
+// ============================================================================
+
+const DEFAULT_COLUMN_SIZE = 150;
+const DEFAULT_COLUMN_MIN_SIZE = 20;
+const DEFAULT_COLUMN_MAX_SIZE = Number.MAX_SAFE_INTEGER;
+
+// ============================================================================
+// COLUMN SIZING FEATURE
+// ============================================================================
+
+/**
+ * Create the column sizing feature
+ */
+export function createColumnSizingFeature<TData>(): TableFeature<TData> {
+  return {
+    getInitialState: (initialState) => ({
+      columnSizing: initialState?.columnSizing ?? {},
+      columnSizingInfo: initialState?.columnSizingInfo ?? {
+        startOffset: null,
+        startSize: null,
+        deltaOffset: null,
+        deltaPercentage: null,
+        columnSizingStart: [],
+        isResizingColumn: false,
+      },
+    }),
+
+    getDefaultOptions: (_table) => ({
+      enableColumnResizing: true,
+      columnResizeMode: 'onEnd' as const,
+      columnResizeDirection: 'ltr' as const,
+    }),
+
+    createTable: (table) => {
+      table.setColumnSizing = (updater: Updater<ColumnSizingState>) => {
+        table.setState((prev) => ({
+          ...prev,
+          columnSizing: functionalUpdate(updater, prev.columnSizing),
+        }));
+        table.options.onColumnSizingChange?.(updater);
+      };
+
+      table.setColumnSizingInfo = (updater: Updater<ColumnSizingInfoState>) => {
+        table.setState((prev) => ({
+          ...prev,
+          columnSizingInfo: functionalUpdate(updater, prev.columnSizingInfo),
+        }));
+        table.options.onColumnSizingInfoChange?.(updater);
+      };
+
+      table.resetColumnSizing = (defaultState?: boolean) => {
+        table.setColumnSizing?.(
+          defaultState ? {} : (table.initialState.columnSizing ?? {})
+        );
+      };
+
+      table.getTotalSize = () => {
+        return table.getAllLeafColumns().reduce(
+          (sum, column) => sum + (column.getSize?.() ?? DEFAULT_COLUMN_SIZE),
+          0
+        );
+      };
+
+      table.getLeftTotalSize = () => {
+        const leftColumns = table.getLeftVisibleLeafColumns?.() ?? [];
+        return leftColumns.reduce(
+          (sum, column) => sum + (column.getSize?.() ?? DEFAULT_COLUMN_SIZE),
+          0
+        );
+      };
+
+      table.getCenterTotalSize = () => {
+        const centerColumns = table.getCenterVisibleLeafColumns?.() ?? table.getVisibleLeafColumns?.() ?? [];
+        return centerColumns.reduce(
+          (sum, column) => sum + (column.getSize?.() ?? DEFAULT_COLUMN_SIZE),
+          0
+        );
+      };
+
+      table.getRightTotalSize = () => {
+        const rightColumns = table.getRightVisibleLeafColumns?.() ?? [];
+        return rightColumns.reduce(
+          (sum, column) => sum + (column.getSize?.() ?? DEFAULT_COLUMN_SIZE),
+          0
+        );
+      };
+    },
+
+    createColumn: (column, table) => {
+      column.getCanResize = () => {
+        const { enableColumnResizing } = table.options;
+        const { enableResizing } = column.columnDef;
+
+        if (enableResizing === false) return false;
+        if (enableColumnResizing === false) return false;
+
+        return true;
+      };
+
+      column.getIsResizing = () => {
+        const { columnSizingInfo } = table.getState();
+        return columnSizingInfo.isResizingColumn === column.id;
+      };
+
+      column.getSize = () => {
+        const { columnSizing } = table.getState();
+        const { size, minSize, maxSize } = column.columnDef;
+
+        const configSize = size ?? DEFAULT_COLUMN_SIZE;
+        const stateSize = columnSizing[column.id];
+
+        const currentSize = stateSize ?? configSize;
+        const min = minSize ?? DEFAULT_COLUMN_MIN_SIZE;
+        const max = maxSize ?? DEFAULT_COLUMN_MAX_SIZE;
+
+        return Math.min(Math.max(currentSize, min), max);
+      };
+
+      column.getStart = (position?: ColumnPinningPosition) => {
+        const columns = position === 'left'
+          ? table.getLeftVisibleLeafColumns?.() ?? []
+          : position === 'right'
+            ? table.getRightVisibleLeafColumns?.() ?? []
+            : table.getVisibleLeafColumns?.() ?? [];
+
+        const index = columns.findIndex((c) => c.id === column.id);
+        if (index === -1) return 0;
+
+        return columns
+          .slice(0, index)
+          .reduce((sum, col) => sum + (col.getSize?.() ?? DEFAULT_COLUMN_SIZE), 0);
+      };
+
+      column.resetSize = () => {
+        table.setColumnSizing?.((prev) => {
+          const { [column.id]: _, ...rest } = prev;
+          return rest;
+        });
+      };
+    },
+
+    createHeader: (header, table) => {
+      header.getSize = () => {
+        let sum = 0;
+        const leafHeaders = header.getLeafHeaders();
+
+        for (const leafHeader of leafHeaders) {
+          sum += leafHeader.column.getSize?.() ?? DEFAULT_COLUMN_SIZE;
+        }
+
+        return sum;
+      };
+
+      header.getStart = (position?: ColumnPinningPosition) => {
+        if (header.isPlaceholder) return 0;
+        return header.column.getStart?.(position) ?? 0;
+      };
+
+      header.getResizeHandler = () => {
+        if (!header.column.getCanResize?.()) {
+          return () => { /* no-op - column cannot be resized */ };
+        }
+
+        return (event: unknown) => {
+          // This is a simplified version - full implementation would handle
+          // mouse/touch events for drag resizing
+          const mouseEvent = event as MouseEvent;
+
+          const startX = mouseEvent.clientX;
+          const startSize = header.column.getSize?.() ?? DEFAULT_COLUMN_SIZE;
+
+          // Start resizing
+          table.setColumnSizingInfo?.({
+            startOffset: startX,
+            startSize,
+            deltaOffset: 0,
+            deltaPercentage: 0,
+            columnSizingStart: [[header.column.id, startSize]],
+            isResizingColumn: header.column.id,
+          });
+
+          const doc = globalThis.document;
+          if (!doc) {
+            return;
+          }
+
+          const onMove = (e: MouseEvent) => {
+            const deltaX = e.clientX - startX;
+            const { columnResizeDirection } = table.options;
+            const delta = columnResizeDirection === 'rtl' ? -deltaX : deltaX;
+
+            const newSize = Math.max(
+              header.column.columnDef.minSize ?? DEFAULT_COLUMN_MIN_SIZE,
+              Math.min(
+                header.column.columnDef.maxSize ?? DEFAULT_COLUMN_MAX_SIZE,
+                startSize + delta
+              )
+            );
+
+            if (table.options.columnResizeMode === 'onChange') {
+              table.setColumnSizing?.((prev) => ({
+                ...prev,
+                [header.column.id]: newSize,
+              }));
+            }
+
+            table.setColumnSizingInfo?.((prev) => ({
+              ...prev,
+              deltaOffset: delta,
+              deltaPercentage: delta / startSize,
+            }));
+          };
+
+          const onEnd = () => {
+            const { deltaOffset } = table.getState().columnSizingInfo;
+
+            if (table.options.columnResizeMode === 'onEnd' && deltaOffset) {
+              const newSize = Math.max(
+                header.column.columnDef.minSize ?? DEFAULT_COLUMN_MIN_SIZE,
+                Math.min(
+                  header.column.columnDef.maxSize ?? DEFAULT_COLUMN_MAX_SIZE,
+                  startSize + deltaOffset
+                )
+              );
+
+              table.setColumnSizing?.((prev) => ({
+                ...prev,
+                [header.column.id]: newSize,
+              }));
+            }
+
+            table.setColumnSizingInfo?.({
+              startOffset: null,
+              startSize: null,
+              deltaOffset: null,
+              deltaPercentage: null,
+              columnSizingStart: [],
+              isResizingColumn: false,
+            });
+
+            doc.removeEventListener('mousemove', onMove);
+            doc.removeEventListener('mouseup', onEnd);
+          };
+
+          doc.addEventListener('mousemove', onMove);
+          doc.addEventListener('mouseup', onEnd);
+        };
+      };
+    },
+  };
+}