@indico-data/design-system 2.48.0 → 2.50.0

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);
 }
@@ -4185,124 +4204,124 @@ p,
   border-color: var(--pf-secondary-color-900);
 }
 
-.border-gray {
-  border-color: var(--pf-gray-color);
+.border-tertiary {
+  border-color: var(--pf-tertiary-color);
 }
 
-.border-gray-100 {
-  border-color: var(--pf-gray-color-100);
+.border-tertiary-100 {
+  border-color: var(--pf-tertiary-color-100);
 }
 
-.border-gray-200 {
-  border-color: var(--pf-gray-color-200);
+.border-tertiary-200 {
+  border-color: var(--pf-tertiary-color-200);
 }
 
-.border-gray-300 {
-  border-color: var(--pf-gray-color-300);
+.border-tertiary-300 {
+  border-color: var(--pf-tertiary-color-300);
 }
 
-.border-gray-400 {
-  border-color: var(--pf-gray-color-400);
+.border-tertiary-400 {
+  border-color: var(--pf-tertiary-color-400);
 }
 
-.border-gray-500 {
-  border-color: var(--pf-gray-color-500);
+.border-tertiary-500 {
+  border-color: var(--pf-tertiary-color-500);
 }
 
-.border-gray-600 {
-  border-color: var(--pf-gray-color-600);
+.border-tertiary-600 {
+  border-color: var(--pf-tertiary-color-600);
 }
 
-.border-gray-700 {
-  border-color: var(--pf-gray-color-700);
+.border-tertiary-700 {
+  border-color: var(--pf-tertiary-color-700);
 }
 
-.border-gray-800 {
-  border-color: var(--pf-gray-color-800);
+.border-tertiary-800 {
+  border-color: var(--pf-tertiary-color-800);
 }
 
-.border-gray-900 {
-  border-color: var(--pf-gray-color-900);
+.border-tertiary-900 {
+  border-color: var(--pf-tertiary-color-900);
 }
 
-.border-steel {
-  border-color: var(--pf-steel-color);
+.border-gray {
+  border-color: var(--pf-gray-color);
 }
 
-.border-steel-100 {
-  border-color: var(--pf-steel-color-100);
+.border-gray-100 {
+  border-color: var(--pf-gray-color-100);
 }
 
-.border-steel-200 {
-  border-color: var(--pf-steel-color-200);
+.border-gray-200 {
+  border-color: var(--pf-gray-color-200);
 }
 
-.border-steel-300 {
-  border-color: var(--pf-steel-color-300);
+.border-gray-300 {
+  border-color: var(--pf-gray-color-300);
 }
 
-.border-steel-400 {
-  border-color: var(--pf-steel-color-400);
+.border-gray-400 {
+  border-color: var(--pf-gray-color-400);
 }
 
-.border-steel-500 {
-  border-color: var(--pf-steel-color-500);
+.border-gray-500 {
+  border-color: var(--pf-gray-color-500);
 }
 
-.border-steel-600 {
-  border-color: var(--pf-steel-color-600);
+.border-gray-600 {
+  border-color: var(--pf-gray-color-600);
 }
 
-.border-steel-700 {
-  border-color: var(--pf-steel-color-700);
+.border-gray-700 {
+  border-color: var(--pf-gray-color-700);
 }
 
-.border-steel-800 {
-  border-color: var(--pf-steel-color-800);
+.border-gray-800 {
+  border-color: var(--pf-gray-color-800);
 }
 
-.border-steel-900 {
-  border-color: var(--pf-steel-color-900);
+.border-gray-900 {
+  border-color: var(--pf-gray-color-900);
 }
 
-.border-green {
-  border-color: var(--pf-green-color);
+.border-red {
+  border-color: var(--pf-red-color);
 }
 
-.border-green-100 {
-  border-color: var(--pf-green-color-100);
+.border-red-100 {
+  border-color: var(--pf-red-color-100);
 }
 
-.border-green-200 {
-  border-color: var(--pf-green-color-200);
+.border-red-200 {
+  border-color: var(--pf-red-color-200);
 }
 
-.border-green-300 {
-  border-color: var(--pf-green-color-300);
+.border-red-300 {
+  border-color: var(--pf-red-color-300);
 }
 
-.border-green-400 {
-  border-color: var(--pf-green-color-400);
+.border-red-400 {
+  border-color: var(--pf-red-color-400);
 }
 
-.border-green-500 {
-  border-color: var(--pf-green-color-500);
+.border-red-500 {
+  border-color: var(--pf-red-color-500);
 }
 
-.border-green-600 {
-  border-color: var(--pf-green-color-600);
+.border-red-600 {
+  border-color: var(--pf-red-color-600);
 }
 
-.border-green-700 {
-  border-color: var(--pf-green-color-700);
+.border-red-700 {
+  border-color: var(--pf-red-color-700);
 }
 
-.border-green-800 {
-  border-color: var(--pf-green-color-800);
+.border-red-800 {
+  border-color: var(--pf-red-color-800);
 }
 
-.border-green-900 {
-  border-color: var(--pf-green-color-900);
+.border-red-900 {
+  border-color: var(--pf-red-color-900);
 }
 
 .border-orange {
@@ -4345,44 +4364,124 @@ p,
   border-color: var(--pf-orange-color-900);
 }
 
-.border-red {
-  border-color: var(--pf-red-color);
+.border-yellow {
+  border-color: var(--pf-yellow-color);
 }
 
-.border-red-100 {
-  border-color: var(--pf-red-color-100);
+.border-yellow-100 {
+  border-color: var(--pf-yellow-color-100);
 }
 
-.border-red-200 {
-  border-color: var(--pf-red-color-200);
+.border-yellow-200 {
+  border-color: var(--pf-yellow-color-200);
 }
 
-.border-red-300 {
-  border-color: var(--pf-red-color-300);
+.border-yellow-300 {
+  border-color: var(--pf-yellow-color-300);
 }
 
-.border-red-400 {
-  border-color: var(--pf-red-color-400);
+.border-yellow-400 {
+  border-color: var(--pf-yellow-color-400);
 }
 
-.border-red-500 {
-  border-color: var(--pf-red-color-500);
+.border-yellow-500 {
+  border-color: var(--pf-yellow-color-500);
 }
 
-.border-red-600 {
-  border-color: var(--pf-red-color-600);
+.border-yellow-600 {
+  border-color: var(--pf-yellow-color-600);
 }
 
-.border-red-700 {
-  border-color: var(--pf-red-color-700);
+.border-yellow-700 {
+  border-color: var(--pf-yellow-color-700);
 }
 
-.border-red-800 {
-  border-color: var(--pf-red-color-800);
+.border-yellow-800 {
+  border-color: var(--pf-yellow-color-800);
 }
 
-.border-red-900 {
-  border-color: var(--pf-red-color-900);
+.border-yellow-900 {
+  border-color: var(--pf-yellow-color-900);
+}
+
+.border-green {
+  border-color: var(--pf-green-color);
+}
+
+.border-green-100 {
+  border-color: var(--pf-green-color-100);
+}
+
+.border-green-200 {
+  border-color: var(--pf-green-color-200);
+}
+
+.border-green-300 {
+  border-color: var(--pf-green-color-300);
+}
+
+.border-green-400 {
+  border-color: var(--pf-green-color-400);
+}
+
+.border-green-500 {
+  border-color: var(--pf-green-color-500);
+}
+
+.border-green-600 {
+  border-color: var(--pf-green-color-600);
+}
+
+.border-green-700 {
+  border-color: var(--pf-green-color-700);
+}
+
+.border-green-800 {
+  border-color: var(--pf-green-color-800);
+}
+
+.border-green-900 {
+  border-color: var(--pf-green-color-900);
+}
+
+.border-purple {
+  border-color: var(--pf-purple-color);
+}
+
+.border-purple-100 {
+  border-color: var(--pf-purple-color-100);
+}
+
+.border-purple-200 {
+  border-color: var(--pf-purple-color-200);
+}
+
+.border-purple-300 {
+  border-color: var(--pf-purple-color-300);
+}
+
+.border-purple-400 {
+  border-color: var(--pf-purple-color-400);
+}
+
+.border-purple-500 {
+  border-color: var(--pf-purple-color-500);
+}
+
+.border-purple-600 {
+  border-color: var(--pf-purple-color-600);
+}
+
+.border-purple-700 {
+  border-color: var(--pf-purple-color-700);
+}
+
+.border-purple-800 {
+  border-color: var(--pf-purple-color-800);
+}
+
+.border-purple-900 {
+  border-color: var(--pf-purple-color-900);
 }
 
 .rounded {

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) => {