@ornery/ui-grid-react 0.1.4 → 0.1.6

package/src/useGridState.ts

@@ -1,4 +1,12 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  buildGridTemplateColumns,
+  computeViewportHeightPx,
+  computeViewportRows,
+  formatPaginationSummary,
+  orderVisibleColumns,
+  resolveBenchmarkIterations,
+} from './gridStateMath';
 import {
   createGridApi,
   UiGridApi,
@@ -16,7 +24,7 @@ import {
   getCellValue,
   setPathValue,
   SORT_DIRECTIONS,
-  buildGridPipeline,
+  defaultGridEngine,
   resolveGridLabels,
   gridColumnWidth,
   headerLabel as coreHeaderLabel,
@@ -79,19 +87,11 @@ import {
   FEATURE_CSV_EXPORT,
   FEATURE_AUTO_RESIZE,
   FEATURE_SAVE_STATE,
-} from '@ornery/ui-grid';
-import type {
-  DisplayItem,
-  GroupItem,
-  ExpandableItem,
-  RowItem,
-  PipelineResult,
-  GridInfiniteScrollState,
-  GridMoveDirection,
-  GridCellTemplateContext,
-  GridExpandableTemplateContext,
-} from '@ornery/ui-grid';
-import {
+  FEATURE_PINNING,
+  buildInitialPinnedState,
+  computePinnedOffset,
+  isColumnPinnable,
+  isPinningEnabled,
   applyGridSortStateCommand,
   updateGridFilterCommand,
   clearGridFiltersCommand,
@@ -117,8 +117,7 @@ import {
   saveGridInfiniteScrollPercentageCommand,
   setGridInfiniteScrollDirectionsCommand,
   restoreGridStateCommand,
-} from '../../ui-grid/src/lib/grid/ui-grid.commands';
-import {
+  pinGridColumnCommand,
   raiseGridRenderingComplete,
   raiseGridRowsRendered,
   raiseGridRowsVisibleChanged,
@@ -127,11 +126,69 @@ import {
   raiseGridScrollBegin,
   raiseGridScrollEnd,
   raiseGridBenchmarkComplete,
-} from '../../ui-grid/src/lib/grid/ui-grid.events';
-import {
   downloadGridCsvFile,
   observeGridHostSize,
-} from '../../ui-grid/src/lib/grid/ui-grid.host';
+} from '@ornery/ui-grid';
+import type {
+  DisplayItem,
+  GroupItem,
+  ExpandableItem,
+  RowItem,
+  PipelineResult,
+  GridInfiniteScrollState,
+  GridMoveDirection,
+  GridCellTemplateContext,
+  GridExpandableTemplateContext,
+  PinDirection,
+  PinnedColumnState,
+} from '@ornery/ui-grid';
+
+function escapeCssSelectorValue(value: string): string {
+  const nativeEscape = globalThis.CSS?.escape;
+  if (typeof nativeEscape === 'function') {
+    return nativeEscape(value);
+  }
+
+  let output = '';
+  for (let index = 0; index < value.length; index += 1) {
+    const codePoint = value.charCodeAt(index);
+    const character = value.charAt(index);
+
+    if (codePoint === 0x0000) {
+      output += '\uFFFD';
+      continue;
+    }
+
+    const isControlCharacter = (codePoint >= 0x0001 && codePoint <= 0x001f) || codePoint === 0x007f;
+    const startsWithDigit = index === 0 && codePoint >= 0x0030 && codePoint <= 0x0039;
+    const secondCharDigitAfterHyphen =
+      index === 1 &&
+      codePoint >= 0x0030 && codePoint <= 0x0039 &&
+      value.charCodeAt(0) === 0x002d;
+
+    if (isControlCharacter || startsWithDigit || secondCharDigitAfterHyphen) {
+      output += `\\${codePoint.toString(16)} `;
+      continue;
+    }
+
+    if (index === 0 && value.length === 1 && codePoint === 0x002d) {
+      output += `\\${character}`;
+      continue;
+    }
+
+    const isSafeCharacter =
+      codePoint >= 0x0080 ||
+      codePoint === 0x002d ||
+      codePoint === 0x005f ||
+      (codePoint >= 0x0030 && codePoint <= 0x0039) ||
+      (codePoint >= 0x0041 && codePoint <= 0x005a) ||
+      (codePoint >= 0x0061 && codePoint <= 0x007a);
+
+    output += isSafeCharacter ? character : `\\${character}`;
+  }
+
+  return output;
+}
 
 export interface UseGridStateResult {
   pipeline: PipelineResult;
@@ -201,9 +258,21 @@ export interface UseGridStateResult {
   showPaginationControls: () => boolean;
   paginationSummary: () => string;
   pageSizeOptions: () => number[];
-  isCellEditable: (row: GridRow, column: GridColumnDef, triggerEvent?: Event | KeyboardEvent | null) => boolean;
+  isCellEditable: (
+    row: GridRow,
+    column: GridColumnDef,
+    triggerEvent?: Event | KeyboardEvent | null,
+  ) => boolean;
   shouldEditOnFocus: (column: GridColumnDef) => boolean;
 
+  // Pinning
+  isPinned: (column: GridColumnDef) => boolean;
+  pinnedOffset: (column: GridColumnDef) => { side: 'left' | 'right'; offset: string } | null;
+  isPinningEnabled: () => boolean;
+  isColumnPinnable: (column: GridColumnDef) => boolean;
+  togglePin: (column: GridColumnDef) => void;
+  pinningFeature: boolean;
+
   // Feature flags
   sortingFeature: boolean;
   filteringFeature: boolean;
@@ -226,7 +295,11 @@ export interface UseGridStateResult {
   clearAllFilters: () => void;
   toggleGrouping: (column: GridColumnDef, event?: React.MouseEvent) => void;
   toggleGroup: (item: GroupItem) => void;
-  focusCell: (row: GridRow, column: GridColumnDef, triggerEvent?: Event | KeyboardEvent | null) => void;
+  focusCell: (
+    row: GridRow,
+    column: GridColumnDef,
+    triggerEvent?: Event | KeyboardEvent | null,
+  ) => void;
   handleCellKeyDown: (row: GridRow, column: GridColumnDef, event: React.KeyboardEvent) => void;
   handleCellDoubleClick: (row: GridRow, column: GridColumnDef, event: React.MouseEvent) => void;
   updateEditingValue: (value: string) => void;
@@ -243,13 +316,19 @@ export interface UseGridStateResult {
   onViewportScroll: (startIndex: number) => void;
 }
 
-export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridApi) => void): UseGridStateResult {
+export function useGridState(
+  options: GridOptions,
+  onRegisterApi?: (api: UiGridApi) => void,
+): UseGridStateResult {
   const [activeFilters, setActiveFilters] = useState<Record<string, string>>({});
   const [groupByColumns, setGroupByColumns] = useState<string[]>([]);
   const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
   const [columnOrder, setColumnOrder] = useState<string[]>([]);
   const [hiddenRowReasons, setHiddenRowReasons] = useState<Record<string, string[]>>({});
-  const [sortState, setSortState] = useState<SortState>({ columnName: null, direction: SORT_DIRECTIONS.none });
+  const [sortState, setSortState] = useState<SortState>({
+    columnName: null,
+    direction: SORT_DIRECTIONS.none,
+  });
   const [focusedCell, setFocusedCell] = useState<GridCellPosition | null>(null);
   const [editingCell, setEditingCell] = useState<GridCellPosition | null>(null);
   const [editingValue, setEditingValue] = useState('');
@@ -265,6 +344,7 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
     previousVisibleRows: 0,
   });
   const [autoViewportHeight, setAutoViewportHeight] = useState<number | null>(null);
+  const [pinnedColumns, setPinnedColumns] = useState<PinnedColumnState>({});
 
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const initializedGridIdRef = useRef<string | null>(null);
@@ -299,6 +379,8 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
   expandedRowsRef.current = expandedRows;
   const expandedTreeRowsRef = useRef(expandedTreeRows);
   expandedTreeRowsRef.current = expandedTreeRows;
+  const pinnedColumnsRef = useRef(pinnedColumns);
+  pinnedColumnsRef.current = pinnedColumns;
   const currentPageRef = useRef(currentPage);
   currentPageRef.current = currentPage;
   const pageSizeRef = useRef(pageSize);
@@ -311,17 +393,31 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
   const rowSize = options.rowHeight ?? 44;
 
   const visibleColumns = useMemo(() => {
-    const order = columnOrder;
-    return [...options.columnDefs]
-      .filter((column) => column.visible !== false)
-      .sort((left, right) => order.indexOf(left.name) - order.indexOf(right.name));
-  }, [options.columnDefs, columnOrder]);
+    const orderedColumns = orderVisibleColumns(options.columnDefs, columnOrder);
+    const pinnedEntries = Object.entries(pinnedColumns);
+    if (pinnedEntries.length === 0) {
+      return orderedColumns;
+    }
+
+    const columnByName = new Map(orderedColumns.map((column) => [column.name, column]));
+    const pinnedLeft = pinnedEntries
+      .filter(([, direction]) => direction === 'left')
+      .map(([columnName]) => columnByName.get(columnName))
+      .filter((column): column is GridColumnDef => column !== undefined);
+    const pinnedRight = pinnedEntries
+      .filter(([, direction]) => direction === 'right')
+      .map(([columnName]) => columnByName.get(columnName))
+      .filter((column): column is GridColumnDef => column !== undefined);
+    const centerColumns = orderedColumns.filter((column) => pinnedColumns[column.name] === undefined);
+
+    return [...pinnedLeft, ...centerColumns, ...pinnedRight];
+  }, [options.columnDefs, columnOrder, pinnedColumns]);
 
   const visibleColumnsRef = useRef(visibleColumns);
   visibleColumnsRef.current = visibleColumns;
 
   const pipeline = useMemo<PipelineResult>(() => {
-    return buildGridPipeline({
+    return defaultGridEngine.buildPipeline({
       options,
       columns: visibleColumns,
       activeFilters,
@@ -335,7 +431,20 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
       pageSize,
       rowSize,
     });
-  }, [options, visibleColumns, activeFilters, sortState, groupByColumns, collapsedGroups, hiddenRowReasons, expandedRows, expandedTreeRows, currentPage, pageSize, rowSize]);
+  }, [
+    options,
+    visibleColumns,
+    activeFilters,
+    sortState,
+    groupByColumns,
+    collapsedGroups,
+    hiddenRowReasons,
+    expandedRows,
+    expandedTreeRows,
+    currentPage,
+    pageSize,
+    rowSize,
+  ]);
 
   const pipelineRef = useRef(pipeline);
   pipelineRef.current = pipeline;
@@ -343,10 +452,26 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
   const labels = useMemo(() => resolveGridLabels(options.labels), [options.labels]);
 
   const gridTemplateColumns = useMemo(
-    () => visibleColumns.map((column) => gridColumnWidth(column)).join(' '),
-    [visibleColumns]
+    () => buildGridTemplateColumns(visibleColumns),
+    [visibleColumns],
   );
 
+  const isPinningEnabledFn = useCallback((): boolean => {
+    return isPinningEnabled(optionsRef.current);
+  }, []);
+
+  const isColumnPinnableFn = useCallback((column: GridColumnDef): boolean => {
+    return isColumnPinnable(optionsRef.current, column);
+  }, []);
+
+  const isPinnedFn = useCallback((column: GridColumnDef): boolean => {
+    return pinnedColumnsRef.current[column.name] !== undefined;
+  }, []);
+
+  const pinnedOffsetFn = useCallback((column: GridColumnDef) => {
+    return computePinnedOffset(visibleColumnsRef.current, pinnedColumnsRef.current, column);
+  }, []);
+
   // --- Helper functions (all pure, no state closures needed beyond refs) ---
 
   const resolveRowId = useCallback((row: GridRow | GridRecord | string): string => {
@@ -358,13 +483,16 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
       { ...optionsRef.current, data },
       optionsRef.current.rowHeight ?? 44,
       hiddenRowReasonsRef.current,
-      expandedRowsRef.current
+      expandedRowsRef.current,
     );
   }, []);
 
-  const findRowById = useCallback((rowId: string): GridRow | null => {
-    return coreFindGridRowById(buildRowsFromData(optionsRef.current.data), rowId);
-  }, [buildRowsFromData]);
+  const findRowById = useCallback(
+    (rowId: string): GridRow | null => {
+      return coreFindGridRowById(buildRowsFromData(optionsRef.current.data), rowId);
+    },
+    [buildRowsFromData],
+  );
 
   const canExpandRowsFn = useCallback((): boolean => {
     return FEATURE_EXPANDABLE && canGridExpandRows(optionsRef.current);
@@ -376,7 +504,12 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
 
   const getCurrentPageValueFn = useCallback((totalItems?: number): number => {
     const ti = totalItems ?? pipelineRef.current.totalItems;
-    return coreGetCurrentPageValue(optionsRef.current, currentPageRef.current, ti, pageSizeRef.current);
+    return coreGetCurrentPageValue(
+      optionsRef.current,
+      currentPageRef.current,
+      ti,
+      pageSizeRef.current,
+    );
   }, []);
 
   const getTotalPagesValueFn = useCallback((totalItems?: number): number => {
@@ -386,30 +519,44 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
 
   const getFirstRowIndexValueFn = useCallback((totalItems?: number): number => {
     const ti = totalItems ?? pipelineRef.current.totalItems;
-    return coreGetFirstRowIndexValue(optionsRef.current, currentPageRef.current, ti, pageSizeRef.current);
+    return coreGetFirstRowIndexValue(
+      optionsRef.current,
+      currentPageRef.current,
+      ti,
+      pageSizeRef.current,
+    );
   }, []);
 
   const getLastRowIndexValueFn = useCallback((totalItems?: number): number => {
     const ti = totalItems ?? pipelineRef.current.totalItems;
-    return coreGetLastRowIndexValue(optionsRef.current, currentPageRef.current, ti, pageSizeRef.current);
+    return coreGetLastRowIndexValue(
+      optionsRef.current,
+      currentPageRef.current,
+      ti,
+      pageSizeRef.current,
+    );
   }, []);
 
-  const isCellEditable = useCallback((row: GridRow, column: GridColumnDef, triggerEvent?: Event | KeyboardEvent | null): boolean => {
-    if (!FEATURE_CELL_EDIT) return false;
-    const editable = column.enableCellEdit ?? optionsRef.current.enableCellEdit ?? false;
-    if (!editable) return false;
-
-    const condition = column.cellEditableCondition ?? optionsRef.current.cellEditableCondition ?? true;
-    if (typeof condition === 'boolean') return condition;
-
-    const context: GridCellEditableContext = {
-      row: row.entity,
-      column,
-      rowIndex: row.index,
-      triggerEvent,
-    };
-    return condition(context);
-  }, []);
+  const isCellEditable = useCallback(
+    (row: GridRow, column: GridColumnDef, triggerEvent?: Event | KeyboardEvent | null): boolean => {
+      if (!FEATURE_CELL_EDIT) return false;
+      const editable = column.enableCellEdit ?? optionsRef.current.enableCellEdit ?? false;
+      if (!editable) return false;
+
+      const condition =
+        column.cellEditableCondition ?? optionsRef.current.cellEditableCondition ?? true;
+      if (typeof condition === 'boolean') return condition;
+
+      const context: GridCellEditableContext = {
+        row: row.entity,
+        column,
+        rowIndex: row.index,
+        triggerEvent,
+      };
+      return condition(context);
+    },
+    [],
+  );
 
   const shouldEditOnFocusFn = useCallback((column: GridColumnDef): boolean => {
     return column.enableCellEditOnFocus ?? optionsRef.current.enableCellEditOnFocus ?? false;
@@ -419,7 +566,7 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
 
   const focusRenderedCell = useCallback((position: GridCellPosition): void => {
     const focusToken = ++renderedCellFocusTokenRef.current;
-    const selector = `.body-cell[data-row-id="${position.rowId}"][data-col-name="${position.columnName}"]`;
+    const selector = `.body-cell[data-row-id="${escapeCssSelectorValue(position.rowId)}"][data-col-name="${escapeCssSelectorValue(position.columnName)}"]`;
 
     const doFocus = (retry = true): void => {
       if (focusToken !== renderedCellFocusTokenRef.current) return;
@@ -444,12 +591,13 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
     const ec = editingCellRef.current;
     if (!ec) return;
 
-    const selector = `.cell-editor[data-row-id="${ec.rowId}"][data-col-name="${ec.columnName}"]`;
+    const selector = `.cell-editor[data-row-id="${escapeCssSelectorValue(ec.rowId)}"][data-col-name="${escapeCssSelectorValue(ec.columnName)}"]`;
 
     const doFocus = (retry = true): void => {
       if (focusToken !== editorFocusTokenRef.current) return;
       const currentEc = editingCellRef.current;
-      if (!currentEc || currentEc.rowId !== ec.rowId || currentEc.columnName !== ec.columnName) return;
+      if (!currentEc || currentEc.rowId !== ec.rowId || currentEc.columnName !== ec.columnName)
+        return;
 
       const container = gridContainerRef.current;
       if (!container) return;
@@ -500,10 +648,10 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
       moveColumn: (fromIndex, toIndex) => {
         moveGridColumnCommand(
           gridApiRef.current!,
-          FEATURE_COLUMN_MOVING && (optionsRef.current.enableColumnMoving === true),
+          FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
           (updater) => setColumnOrder((current) => updater(current)),
           fromIndex,
-          toIndex
+          toIndex,
         );
       },
       toggleGrouping: (columnName) => {
@@ -517,7 +665,11 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
         gridApiRef.current!.core.raise.groupingChanged(next);
       },
       clearGrouping: () => {
-        clearGridGroupingCommand(gridApiRef.current!, (grouping) => setGroupByColumns(grouping), false);
+        clearGridGroupingCommand(
+          gridApiRef.current!,
+          (grouping) => setGroupByColumns(grouping),
+          false,
+        );
       },
       benchmark: (iterations) => {
         return runBenchmarkFn(iterations);
@@ -543,7 +695,7 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
         expandAllGridTreeRowsCommand(
           (data) => buildRowsFromData(data),
           optionsRef.current.data,
-          (e) => setExpandedTreeRows(e)
+          (e) => setExpandedTreeRows(e),
         );
       },
       treeCollapseAllRows: () => {
@@ -563,35 +715,35 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
           infiniteScrollStateRef.current,
           (s) => setInfiniteScrollState(s),
           scrollUp ?? infiniteScrollStateRef.current.scrollUp,
-          scrollDown ?? infiniteScrollStateRef.current.scrollDown
+          scrollDown ?? infiniteScrollStateRef.current.scrollDown,
         );
       },
       infiniteScrollReset: (scrollUp, scrollDown) => {
         resetGridInfiniteScrollCommand(
           (s) => setInfiniteScrollState(s),
           scrollUp ?? infiniteScrollStateRef.current.scrollUp,
-          scrollDown ?? infiniteScrollStateRef.current.scrollDown
+          scrollDown ?? infiniteScrollStateRef.current.scrollDown,
         );
       },
       infiniteScrollSaveScrollPercentage: () => {
         saveGridInfiniteScrollPercentageCommand(
           infiniteScrollStateRef.current,
           pipelineRef.current.visibleRows.length,
-          (s) => setInfiniteScrollState(s)
+          (s) => setInfiniteScrollState(s),
         );
       },
       infiniteScrollDataRemovedTop: (scrollUp, scrollDown) => {
         resetGridInfiniteScrollCommand(
           (s) => setInfiniteScrollState(s),
           scrollUp ?? infiniteScrollStateRef.current.scrollUp,
-          scrollDown ?? infiniteScrollStateRef.current.scrollDown
+          scrollDown ?? infiniteScrollStateRef.current.scrollDown,
         );
       },
       infiniteScrollDataRemovedBottom: (scrollUp, scrollDown) => {
         resetGridInfiniteScrollCommand(
           (s) => setInfiniteScrollState(s),
           scrollUp ?? infiniteScrollStateRef.current.scrollUp,
-          scrollDown ?? infiniteScrollStateRef.current.scrollDown
+          scrollDown ?? infiniteScrollStateRef.current.scrollDown,
         );
       },
       infiniteScrollSetDirections: (scrollUp, scrollDown) => {
@@ -599,7 +751,7 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
           infiniteScrollStateRef.current,
           (s) => setInfiniteScrollState(s),
           scrollUp,
-          scrollDown
+          scrollDown,
         );
       },
       saveState: () => {
@@ -613,6 +765,7 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
           totalItems: pipelineRef.current.totalItems,
           expandedRows: expandedRowsRef.current,
           expandedTreeRows: expandedTreeRowsRef.current,
+          pinnedColumns: pinnedColumnsRef.current,
         });
       },
       restoreState: (state) => {
@@ -625,6 +778,7 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
           setPageSize: (ps) => setPageSize(ps),
           setExpandedRows: (e) => setExpandedRows(e),
           setExpandedTreeRows: (e) => setExpandedTreeRows(e),
+          setPinnedColumns: (p) => setPinnedColumns(p),
           getEffectivePageSize: () => effectivePageSizeFn(pipelineRef.current.totalItems),
         });
       },
@@ -638,6 +792,16 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
       endCellEdit: () => commitCellEditFn(),
       cancelCellEdit: () => cancelCellEditFn(),
       getEditingCell: () => editingCellRef.current,
+      pinColumn: (columnName: string, direction: PinDirection) => {
+        pinGridColumnCommand(
+          gridApiRef.current!,
+          isPinningEnabledFn(),
+          (v) => setPinnedColumns(v),
+          () => pinnedColumnsRef.current,
+          columnName,
+          direction,
+        );
+      },
     };
 
     gridApiRef.current = createGridApi(bindings);
@@ -647,48 +811,71 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
 
   // --- Memoized action functions ---
 
-  const seekPageFn = useCallback((page: number): void => {
-    seekGridPaginationCommand(
+  const seekPageFn = useCallback(
+    (page: number): void => {
+      seekGridPaginationCommand(
+        gridApiRef.current!,
+        (nextPage) => setCurrentPage(nextPage),
+        () => getTotalPagesValueFn(),
+        () => effectivePageSizeFn(pipelineRef.current.totalItems),
+        page,
+      );
+    },
+    [getTotalPagesValueFn, effectivePageSizeFn],
+  );
+
+  const togglePinFn = useCallback((column: GridColumnDef): void => {
+    const current = pinnedColumnsRef.current[column.name];
+    const next: PinDirection = current === 'left' ? 'right' : current === 'right' ? 'none' : 'left';
+    pinGridColumnCommand(
       gridApiRef.current!,
-      (nextPage) => setCurrentPage(nextPage),
-      () => getTotalPagesValueFn(),
-      () => effectivePageSizeFn(pipelineRef.current.totalItems),
-      page
+      isPinningEnabledFn(),
+      (v) => setPinnedColumns(v),
+      () => pinnedColumnsRef.current,
+      column.name,
+      next,
     );
-  }, [getTotalPagesValueFn, effectivePageSizeFn]);
+  }, []);
 
   const setPaginationPageSizeFn = useCallback((ps: number): void => {
     setGridPaginationPageSizeCommand(
       gridApiRef.current!,
       (nextPageSize) => setPageSize(nextPageSize),
       (nextPage) => setCurrentPage(nextPage),
-      ps
+      ps,
     );
   }, []);
 
-  const toggleRowExpansionByRefFn = useCallback((row: GridRow | GridRecord | string): void => {
-    const rowId = coreResolveGridRowId(optionsRef.current, row);
-    toggleGridRowExpansionCommand(
-      gridApiRef.current!,
-      FEATURE_EXPANDABLE && canGridExpandRows(optionsRef.current),
-      expandedRowsRef.current,
-      rowId,
-      (e) => setExpandedRows(e),
-      (resolvedRowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), resolvedRowId)
-    );
-  }, [buildRowsFromData]);
+  const toggleRowExpansionByRefFn = useCallback(
+    (row: GridRow | GridRecord | string): void => {
+      const rowId = coreResolveGridRowId(optionsRef.current, row);
+      toggleGridRowExpansionCommand(
+        gridApiRef.current!,
+        FEATURE_EXPANDABLE && canGridExpandRows(optionsRef.current),
+        expandedRowsRef.current,
+        rowId,
+        (e) => setExpandedRows(e),
+        (resolvedRowId) =>
+          coreFindGridRowById(buildRowsFromData(optionsRef.current.data), resolvedRowId),
+      );
+    },
+    [buildRowsFromData],
+  );
 
   const expandAllRowsFn = useCallback((): void => {
     if (!canGridExpandRows(optionsRef.current)) return;
     expandAllGridRowsCommand(
       (data) => buildRowsFromData(data),
       optionsRef.current.data,
-      (e) => setExpandedRows(e)
+      (e) => setExpandedRows(e),
     );
   }, [buildRowsFromData]);
 
   const toggleAllRowsFn = useCallback((): void => {
-    const allExpanded = areAllGridRowsExpanded(buildRowsFromData(optionsRef.current.data), expandedRowsRef.current);
+    const allExpanded = areAllGridRowsExpanded(
+      buildRowsFromData(optionsRef.current.data),
+      expandedRowsRef.current,
+    );
     if (allExpanded) {
       collapseAllGridRowsCommand((e) => setExpandedRows(e));
     } else {
@@ -696,89 +883,115 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
     }
   }, [buildRowsFromData, expandAllRowsFn]);
 
-  const toggleTreeRowByRefFn = useCallback((row: GridRow | GridRecord | string): void => {
-    const rowId = coreResolveGridRowId(optionsRef.current, row);
-    toggleGridTreeRowCommand(
-      gridApiRef.current!,
-      expandedTreeRowsRef.current,
-      rowId,
-      (e) => setExpandedTreeRows(e),
-      (resolvedRowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), resolvedRowId)
-    );
-  }, [buildRowsFromData]);
-
-  const expandTreeRowByRefFn = useCallback((row: GridRow | GridRecord | string): void => {
-    const rowId = coreResolveGridRowId(optionsRef.current, row);
-    setGridTreeRowExpandedCommand(
-      gridApiRef.current!,
-      expandedTreeRowsRef.current,
-      rowId,
-      true,
-      (e) => setExpandedTreeRows(e),
-      (resolvedRowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), resolvedRowId)
-    );
-  }, [buildRowsFromData]);
+  const toggleTreeRowByRefFn = useCallback(
+    (row: GridRow | GridRecord | string): void => {
+      const rowId = coreResolveGridRowId(optionsRef.current, row);
+      toggleGridTreeRowCommand(
+        gridApiRef.current!,
+        expandedTreeRowsRef.current,
+        rowId,
+        (e) => setExpandedTreeRows(e),
+        (resolvedRowId) =>
+          coreFindGridRowById(buildRowsFromData(optionsRef.current.data), resolvedRowId),
+      );
+    },
+    [buildRowsFromData],
+  );
 
-  const collapseTreeRowByRefFn = useCallback((row: GridRow | GridRecord | string): void => {
-    const rowId = coreResolveGridRowId(optionsRef.current, row);
-    setGridTreeRowExpandedCommand(
-      gridApiRef.current!,
-      expandedTreeRowsRef.current,
-      rowId,
-      false,
-      (e) => setExpandedTreeRows(e),
-      (resolvedRowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), resolvedRowId)
-    );
-  }, [buildRowsFromData]);
+  const expandTreeRowByRefFn = useCallback(
+    (row: GridRow | GridRecord | string): void => {
+      const rowId = coreResolveGridRowId(optionsRef.current, row);
+      setGridTreeRowExpandedCommand(
+        gridApiRef.current!,
+        expandedTreeRowsRef.current,
+        rowId,
+        true,
+        (e) => setExpandedTreeRows(e),
+        (resolvedRowId) =>
+          coreFindGridRowById(buildRowsFromData(optionsRef.current.data), resolvedRowId),
+      );
+    },
+    [buildRowsFromData],
+  );
 
-  const startCellEditFn = useCallback((row: GridRow, column: GridColumnDef, triggerEvent?: Event | KeyboardEvent | null, initialValue?: string): void => {
-    const currentValue = getCellValue(row.entity, column);
-    const focusToken = ++editorFocusTokenRef.current;
-    const ec = beginGridCellEditCommand(
-      gridApiRef.current!,
-      {
-        setFocusedCell: (fc) => setFocusedCell(fc),
-        setEditingCell: (ec2) => setEditingCell(ec2),
-        setEditingValue: (ev) => setEditingValue(ev),
-      },
-      row,
-      column,
-      currentValue,
-      triggerEvent,
-      initialValue
-    );
+  const collapseTreeRowByRefFn = useCallback(
+    (row: GridRow | GridRecord | string): void => {
+      const rowId = coreResolveGridRowId(optionsRef.current, row);
+      setGridTreeRowExpandedCommand(
+        gridApiRef.current!,
+        expandedTreeRowsRef.current,
+        rowId,
+        false,
+        (e) => setExpandedTreeRows(e),
+        (resolvedRowId) =>
+          coreFindGridRowById(buildRowsFromData(optionsRef.current.data), resolvedRowId),
+      );
+    },
+    [buildRowsFromData],
+  );
 
-    if (ec) {
-      queueMicrotask(() => focusEditorInput(focusToken));
-    }
-  }, [focusEditorInput]);
+  const startCellEditFn = useCallback(
+    (
+      row: GridRow,
+      column: GridColumnDef,
+      triggerEvent?: Event | KeyboardEvent | null,
+      initialValue?: string,
+    ): void => {
+      const currentValue = getCellValue(row.entity, column);
+      const focusToken = ++editorFocusTokenRef.current;
+      const ec = beginGridCellEditCommand(
+        gridApiRef.current!,
+        {
+          setFocusedCell: (fc) => setFocusedCell(fc),
+          setEditingCell: (ec2) => setEditingCell(ec2),
+          setEditingValue: (ev) => setEditingValue(ev),
+        },
+        row,
+        column,
+        currentValue,
+        triggerEvent,
+        initialValue,
+      );
+
+      if (ec) {
+        queueMicrotask(() => focusEditorInput(focusToken));
+      }
+    },
+    [focusEditorInput],
+  );
 
-  const commitCellEditFn = useCallback((direction?: GridMoveDirection, restoreFocus = true): void => {
-    const result = commitGridCellEditCommand(gridApiRef.current!, {
-      getEditingCell: () => editingCellRef.current,
-      getEditingValue: () => editingValueRef.current,
-      setEditingCell: (ec) => setEditingCell(ec),
-      setEditingValue: (ev) => setEditingValue(ev),
-      findRowById: (rowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), rowId),
-      findColumnByName: (columnName) => visibleColumnsRef.current.find((c) => c.name === columnName),
-      parseEditedValue: (column, value, oldValue) => parseGridEditedValue(column, value, oldValue),
-      setCellValue: (rowEntity, column, value) => {
-        const fieldPath = column.editModelField ?? column.field ?? column.name;
-        setPathValue(rowEntity, fieldPath, value);
-      },
-    });
+  const commitCellEditFn = useCallback(
+    (direction?: GridMoveDirection, restoreFocus = true): void => {
+      const result = commitGridCellEditCommand(gridApiRef.current!, {
+        getEditingCell: () => editingCellRef.current,
+        getEditingValue: () => editingValueRef.current,
+        setEditingCell: (ec) => setEditingCell(ec),
+        setEditingValue: (ev) => setEditingValue(ev),
+        findRowById: (rowId) =>
+          coreFindGridRowById(buildRowsFromData(optionsRef.current.data), rowId),
+        findColumnByName: (columnName) =>
+          visibleColumnsRef.current.find((c) => c.name === columnName),
+        parseEditedValue: (column, value, oldValue) =>
+          parseGridEditedValue(column, value, oldValue),
+        setCellValue: (rowEntity, column, value) => {
+          const fieldPath = column.editModelField ?? column.field ?? column.name;
+          setPathValue(rowEntity, fieldPath, value);
+        },
+      });
 
-    if (!result.committed || !result.row || !result.column || !result.focusTarget) return;
+      if (!result.committed || !result.row || !result.column || !result.focusTarget) return;
 
-    editorFocusTokenRef.current += 1;
+      editorFocusTokenRef.current += 1;
 
-    if (direction) {
-      const moved = moveFocusFn(result.row, result.column, direction);
-      if (!moved) focusRenderedCell(result.focusTarget);
-    } else if (restoreFocus) {
-      focusRenderedCell(result.focusTarget);
-    }
-  }, [buildRowsFromData, focusRenderedCell]);
+      if (direction) {
+        const moved = moveFocusFn(result.row, result.column, direction);
+        if (!moved) focusRenderedCell(result.focusTarget);
+      } else if (restoreFocus) {
+        focusRenderedCell(result.focusTarget);
+      }
+    },
+    [buildRowsFromData, focusRenderedCell],
+  );
 
   const cancelCellEditFn = useCallback((): void => {
     const hadEditingCell = editingCellRef.current !== null;
@@ -786,8 +999,10 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
       getEditingCell: () => editingCellRef.current,
       setEditingCell: (ec) => setEditingCell(ec),
       setEditingValue: (ev) => setEditingValue(ev),
-      findRowById: (rowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), rowId),
-      findColumnByName: (columnName) => visibleColumnsRef.current.find((c) => c.name === columnName),
+      findRowById: (rowId) =>
+        coreFindGridRowById(buildRowsFromData(optionsRef.current.data), rowId),
+      findColumnByName: (columnName) =>
+        visibleColumnsRef.current.find((c) => c.name === columnName),
     });
 
     if (!hadEditingCell) return;
