feat: Table Column Groups Table

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -27166,7 +27166,18 @@ To target individual cells use \`columnDefinitions.verticalAlign\`, that takes p
 
 If not set, all columns are displayed and the order is dictated by the \`columnDefinitions\` property.
 
-Use it in conjunction with the content display preference of the [collection preferences](/components/collection-preferences/) component.",
+Use it in conjunction with the content display preference of the [collection preferences](/components/collection-preferences/) component.
+
+Each entry is one of the following:
+- \`ColumnDisplay\` - Represents a single column.
+  - \`type\` ('column') - (Optional) Identifies the entry as a column. Defaults to \`'column'\` when omitted.
+  - \`id\` (string) - The column identifier. Must match a column \`id\` from \`columnDefinitions\`.
+  - \`visible\` (boolean) - Whether the column is visible.
+- \`GroupDisplay\` - Represents a column group.
+  - \`type\` ('group') - Identifies the entry as a group.
+  - \`id\` (string) - The group identifier. Must match a group \`id\` from \`groupDefinitions\`.
+  - \`visible\` (boolean) - Whether the group is visible.
+  - \`children\` (ReadonlyArray<ColumnDisplayProperties>) - The columns or nested groups within this group.",
       "name": "columnDisplay",
       "optional": true,
       "type": "ReadonlyArray<TableProps.ColumnDisplayProperties>",
@@ -27388,6 +27399,20 @@ table with \`item=null\` and then for each expanded item. The function result is
       "optional": true,
       "type": "TableProps.GetLoadingStatus<T>",
     },
+    {
+      "description": "Defines the column groups. Each group has an \`id\` and \`header\` used to label the group header cell.
+
+When using grouped columns, you must also provide the \`columnDisplay\` property with \`{ type: 'group', id, children }\` entries
+to assign columns to their respective groups and define the display hierarchy.
+
+Each group definition contains the following:
+- \`id\` (string) - A unique identifier for the group.
+- \`header\` (ReactNode) - The content displayed in the group header cell.
+- \`ariaLabel\` ((LabelData) => string) - (Optional) A function that provides an \`aria-label\` for the group header.",
+      "name": "groupDefinitions",
+      "optional": true,
+      "type": "ReadonlyArray<TableProps.GroupDefinition<T>>",
+    },
     {
       "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
 use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
@@ -42421,8 +42446,22 @@ Returns the current value of the input.",
           },
         },
         {
+          "description": "Returns column header cells from the table's header region.
+
+By default, returns all leaf-column headers (\`scope="col"\`).
+For tables without column grouping this is equivalent to the previous behavior.
+For tables with column grouping this excludes group header cells.",
           "name": "findColumnHeaders",
-          "parameters": [],
+          "parameters": [
+            {
+              "defaultValue": "{}",
+              "flags": {
+                "isOptional": false,
+              },
+              "name": "option",
+              "typeName": "{ groupId?: string | undefined; }",
+            },
+          ],
           "returnType": {
             "isNullable": false,
             "name": "Array",
@@ -42457,9 +42496,11 @@ Returns the current value of the input.",
           },
         },
         {
+          "description": "Returns the clickable sorting area of a column header.",
           "name": "findColumnSortingArea",
           "parameters": [
             {
+              "description": "1-based index of the column.",
               "flags": {
                 "isOptional": false,
               },
@@ -51721,8 +51762,22 @@ In this case, use findContentEditableElement() instead.",
           },
         },
         {
+          "description": "Returns column header cells from the table's header region.
+
+By default, returns all leaf-column headers (\`scope="col"\`).
+For tables without column grouping this is equivalent to the previous behavior.
+For tables with column grouping this excludes group header cells.",
           "name": "findColumnHeaders",
-          "parameters": [],
+          "parameters": [
+            {
+              "defaultValue": "{}",
+              "flags": {
+                "isOptional": false,
+              },
+              "name": "option",
+              "typeName": "{ groupId?: string | undefined; }",
+            },
+          ],
           "returnType": {
             "isNullable": false,
             "name": "MultiElementWrapper",
@@ -51752,9 +51807,11 @@ In this case, use findContentEditableElement() instead.",
           },
         },
         {
+          "description": "Returns the clickable sorting area of a column header.",
           "name": "findColumnSortingArea",
           "parameters": [
             {
+              "description": "1-based index of the column.",
               "flags": {
                 "isOptional": false,
               },

src/table/__integ__/resizable-columns-grouped.test.ts

@@ -0,0 +1,38 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+import createWrapper from '../../../lib/components/test-utils/selectors';
+
+const tableWrapper = createWrapper().findTable();
+const defaultScreen = { width: 1680, height: 800 };
+
+const setupTest = (testFn: (page: BasePageObject) => Promise<void>) => {
+  return useBrowser(async browser => {
+    const page = new BasePageObject(browser);
+    await browser.url('#/light/table/column-groups');
+    await page.setWindowSize(defaultScreen);
+    await testFn(page);
+  });
+};
+
+describe('Table - Grouped column resizing', () => {
+  test(
+    'group resizer changes group width on drag',
+    setupTest(async page => {
+      const groupResizerSelector = `${tableWrapper.toSelector()} thead th[scope="colgroup"] button`;
+      await expect(page.isExisting(groupResizerSelector)).resolves.toBe(true);
+      await page.dragAndDrop(groupResizerSelector, 50);
+    })
+  );
+
+  test(
+    'leaf column resizer works within grouped table',
+    setupTest(async page => {
+      const resizerSelector = tableWrapper.findColumnResizer(3).toSelector();
+      await expect(page.isExisting(resizerSelector)).resolves.toBe(true);
+      await page.dragAndDrop(resizerSelector, 30);
+    })
+  );
+});