@indico-data/design-system 2.48.0 → 2.49.0

package/lib/components/table/Table.stories.d.ts

@@ -5,3 +5,4 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof Table<SampleDataRow>>;
 export declare const Default: Story;
+export declare const PinnedColumns: Story;

package/lib/components/table/components/HorizontalStickyHeader.d.ts

@@ -0,0 +1,10 @@
+interface HorizontalStickyHeaderProps {
+    children: React.ReactNode;
+    position: number;
+    onPinColumn?: (columnId: string) => void;
+    isPinned?: boolean;
+    forceUpdate?: number;
+    pinnedColumnIds: string[];
+}
+declare const HorizontalStickyHeader: ({ children, position, onPinColumn, isPinned, pinnedColumnIds, }: HorizontalStickyHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default HorizontalStickyHeader;

package/lib/components/table/components/__tests__/HorizontalStickyHeader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/table/components/helpers.d.ts

@@ -0,0 +1,6 @@
+import { CSSObject } from 'styled-components';
+export declare const getPreviousHeadersWidth: (position: number, pinnedColumnIds: string[]) => number;
+export declare const applyStickyStylesToTableHeader: (position: number, left: number) => Promise<void>;
+export declare const sortPinnedColumns: <T>(columns: T[], pinnedColumnIds: string[]) => T[];
+export declare const getPinnedColumnStyles: (isPinned: boolean, index: number, pinnedColumnIds: string[]) => CSSObject;
+export declare const clearStickyStyles: (header: HTMLElement) => void;

package/lib/components/table/hooks/usePinnedColumnsManager.d.ts

@@ -0,0 +1,8 @@
+import { TableColumn } from '../types';
+/**
+ * Hook to manage pinned columns in a table
+ * Handles initialization, toggling, positioning and resizing of pinned columns
+ */
+export declare const usePinnedColumnsManager: <T>(columns: TableColumn<T>[], canPinColumns: boolean, onPinnedColumnsChange?: (pinnedColumnIds: string[]) => void) => {
+    columnsWithPinning: TableColumn<T>[];
+};

package/lib/components/table/sampleData.d.ts

@@ -6,6 +6,10 @@ export interface SampleDataRow {
     weapon: string;
     backstory: string;
     favoriteMeal: string;
+    homeland: string;
+    alignment: string;
+    specialAbility: string;
+    test: string;
 }
 export declare const sampleData: SampleDataRow[];
 export declare const columns: TableColumn<SampleDataRow>[];

package/lib/components/table/types.d.ts

@@ -1,12 +1,22 @@
 import { Direction as RDTDirection, Alignment as RDTAlignment, 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/lib/components/table/utils/processColumns.d.ts

@@ -0,0 +1,2 @@
+import { TableColumn } from '../types';
+export declare const processColumns: <T>(columns: TableColumn<T>[], pinnedColumnIds: string[], togglePinnedColumn: (id: string) => void) => TableColumn<T>[];

package/lib/index.css

@@ -804,6 +804,8 @@ a:hover,
   --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);
 }
 
 .table-loading {
@@ -856,6 +858,20 @@ a:hover,
 .table-body::-webkit-scrollbar-thumb:hover {
   background: var(--pf-primary-color);
 }
+.table .table__column__pin-action {
+  padding: 0;
+  padding-right: var(--pf-padding-1);
+}
+.table .table__column--is-pinned {
+  opacity: 1;
+}
+.table .table__column--is-not-pinned {
+  opacity: 0.3;
+}
+.table .table__header-cell {
+  display: flex;
+  align-items: center;
+}
 .table > *:nth-child(3) {
   margin-top: auto;
   background-color: transparent;
@@ -881,27 +897,26 @@ a:hover,
 .table button:disabled svg {
   fill: var(--pf-table-disabled-button-color);
 }
+.table .rdt_TableHead {
+  z-index: 3;
+}
 .table .rdt_TableHeader {
   border-radius: var(--pf-rounded) 0;
   border: var(--pf-border-sm) solid var(--pf-table-border-color);
   border-bottom: none;
 }
-.table .rdt_TableHeadRow > :first-child,
-.table .rdt_TableRow > :first-child {
-  padding-left: var(--pf-padding-4);
-  min-width: 60px;
-  justify-content: left;
-}
 .table .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);
 }
