feat: Table Column Groups Table

[NathanZlion]

Description

Add Table Column Grouping Feature support for Table Component.

Related links, issue AWSUI-9594, if available: n/a

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

❌ Patch coverage is 95.28487% with 24 lines in your changes missing coverage. Please review.
✅ Project coverage is 97.39%. Comparing base (f493264) to head (b0a1437).
⚠️ Report is 28 commits behind head on main.

Files with missing lines	Patch %	Lines
src/table/thead.tsx	91.79%	11 Missing ⚠️
src/table/use-column-widths.tsx	89.65%	6 Missing ⚠️
src/table/table-role/utils.ts	94.11%	3 Missing ⚠️
src/table/column-groups/utils.ts	99.20%	1 Missing ⚠️
src/table/header-cell/group-header-cell.tsx	95.83%	1 Missing ⚠️
src/table/sticky-scrolling.ts	0.00%	1 Missing ⚠️
src/table/table-role/grid-navigation.tsx	75.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4482      +/-   ##
==========================================
- Coverage   97.41%   97.39%   -0.03%     
==========================================
  Files         933      942       +9     
  Lines       29595    30094     +499     
  Branches    10757    10969     +212     
==========================================
+ Hits        28831    29309     +478     
- Misses        716      778      +62     
+ Partials       48        7      -41     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[pan-kot]

why is this string | number now?

[NathanZlion]

components/src/table/utils.ts

Lines 30 to 32 in 1d90d18

	export const getColumnKey = <T>(column: TableProps.ColumnDefinition<T>, index: number) => {
	return column.id || index;
	};

The getColumnKey returns column.id || index when a column definition doesn't have an explicit id, it falls back to the numeric array index.

The column groups code path (useColumnGroups > calculateHierarchyTree > getVisibleColumnDefinitions), which previously only accepted string.

components/src/table/column-groups/use-column-groups.tsx

Lines 10 to 22 in 1d90d18

	export function useColumnGroups<T>(
	columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<T>>,
	groupDefinitions?: ReadonlyArray<TableProps.GroupDefinition>,
	visibleColumns?: Set<string>,
	columnDisplay?: ReadonlyArray<TableProps.ColumnDisplayProperties>
	) {
	return useMemo(() => {
	const visibleIds = visibleColumns
	? Array.from(visibleColumns)
	: columnDefinitions.map((col, idx) => getColumnKey(col, idx));
	const layout = calculateHierarchyTree(columnDefinitions, visibleIds, groupDefinitions ?? [], columnDisplay);

If it's okay I could just cast the type only in the useColumnGroups, and we din't have to do all the | number in all the props.

    const visibleIds = visibleColumns
      ? Array.from(visibleColumns)
      : columnDefinitions.map((col, idx) => getColumnKey(col, idx).toString());

I'm fine with both

[pan-kot]

We have some unit tests for column widths here: src/table/tests/columns-width.test.tsx

Can these tests be extended to support the groups use cases?

[pan-kot]

what are "leaf ids" here - is that columns ids or can it be groups, too?

[NathanZlion]

It's a column only, I will rename the leaf to colmn to make it less confusing

[pan-kot]

Will this create an inconsistent look? I think the reason we have 'lavel-top' is to ensure the selection element is at the top of the cell when the column headers are multiline (with wrap-lines: true). Now, with col groups + wrap-lines it will look different.