@indico-data/design-system 2.60.11 → 2.60.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.60.11",
+  "version": "2.60.13",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/tanstackTable/TankstackTable.types.ts

@@ -1,4 +1,4 @@
-import { Row, ColumnDef } from '@tanstack/react-table';
+import { Row, ColumnDef, SortingState } from '@tanstack/react-table';
 
 export type WithPaginationProps = {
   rowsPerPage: number;
@@ -42,4 +42,5 @@ export type Props<T extends object> = {
   rowSelection?: Record<string, boolean>;
   onRowSelectionChange?: (updater: Record<string, boolean>) => void;
   onSelectAllChange?: (isSelected: boolean) => void;
+  defaultSorting?: SortingState;
 } & PaginationProps;

package/src/components/tanstackTable/TanstackTable.stories.tsx

@@ -25,6 +25,15 @@ const meta: Meta = {
     isStriped: true,
   },
   argTypes: {
+    defaultSorting: {
+      description:
+        'You may pass a default sorting state to the table. This will be used to sort the table by default. This is useful if you want to sort the table by a column by default.',
+      control: false,
+      table: {
+        category: 'Props',
+        type: { summary: 'SortingState' },
+      },
+    },
     isStriped: {
       description: 'Striped rows',
       defaultValue: { summary: 'true' },

package/src/components/tanstackTable/TanstackTable.tsx

@@ -1,6 +1,11 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-import { useReactTable, getCoreRowModel } from '@tanstack/react-table';
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  SortingState,
+} from '@tanstack/react-table';
 import classNames from 'classnames';
 
 import { ActionBar } from './components/ActionBar';
@@ -33,6 +38,7 @@ export function TanstackTable<T extends object>({
   activeRows = [],
   isStriped = true,
   actionBarClassName,
+  defaultSorting,
   ...rest
 }: Props<T & { id: string }>) {
   const {
@@ -47,6 +53,8 @@ export function TanstackTable<T extends object>({
     defaultColumns,
   });
 
+  // handles internal sorting state.
+  const [sorting, setSorting] = useState<SortingState>(defaultSorting ?? []);
   const thRefs = useRef<Record<string, HTMLTableCellElement | null>>({});
 
   // Auto-compute column widths based on current table header cell widths for columns without a defined size.
@@ -73,10 +81,13 @@ export function TanstackTable<T extends object>({
     columns: formattedColumns,
     state: {
       rowSelection,
+      sorting,
     },
     enableRowSelection,
     onRowSelectionChange: setRowSelection,
     getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onSortingChange: setSorting,
     manualPagination: true,
     getRowId: (row) => row?.id,
     initialState: {

package/src/components/tanstackTable/docs/internalSorting/InternalClientSideSorting.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as TableStories from './InternalClientSideSorting.stories';
+
+<Meta title="Layout/Tanstack Table/Internal Client Side Sorting" name="Tanstack Table Internal Client Side Sorting" />
+
+# Tanstack Table Internal Client Side Sorting
+
+This is an example of how to implement internal client side sorting. This is useful when you want to sort the data on the client side without making a request to the server. It can also be used for simple data tables that don't require much state management outside of the table itself.
+
+<Canvas of={TableStories.InternalClientSideSorting}
+source={{
+  code: `
+const SortableHeader = ({ column, label }: { column: any; label: string }) => {
+  const getIcon = () => {
+    if (!column.getIsSorted()) return 'fa-sort';
+    return column.getIsSorted() === 'asc' ? 'fa-sort-up' : 'fa-sort-down';
+  };
+
+  return (
+    <Button
+      type="button"
+      onClick={column.getToggleSortingHandler()}
+      iconRight={getIcon()}
+      ariaLabel={\`Sort by \${label}\`}
+      variant="link"
+    >
+      {label}
+    </Button>
+  );
+};
+`}} />

package/src/components/tanstackTable/docs/internalSorting/InternalClientSideSorting.stories.tsx

@@ -0,0 +1,71 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { TanstackTable } from '../../TanstackTable';
+import { people, Person } from '../../mock-data/mock-data';
+import { columns } from '../../mock-data/table-configuration';
+import { ColumnDef } from '@tanstack/react-table';
+import { Button } from '../../../button';
+
+const meta: Meta = {
+  title: 'Layout/Tanstack Table/Internal Client Side Sorting',
+  component: TanstackTable,
+  args: {
+    data: people as (Person & { id: string })[],
+    columns: columns as ColumnDef<Person & { id: string }>[],
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '100%', height: '100%' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TanstackTable<Person>>;
+
+const SortableHeader = ({ column, label }: { column: any; label: string }) => {
+  const getIcon = () => {
+    if (!column.getIsSorted()) return 'fa-sort';
+    return column.getIsSorted() === 'asc' ? 'fa-sort-up' : 'fa-sort-down';
+  };
+
+  return (
+    <Button
+      type="button"
+      onClick={column.getToggleSortingHandler()}
+      iconRight={getIcon()}
+      ariaLabel={`Sort by ${label}`}
+      variant="link"
+    >
+      {label}
+    </Button>
+  );
+};
+
+export const InternalClientSideSorting: Story = {
+  args: {
+    columns: [
+      {
+        header: ({ column }: { column: any }) => <SortableHeader column={column} label="Name" />,
+        accessorKey: 'firstName',
+        id: 'firstName',
+      },
+      {
+        header: ({ column }: { column: any }) => <SortableHeader column={column} label="Email" />,
+        accessorKey: 'lastName',
+        id: 'lastName',
+      },
+      {
+        header: ({ column }: { column: any }) => <SortableHeader column={column} label="Age" />,
+        accessorKey: 'age',
+        id: 'age',
+      },
+    ],
+  },
+  render: (args) => {
+    return <TanstackTable<Person> {...args} />;
+  },
+};

package/src/components/tanstackTable/styles/table.scss

@@ -64,6 +64,14 @@
   border-radius: var(--pf-rounded-lg);
   width: 100%;
 
+  &__tbody {
+    tr {
+      td {
+        padding: var(--pf-padding-2) var(--pf-padding-3);
+      }
+    }
+  }
+
   &.is-striped {
     .tanstack-table__tbody {
       tr:nth-child(odd) {