@@ -795,30 +1010,44 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
     if (result.focusTarget) focusRenderedCell(result.focusTarget);
   }, [buildRowsFromData, focusRenderedCell]);
 
-  const moveFocusFn = useCallback((row: GridRow, column: GridColumnDef, direction: GridMoveDirection, triggerEvent?: Event | KeyboardEvent | null): boolean => {
-    const nextCell = findNextGridCell({
-      rows: pipelineRef.current.visibleRows,
-      columns: visibleColumnsRef.current,
-      rowId: row.id,
-      columnName: column.name,
-      direction,
-    });
-    if (!nextCell) return false;
+  const moveFocusFn = useCallback(
+    (
+      row: GridRow,
+      column: GridColumnDef,
+      direction: GridMoveDirection,
+      triggerEvent?: Event | KeyboardEvent | null,
+    ): boolean => {
+      const nextCell = findNextGridCell({
+        rows: pipelineRef.current.visibleRows,
+        columns: visibleColumnsRef.current,
+        rowId: row.id,
+        columnName: column.name,
+        direction,
+      });
+      if (!nextCell) return false;
 
-    setFocusedCell({ rowId: nextCell.row.id, columnName: nextCell.column.name });
-    focusRenderedCell({ rowId: nextCell.row.id, columnName: nextCell.column.name });
+      setFocusedCell({ rowId: nextCell.row.id, columnName: nextCell.column.name });
+      focusRenderedCell({ rowId: nextCell.row.id, columnName: nextCell.column.name });
 
-    if (shouldEditOnFocusFn(nextCell.column) && isCellEditable(nextCell.row, nextCell.column, triggerEvent)) {
-      startCellEditFn(nextCell.row, nextCell.column, triggerEvent);
-    }
+      if (
+        shouldEditOnFocusFn(nextCell.column) &&
+        isCellEditable(nextCell.row, nextCell.column, triggerEvent)
+      ) {
+        startCellEditFn(nextCell.row, nextCell.column, triggerEvent);
+      }
 
-    return true;
-  }, [focusRenderedCell, isCellEditable, shouldEditOnFocusFn, startCellEditFn]);
+      return true;
+    },
+    [focusRenderedCell, isCellEditable, shouldEditOnFocusFn, startCellEditFn],
+  );
 
   const runBenchmarkFn = useCallback((iterations?: number): GridBenchmarkResult => {
-    const safeIterations = Math.max(1, iterations ?? optionsRef.current.benchmark?.iterations ?? 25);
+    const safeIterations = resolveBenchmarkIterations(
+      iterations,
+      optionsRef.current.benchmark?.iterations,
+    );
     const startedAt = performance.now();
-    let lastResult = buildGridPipeline({
+    let lastResult = defaultGridEngine.buildPipeline({
       options: optionsRef.current,
       columns: visibleColumnsRef.current,
       activeFilters: activeFiltersRef.current,
@@ -834,7 +1063,7 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
     });
 
     for (let i = 1; i < safeIterations; i++) {
-      lastResult = buildGridPipeline({
+      lastResult = defaultGridEngine.buildPipeline({
         options: optionsRef.current,
         columns: visibleColumnsRef.current,
         activeFilters: activeFiltersRef.current,
@@ -887,6 +1116,7 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
     setExpandedTreeRows({});
     setColumnOrder(options.columnDefs.map((column) => column.name));
     setGroupByColumns(options.grouping?.groupBy ?? []);
+    setPinnedColumns(buildInitialPinnedState(options.columnDefs));
     setCurrentPage(options.paginationCurrentPage ?? 1);
     setPageSize(coreGetEffectivePageSize(options, 0, options.data.length));
 
@@ -898,7 +1128,7 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
     });
 
     const initialSort = options.columnDefs.find(
-      (column) => column.sort?.direction && !column.sort.ignoreSort
+      (column) => column.sort?.direction && !column.sort.ignoreSort,
     );
     setSortState({
       columnName: initialSort?.name ?? null,
@@ -931,9 +1161,16 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
     if (!container) return;
 
     const observer = observeGridHostSize(container, ({ height: nextHeight, width: nextWidth }) => {
-      if (nextHeight === lastGridHeightRef.current && nextWidth === lastGridWidthRef.current) return;
+      if (nextHeight === lastGridHeightRef.current && nextWidth === lastGridWidthRef.current)
+        return;
 
-      raiseGridDimensionChanged(gridApi, lastGridHeightRef.current, lastGridWidthRef.current, nextHeight, nextWidth);
+      raiseGridDimensionChanged(
+        gridApi,
+        lastGridHeightRef.current,
+        lastGridWidthRef.current,
+        nextHeight,
+        nextWidth,
+      );
       lastGridHeightRef.current = nextHeight;
       lastGridWidthRef.current = nextWidth;
 
@@ -956,55 +1193,90 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
   const paginationCurrentPage = getCurrentPageValueFn();
   const paginationTotalPages = getTotalPagesValueFn();
   const paginationSelectedPageSize = effectivePageSizeFn(pipeline.totalItems);
-  const viewportHeightPx = `${options.viewportHeight ?? autoViewportHeight ?? 560}px`;
+  const viewportHeightPx = computeViewportHeightPx(options.viewportHeight, autoViewportHeight);
 
   // --- Display helper functions ---
 
   const headerLabelFn = useCallback((column: GridColumnDef): string => coreHeaderLabel(column), []);
-  const isGroupItemFn = useCallback((item: DisplayItem): item is GroupItem => item.kind === 'group', []);
-  const isExpandableItemFn = useCallback((item: DisplayItem): item is ExpandableItem => item.kind === 'expandable', []);
+  const isGroupItemFn = useCallback(
+    (item: DisplayItem): item is GroupItem => item.kind === 'group',
+    [],
+  );
+  const isExpandableItemFn = useCallback(
+    (item: DisplayItem): item is ExpandableItem => item.kind === 'expandable',
+    [],
+  );
   const isRowItemFn = useCallback((item: DisplayItem): item is RowItem => item.kind === 'row', []);
-  const isOddStripedRowFn = useCallback((item: DisplayItem): boolean => item.kind === 'row' && item.visibleIndex % 2 === 0, []);
+  const isOddStripedRowFn = useCallback(
+    (item: DisplayItem): boolean => item.kind === 'row' && item.visibleIndex % 2 === 0,
+    [],
+  );
 
   const sortDirectionFn = useCallback((column: GridColumnDef): string => {
-    return sortStateRef.current.columnName === column.name ? sortStateRef.current.direction : SORT_DIRECTIONS.none;
+    return sortStateRef.current.columnName === column.name
+      ? sortStateRef.current.direction
+      : SORT_DIRECTIONS.none;
   }, []);
 
-  const sortButtonLabelFn = useCallback((column: GridColumnDef): string => {
-    return gridSortButtonLabel(sortDirectionFn(column) as any, labels);
-  }, [labels, sortDirectionFn]);
+  const sortButtonLabelFn = useCallback(
+    (column: GridColumnDef): string => {
+      return gridSortButtonLabel(sortDirectionFn(column) as any, labels);
+    },
+    [labels, sortDirectionFn],
+  );
 
-  const sortAriaSortFn = useCallback((column: GridColumnDef): string => {
-    return gridSortAriaSort(sortDirectionFn(column) as any);
-  }, [sortDirectionFn]);
+  const sortAriaSortFn = useCallback(
+    (column: GridColumnDef): string => {
+      return gridSortAriaSort(sortDirectionFn(column) as any);
+    },
+    [sortDirectionFn],
+  );
 
-  const groupingButtonLabelFn = useCallback((column: GridColumnDef): string => {
-    return gridGroupingButtonLabel(isGridColumnGrouped(groupByColumnsRef.current, column), labels);
-  }, [labels]);
+  const groupingButtonLabelFn = useCallback(
+    (column: GridColumnDef): string => {
+      return gridGroupingButtonLabel(
+        isGridColumnGrouped(groupByColumnsRef.current, column),
+        labels,
+      );
+    },
+    [labels],
+  );
 
   const filterValueFn = useCallback((columnName: string): string => {
     return activeFiltersRef.current[columnName] ?? '';
   }, []);
 
-  const filterPlaceholderFn = useCallback((column: GridColumnDef): string => {
-    return gridFilterPlaceholder(isGridColumnFilterable(optionsRef.current, column), labels);
-  }, [labels]);
+  const filterPlaceholderFn = useCallback(
+    (column: GridColumnDef): string => {
+      return gridFilterPlaceholder(isGridColumnFilterable(optionsRef.current, column), labels);
+    },
+    [labels],
+  );
 
   const isFilterInputDisabledFn = useCallback((column: GridColumnDef): boolean => {
     return !isGridColumnFilterable(optionsRef.current, column);
   }, []);
 
-  const groupDisclosureLabelFn = useCallback((item: GroupItem): string => {
-    return gridGroupDisclosureLabel(item.collapsed, labels);
-  }, [labels]);
+  const groupDisclosureLabelFn = useCallback(
+    (item: GroupItem): string => {
+      return gridGroupDisclosureLabel(item.collapsed, labels);
+    },
+    [labels],
+  );
 
-  const cellContextFn = useCallback((row: GridRow, column: GridColumnDef): GridCellTemplateContext => {
-    return buildGridCellContext(row, column);
-  }, []);
+  const cellContextFn = useCallback(
+    (row: GridRow, column: GridColumnDef): GridCellTemplateContext => {
+      return buildGridCellContext(row, column);
+    },
+    [],
+  );
 
-  const displayValueFn = useCallback((row: GridRow, column: GridColumnDef): string => {
-    return formatGridCellDisplayValue(cellContextFn(row, column));
-  }, [cellContextFn]);
+  const displayValueFn = useCallback(
+    (row: GridRow, column: GridColumnDef): string => {
+      return formatGridCellDisplayValue(cellContextFn(row, column));
+    },
+    [cellContextFn],
+  );
 
   const isFocusedCellFn = useCallback((row: GridRow, column: GridColumnDef): boolean => {
     return isGridCellPosition(focusedCellRef.current, row.id, column.name);
@@ -1018,15 +1290,18 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
     return gridEditorInputType(column);
   }, []);
 
-  const expandedContextFn = useCallback((row: GridRow): GridExpandableTemplateContext & Record<string, unknown> => {
-    return {
-      $implicit: row.entity,
-      row: row.entity,
-      rowIndex: row.index,
-      expanded: true,
-      ...(optionsRef.current.expandableRowScope ?? {}),
-    };
-  }, []);
+  const expandedContextFn = useCallback(
+    (row: GridRow): GridExpandableTemplateContext & Record<string, unknown> => {
+      return {
+        $implicit: row.entity,
+        row: row.entity,
+        rowIndex: row.index,
+        expanded: true,
+        ...(optionsRef.current.expandableRowScope ?? {}),
+      };
+    },
+    [],
+  );
 
   const columnWidthFn = useCallback((column: GridColumnDef): string => gridColumnWidth(column), []);
 
@@ -1042,17 +1317,23 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
     return gridCellIndent(optionsRef.current, visibleColumnsRef.current, row, column);
   }, []);
 
-  const treeToggleLabelFn = useCallback((row: GridRow): string => {
-    return gridTreeToggleLabelForRow(expandedTreeRowsRef.current, row, labels);
-  }, [labels]);
+  const treeToggleLabelFn = useCallback(
+    (row: GridRow): string => {
+      return gridTreeToggleLabelForRow(expandedTreeRowsRef.current, row, labels);
+    },
+    [labels],
+  );
 
   const isTreeRowExpandedFn = useCallback((row: GridRow): boolean => {
     return isGridTreeRowExpanded(expandedTreeRowsRef.current, row);
   }, []);
 
-  const expandToggleLabelFn = useCallback((row: GridRow): string => {
-    return gridExpandToggleLabelForRow(row, labels);
-  }, [labels]);
+  const expandToggleLabelFn = useCallback(
+    (row: GridRow): string => {
+      return gridExpandToggleLabelForRow(row, labels);
+    },
+    [labels],
+  );
 
   const isGroupedFn = useCallback((column: GridColumnDef): boolean => {
     return isGridColumnGrouped(groupByColumnsRef.current, column);
@@ -1072,8 +1353,7 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
 
   const paginationSummaryFn = useCallback((): string => {
     const ti = pipelineRef.current.totalItems;
-    if (ti === 0) return '0-0 of 0';
-    return `${getFirstRowIndexValueFn(ti) + 1}-${getLastRowIndexValueFn(ti) + 1} of ${ti}`;
+    return formatPaginationSummary(ti, getFirstRowIndexValueFn(ti), getLastRowIndexValueFn(ti));
   }, [getFirstRowIndexValueFn, getLastRowIndexValueFn]);
 
   const pageSizeOptionsFn = useCallback((): number[] => {
@@ -1093,7 +1373,10 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
   const toggleSortFn = useCallback((column: GridColumnDef): void => {
     if (!FEATURE_SORTING || !isGridColumnSortable(optionsRef.current, column)) return;
 
-    const currentDirection = sortStateRef.current.columnName === column.name ? sortStateRef.current.direction : SORT_DIRECTIONS.none;
+    const currentDirection =
+      sortStateRef.current.columnName === column.name
+        ? sortStateRef.current.direction
+        : SORT_DIRECTIONS.none;
     const nextDirection =
       currentDirection === SORT_DIRECTIONS.none
         ? SORT_DIRECTIONS.asc
@@ -1113,7 +1396,7 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
       (updater) => setActiveFilters((current) => updater(current)),
       () => activeFiltersRef.current,
       columnName,
-      value
+      value,
     );
   }, []);
 
@@ -1140,126 +1423,151 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
     }));
   }, []);
 
-  const focusCellFn = useCallback((row: GridRow, column: GridColumnDef, triggerEvent?: Event | KeyboardEvent | null): void => {
-    const nextFocusResult = buildGridFocusCellResult({
-      currentFocusedCell: focusedCellRef.current,
-      currentEditingCell: editingCellRef.current,
-      rowId: row.id,
-      columnName: column.name,
-      shouldEditOnFocus: shouldEditOnFocusFn(column),
-      isCellEditable: isCellEditable(row, column, triggerEvent),
-    });
-    setFocusedCell(nextFocusResult.focusedCell);
+  const focusCellFn = useCallback(
+    (row: GridRow, column: GridColumnDef, triggerEvent?: Event | KeyboardEvent | null): void => {
+      const nextFocusResult = buildGridFocusCellResult({
+        currentFocusedCell: focusedCellRef.current,
+        currentEditingCell: editingCellRef.current,
+        rowId: row.id,
+        columnName: column.name,
+        shouldEditOnFocus: shouldEditOnFocusFn(column),
+        isCellEditable: isCellEditable(row, column, triggerEvent),
+      });
+      setFocusedCell(nextFocusResult.focusedCell);
 
-    if (nextFocusResult.shouldBeginEdit) {
-      startCellEditFn(row, column, triggerEvent);
-    }
-  }, [isCellEditable, shouldEditOnFocusFn, startCellEditFn]);
+      if (nextFocusResult.shouldBeginEdit) {
+        startCellEditFn(row, column, triggerEvent);
+      }
+    },
+    [isCellEditable, shouldEditOnFocusFn, startCellEditFn],
+  );
 
-  const handleCellKeyDownFn = useCallback((row: GridRow, column: GridColumnDef, event: React.KeyboardEvent): void => {
-    focusCellFn(row, column, event.nativeEvent);
+  const handleCellKeyDownFn = useCallback(
+    (row: GridRow, column: GridColumnDef, event: React.KeyboardEvent): void => {
+      focusCellFn(row, column, event.nativeEvent);
 
-    switch (event.key) {
-      case 'ArrowLeft':
-        event.preventDefault();
-        moveFocusFn(row, column, 'left', event.nativeEvent);
-        return;
-      case 'ArrowRight':
-        event.preventDefault();
-        moveFocusFn(row, column, 'right', event.nativeEvent);
-        return;
-      case 'ArrowUp':
-        event.preventDefault();
-        moveFocusFn(row, column, 'up', event.nativeEvent);
-        return;
-      case 'ArrowDown':
-        event.preventDefault();
-        moveFocusFn(row, column, 'down', event.nativeEvent);
-        return;
-      case 'Tab':
-        event.preventDefault();
-        moveFocusFn(row, column, event.shiftKey ? 'left' : 'right', event.nativeEvent);
-        return;
-      case 'Enter':
-        event.preventDefault();
-        moveFocusFn(row, column, event.shiftKey ? 'up' : 'down', event.nativeEvent);
-        return;
-      case 'F2':
-        event.preventDefault();
-        if (isCellEditable(row, column, event.nativeEvent)) {
-          startCellEditFn(row, column, event.nativeEvent);
-        }
-        return;
-      case 'Backspace':
-      case 'Delete':
-        if (isCellEditable(row, column, event.nativeEvent)) {
+      switch (event.key) {
+        case 'ArrowLeft':
           event.preventDefault();
-          startCellEditFn(row, column, event.nativeEvent, '');
-        }
-        return;
-      default:
-        break;
-    }
+          moveFocusFn(row, column, 'left', event.nativeEvent);
+          return;
+        case 'ArrowRight':
+          event.preventDefault();
+          moveFocusFn(row, column, 'right', event.nativeEvent);
+          return;
+        case 'ArrowUp':
+          event.preventDefault();
+          moveFocusFn(row, column, 'up', event.nativeEvent);
+          return;
+        case 'ArrowDown':
+          event.preventDefault();
+          moveFocusFn(row, column, 'down', event.nativeEvent);
+          return;
+        case 'Tab':
+          event.preventDefault();
+          moveFocusFn(row, column, event.shiftKey ? 'left' : 'right', event.nativeEvent);
+          return;
+        case 'Enter':
+          event.preventDefault();
+          moveFocusFn(row, column, event.shiftKey ? 'up' : 'down', event.nativeEvent);
+          return;
+        case 'F2':
+          event.preventDefault();
+          if (isCellEditable(row, column, event.nativeEvent)) {
+            startCellEditFn(row, column, event.nativeEvent);
+          }
+          return;
+        case 'Backspace':
+        case 'Delete':
+          if (isCellEditable(row, column, event.nativeEvent)) {
+            event.preventDefault();
+            startCellEditFn(row, column, event.nativeEvent, '');
+          }
+          return;
+        default:
+          break;
+      }
 
-    if (isPrintableGridKey(event.key, event.ctrlKey, event.metaKey, event.altKey) && isCellEditable(row, column, event.nativeEvent)) {
-      event.preventDefault();
-      startCellEditFn(row, column, event.nativeEvent, event.key);
-    }
-  }, [focusCellFn, moveFocusFn, isCellEditable, startCellEditFn]);
+      if (
+        isPrintableGridKey(event.key, event.ctrlKey, event.metaKey, event.altKey) &&
+        isCellEditable(row, column, event.nativeEvent)
+      ) {
+        event.preventDefault();
+        startCellEditFn(row, column, event.nativeEvent, event.key);
+      }
+    },
+    [focusCellFn, moveFocusFn, isCellEditable, startCellEditFn],
+  );
 
-  const handleCellDoubleClickFn = useCallback((row: GridRow, column: GridColumnDef, event: React.MouseEvent): void => {
-    focusCellFn(row, column, event.nativeEvent);
-    if (isCellEditable(row, column, event.nativeEvent)) {
-      startCellEditFn(row, column, event.nativeEvent);
-    }
-  }, [focusCellFn, isCellEditable, startCellEditFn]);
+  const handleCellDoubleClickFn = useCallback(
+    (row: GridRow, column: GridColumnDef, event: React.MouseEvent): void => {
+      focusCellFn(row, column, event.nativeEvent);
+      if (isCellEditable(row, column, event.nativeEvent)) {
+        startCellEditFn(row, column, event.nativeEvent);
+      }
+    },
+    [focusCellFn, isCellEditable, startCellEditFn],
+  );
 
   const updateEditingValueFn = useCallback((value: string): void => {
     setEditingValue(value);
   }, []);
 
-  const handleEditorKeyDownFn = useCallback((event: React.KeyboardEvent): void => {
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      cancelCellEditFn();
-      return;
-    }
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      commitCellEditFn(event.shiftKey ? 'up' : 'down');
-      return;
-    }
-    if (event.key === 'Tab') {
-      event.preventDefault();
-      commitCellEditFn(event.shiftKey ? 'left' : 'right');
-    }
-  }, [cancelCellEditFn, commitCellEditFn]);
+  const handleEditorKeyDownFn = useCallback(
+    (event: React.KeyboardEvent): void => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        cancelCellEditFn();
+        return;
+      }
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        commitCellEditFn(event.shiftKey ? 'up' : 'down');
+        return;
+      }
+      if (event.key === 'Tab') {
+        event.preventDefault();
+        commitCellEditFn(event.shiftKey ? 'left' : 'right');
+      }
+    },
+    [cancelCellEditFn, commitCellEditFn],
+  );
 
-  const handleEditorBlurFn = useCallback((event: React.FocusEvent): void => {
-    const ec = editingCellRef.current;
-    const target = event.target as HTMLElement | null;
-    if (!ec || !target) return;
-    if (target.dataset['rowId'] !== ec.rowId || target.dataset['colName'] !== ec.columnName) return;
-    commitCellEditFn(undefined, false);
-  }, [commitCellEditFn]);
+  const handleEditorBlurFn = useCallback(
+    (event: React.FocusEvent): void => {
+      const ec = editingCellRef.current;
+      const target = event.target as HTMLElement | null;
+      if (!ec || !target) return;
+      if (target.dataset['rowId'] !== ec.rowId || target.dataset['colName'] !== ec.columnName)
+        return;
+      commitCellEditFn(undefined, false);
+    },
+    [commitCellEditFn],
+  );
 
-  const toggleRowExpansionFn = useCallback((row: GridRow, event?: React.MouseEvent): void => {
-    event?.stopPropagation();
-    toggleRowExpansionByRefFn(row);
-  }, [toggleRowExpansionByRefFn]);
+  const toggleRowExpansionFn = useCallback(
+    (row: GridRow, event?: React.MouseEvent): void => {
+      event?.stopPropagation();
+      toggleRowExpansionByRefFn(row);
+    },
+    [toggleRowExpansionByRefFn],
+  );
 
-  const toggleTreeRowFn = useCallback((row: GridRow, event?: React.MouseEvent): void => {
-    event?.stopPropagation();
-    toggleTreeRowByRefFn(row);
-  }, [toggleTreeRowByRefFn]);
+  const toggleTreeRowFn = useCallback(
+    (row: GridRow, event?: React.MouseEvent): void => {
+      event?.stopPropagation();
+      toggleTreeRowByRefFn(row);
+    },
+    [toggleTreeRowByRefFn],
+  );
 
   const moveColumnFn = useCallback((fromIndex: number, toIndex: number): void => {
     moveGridColumnCommand(
       gridApiRef.current!,
-      FEATURE_COLUMN_MOVING && (optionsRef.current.enableColumnMoving === true),
+      FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
       (updater) => setColumnOrder((current) => updater(current)),
       fromIndex,
-      toIndex
+      toIndex,
     );
   }, []);
 
@@ -1271,9 +1579,12 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
     seekPageFn(getCurrentPageValueFn() - 1);
   }, [seekPageFn, getCurrentPageValueFn]);
 
