@indico-data/design-system 2.48.0 → 2.50.0

package/src/components/table/hooks/usePinnedColumnsManager.ts

@@ -0,0 +1,146 @@
+import { useEffect, useCallback, useMemo } from 'react';
+import { TableColumn } from '../types';
+import { sortPinnedColumns, getPreviousHeadersWidth } from '../components/helpers';
+import { processColumns } from '../utils/processColumns';
+
+/**
+ * Hook to manage pinned columns in a table
+ * Handles initialization, toggling, positioning and resizing of pinned columns
+ */
+export const usePinnedColumnsManager = <T>(
+  columns: TableColumn<T>[],
+  canPinColumns: boolean,
+  onPinnedColumnsChange?: (pinnedColumnIds: string[]) => void,
+) => {
+  const pinnedColumnIds = columns.filter((column) => column.isPinned).map((column) => column.id);
+
+  // `dataColumnIds` is the list of IDs used as `data-column-id` attributes on the table headers and cells
+  const dataColumnIds = useMemo(() => {
+    const ids = columns
+      .map((column, index) => (column.isPinned ? `sticky-column-${index}` : null))
+      .filter((id): id is string => id !== null);
+
+    return ids.length > 0 ? ['checkbox-column', ...ids] : ids;
+  }, [columns]);
+
+  // Toggle individual column pin state
+  const togglePinnedColumn = useCallback(
+    (columnId: string) => {
+      const prevPinnedColumns = pinnedColumnIds;
+
+      // Handle unpinning
+      if (prevPinnedColumns.some((id) => id === columnId)) {
+        onPinnedColumnsChange?.(prevPinnedColumns.filter((id) => id !== columnId));
+      } else {
+        onPinnedColumnsChange?.(prevPinnedColumns.concat(columnId));
+      }
+    },
+    [pinnedColumnIds, onPinnedColumnsChange],
+  );
+
+  // Handle resize events and recalculate pinned column positions
+  useEffect(() => {
+    if (!canPinColumns) return;
+
+    const recalculatePositions = () => {
+      // Reset all column styles and remove last-pinned-column class
+      const allCells = document.querySelectorAll('.rdt_TableCol, .rdt_TableCell');
+      allCells.forEach((cell) => {
+        (cell as HTMLElement).style.position = '';
+        (cell as HTMLElement).style.left = '';
+        (cell as HTMLElement).style.zIndex = '';
+        (cell as HTMLElement).style.backgroundColor = '';
+        (cell as HTMLElement).style.borderRight = '';
+      });
+
+      // Apply styles to pinned columns
+      dataColumnIds.forEach((column, index) => {
+        const isLastPinnedColumn = index === dataColumnIds.length - 1;
+
+        if (column === 'checkbox-column') {
+          // Handle header checkbox
+          const headerCheckbox = document.querySelector('.rdt_TableCol:not([data-column-id])');
+          if (headerCheckbox) {
+            (headerCheckbox as HTMLElement).style.position = 'sticky';
+            (headerCheckbox as HTMLElement).style.left = '0';
+            (headerCheckbox as HTMLElement).style.zIndex = '4';
+            (headerCheckbox as HTMLElement).style.backgroundColor =
+              'var(--pf-table-background-color)';
+          }
+
+          // Handle cell checkboxes
+          const cellCheckboxes = document.querySelectorAll('.rdt_TableCell:first-child');
+          cellCheckboxes.forEach((cell) => {
+            (cell as HTMLElement).style.position = 'sticky';
+            (cell as HTMLElement).style.left = '0';
+            (cell as HTMLElement).style.zIndex = '2';
+            (cell as HTMLElement).style.backgroundColor =
+              'var(--pf-table-pinned-column-background-color)';
+            if (isLastPinnedColumn) {
+              (cell as HTMLElement).style.borderRight =
+                `2px solid var(--pf-table-pinned-column-border-color)`;
+            }
+          });
+        } else {
+          const columnIndex = parseInt(column.split('-')[2]);
+          const left = getPreviousHeadersWidth(columnIndex, dataColumnIds);
+
+          // Headers
+          const headers = document.querySelectorAll(
+            `.rdt_TableCol[data-column-id="sticky-column-${columnIndex}"]`,
+          );
+          headers.forEach((header) => {
+            (header as HTMLElement).style.position = 'sticky';
+            (header as HTMLElement).style.left = `${left}px`;
+            (header as HTMLElement).style.zIndex = '2';
+            (header as HTMLElement).style.backgroundColor =
+              'var(--pf-table-pinned-column-background-color)';
+            if (isLastPinnedColumn) {
+              (header as HTMLElement).style.borderRight =
+                `2px solid var(--pf-table-pinned-column-border-color)`;
+            }
+          });
+
+          // Cells
+          const cells = document.querySelectorAll(
+            `.rdt_TableCell[data-column-id="sticky-column-${columnIndex}"]`,
+          );
+          cells.forEach((cell) => {
+            (cell as HTMLElement).style.position = 'sticky';
+            (cell as HTMLElement).style.left = `${left}px`;
+            (cell as HTMLElement).style.zIndex = '2';
+            (cell as HTMLElement).style.backgroundColor =
+              'var(--pf-table-pinned-column-background-color)';
+            if (isLastPinnedColumn) {
+              (cell as HTMLElement).style.borderRight =
+                `2px solid var(--pf-table-pinned-column-border-color)`;
+            }
+          });
+        }
+      });
+    };
+
+    // Set up resize observers
+    const table = document.querySelector('.rdt_Table');
+    const resizeObserver = new ResizeObserver(recalculatePositions);
+
+    if (table) {
+      resizeObserver.observe(table);
+    }
+    window.addEventListener('resize', recalculatePositions);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener('resize', recalculatePositions);
+    };
+  }, [canPinColumns, dataColumnIds]);
+
+  // Process columns for rendering with pin state
+  const columnsWithPinning = canPinColumns
+    ? sortPinnedColumns(processColumns(columns, dataColumnIds, togglePinnedColumn), dataColumnIds)
+    : columns;
+
+  return {
+    columnsWithPinning, // Columns with pin state and handlers applied
+  };
+};

