@indico-data/design-system 2.47.3 → 2.49.0

package/src/components/table/Table.tsx

@@ -3,9 +3,10 @@ import DataTable, {
   Direction as RDTDirection,
   Alignment as RDTAlignment,
 } from 'react-data-table-component';
-
 import { LoadingComponent } from './LoadingComponent';
 import { TableProps } from './types';
+import { TablePagination } from './components/TablePagination';
+import { usePinnedColumnsManager } from './hooks/usePinnedColumnsManager';
 
 export const Table = <T,>(props: TableProps<T>) => {
   const {
@@ -19,9 +20,22 @@ export const Table = <T,>(props: TableProps<T>) => {
     isFullHeight = false,
     subHeaderAlign = 'left',
     className,
+    paginationTotalRows,
+    totalEntriesText,
+    data,
+    columns: initialColumns,
+    canPinColumns = false,
+    onPinnedColumnsChange,
     ...rest
   } = props;
 
+  // Turns on/off column pinning.
+  const { columnsWithPinning } = usePinnedColumnsManager(
+    initialColumns,
+    canPinColumns,
+    onPinnedColumnsChange,
+  );
+
   const combinedClassName = classNames(className, {
     'table--striped': striped,
     'table-body': true,
@@ -32,8 +46,10 @@ export const Table = <T,>(props: TableProps<T>) => {
   });
 
   return (
-    <div className={tableWrapperClassName}>
+    <div className={tableWrapperClassName} data-testid="table">
       <DataTable
+        data={data}
+        columns={columnsWithPinning}
         responsive={responsive}
         direction={direction as RDTDirection}
         subHeaderAlign={subHeaderAlign as RDTAlignment}
@@ -44,6 +60,13 @@ export const Table = <T,>(props: TableProps<T>) => {
         noDataComponent={noDataComponent}
         progressPending={isLoading}
         progressComponent={<LoadingComponent />}
+        pagination
+        paginationComponent={(props) => (
+          <TablePagination {...props} totalEntriesText={totalEntriesText} />
+        )}
+        paginationTotalRows={paginationTotalRows}
+        highlightOnHover
+        pointerOnHover
         {...rest}
       />
     </div>

package/src/components/table/__tests__/Table.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import { Table } from '../Table';
+import { sampleData, columns } from '../sampleData';
+
+describe('Table', () => {
+  it('renders the total entries text', () => {
+    render(<Table columns={columns} data={sampleData} totalEntriesText="100 entries" />);
+    expect(screen.getByTestId('table-pagination-total-entries')).toBeInTheDocument();
+  });
+});

package/src/components/table/components/HorizontalStickyHeader.tsx

@@ -0,0 +1,57 @@
+import { useEffect } from 'react';
+import { Button } from '../../button/Button';
+import {
+  getPreviousHeadersWidth,
+  applyStickyStylesToTableHeader,
+  clearStickyStyles,
+} from './helpers';
+interface HorizontalStickyHeaderProps {
+  children: React.ReactNode;
+  position: number;
+  onPinColumn?: (columnId: string) => void;
+  isPinned?: boolean;
+  forceUpdate?: number;
+  pinnedColumnIds: string[];
+}
+
+const HorizontalStickyHeader = ({
+  children,
+  position,
+  onPinColumn,
+  isPinned = false,
+  pinnedColumnIds,
+}: HorizontalStickyHeaderProps) => {
+  useEffect(() => {
+    const calculateWidth = async () => {
+      await 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);
+          await applyStickyStylesToTableHeader(position, width);
+        } else {
+          clearStickyStyles(header as HTMLElement);
+        }
+      }
+    };
+
+    calculateWidth();
+  }, [position, isPinned, pinnedColumnIds]);
+
+  return (
+    <div className="table__header-cell" data-testid={`sticky-column-${position}`}>
+      <Button
+        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`}
+      />
+      <div className="table__header-content">{children}</div>
+    </div>
+  );
+};
+
+export default HorizontalStickyHeader;

package/src/components/table/components/TablePagination.tsx

@@ -0,0 +1,44 @@
+import { Pagination as PaginationComponent } from '../../pagination';
+import { Row, Col } from '../../grid';
+interface TablePaginationProps {
+  rowsPerPage: number;
+  rowCount: number;
+  onChangePage: (page: number, perPage: number) => void;
+  currentPage: number;
+  totalEntriesText?: string;
+}
+
+export const TablePagination = ({
+  rowsPerPage,
+  rowCount,
+  onChangePage,
+  currentPage,
+  totalEntriesText,
+}: TablePaginationProps) => {
+  const totalPages = Math.ceil(rowCount / rowsPerPage);
+
+  return (
+    <div className="table__pagination">
+      <Row align="center" justify="between">
+        <Col xs="content">
+          {totalEntriesText && (
+            <span
+              data-testid="table-pagination-total-entries"
+              className="table__pagination-total-entries"
+            >
+              {totalEntriesText}
+            </span>
+          )}
+        </Col>
+        <Col xs="content">
+          <PaginationComponent
+            data-testid="table-pagination-component"
+            totalPages={totalPages}
+            currentPage={currentPage}
+            onChange={(page) => onChangePage(page, rowsPerPage)}
+          />
+        </Col>
+      </Row>
+    </div>
+  );
+};

package/src/components/table/components/__tests__/HorizontalStickyHeader.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import HorizontalStickyHeader from '../HorizontalStickyHeader';
+import { sampleData } from '../../sampleData';
+import { Table } from '../../Table';
+import { columns } from '../../sampleData';
+import userEvent from '@testing-library/user-event';
+
+// Add ResizeObserver mock before tests
+class ResizeObserverMock {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+// Add the mock to the global object
+global.ResizeObserver = ResizeObserverMock;
+
+describe('HorizontalStickyHeader', () => {
+  // Store original implementation
+  const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+
+  afterEach(() => {
+    // Restore original implementation after each test
+    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+  });
+
+  it('correctly handles column pinning states based on column configuration', () => {
+    render(
+      <Table
+        responsive
+        columns={columns}
+        canPinColumns
+        data={sampleData}
+        totalEntriesText="100 entries"
+      />,
+    );
+
+    columns.forEach((column, index) => {
+      if (column.isPinned === undefined) {
+        // For columns where isPinned is not defined, the pin button should not exist
+        const pinButton = screen.queryByTestId(`sticky-header-pin-button-${index}`);
+        expect(pinButton).not.toBeInTheDocument();
+      } else {
+        // For columns where isPinned is defined, check for the correct class
+        const pinButton = screen.getByTestId(`sticky-header-pin-button-${index}`);
+        expect(pinButton).toHaveClass(
+          column.isPinned ? 'table__column--is-pinned' : 'table__column--is-not-pinned',
+        );
+      }
+    });
+  });
+
+  it('fires the onPinColumn callback when the pin button is clicked', () => {
+    const onPinColumn = jest.fn();
+    render(
+      <HorizontalStickyHeader position={0} pinnedColumnIds={[]} onPinColumn={onPinColumn}>
+        Test Content
+      </HorizontalStickyHeader>,
+    );
+
+    const pinButton = screen.getByTestId('sticky-header-pin-button-0');
+    fireEvent.click(pinButton);
+    expect(onPinColumn).toHaveBeenCalled();
+  });
+
+  it('correctly handles column pinning states based on column configuration', () => {
+    render(
+      <Table
+        responsive
+        columns={columns}
+        canPinColumns
+        data={sampleData}
+        totalEntriesText="100 entries"
+      />,
+    );
+
+    columns.forEach((column, index) => {
+      if (column.isPinned === undefined) {
+        // For columns where isPinned is not defined, the pin button should not exist
+        const pinButton = screen.queryByTestId(`sticky-header-pin-button-${index}`);
+        expect(pinButton).not.toBeInTheDocument();
+      } else {
+        // For columns where isPinned is defined, check for the correct class
+        const pinButton = screen.getByTestId(`sticky-header-pin-button-${index}`);
+        expect(pinButton).toHaveClass(
+          column.isPinned ? 'table__column--is-pinned' : 'table__column--is-not-pinned',
+        );
+      }
+    });
+  });
+
+  it('fires the onPinColumn callback when the pin button is clicked', () => {
+    const onPinColumn = jest.fn();
+    render(
+      <HorizontalStickyHeader position={0} pinnedColumnIds={[]} onPinColumn={onPinColumn}>
+        Test Content
+      </HorizontalStickyHeader>,
+    );
+
+    const pinButton = screen.getByTestId('sticky-header-pin-button-0');
+    fireEvent.click(pinButton);
+    expect(onPinColumn).toHaveBeenCalled();
+  });
+});

package/src/components/table/components/__tests__/TablePagination.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react';
+import { TablePagination } from '../TablePagination';
+
+describe('TablePagination', () => {
+  it('renders total entries text', () => {
+    render(
+      <TablePagination
+        rowsPerPage={10}
+        rowCount={100}
+        onChangePage={() => {}}
+        currentPage={1}
+        totalEntriesText="100 entries"
+      />,
+    );
+    expect(screen.getByTestId('table-pagination-total-entries')).toBeInTheDocument();
+  });
+});

package/src/components/table/components/helpers.ts

@@ -0,0 +1,90 @@
+import { CSSObject } from 'styled-components';
+
+// Gets the width of the previous pinned columns
+export const getPreviousHeadersWidth = (position: number, pinnedColumnIds: string[]): number => {
+  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 as HTMLElement).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 as HTMLElement;
+    }
+    return null;
+  }).filter((header): header is HTMLElement => 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
+export const applyStickyStylesToTableHeader = async (position: number, left: number) => {
+  const header = document.querySelector(`[data-column-id="sticky-column-${position}"]`);
+  if (header) {
+    (header as HTMLElement).style.position = 'sticky';
+    (header as HTMLElement).style.left = `${left}px`;
+    (header as HTMLElement).style.zIndex = '3';
+    (header as HTMLElement).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.
+export const sortPinnedColumns = <T>(columns: T[], pinnedColumnIds: string[]): T[] => {
+  return [...columns].sort((a, b) => {
+    const aIsPinned = pinnedColumnIds.includes((a as any).id);
+    const bIsPinned = pinnedColumnIds.includes((b as any).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
+export const getPinnedColumnStyles = (
+  isPinned: boolean,
+  index: number,
+  pinnedColumnIds: string[],
+): CSSObject => {
+  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,
+      };
+};
+
+export const clearStickyStyles = (header: HTMLElement) => {
+  header.style.position = '';
+  header.style.left = '';
+  header.style.zIndex = '';
+  header.style.backgroundColor = '';
+};

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
+  };
+};