-  const onPageSizeChangeFn = useCallback((value: string): void => {
-    setPaginationPageSizeFn(Number(value));
-  }, [setPaginationPageSizeFn]);
+  const onPageSizeChangeFn = useCallback(
+    (value: string): void => {
+      setPaginationPageSizeFn(Number(value));
+    },
+    [setPaginationPageSizeFn],
+  );
 
   const onViewportScrollFn = useCallback((startIndex: number): void => {
     if (!scrollingRef.current) {
@@ -1290,11 +1601,11 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
       raiseGridScrollEnd(gridApiRef.current!);
     }, 120);
 
-    const isInfiniteScrollEnabled = FEATURE_INFINITE_SCROLL && (
-      optionsRef.current.infiniteScrollRowsFromEnd !== undefined
-      || optionsRef.current.infiniteScrollUp === true
-      || optionsRef.current.infiniteScrollDown !== undefined
-    );
+    const isInfiniteScrollEnabled =
+      FEATURE_INFINITE_SCROLL &&
+      (optionsRef.current.infiniteScrollRowsFromEnd !== undefined ||
+        optionsRef.current.infiniteScrollUp === true ||
+        optionsRef.current.infiniteScrollDown !== undefined);
 
     maybeRequestInfiniteScrollCommand(gridApiRef.current!, {
       enabled: isInfiniteScrollEnabled,
@@ -1302,7 +1613,10 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
       state: infiniteScrollStateRef.current,
       startIndex,
       visibleRows: pipelineRef.current.visibleRows.length,
-      viewportRows: Math.max(1, Math.ceil((optionsRef.current.viewportHeight ?? 560) / (optionsRef.current.rowHeight ?? 44))),
+      viewportRows: computeViewportRows(
+        optionsRef.current.viewportHeight,
+        optionsRef.current.rowHeight,
+      ),
       threshold: optionsRef.current.infiniteScrollRowsFromEnd ?? 20,
       setState: (state) => setInfiniteScrollState(state),
     });
@@ -1410,5 +1724,12 @@ export function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridA
     runBenchmark: runBenchmarkFn,
     exportCsv: exportCsvFn,
     onViewportScroll: onViewportScrollFn,
+    // Pinning
+    isPinned: isPinnedFn,
+    pinnedOffset: pinnedOffsetFn,
+    isPinningEnabled: isPinningEnabledFn,
+    isColumnPinnable: isColumnPinnableFn,
+    togglePin: togglePinFn,
+    pinningFeature: FEATURE_PINNING,
   };
 }