diff --git a/docs/pages/components/Table.mdx b/docs/pages/components/Table.mdx index a81007b69..2da3381d9 100644 --- a/docs/pages/components/Table.mdx +++ b/docs/pages/components/Table.mdx @@ -336,7 +336,7 @@ function SortableTableExample() { ### Grid Layout -The Table component supports an optional css grid layout that can specify column alignment and width definitions per column. +The Table component supports an optional css grid layout that can specify column alignment and width and max-width definitions per column. ```jsx example diff --git a/packages/react/src/components/Table/Table.tsx b/packages/react/src/components/Table/Table.tsx index 6ebf04e5f..785fa1fc0 100644 --- a/packages/react/src/components/Table/Table.tsx +++ b/packages/react/src/components/Table/Table.tsx @@ -5,6 +5,7 @@ import { TableProvider } from './TableContext'; export type Column = { align: ColumnAlignment; width?: ColumnWidth; + maxWidth?: ColumnWidth; }; export type ColumnAlignment = 'start' | 'center' | 'end'; export type ColumnWidth = @@ -31,6 +32,19 @@ type TableGridProps = { type TableProps = (TableBaseProps | Partial) & React.TableHTMLAttributes; +function parseColumnWidth(width?: ColumnWidth): string { + const number = Number(width); + if (!isNaN(number)) { + return `${number}px`; + } + + if (!width) { + return 'auto'; + } + + return width; +} + const Table = React.forwardRef( ( { @@ -65,7 +79,15 @@ const Table = React.forwardRef( } return columns - .map(({ width }) => width || 'auto') + .map(({ width, maxWidth }) => { + if (maxWidth) { + return `minmax(${parseColumnWidth(width)}, ${parseColumnWidth( + maxWidth + )})`; + } + + return parseColumnWidth(width); + }) .join(' '); }, [layout, columns]); diff --git a/packages/react/src/components/Table/index.test.tsx b/packages/react/src/components/Table/index.test.tsx index 267da3f11..20c02942c 100644 --- a/packages/react/src/components/Table/index.test.tsx +++ b/packages/react/src/components/Table/index.test.tsx @@ -346,6 +346,22 @@ test('should support column definitions with grid layout', () => { expect(tableCells[1]).toHaveStyle('text-align: end'); }); +test('should support column definitions with maxWidth with grid layout', () => { + renderDefaultTable({ + layout: 'grid', + columns: [ + { width: '1fr', align: 'start' }, + { width: 'min-content', align: 'end' }, + { width: 'min-content', maxWidth: '789', align: 'end' }, + { maxWidth: '789', align: 'end' } + ] + }); + const table = screen.getByRole('table'); + expect(table).toHaveStyle( + '--table-grid-template-columns: 1fr min-content minmax(min-content, 789px) minmax(auto, 789px)' + ); +}); + test('should apply colspan styles to cells in grid layout', () => { render(