@indico-data/design-system 2.49.0 → 2.51.0

package/src/components/tanstackTable/docs/pinnedColumns/PinnedColumn.mdx

@@ -0,0 +1,34 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as TableStories from './PinnedColumn.stories';
+
+<Meta title="Layout/Tanstack Table/Pinned Columns" name="Tanstack Table Pinned Column" />
+
+# Tanstack Table Pinned Columns
+
+<Canvas of={TableStories.PinnedColumns} />
+
+This component enables the rapid creation of responsive, paginated tables using the React TanStack Table library.
+It supports configuring pinned columns by extracting the necessary properties from your column creation object.
+For more details on all configuration options and features, please refer to the official [TanStack Table Pinning Documentation](https://tanstack.com/table/latest/docs/guide/column-pinning#pin-columns-by-default).
+
+To enable pinned columns, pass the following properties to your table.
+In your column definition, extract the pinning information from the header object and pass it to your component in this case PinHeaderColumns as shown:
+
+```tsx
+ header: ({ header }) => (
+      <PinHeaderColumns
+        content="First Name"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+
+```
+
+This code toggles the pinned state of the column: if the column is already pinned, clicking will unpin it; otherwise, it will pin the column to the left
+
+Additionally, the table component accepts a defaultPinnedColumns prop, which is an array of column IDs that will be pinned by default when the table is rendered. This ensures that important columns—such as selection checkboxes or key data fields—remain visible as users scroll through the table.
+
+```tsx
+<TanstackTable defaultPinnedColumns={['select', 'firstName', 'lastName']} />
+```

package/src/components/tanstackTable/docs/pinnedColumns/PinnedColumn.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { TanstackTable } from '../../TanstakTable';
+import { people, Person } from '../../mock-data/mock-data';
+import { columns } from '../../mock-data/table-configuration';
+import { ColumnDef } from '@tanstack/react-table';
+
+const meta: Meta = {
+  title: 'Layout/Tanstack Table/Pinned Columns',
+  component: TanstackTable,
+  args: {
+    data: people as (Person & { id: string })[],
+    columns: columns as ColumnDef<Person & { id: string }>[],
+    defaultPinnedColumns: ['select'],
+    onClickRow: null,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '100%', height: '500px', overflow: 'hidden' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TanstackTable<Person>>;
+
+export const PinnedColumns: Story = {
+  args: {
+    defaultPinnedColumns: ['select', 'firstName', 'lastName'],
+    actionBarClassName: 'tanstack-table__action-bar-test',
+  },
+  render: (args) => (
+    <div style={{ width: '700px', height: '500px', overflow: 'hidden' }}>
+      <TanstackTable<Person> {...args} />
+    </div>
+  ),
+};

package/src/components/tanstackTable/docs/withRowClick/WithRowClick.mdx

@@ -0,0 +1,48 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as TableStories from './WithRowClick.stories';
+
+<Meta title="Layout/Tanstack Table/With Row Click" name="TanstackTable" />
+
+<Canvas of={TableStories.WithRowClick} />
+
+# Tanstack Table With Row Click
+
+When a row is clicked, the component first checks if an onClickRow callback is provided. If it exists, it performs two actions:
+
+Toggle Row Behavior:
+The toggleRow function is called with the row's ID. This function checks if the row's ID is already in the isClickedRow state array. If it is, the ID is removed; if not, it's added. This toggles the row's "clicked" state, which is then used to conditionally apply the is-clicked CSS class for visual feedback.
+
+Row Click Callback:
+After toggling the row's state, the onClickRow function is invoked with the clicked row as its argument, allowing you to perform additional custom actions when a row is clicked.
+
+Here's a simplified flow of the behavior:
+
+```tsx
+onClick={() => {
+  if (!!onClickRow) {
+    toggleRow(row.id); // Toggle the row's clicked state
+    onClickRow(row);   // Execute additional actions for the clicked row
+  }
+}}
+```
+
+This design makes it easy to both track and visually indicate which rows have been interacted with, while also providing a hook for further custom behavior via the onClickRow callback.
+
+The 'is-selected' class is added when the row is selected (via row.getIsSelected()), resulting in a specific background for selected rows. The 'show-hover' class is applied if the onClickRow function is provided, enabling a distinct hover effect that indicates interactivity. Finally, the 'is-clicked' class is added when the row has been clicked (i.e., its ID is included in isClickedRow), which changes the background to visually differentiate clicked rows from both hovered and selected ones.
+
+```tsx
+<tr
+    className={classNames('tanstack-table__tbody__tr', {
+    'is-selected': row.getIsSelected(),
+    'show-hover': !!onClickRow,
+    'is-clicked': isClickedRow.includes(row.id),
+    })}
+    key={row.id}
+    onClick={() => {
+    if (!!onClickRow) {
+        toggleRow(row.id);
+        onClickRow(row);
+    }
+    }}
+>
+```

package/src/components/tanstackTable/docs/withRowClick/WithRowClick.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { TanstackTable } from '../../TanstakTable';
+import { people, Person } from '../../mock-data/mock-data';
+import { columns } from '../../mock-data/table-configuration';
+import { ColumnDef, Row } from '@tanstack/react-table';
+
+const meta: Meta = {
+  title: 'Layout/Tanstack Table/With Row Click',
+  component: TanstackTable,
+  args: {
+    data: people as (Person & { id: string })[],
+    columns: columns as ColumnDef<Person & { id: string }>[],
+    defaultPinnedColumns: ['select'],
+    onClickRow: (row: Row<Person>) => {
+      console.log(row);
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '100%', height: '500px', overflow: 'hidden' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TanstackTable<Person>>;
+
+export const WithRowClick: Story = {};

package/src/components/tanstackTable/helpers.ts

@@ -0,0 +1,45 @@
+import { Column } from '@tanstack/react-table';
+import { CSSProperties } from 'react';
+
+// Sets style attributes for pinned columns
+const getCommonPinningStyles = <T>(column: Column<T>): CSSProperties => {
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
+  return {
+    boxShadow: isLastLeftPinnedColumn ? '-4px 0 4px -4px gray inset' : undefined,
+    left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
+    position: isPinned ? 'sticky' : 'relative',
+    zIndex: isPinned ? 1 : 0,
+  };
+};
+
+export const getThStyles = <T>(column: Column<T>) => {
+  const styles = { ...getCommonPinningStyles(column) };
+
+  if (column.columnDef.meta?.styles?.definedColumnSize) {
+    styles.width = column.getSize();
+    styles.maxWidth = column.getSize();
+  }
+
+  return styles;
+};
+
+export const getTdStyles = <T>(
+  column: Column<T>,
+  textAlign?: 'left' | 'center' | 'right',
+  hasDefinedColumnSize?: boolean,
+  width?: number,
+) => {
+  const styles: CSSProperties = { ...getCommonPinningStyles(column) };
+
+  if (textAlign) {
+    styles.textAlign = textAlign;
+  }
+
+  if (hasDefinedColumnSize) {
+    styles.width = width;
+    styles.maxWidth = width;
+  }
+
+  return styles;
+};

package/src/components/tanstackTable/index.ts

@@ -0,0 +1,2 @@
+export type { ColumnDef } from '@tanstack/react-table';
+export { TanstackTable } from './TanstakTable';

package/src/components/tanstackTable/mock-data/mock-data.ts

@@ -0,0 +1,256 @@
+export type Person = {
+  firstName: string;
+  lastName: string;
+  age: number;
+  visits: number;
+  progress: number;
+  status: 'relationship' | 'complicated' | 'single';
+  subRows?: Person[];
+  id: string;
+  country: string;
+  city: string;
+  civility: string;
+};
+
+export const people: Person[] = [
+  {
+    firstName: 'John',
+    lastName: 'Doe',
+    age: 28,
+    visits: 10,
+    progress: 75,
+    status: 'single',
+    id: '1',
+    country: 'USA',
+    city: 'New York',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Jane',
+    lastName: 'Smith',
+    age: 32,
+    visits: 15,
+    progress: 50,
+    status: 'relationship',
+    id: '2',
+    country: 'USA',
+    city: 'Los Angeles',
+    civility: 'Ms.',
+  },
+  {
+    firstName: 'Alice',
+    lastName: 'Johnson',
+    age: 24,
+    visits: 5,
+    progress: 90,
+    status: 'single',
+    id: '3',
+    country: 'Canada',
+    city: 'Toronto',
+    civility: 'Ms.',
+  },
+  {
+    firstName: 'Bob',
+    lastName: 'Brown',
+    age: 40,
+    visits: 20,
+    progress: 30,
+    status: 'complicated',
+    id: '4',
+    country: 'UK',
+    city: 'London',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Charlie',
+    lastName: 'Davis',
+    age: 35,
+    visits: 8,
+    progress: 60,
+    status: 'relationship',
+    id: '5',
+    country: 'Australia',
+    city: 'Sydney',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Emily',
+    lastName: 'Wilson',
+    age: 27,
+    visits: 12,
+    progress: 80,
+    status: 'single',
+    id: '6',
+    country: 'USA',
+    city: 'Chicago',
+    civility: 'Ms.',
+  },
+  {
+    firstName: 'David',
+    lastName: 'Martinez',
+    age: 45,
+    visits: 25,
+    progress: 40,
+    status: 'complicated',
+    id: '7',
+    country: 'Mexico',
+    city: 'Mexico City',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Sophia',
+    lastName: 'Garcia',
+    age: 30,
+    visits: 18,
+    progress: 70,
+    status: 'relationship',
+    id: '8',
+    country: 'Spain',
+    city: 'Madrid',
+    civility: 'Ms.',
+  },
+  {
+    firstName: 'Liam',
+    lastName: 'Rodriguez',
+    age: 22,
+    visits: 7,
+    progress: 85,
+    status: 'single',
+    id: '9',
+    country: 'USA',
+    city: 'Boston',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Olivia',
+    lastName: 'Lee',
+    age: 29,
+    visits: 11,
+    progress: 65,
+    status: 'complicated',
+    id: '10',
+    country: 'Canada',
+    city: 'Vancouver',
+    civility: 'Ms.',
+  },
+  {
+    firstName: 'Noah',
+    lastName: 'Walker',
+    age: 33,
+    visits: 9,
+    progress: 55,
+    status: 'relationship',
+    id: '11',
+    country: 'USA',
+    city: 'San Francisco',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Ava',
+    lastName: 'Hall',
+    age: 26,
+    visits: 14,
+    progress: 95,
+    status: 'single',
+    id: '12',
+    country: 'UK',
+    city: 'Manchester',
+    civility: 'Ms.',
+  },
+  {
+    firstName: 'Ethan',
+    lastName: 'Allen',
+    age: 38,
+    visits: 21,
+    progress: 45,
+    status: 'complicated',
+    id: '13',
+    country: 'USA',
+    city: 'Houston',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Mia',
+    lastName: 'Young',
+    age: 31,
+    visits: 16,
+    progress: 50,
+    status: 'relationship',
+    id: '14',
+    country: 'Australia',
+    city: 'Melbourne',
+    civility: 'Ms.',
+  },
+  {
+    firstName: 'William',
+    lastName: 'Hernandez',
+    age: 42,
+    visits: 19,
+    progress: 35,
+    status: 'complicated',
+    id: '15',
+    country: 'USA',
+    city: 'Phoenix',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Isabella',
+    lastName: 'King',
+    age: 23,
+    visits: 6,
+    progress: 88,
+    status: 'single',
+    id: '16',
+    country: 'Canada',
+    city: 'Ottawa',
+    civility: 'Ms.',
+  },
+  {
+    firstName: 'James',
+    lastName: 'Wright',
+    age: 37,
+    visits: 17,
+    progress: 60,
+    status: 'relationship',
+    id: '17',
+    country: 'UK',
+    city: 'Birmingham',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Amelia',
+    lastName: 'Lopez',
+    age: 34,
+    visits: 13,
+    progress: 72,
+    status: 'complicated',
+    id: '18',
+    country: 'Spain',
+    city: 'Barcelona',
+    civility: 'Ms.',
+  },
+  {
+    firstName: 'Benjamin',
+    lastName: 'Hill',
+    age: 29,
+    visits: 10,
+    progress: 80,
+    status: 'relationship',
+    id: '19',
+    country: 'USA',
+    city: 'Seattle',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Charlotte',
+    lastName: 'Scott',
+    age: 28,
+    visits: 8,
+    progress: 65,
+    status: 'single',
+    id: '20',
+    country: 'USA',
+    city: 'Austin',
+    civility: 'Ms.',
+  },
+];

package/src/components/tanstackTable/mock-data/table-configuration.tsx

@@ -0,0 +1,219 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { Person } from './mock-data';
+import { Checkbox } from '@/components/forms/checkbox/Checkbox';
+import { Button } from '@/components/button';
+import styled from 'styled-components';
+
+const PinHeaderColumns = ({
+  content,
+  onPinClick,
+  isPinned,
+}: {
+  content: string;
+  onPinClick: () => void;
+  isPinned: boolean;
+}) => {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+      {onPinClick ? (
+        <Button
+          data-testid={`sticky-header-pin-button`}
+          variant="link"
+          size="sm"
+          iconLeft="pin"
+          onClick={onPinClick}
+          ariaLabel={isPinned ? 'Unpin column' : 'Pin column'}
+          className={`tanstack-table__column--${isPinned ? 'is-pinned' : 'is-not-pinned'} pa-0`}
+        />
+      ) : null}
+      <span>{content}</span>{' '}
+    </div>
+  );
+};
+
+const CheckboxContainer = styled.div`
+  padding: 14px;
+`;
+
+export const columns = [
+  {
+    id: 'select',
+    size: 48,
+    meta: {
+      styles: {
+        definedColumnSize: true,
+        header: {
+          hasNoPadding: true,
+        },
+        cell: {
+          hasNoPadding: true,
+        },
+      },
+    },
+    header: ({ table }) => (
+      <CheckboxContainer>
+        <Checkbox
+          name="select-all"
+          id="select-all"
+          label=""
+          isChecked={table.getIsAllPageRowsSelected()}
+          onChange={() => {
+            table
+              .getRowModel()
+              .rows.forEach((row) =>
+                row.toggleSelected(!table.getRowModel().rows[0].getIsSelected()),
+              );
+          }}
+          isDisabled={false}
+          aria-label="select-rows-header"
+        />
+      </CheckboxContainer>
+    ),
+    cell: ({ row }) => (
+      <CheckboxContainer>
+        <Checkbox
+          name="select"
+          id={row.id}
+          label=""
+          aria-label={`checkbox-${row.id}`}
+          isChecked={row.getIsSelected()}
+          isDisabled={!row.getCanSelect()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      </CheckboxContainer>
+    ),
+  },
+  {
+    id: 'firstName',
+    accessorKey: 'firstName',
+    header: ({ header }) => (
+      <PinHeaderColumns
+        content="First Name"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+    cell: (info) => info.getValue(),
+    footer: (props) => props.column.id,
+  },
+  {
+    accessorFn: (row) => row.lastName,
+    id: 'lastName',
+    cell: (info) => info.getValue(),
+    header: ({ header }) => (
+      <PinHeaderColumns
+        content="Last Name"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+    footer: (props) => props.column.id,
+  },
+
+  {
+    id: 'age',
+    accessorKey: 'age',
+    header: ({ header }) => (
+      <PinHeaderColumns
+        content="Age"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+    meta: {
+      styles: {
+        cell: {
+          textAlign: 'right',
+        },
+      },
+    },
+    footer: (props) => props.column.id,
+  },
+
+  {
+    id: 'visits',
+    accessorKey: 'visits',
+    header: ({ header }) => (
+      <PinHeaderColumns
+        content="Visits"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+    meta: {
+      styles: {
+        cell: {
+          textAlign: 'right',
+        },
+      },
+    },
+    footer: (props) => props.column.id,
+  },
+  {
+    id: 'status',
+    accessorKey: 'status',
+    header: ({ header }) => (
+      <PinHeaderColumns
+        content="Status"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+    footer: (props) => props.column.id,
+  },
+  {
+    id: 'progress',
+    accessorKey: 'progress',
+    header: ({ header }) => (
+      <PinHeaderColumns
+        content="Profile Progress"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+    meta: {
+      styles: {
+        cell: {
+          textAlign: 'center',
+        },
+      },
+    },
+    footer: (props) => props.column.id,
+  },
+  {
+    id: 'country',
+    accessorKey: 'country',
+    header: ({ header }) => (
+      <PinHeaderColumns
+        content="Country"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+    footer: (props) => props.column.id,
+  },
+  {
+    id: 'city',
+    accessorKey: 'city',
+    header: ({ header }) => (
+      <PinHeaderColumns
+        content="City"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+    footer: (props) => props.column.id,
+  },
+  {
+    id: 'civility',
+    accessorKey: 'civility',
+    header: ({ header }) => (
+      <PinHeaderColumns
+        content="Civility"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+    footer: (props) => props.column.id,
+  },
+] as ColumnDef<Person>[];