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(