Added sticky column feature (#75)

Co-authored-by: Sandro Küng <sk@neolution.ch>

Author: skuengneo

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- `columnPinning` feature. Allows the pinning of columns.
+
 ## [5.8.0] - 2024-12-02
 
 ### Added

package.json

@@ -50,7 +50,7 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@neolution-ch/react-pattern-ui": "^3.4.0",
-    "@tanstack/react-table": "^8.10.7",
+    "@tanstack/react-table": "^8.12.0",
     "react-loading-skeleton": "^3.3.1"
   },
   "devDependencies": {

src/lib/ReactDataTable/ReactDataTable.tsx

@@ -13,6 +13,7 @@ import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, us
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { DraggableRow, InternalTableRow } from "./TableRows";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { getCommonPinningStyles } from "../utils/getCommonPinningStyles";
 import { getFilterValue, setFilterValue } from "../utils/customFilterMethods";
 
 interface TableBodyProps<TData> {
@@ -96,6 +97,7 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
             enableExpanding={enableExpanding as boolean | ((row: Row<TData>) => boolean)}
             rowStyle={rowStyle && rowStyle(row.original)}
             fullRowSelectable={fullRowSelectable}
+            hasPinnedColumns={table.getIsSomeColumnsPinned()}
           />
         ))}
       </>
@@ -141,6 +143,9 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
                         style={{
                           ...header.column.columnDef.meta?.headerStyle,
                           ...(header.column.getCanSort() ? { cursor: "pointer" } : {}),
+                          ...(table.getIsSomeColumnsPinned()
+                            ? getCommonPinningStyles(header.subHeaders.length > 0 ? header.subHeaders[0].column : header.column)
+                            : {}),
                         }}
                         className={header.column.columnDef.meta?.headerClassName}
                         colSpan={header.colSpan}