+.table .rdt_TableRow:hover {
+  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);
+}
 .table .rdt_TableRow:hover .rdt_TableCell {
   background-color: var(--pf-table-hover-color) !important;
 }
-.table .rdt_TableRow:first-child .rdt_TableCell {
-  border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
-}
 .table .rdt_TableCell,
 .table .rdt_TableCol {
   font-size: var(--pf-table-font-size);
@@ -910,6 +925,10 @@ a:hover,
 .table .rdt_TableCol:not(:first-child) {
   border-left: var(--pf-border-sm) solid var(--pf-table-border-color);
 }
+.table .rdt_TableCell:not(:last-of-type),
+.table .rdt_TableCol:not(:last-of-type) {
+  border-bottom-width: 0;
+}
 .table .table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
   background-color: var(--pf-table-stripe-color);
 }

package/lib/index.d.ts

@@ -4,7 +4,8 @@ export * from '@floating-ui/react-dom';
 import React$1, { CSSProperties, MouseEventHandler, ReactElement } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ContainerProps, RowProps, ColProps } from 'react-grid-system';
-import { IDataTableProps, Direction as Direction$1 } from 'react-data-table-component';
+import { IDataTableProps, Direction as Direction$1, TableColumn as TableColumn$1 } from 'react-data-table-component';
+import { CSSObject } from 'styled-components';
 import { Props as Props$7 } from 'react-select';
 import { DateRange, OnSelectHandler, Mode, CustomComponents, Matcher, Formatters, MonthChangeEventHandler, DayEventHandler } from 'react-day-picker';
 
@@ -184,13 +185,23 @@ type SelectOption = {
 };
 
 type Direction = `${Direction$1}`;
+interface PinnableColumn<T> extends TableColumn$1<T> {
+    id: string;
+    isPinned?: boolean;
+    style?: CSSObject;
+    position?: number;
+}
+type TableColumn<T> = PinnableColumn<T>;
 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;
 }
 
 type PillSize = 'sm' | 'md' | 'lg';

package/lib/index.esm.css

@@ -804,6 +804,8 @@ a:hover,
   --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);
 }
 
 .table-loading {
@@ -856,6 +858,20 @@ a:hover,
 .table-body::-webkit-scrollbar-thumb:hover {
   background: var(--pf-primary-color);
 }
+.table .table__column__pin-action {
+  padding: 0;
+  padding-right: var(--pf-padding-1);
+}
+.table .table__column--is-pinned {
+  opacity: 1;
+}
+.table .table__column--is-not-pinned {
+  opacity: 0.3;
+}
+.table .table__header-cell {
+  display: flex;
+  align-items: center;
+}
 .table > *:nth-child(3) {
   margin-top: auto;
   background-color: transparent;
@@ -881,27 +897,26 @@ a:hover,
 .table button:disabled svg {
   fill: var(--pf-table-disabled-button-color);
 }
+.table .rdt_TableHead {
+  z-index: 3;
+}
 .table .rdt_TableHeader {
   border-radius: var(--pf-rounded) 0;
   border: var(--pf-border-sm) solid var(--pf-table-border-color);
   border-bottom: none;
 }
-.table .rdt_TableHeadRow > :first-child,
-.table .rdt_TableRow > :first-child {
-  padding-left: var(--pf-padding-4);
-  min-width: 60px;
-  justify-content: left;
-}
 .table .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);
 }
+.table .rdt_TableRow:hover {
+  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);
+}
 .table .rdt_TableRow:hover .rdt_TableCell {
   background-color: var(--pf-table-hover-color) !important;
 }
