feat(react): add max-width column configuration to Table grids (#1770)

dequelabs · Dec 18, 2024 · dc7e4ac · dc7e4ac
1 parent 6773975
commit dc7e4ac
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 3 deletions.
diff --git a/docs/pages/components/Table.mdx b/docs/pages/components/Table.mdx
@@ -336,15 +336,15 @@ 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
 <Table 
   layout="grid" 
   columns={[
     { width: 'max-content', align: 'start' }, 
     { width: 'max-content', align: 'start' }, 
-    { width: '1fr', align: 'end' }
+    { width: 'auto', maxWidth: '250', align: 'end' }
   ]}>
   <TableHead>
     <TableRow>

diff --git 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<TableGridProps>) &
   React.TableHTMLAttributes<HTMLTableElement>;
 
+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<HTMLTableElement, TableProps>(
   (
     {
@@ -65,7 +79,15 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
       }
 
       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
@@ -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(
     <Table layout="grid">