@@ -169,7 +174,13 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
                         } = header;
 
                         return (
-                          <th key={`${header.id}-col-filter`} style={header.column.columnDef.meta?.headerFilterStyle}>
+                          <th
+                            key={`${header.id}-col-filter`}
+                            style={{
+                              ...header.column.columnDef.meta?.headerFilterStyle,
+                              ...(table.getIsSomeColumnsPinned() ? getCommonPinningStyles(header.column) : {}),
+                            }}
+                          >
                             {header.index === 0 && (
                               <>
                                 {onEnter && (

src/lib/ReactDataTable/TableRows.tsx

@@ -2,6 +2,7 @@
 import { Row, flexRender } from "@tanstack/react-table";
 import { CSSProperties } from "react";
 import { CSS } from "@dnd-kit/utilities";
+import { getCommonPinningStyles } from "../utils/getCommonPinningStyles";
 import { FilterModel } from "../types/TableState";
 import { ReactDataTableProps } from "./ReactDataTableProps";
 
@@ -13,10 +14,20 @@ interface TableRowProps<TData, TFilter extends FilterModel = Record<string, neve
   enableExpanding?: boolean | ((row: Row<TData>) => boolean);
   rowStyle?: CSSProperties;
   setNodeRef?: (node: HTMLElement | null) => void;
+  hasPinnedColumns?: boolean;
 }
 
 const InternalTableRow = <TData, TFilter extends FilterModel = Record<string, never>>(props: TableRowProps<TData, TFilter>) => {
-  const { row, rowStyle, setNodeRef, enableRowSelection = false, fullRowSelectable = true, onRowClick, enableRowClick } = props;
+  const {
+    row,
+    rowStyle,
+    setNodeRef,
+    enableRowSelection = false,
+    fullRowSelectable = true,
+    onRowClick,
+    enableRowClick,
+    hasPinnedColumns,
+  } = props;
   const isRowSelectionEnabled =
     (typeof enableRowSelection === "function" ? enableRowSelection(row) : enableRowSelection) && fullRowSelectable;
   const isRowClickable = typeof enableRowClick === "function" ? enableRowClick(row) : enableRowClick;
@@ -37,7 +48,14 @@ const InternalTableRow = <TData, TFilter extends FilterModel = Record<string, ne
       style={rowStyle}
     >
       {row.getVisibleCells().map((cell) => (
-        <td key={cell.id} style={cell.column.columnDef.meta?.cellStyle} className={cell.column.columnDef.meta?.cellClassName}>
+        <td
+          key={cell.id}
+          style={{
+            ...cell.column.columnDef.meta?.cellStyle,
+            ...(hasPinnedColumns ? getCommonPinningStyles(cell.column) : {}),
+          }}
+          className={cell.column.columnDef.meta?.cellClassName}
+        >
           {flexRender(cell.column.columnDef.cell, cell.getContext())}
         </td>
       ))}

src/lib/types/TableState.ts

@@ -1,4 +1,4 @@
-import { CoreOptions } from "@tanstack/react-table";
+import { ColumnPinningState, CoreOptions } from "@tanstack/react-table";
 import { SortingState } from "./SortingState";
 
 /**
@@ -20,6 +20,10 @@ interface TableState<TData, TFilter extends FilterModel>
    * The sorting state
    */
   sorting?: SortingState<TData>;
+  /**
+   * The column pinning state
+   */
+  columnPinning?: ColumnPinningState;
 }
 
 export { TableState, FilterModel };

src/lib/useFullyControlledReactDataTable/useFullyControlledReactDataTable.tsx

@@ -16,6 +16,7 @@ interface useFullyControlledReactDataTableProps<TData, TFilter extends FilterMod
     sorting: TableState<TData, TFilter>["sorting"];
     expanded: TableState<TData, TFilter>["expanded"];
     rowSelection?: TableState<TData, TFilter>["rowSelection"];
+    columnPinning?: TableState<TData, TFilter>["columnPinning"];
   };
 }
 

src/lib/useReactDataTable/useReactDataTable.tsx

@@ -1,4 +1,5 @@
-import {
+/* eslint-disable max-lines */
+import {
   getCoreRowModel,
   getExpandedRowModel,
   getFilteredRowModel,
@@ -38,6 +39,7 @@ const useReactDataTable = <TData, TFilter extends FilterModel = Record<string, n
     onSortingChange,
     onRowSelectionChange,
     onExpandedChange,
+    onColumnPinningChange,
     reactTableOptions,
   } = props;
 
@@ -47,13 +49,15 @@ const useReactDataTable = <TData, TFilter extends FilterModel = Record<string, n
     pagination: paginationInitial,
     rowSelection: rowSelectionInitial,
     expanded: expandedInitial,
+    columnPinning: columnPinningInitial,
   } = initialState ?? {};
   const {
     columnFilters: columnFiltersExternal,
     pagination: paginationExternal,
     sorting: sortingExternal,
     rowSelection: rowSelectionExternal,
     expanded: expandedExternal,
+    columnPinning: columnPinningExternal,
   } = state ?? {};
 
   const {
@@ -62,29 +66,34 @@ const useReactDataTable = <TData, TFilter extends FilterModel = Record<string, n
     sorting: sortingInternal,
     rowSelection: rowSelectionInteral,
     expanded: expandedInternal,
+    columnPinning: columnPinningInternal,
     setColumnFilters: setColumnFiltersInternal,
     setPagination: setPaginationInternal,
     setSorting: setSortingInternal,
     setRowSelection: setRowSelectionInternal,
     setExpanded: setExpandedInternal,
+    setColumnPinning: setColumnPinningInternal,
   } = useReactDataTableState<TData, TFilter>({
     initialColumnFilters: columnFiltersInitial as TFilter,
     initialPagination: paginationInitial,
     initialSorting: sortingInitial,
     rowSelection: rowSelectionInitial,
     expanded: expandedInitial,
+    columnPinning: columnPinningInitial,
   } as unknown as OptionalNullable<useReactDataTableStateProps<TData, TFilter>>);
 
   const effectiveColumnFilters = columnFiltersExternal ?? columnFiltersInternal;
   const effectivePagination = paginationExternal ?? paginationInternal;
   const effectiveSorting = sortingExternal ?? sortingInternal;
   const effectiveRowSelection = rowSelectionExternal ?? rowSelectionInteral;
   const effectiveExpanded = expandedExternal ?? expandedInternal;
+  const effectiveColumnPinning = columnPinningExternal ?? columnPinningInternal;
   const effectiveOnColumnFiltersChange = onColumnFiltersChange ?? setColumnFiltersInternal;
   const effectiveOnPaginationChange = onPaginationChange ?? setPaginationInternal;
   const effectiveOnSortingChange = onSortingChange ?? setSortingInternal;
   const effectiveOnRowSelectionChange = onRowSelectionChange ?? setRowSelectionInternal;
   const effectiveOnExpandedChange = onExpandedChange ?? setExpandedInternal;
+  const effectiveOnColumnPinningChange = onColumnPinningChange ?? setColumnPinningInternal;
 
   // If we active the manual filtering, we have to unset the filter function, else it still does automatic filtering
   if (manualFiltering) columns.forEach((x) => (x.filterFn = undefined));
@@ -124,20 +133,27 @@ const useReactDataTable = <TData, TFilter extends FilterModel = Record<string, n
       const newExpanded = typeof expandedOrUpdaterFn !== "function" ? expandedOrUpdaterFn : expandedOrUpdaterFn(effectiveExpanded);
       return effectiveOnExpandedChange(newExpanded);
     },
+    onColumnPinningChange: (columnPinningOrUpdaterFn) => {
+      const newColumnPinning =
+        typeof columnPinningOrUpdaterFn !== "function" ? columnPinningOrUpdaterFn : columnPinningOrUpdaterFn(effectiveColumnPinning);
+      return effectiveOnColumnPinningChange(newColumnPinning);
+    },
 
     state: {
       columnFilters,
       pagination: effectivePagination,
       sorting,
       rowSelection: effectiveRowSelection,
       expanded: effectiveExpanded,
+      columnPinning: effectiveColumnPinning,
     },
 
     initialState: {
       columnFilters: getColumnFilterFromModel(columnFiltersInitial ?? columnFiltersExternal ?? {}),
       pagination: paginationInitial ?? paginationExternal,
       sorting: getSortingStateFromModel(sortingInitial ?? sortingExternal),
       expanded: expandedInitial ?? expandedExternal,
+      columnPinning: columnPinningInitial ?? columnPinningExternal,
     },
 
     getCoreRowModel: getCoreRowModel(),
@@ -173,11 +189,13 @@ const useReactDataTable = <TData, TFilter extends FilterModel = Record<string, n
     sorting: effectiveSorting,
     rowSelection: effectiveRowSelection,
     expanded: effectiveExpanded,
+    columnPinning: effectiveColumnPinning,
     setColumnFilters: effectiveOnColumnFiltersChange,
     setPagination: effectiveOnPaginationChange,
     setSorting: effectiveOnSortingChange,
     setRowSelection: effectiveOnRowSelectionChange,
     setExpanded: effectiveOnExpandedChange,
+    setColumnPinning: effectiveOnColumnPinningChange,
   };
 };
 

