@indico-data/design-system 2.48.0 → 2.50.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);
 }
@@ -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.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';