-.table .rdt_TableRow:first-child .rdt_TableCell {
-  border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
-}
 .table .rdt_TableCell,
 .table .rdt_TableCol {
   font-size: var(--pf-table-font-size);
@@ -910,6 +925,10 @@ a:hover,
 .table .rdt_TableCol:not(:first-child) {
   border-left: var(--pf-border-sm) solid var(--pf-table-border-color);
 }
+.table .rdt_TableCell:not(:last-of-type),
+.table .rdt_TableCol:not(:last-of-type) {
+  border-bottom-width: 0;
+}
 .table .table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
   background-color: var(--pf-table-stripe-color);
 }

package/lib/index.esm.js

@@ -2603,6 +2603,16 @@ function __rest(s, e) {
     return t;
 }
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -7256,8 +7266,234 @@ const TablePagination = ({ rowsPerPage, rowCount, onChangePage, currentPage, tot
     return (jsx("div", { className: "table__pagination", children: jsxs(Row, { align: "center", justify: "between", children: [jsx(Col, { xs: "content", children: totalEntriesText && (jsx("span", { "data-testid": "table-pagination-total-entries", className: "table__pagination-total-entries", children: totalEntriesText })) }), jsx(Col, { xs: "content", children: jsx(Pagination, { "data-testid": "table-pagination-component", totalPages: totalPages, currentPage: currentPage, onChange: (page) => onChangePage(page, rowsPerPage) }) })] }) }));
 };
 
+// Gets the width of the previous pinned columns
+const getPreviousHeadersWidth = (position, pinnedColumnIds) => {
+    let totalWidth = 0;
+    // Add checkbox column width if it's pinned
+    if (pinnedColumnIds.includes('checkbox-column')) {
+        const checkboxCell = document.querySelector('.rdt_TableCol:not([data-column-id])');
+        if (checkboxCell) {
+            totalWidth += checkboxCell.offsetWidth;
+        }
+    }
+    // Add widths of other pinned columns before this position
+    const previousHeaders = Array.from({ length: position }, (_, i) => {
+        const header = document.querySelector(`[data-column-id="sticky-column-${i}"]`);
+        if (header && pinnedColumnIds.includes(`sticky-column-${i}`)) {
+            return header;
+        }
+        return null;
+    }).filter((header) => header !== null);
+    // Calculate base width from previous columns
+    totalWidth = previousHeaders.reduce((acc, header) => {
+        return acc + header.offsetWidth;
+    }, totalWidth);
+    // Leave this for if we ever try to fix the auto width columns
+    // There is a bug where borders cause the offset to be wrong, this keeps it in sync.
+    // Add offset that increases by 1 every two columns after index 1
+    // if (position >= 2) {
+    //   const additionalOffset = Math.floor((position - 2) / 2) + 1;
+    //   totalWidth += additionalOffset;
+    // }
+    return totalWidth;
+};
+// Applies sticky styles to the column header
+const applyStickyStylesToTableHeader = (position, left) => __awaiter(void 0, void 0, void 0, function* () {
+    const header = document.querySelector(`[data-column-id="sticky-column-${position}"]`);
+    if (header) {
+        header.style.position = 'sticky';
+        header.style.left = `${left}px`;
+        header.style.zIndex = '3';
+        header.style.backgroundColor =
+            'var(--pf-table-pinned-column-background-color)';
+    }
+});
+// Sorts the pinned columns so that any column that is pinned comes before any column that is not.
+const sortPinnedColumns = (columns, pinnedColumnIds) => {
+    return [...columns].sort((a, b) => {
+        const aIsPinned = pinnedColumnIds.includes(a.id);
+        const bIsPinned = pinnedColumnIds.includes(b.id);
+        if (aIsPinned && !bIsPinned)
+            return -1; // a comes first
+        if (!aIsPinned && bIsPinned)
+            return 1; // b comes first
+        return 0; // maintain relative order for columns with same pinned state
+    });
+};
+// Gets the styles for the pinned columns
+const getPinnedColumnStyles = (isPinned, index, pinnedColumnIds) => {
+    return isPinned
+        ? {
+            position: 'sticky',
+            left: `${getPreviousHeadersWidth(index, pinnedColumnIds)}px`,
+            zIndex: 3,
+            backgroundColor: 'var(--pf-table-pinned-column-background-color)',
+        }
+        : {
+            position: undefined,
+            left: undefined,
+            zIndex: undefined,
+            backgroundColor: undefined,
+        };
+};
+const clearStickyStyles = (header) => {
+    header.style.position = '';
+    header.style.left = '';
+    header.style.zIndex = '';
+    header.style.backgroundColor = '';
+};
+
+const HorizontalStickyHeader = ({ children, position, onPinColumn, isPinned = false, pinnedColumnIds, }) => {
+    useEffect(() => {
+        const calculateWidth = () => __awaiter(void 0, void 0, void 0, function* () {
+            yield new Promise((resolve) => setTimeout(resolve, 0));
+            const header = document.querySelector(`[data-column-id="sticky-column-${position}"]`);
+            if (header) {
+                if (isPinned) {
+                    const width = getPreviousHeadersWidth(position, pinnedColumnIds);
+                    yield applyStickyStylesToTableHeader(position, width);
+                }
+                else {
+                    clearStickyStyles(header);
+                }
+            }
+        });
+        calculateWidth();
+    }, [position, isPinned, pinnedColumnIds]);
+    return (jsxs("div", { className: "table__header-cell", "data-testid": `sticky-column-${position}`, children: [jsx(Button$1, { "data-testid": `sticky-header-pin-button-${position}`, variant: "link", size: "sm", iconLeft: "pin", onClick: onPinColumn, ariaLabel: isPinned ? 'Unpin column' : 'Pin column', className: `table__column--${isPinned ? 'is-pinned' : 'is-not-pinned'} table__column__pin-action` }), jsx("div", { className: "table__header-content", children: children })] }));
+};
+
+const processColumns = (columns, pinnedColumnIds, togglePinnedColumn) => {
+    return columns.map((column, index) => {
+        const dataColumnId = `sticky-column-${index}`;
+        const isPinned = pinnedColumnIds.includes(dataColumnId);
+        const headerContent = column.isPinned !== undefined ? (jsx(HorizontalStickyHeader, { position: index, isPinned: isPinned, onPinColumn: () => togglePinnedColumn(column.id), pinnedColumnIds: pinnedColumnIds, children: column.name })) : (jsx(Fragment, { children: column.name }));
+        return Object.assign(Object.assign({}, column), { name: headerContent, id: dataColumnId, style: getPinnedColumnStyles(isPinned, index, pinnedColumnIds) });
+    });
+};
+
+/**
+ * Hook to manage pinned columns in a table
+ * Handles initialization, toggling, positioning and resizing of pinned columns
+ */
+const usePinnedColumnsManager = (columns, canPinColumns, onPinnedColumnsChange) => {
+    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 !== null);
+        return ids.length > 0 ? ['checkbox-column', ...ids] : ids;
+    }, [columns]);
+    // Toggle individual column pin state
+    const togglePinnedColumn = useCallback((columnId) => {
+        const prevPinnedColumns = pinnedColumnIds;
+        // Handle unpinning
+        if (prevPinnedColumns.some((id) => id === columnId)) {
+            onPinnedColumnsChange === null || onPinnedColumnsChange === void 0 ? void 0 : onPinnedColumnsChange(prevPinnedColumns.filter((id) => id !== columnId));
+        }
+        else {
+            onPinnedColumnsChange === null || onPinnedColumnsChange === void 0 ? void 0 : 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.style.position = '';
+                cell.style.left = '';
+                cell.style.zIndex = '';
+                cell.style.backgroundColor = '';
+                cell.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.style.position = 'sticky';
+                        headerCheckbox.style.left = '0';
+                        headerCheckbox.style.zIndex = '4';
+                        headerCheckbox.style.backgroundColor =
+                            'var(--pf-table-background-color)';
+                    }
+                    // Handle cell checkboxes
+                    const cellCheckboxes = document.querySelectorAll('.rdt_TableCell:first-child');
+                    cellCheckboxes.forEach((cell) => {
+                        cell.style.position = 'sticky';
+                        cell.style.left = '0';
+                        cell.style.zIndex = '2';
+                        cell.style.backgroundColor =
+                            'var(--pf-table-pinned-column-background-color)';
+                        if (isLastPinnedColumn) {
+                            cell.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.style.position = 'sticky';
+                        header.style.left = `${left}px`;
+                        header.style.zIndex = '2';
+                        header.style.backgroundColor =
+                            'var(--pf-table-pinned-column-background-color)';
+                        if (isLastPinnedColumn) {
+                            header.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.style.position = 'sticky';
+                        cell.style.left = `${left}px`;
+                        cell.style.zIndex = '2';
+                        cell.style.backgroundColor =
+                            'var(--pf-table-pinned-column-background-color)';
+                        if (isLastPinnedColumn) {
+                            cell.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
+    };
+};
+
 const Table = (props) => {
-    const { responsive = true, direction = 'auto', keyField = 'id', striped = false, noDataComponent = 'built-in', isDisabled, isLoading, isFullHeight = false, subHeaderAlign = 'left', className, paginationTotalRows, totalEntriesText } = props, rest = __rest(props, ["responsive", "direction", "keyField", "striped", "noDataComponent", "isDisabled", "isLoading", "isFullHeight", "subHeaderAlign", "className", "paginationTotalRows", "totalEntriesText"]);
+    const { responsive = true, direction = 'auto', keyField = 'id', striped = false, noDataComponent = 'built-in', isDisabled, isLoading, isFullHeight = false, subHeaderAlign = 'left', className, paginationTotalRows, totalEntriesText, data, columns: initialColumns, canPinColumns = false, onPinnedColumnsChange } = props, rest = __rest(props, ["responsive", "direction", "keyField", "striped", "noDataComponent", "isDisabled", "isLoading", "isFullHeight", "subHeaderAlign", "className", "paginationTotalRows", "totalEntriesText", "data", "columns", "canPinColumns", "onPinnedColumnsChange"]);
+    // Turns on/off column pinning.
+    const { columnsWithPinning } = usePinnedColumnsManager(initialColumns, canPinColumns, onPinnedColumnsChange);
     const combinedClassName = classNames(className, {
         'table--striped': striped,
         'table-body': true,
@@ -7265,7 +7501,7 @@ const Table = (props) => {
     const tableWrapperClassName = classNames('table', {
         'table--full-height': isFullHeight,
     });
-    return (jsx("div", { className: tableWrapperClassName, "data-testid": "table", children: jsx(Xe, Object.assign({ responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: combinedClassName, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsx(LoadingComponent, {}), pagination: true, paginationComponent: (props) => (jsx(TablePagination, Object.assign({}, props, { totalEntriesText: totalEntriesText }))), paginationTotalRows: paginationTotalRows }, rest)) }));
+    return (jsx("div", { className: tableWrapperClassName, "data-testid": "table", children: jsx(Xe, Object.assign({ data: data, columns: columnsWithPinning, responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: combinedClassName, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsx(LoadingComponent, {}), pagination: true, paginationComponent: (props) => (jsx(TablePagination, Object.assign({}, props, { totalEntriesText: totalEntriesText }))), paginationTotalRows: paginationTotalRows, highlightOnHover: true, pointerOnHover: true }, rest)) }));
 };
 
 const Radio = React__default.forwardRef((_a, ref) => {