src/lib/useReactDataTable/useReactDataTableProps.tsx

@@ -1,4 +1,12 @@
-import { ColumnDef, ExpandedState, OnChangeFn, PaginationState, RowSelectionState, TableOptions } from "@tanstack/react-table";
+import {
+  ColumnDef,
+  ColumnPinningState,
+  ExpandedState,
+  OnChangeFn,
+  PaginationState,
+  RowSelectionState,
+  TableOptions,
+} from "@tanstack/react-table";
 import { FilterModel, TableState } from "../types/TableState";
 import { SortingState } from "../types/SortingState";
 
@@ -76,6 +84,11 @@ export interface useReactDataTableProps<TData, TFilter extends FilterModel> {
    */
   onExpandedChange?: OnChangeFn<ExpandedState>;
 
+  /**
+   * event handler for when the column pinning changes
+   */
+  onColumnPinningChange?: OnChangeFn<ColumnPinningState>;
+
   /**
    * the react table options that will be passed to the `useReactTable` hook.
    * Omits the `state` property. Use the `state` property instead.

src/lib/useReactDataTable/useReactDataTableResult.tsx

@@ -1,4 +1,4 @@
-import { ExpandedState, PaginationState, RowSelectionState, Table } from "@tanstack/react-table";
+import { ColumnPinningState, ExpandedState, PaginationState, RowSelectionState, Table } from "@tanstack/react-table";
 import { Dispatch, SetStateAction } from "react";
 import { FilterModel } from "../types/TableState";
 import { SortingState } from "../types/SortingState";
@@ -62,4 +62,14 @@ export interface useReactDataTableResult<TData, TFilter extends FilterModel> {
    * the expanded state setter. Only makes sense to use this if you are not supplying the `state.expanded` property
    */
   setExpanded: Dispatch<SetStateAction<ExpandedState>>;
+
+  /**
+   * the column pinning state. Only makes sense to use this if you are not supplying the `state.columnPinning` property
+   */
+  columnPinning: ColumnPinningState;
+
+  /**
+   * the column pinning state setter. Only makes sense to use this if you are not supplying the `state.columnPinning` property
+   */
+  setColumnPinning: Dispatch<SetStateAction<ColumnPinningState>>;
 }

