@indico-data/design-system 2.59.0 → 2.59.1

package/package.json

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

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

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { TanstackTable } from './TanstakTable';
+import { TanstackTable } from './TanstackTable';
 import { people, Person } from './mock-data/mock-data';
 import { columns } from './mock-data/table-configuration';
 import { ColumnDef, Row } from '@tanstack/react-table';

package/src/components/tanstackTable/{TanstakTable.tsx → TanstackTable.tsx}

@@ -11,6 +11,7 @@ import { Props } from './TankstackTable.types';
 import { useTanstackTable } from './useTanstackTable';
 import { TableHeader } from './components/TableHeader';
 import { TableBody } from './components/TableBody';
+import { columns } from './mock-data/table-configuration';
 
 export function TanstackTable<T extends object>({
   columns: defaultColumns,
@@ -47,19 +48,23 @@ export function TanstackTable<T extends object>({
   });
 
   const thRefs = useRef<Record<string, HTMLTableCellElement | null>>({});
-  // Sets formattedColumns with correct column widths
+
+  // Auto-compute column widths based on current table header cell widths for columns without a defined size.
   useEffect(() => {
-    const updatedColumns: ColumnDef<T & { id: string }>[] = [];
+    setFormattedColumns(
+      formattedColumns.map((column) => {
+        if (column.meta?.styles.definedColumnSize) {
+          return column;
+        }
 
-    formattedColumns.forEach((column) => {
-      const columnWidth = thRefs.current[column.id as keyof typeof thRefs.current]!.offsetWidth;
+        const columnWidth = thRefs.current[column.id as keyof typeof thRefs.current]!.offsetWidth;
 
-      updatedColumns.push({
-        ...column,
-        size: columnWidth,
-      });
-    });
-    setFormattedColumns(updatedColumns);
+        return {
+          ...column,
+          size: columnWidth,
+        };
+      }),
+    );
   }, [data, columns, windowWidth]);
 
   const table = useReactTable({

package/src/components/tanstackTable/__tests__/TanstackTable.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { TanstackTable } from '../TanstakTable';
+import { TanstackTable } from '../TanstackTable';
 import { data, columns } from './__mocks__/test-mock-data';
 
 describe('Tanstack Table Component', () => {

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

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { TanstackTable } from '../../TanstakTable';
+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';

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

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { TanstackTable } from '../../TanstakTable';
+import { TanstackTable } from '../../TanstackTable';
 import { people, Person } from '../../mock-data/mock-data';
 import { columns } from '../../mock-data/table-configuration';
 import { ColumnDef, Row } from '@tanstack/react-table';

package/src/components/tanstackTable/index.ts

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