package/src/components/table/{sampleData.ts → sampleData.tsx}

@@ -1,4 +1,6 @@
 import { TableColumn } from './types';
+import { useState } from 'react';
+import { Table } from './Table';
 
 export interface SampleDataRow {
   name: string;
@@ -7,6 +9,10 @@ export interface SampleDataRow {
   weapon: string;
   backstory: string;
   favoriteMeal: string;
+  homeland: string;
+  alignment: string;
+  specialAbility: string;
+  test: string;
 }
 
 export const sampleData: SampleDataRow[] = [
@@ -17,6 +23,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Longbow',
     backstory: 'Raised by wolves in the deep forests.',
     favoriteMeal: 'Venison stew',
+    homeland: 'Silverleaf Forest',
+    alignment: 'Neutral Good',
+    specialAbility: 'Beast Speech',
+    test: 'test',
   },
   {
     name: 'Brom',
@@ -25,6 +35,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Greatsword',
     backstory: 'A former soldier seeking redemption.',
     favoriteMeal: 'Roasted boar',
+    homeland: 'Kingdom of Valorhaven',
+    alignment: 'Lawful Good',
+    specialAbility: 'Battle Master',
+    test: 'test',
   },
   {
     name: 'Elysia',
@@ -33,6 +47,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Mace',
     backstory: 'A devoted follower of the goddess of life.',
     favoriteMeal: 'Vegetable soup',
+    homeland: 'Temple of Dawn',
+    alignment: 'Lawful Good',
+    specialAbility: 'Divine Healing',
+    test: 'test',
   },
   {
     name: 'Faelar',
@@ -41,6 +59,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Dagger',
     backstory: 'Grew up on the streets of a bustling city.',
     favoriteMeal: 'Bread and cheese',
+    homeland: 'Shadowport City',
+    alignment: 'Chaotic Neutral',
+    specialAbility: 'Shadow Step',
+    test: 'test',
   },
   {
     name: 'Maelis',
@@ -49,6 +71,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Staff',
     backstory: 'A scholar obsessed with ancient magic.',
     favoriteMeal: 'Mushroom stew',
+    homeland: 'Crystal Spire Academy',
+    alignment: 'Neutral',
+    specialAbility: 'Time Manipulation',
+    test: 'test',
   },
   {
     name: 'Grimm',
@@ -57,6 +83,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Battleaxe',
     backstory: 'Hails from a tribe in the frozen north.',
     favoriteMeal: 'Grilled salmon',
+    homeland: 'Frostpeak Mountains',
+    alignment: 'Chaotic Good',
+    specialAbility: 'Berserker Rage',
+    test: 'test',
   },
   {
     name: 'Seraphina',
@@ -65,6 +95,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Rapier',
     backstory: 'A wandering minstrel with a mysterious past.',
     favoriteMeal: 'Apple pie',
+    homeland: 'Wandering Roads',
+    alignment: 'Chaotic Good',
+    specialAbility: 'Enchanting Voice',
+    test: 'test',
   },
   {
     name: 'Kael',
@@ -73,6 +107,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Scimitar',
     backstory: 'A guardian of the natural world.',
     favoriteMeal: 'Berry tart',
+    homeland: 'Emerald Grove',
+    alignment: 'True Neutral',
+    specialAbility: 'Wild Shape',
+    test: 'test',
   },
   {
     name: 'Aria',
@@ -81,6 +119,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Longsword',
     backstory: 'A knight on a divine mission.',
     favoriteMeal: 'Roasted chicken',
+    homeland: 'Radiant Citadel',
+    alignment: 'Lawful Good',
+    specialAbility: 'Holy Smite',
+    test: 'test',
   },
   {
     name: 'Xan',
@@ -89,6 +131,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Pact Blade',
     backstory: 'Made a pact with a powerful entity for magic.',
     favoriteMeal: 'Stuffed peppers',
+    homeland: 'Shadowfell Gate',
+    alignment: 'Lawful Evil',
+    specialAbility: 'Eldritch Blast',
+    test: 'test',
   },
   {
     name: 'Lyra',
@@ -97,6 +143,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Dagger',
     backstory: 'Born with innate magical abilities.',
     favoriteMeal: 'Pancakes with syrup',
+    homeland: 'Storm Peaks',
+    alignment: 'Chaotic Neutral',
+    specialAbility: 'Wild Magic',
+    test: 'test',
   },
   {
     name: 'Thorn',
@@ -105,6 +155,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Quarterstaff',
     backstory: 'A hermit who seeks enlightenment.',
     favoriteMeal: 'Rice and vegetables',
+    homeland: 'Mountain Sanctuary',
+    alignment: 'Lawful Neutral',
+    specialAbility: 'Ki Mastery',
+    test: 'test',
   },
   {
     name: 'Cassia',
@@ -113,6 +167,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Shortbow',
     backstory: 'A hunter with a keen eye.',
     favoriteMeal: 'Roasted pheasant',
+    homeland: 'Misty Vale',
+    alignment: 'Neutral Good',
+    specialAbility: 'Eagle Eye',
+    test: 'test',
   },
   {
     name: 'Darius',
@@ -121,6 +179,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Longsword',
     backstory: 'A mercenary with a heart of gold.',
     favoriteMeal: 'Beef stew',
+    homeland: 'Free Cities',
+    alignment: 'Neutral Good',
+    specialAbility: 'Second Wind',
+    test: 'test',
   },
   {
     name: 'Iris',
@@ -129,6 +191,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Warhammer',
     backstory: 'A healer devoted to the god of light.',
     favoriteMeal: 'Fresh bread and soup',
+    homeland: 'Sun Temple',
+    alignment: 'Lawful Good',
+    specialAbility: 'Turn Undead',
+    test: 'test',
   },
   {
     name: 'Fenrir',
@@ -137,6 +203,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Greataxe',
     backstory: 'A warrior from a distant land.',
     favoriteMeal: 'Grilled steak',
+    homeland: 'Northern Wastes',
+    alignment: 'Chaotic Neutral',
+    specialAbility: 'Primal Strike',
+    test: 'test',
   },
   {
     name: 'Luna',
@@ -145,6 +215,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Sickle',
     backstory: 'A protector of the natural world.',
     favoriteMeal: 'Fruit salad',
+    homeland: 'Moongrove Forest',
+    alignment: 'Neutral Good',
+    specialAbility: 'Natures Blessing',
+    test: 'test',
   },
   {
     name: 'Orion',
@@ -153,6 +227,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Halberd',
     backstory: 'A knight on a holy quest.',
     favoriteMeal: 'Roasted lamb',
+    homeland: 'Golden Spires',
+    alignment: 'Lawful Good',
+    specialAbility: 'Divine Shield',
+    test: 'test',
   },
   {
     name: 'Astra',
@@ -161,6 +239,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Lute',
     backstory: 'A musician with a magical voice.',
     favoriteMeal: 'Honey cake',
+    homeland: 'Singing Valleys',
+    alignment: 'Chaotic Good',
+    specialAbility: 'Sonic Wave',
+    test: 'test',
   },
   {
     name: 'Zephyr',
@@ -169,6 +251,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Shortsword',
     backstory: 'A thief with a quick hand.',
     favoriteMeal: 'Fish and chips',
+    homeland: 'Port Haven',
+    alignment: 'Chaotic Neutral',
+    specialAbility: 'Quick Strike',
+    test: 'test',
   },
   {
     name: 'Thalia',
@@ -177,6 +263,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Crystal Staff',
     backstory: 'An archivist of forbidden knowledge.',
     favoriteMeal: 'Spiced wine and cheese',
+    homeland: 'Arcane Archives',
+    alignment: 'Neutral',
+    specialAbility: 'Spell Mastery',
+    test: 'test',
   },
   {
     name: 'Ragnar',
@@ -185,6 +275,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'War Hammer',
     backstory: 'A dwarven smith turned adventurer.',
     favoriteMeal: 'Mead and roasted mutton',
+    homeland: 'Iron Mountains',
+    alignment: 'Lawful Neutral',
+    specialAbility: 'Master Smith',
+    test: 'test',
   },
   {
     name: 'Sylvana',
@@ -193,6 +287,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Elven Bow',
     backstory: 'Guardian of the enchanted forest.',
     favoriteMeal: 'Elvish waybread',
+    homeland: 'Eternal Woods',
+    alignment: 'Neutral Good',
+    specialAbility: 'Forest Walker',
+    test: 'test',
   },
   {
     name: 'Magnus',
@@ -201,6 +299,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Cursed Dagger',
     backstory: 'Made a deal with a demon for revenge.',
     favoriteMeal: 'Blood oranges',
+    homeland: 'Cursed Lands',
+    alignment: 'Neutral Evil',
+    specialAbility: 'Dark Pact',
+    test: 'test',
   },
   {
     name: 'Echo',
@@ -209,6 +311,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Enchanted Violin',
     backstory: 'Can mimic any sound perfectly.',
     favoriteMeal: 'Sweet rolls',
+    homeland: 'Harmony Hall',
+    alignment: 'Chaotic Good',
+    specialAbility: 'Perfect Pitch',
+    test: 'test',
   },
   {
     name: 'Korg',
@@ -217,6 +323,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Stone Maul',
     backstory: 'Last survivor of a petrified tribe.',
     favoriteMeal: 'Raw meat',
+    homeland: 'Stone Peaks',
+    alignment: 'Neutral',
+    specialAbility: 'Stone Skin',
+    test: 'test',
   },
   {
     name: 'Celeste',
@@ -225,6 +335,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Starlight Wand',
     backstory: 'Born during a celestial convergence.',
     favoriteMeal: 'Moon cakes',
+    homeland: 'Star Tower',
+    alignment: 'Chaotic Good',
+    specialAbility: 'Celestial Power',
+    test: 'test',
   },
   {
     name: 'Raven',
@@ -233,6 +347,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Shadow Blade',
     backstory: 'Professional assassin seeking redemption.',
     favoriteMeal: 'Whatever their mark is having',
+    homeland: 'Night City',
+    alignment: 'True Neutral',
+    specialAbility: 'Death Strike',
+    test: 'test',
   },
   {
     name: 'Terra',
@@ -241,6 +359,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Living Wood Staff',
     backstory: 'Speaks with ancient trees.',
     favoriteMeal: 'Wild mushrooms',
+    homeland: 'Ancient Grove',
+    alignment: 'Neutral Good',
+    specialAbility: 'Tree Speech',
+    test: 'test',
   },
   {
     name: 'Ash',
@@ -249,6 +371,10 @@ export const sampleData: SampleDataRow[] = [
     weapon: 'Flame Fists',
     backstory: 'Raised by phoenix monks in a volcano.',
     favoriteMeal: 'Spicy noodles',
+    homeland: 'Phoenix Monastery',
+    alignment: 'Lawful Neutral',
+    specialAbility: 'Fire Fist',
+    test: 'test',
   },
 ];
 
@@ -256,26 +382,55 @@ export const columns: TableColumn<SampleDataRow>[] = [
   {
     name: 'Name',
     selector: (row: SampleDataRow) => row.name,
+    id: 'name',
+    width: '150px',
   },
   {
     name: 'Class',
     selector: (row) => row.class,
+    id: 'class',
+    width: '150px',
   },
   {
     name: 'Age',
     selector: (row) => row.age,
-    sortable: true,
+    id: 'age',
+    width: '150px',
   },
   {
     name: 'Weapon',
     selector: (row) => row.weapon,
+    id: 'weapon',
+    width: '150px',
   },
   {
     name: 'Backstory',
     selector: (row) => row.backstory,
+    id: 'backstory',
+    width: '150px',
   },
   {
     name: 'Favorite Meal',
     selector: (row) => row.favoriteMeal,
+    id: 'favoriteMeal',
+    width: '200px',
+  },
+  {
+    name: 'Homeland',
+    selector: (row) => row.homeland,
+    id: 'homeland',
+    width: '200px',
+  },
+  {
+    name: 'Alignment',
+    selector: (row) => row.alignment,
+    id: 'alignment',
+    width: '200px',
+  },
+  {
+    name: 'Special Ability',
+    selector: (row) => row.specialAbility,
+    id: 'specialAbility',
+    width: '200px',
   },
 ];

package/src/components/table/styles/Table.scss

@@ -53,8 +53,28 @@
     // Firefox scrollbar styles
     scrollbar-width: thin;
     scrollbar-color: var(--pf-table-border-color) var(--pf-table-background-color);
+  } // body
+
+  // Pinned Columns
+  .table__column__pin-action {
+    padding: 0;
+    padding-right: var(--pf-padding-1);
+  }
+  .table__column--is-pinned {
+    opacity: 1;
+  }
+
+  .table__column--is-not-pinned {
+    opacity: 0.3;
+  }
+
+  .table__header-cell {
+    display: flex;
+    align-items: center;
   }
 