src/lib/useReactDataTableState/useReactDataTableState.ts

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { ExpandedState, PaginationState, RowSelectionState } from "@tanstack/react-table";
+import { ColumnPinningState, ExpandedState, PaginationState, RowSelectionState } from "@tanstack/react-table";
 import { useReactDataTableStateProps } from "./useReactDataTableStateProps";
 import { useReactDataTableStateResult } from "./useReactDataTableStateResult";
 import { FilterModel } from "../types/TableState";
@@ -13,14 +13,15 @@ import { OptionalNullable } from "../types/NullableTypes";
 const useReactDataTableState = <TData, TFilter extends FilterModel = Record<string, never>>(
   props: OptionalNullable<useReactDataTableStateProps<TData, TFilter>>,
 ): useReactDataTableStateResult<TData, TFilter> => {
-  const { initialColumnFilters, initialSorting, initialPagination, initialRowSelection, initialExpanded } =
+  const { initialColumnFilters, initialSorting, initialPagination, initialRowSelection, initialExpanded, initialColumnPinning } =
     props as useReactDataTableStateProps<TData, TFilter>;
 
   const [columnFilters, setColumnFilters] = useState<TFilter>((initialColumnFilters ?? {}) as TFilter);
   const [afterSearchFilter, setAfterSearchFilter] = useState<TFilter>((initialColumnFilters ?? {}) as TFilter);
   const [sorting, setSorting] = useState<SortingState<TData> | undefined>(initialSorting);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>(initialRowSelection ?? ({} as RowSelectionState));
   const [expanded, setExpanded] = useState<ExpandedState>(initialExpanded ?? ({} as ExpandedState));
+  const [columnPinning, setColumnPinning] = useState<ColumnPinningState>(initialColumnPinning ?? ({} as ColumnPinningState));
 
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: initialPagination?.pageIndex ?? 0,
@@ -34,12 +35,14 @@ const useReactDataTableState = <TData, TFilter extends FilterModel = Record<stri
     afterSearchFilter,
     rowSelection,
     expanded,
+    columnPinning,
     setSorting,
     setColumnFilters,
     setPagination,
     setAfterSearchFilter,
     setRowSelection,
     setExpanded,
+    setColumnPinning,
   };
 };