+  // End Pinned Columns
+
   & > *:nth-child(3) {
     margin-top: auto;
     background-color: transparent;
@@ -87,33 +107,26 @@
     }
   }
 
+  .rdt_TableHead {
+    z-index: 3;
+  }
+
   .rdt_TableHeader {
     border-radius: var(--pf-rounded) 0;
     border: var(--pf-border-sm) solid var(--pf-table-border-color);
     border-bottom: none;
   }
 
-  .rdt_TableHeadRow,
-  .rdt_TableRow {
-    & > :first-child {
-      padding-left: var(--pf-padding-4);
-      min-width: 60px;
-      justify-content: left;
-    }
-  }
-
   .rdt_TableRow {
     border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
     border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
     &:hover {
-      .rdt_TableCell {
-        background-color: var(--pf-table-hover-color) !important;
-      }
-    }
+      border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
+      border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
+      outline-color: var(--pf-table-border-color);
 
-    &:first-child {
       .rdt_TableCell {
-        border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
+        background-color: var(--pf-table-hover-color) !important;
       }
     }
   }
@@ -125,6 +138,10 @@
     &:not(:first-child) {
       border-left: var(--pf-border-sm) solid var(--pf-table-border-color);
     }
+
+    &:not(:last-of-type) {
+      border-bottom-width: 0;
+    }
   }
 
   /* Striped: alternating background */

package/src/components/table/styles/_variables.scss

@@ -28,4 +28,6 @@
   --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
   --pf-table-font-size: var(--pf-font-size-body2);
   --pf-table-pagination-background-color: var(--pf-primary-color-700);
+  --pf-table-pinned-column-border-color: var(--pf-primary-color-100);
+  --pf-table-pinned-column-background-color: var(--pf-table-background-color);
 }

package/src/components/table/types.ts

@@ -5,17 +5,29 @@ import {
   TableColumn as RDTTableColumn,
   IDataTableProps,
 } from 'react-data-table-component';
+import { CSSObject } from 'styled-components';
 
 export type Direction = `${RDTDirection}`;
 export type Alignment = `${RDTAlignment}`;
-export type TableColumn<T> = RDTTableColumn<T>;
+
+export interface PinnableColumn<T> extends RDTTableColumn<T> {
+  id: string;
+  isPinned?: boolean;
+  style?: CSSObject;
+  position?: number;
+}
+
+export type TableColumn<T> = PinnableColumn<T>;
 
 export interface TableProps<T>
   extends Omit<IDataTableProps<T>, 'paginationComponent' | 'direction' | 'subHeaderAlign'> {
+  columns: TableColumn<T>[];
   isDisabled?: boolean;
   isLoading?: boolean;
   direction?: Direction;
   subHeaderAlign?: 'left' | 'right' | 'center';
   isFullHeight?: boolean;
   totalEntriesText?: string;
+  canPinColumns?: boolean;
+  onPinnedColumnsChange?: (pinnedColumnIds: any[]) => void;
 }

package/src/components/table/utils/processColumns.tsx

@@ -0,0 +1,35 @@
+import { TableColumn } from '../types';
+import HorizontalStickyHeader from '../components/HorizontalStickyHeader';
+import { getPinnedColumnStyles } from '../components/helpers';
+
+export const processColumns = <T,>(
+  columns: TableColumn<T>[],
+  pinnedColumnIds: string[],
+  togglePinnedColumn: (id: string) => void,
+): TableColumn<T>[] => {
+  return columns.map((column, index) => {
+    const dataColumnId = `sticky-column-${index}`;
+    const isPinned = pinnedColumnIds.includes(dataColumnId);
+
+    const headerContent =
+      column.isPinned !== undefined ? (
+        <HorizontalStickyHeader
+          position={index}
+          isPinned={isPinned}
+          onPinColumn={() => togglePinnedColumn(column.id)}
+          pinnedColumnIds={pinnedColumnIds}
+        >
+          {column.name}
+        </HorizontalStickyHeader>
+      ) : (
+        <>{column.name}</>
+      );
+
+    return {
+      ...column,
+      name: headerContent,
+      id: dataColumnId,
+      style: getPinnedColumnStyles(isPinned, index, pinnedColumnIds),
+    };
+  });
+};