From d775f72c1b14ee79a856ea2d2c699d61792093ed Mon Sep 17 00:00:00 2001 From: Nathnael Dereje Date: Wed, 10 Jun 2026 15:02:19 +0200 Subject: [PATCH 1/5] fix: use higher-contrast border color for sticky table header divider Aligns the sticky header border with the non-sticky variant to ensure consistent contrast across all table configurations. --- src/table/header-cell/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/table/header-cell/styles.scss b/src/table/header-cell/styles.scss index efaeb5caba..b55faad5f9 100644 --- a/src/table/header-cell/styles.scss +++ b/src/table/header-cell/styles.scss @@ -71,7 +71,7 @@ $cell-horizontal-padding: awsui.$space-scaled-l; } &-sticky { - border-block-end: awsui.$border-table-sticky-width solid awsui.$color-border-divider-default; + border-block-end: awsui.$border-table-sticky-width solid awsui.$color-border-divider-interactive-default; } &-stuck:not(.header-cell-variant-full-page) { border-block-end-color: transparent; From 52e87d51f1bcafa20c917148c88c6a1af41761ae Mon Sep 17 00:00:00 2001 From: Nathnael Dereje Date: Wed, 10 Jun 2026 15:17:32 +0200 Subject: [PATCH 2/5] chore: add CollectionPreferences to column-groups dev page Allows toggling column visibility, grouping, wrap lines, striped rows, and content density to better exercise grouped tables in dev/manual testing. --- pages/table/column-groups.page.tsx | 46 ++++++++++++++++++++++++++++-- 1 file changed, 44 insertions(+), 2 deletions(-) diff --git a/pages/table/column-groups.page.tsx b/pages/table/column-groups.page.tsx index 34327f6175..5a4a15dd0f 100644 --- a/pages/table/column-groups.page.tsx +++ b/pages/table/column-groups.page.tsx @@ -6,6 +6,7 @@ import { useCollection } from '@cloudscape-design/collection-hooks'; import { Box, + CollectionPreferences, FormField, Header, Input, @@ -215,7 +216,7 @@ type DemoContext = React.Context< lastSticky: number; wrapLines: boolean; stripedRows: boolean; - contentDensity: string; + contentDensity: 'comfortable' | 'compact' | undefined; enableKeyboardNavigation: boolean; loading: boolean; empty: boolean; @@ -413,7 +414,7 @@ export default function ColumnGroupsPage() { enableKeyboardNavigation={enableKeyboardNavigation} wrapLines={wrapLines} stripedRows={stripedRows} - contentDensity={contentDensity as 'comfortable' | 'compact'} + contentDensity={contentDensity} cellVerticalAlign={cellVerticalAlign as 'middle' | 'top'} sortingDisabled={sortingDisabled} loading={loading} @@ -433,6 +434,47 @@ export default function ColumnGroupsPage() { /> } pagination={} + preferences={ + { + if (detail.contentDisplay) { + setColumnDisplay([...detail.contentDisplay]); + } + setUrlParams({ + wrapLines: detail.wrapLines ?? false, + stripedRows: detail.stripedRows ?? false, + contentDensity: detail.contentDensity ?? 'comfortable', + }); + }} + wrapLinesPreference={{}} + stripedRowsPreference={{}} + contentDensityPreference={{}} + contentDisplayPreference={{ + options: [ + { id: 'id', label: 'Instance ID', alwaysVisible: true }, + { id: 'name', label: 'Name' }, + { id: 'type', label: 'Type' }, + { id: 'az', label: 'AZ' }, + { id: 'state', label: 'State' }, + { id: 'cpu', label: 'CPU (%)' }, + { id: 'memory', label: 'Memory (%)' }, + { id: 'netIn', label: 'Network in' }, + { id: 'netOut', label: 'Network out' }, + { id: 'cost', label: 'Cost ($)' }, + ], + groups: + groupingPreset === 'flat' + ? undefined + : [ + { id: 'config', label: 'Configuration' }, + { id: 'performance', label: 'Performance' }, + { id: 'network', label: 'Network' }, + { id: 'metrics', label: 'Metrics' }, + ], + }} + /> + } empty={No instances} /> From 94df75d87691d71150ad10c19cde6085b08f3f00 Mon Sep 17 00:00:00 2001 From: Nathnael Dereje Date: Wed, 10 Jun 2026 16:21:48 +0200 Subject: [PATCH 3/5] chore: type cellVerticalAlign with TableProps.VerticalAlign --- pages/table/column-groups.page.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/pages/table/column-groups.page.tsx b/pages/table/column-groups.page.tsx index 5a4a15dd0f..9e97b9eba6 100644 --- a/pages/table/column-groups.page.tsx +++ b/pages/table/column-groups.page.tsx @@ -220,7 +220,7 @@ type DemoContext = React.Context< enableKeyboardNavigation: boolean; loading: boolean; empty: boolean; - cellVerticalAlign: string; + cellVerticalAlign?: TableProps.VerticalAlign; sortingDisabled: boolean; }> >; @@ -321,7 +321,9 @@ export default function ColumnGroupsPage() { { value: 'middle', label: 'middle' }, { value: 'top', label: 'top' }, ]} - onChange={({ detail }) => setUrlParams({ cellVerticalAlign: detail.selectedOption.value! })} + onChange={({ detail }) => + setUrlParams({ cellVerticalAlign: detail.selectedOption.value as TableProps.VerticalAlign }) + } ariaLabel="Cell vertical align" /> @@ -415,7 +417,7 @@ export default function ColumnGroupsPage() { wrapLines={wrapLines} stripedRows={stripedRows} contentDensity={contentDensity} - cellVerticalAlign={cellVerticalAlign as 'middle' | 'top'} + cellVerticalAlign={cellVerticalAlign} sortingDisabled={sortingDisabled} loading={loading} loadingText="Loading..." From 9e4095cd798a973a39f460b253f4b6e32c689cb9 Mon Sep 17 00:00:00 2001 From: Nathnael Dereje Date: Wed, 10 Jun 2026 16:36:46 +0200 Subject: [PATCH 4/5] chore: Destroying evidence --- pages/table/column-groups.page.tsx | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/pages/table/column-groups.page.tsx b/pages/table/column-groups.page.tsx index 9e97b9eba6..e314f6201d 100644 --- a/pages/table/column-groups.page.tsx +++ b/pages/table/column-groups.page.tsx @@ -23,10 +23,6 @@ import { import AppContext, { AppContextType } from '../app/app-context'; import { SimplePage } from '../app/templates'; -// ============================================================================ -// Data -// ============================================================================ - interface Instance { id: string; name: string; @@ -57,10 +53,6 @@ const allInstances: Instance[] = Array.from({ length: 35 }, (_, i) => ({ cost: +(Math.random() * 500).toFixed(2), })); -// ============================================================================ -// Column & group definitions -// ============================================================================ - const columnDefinitions: TableProps.ColumnDefinition[] = [ { id: 'id', @@ -87,10 +79,6 @@ const groupDefinitions: TableProps.GroupDefinition[] = [ { id: 'metrics', header: 'Metrics' }, ]; -// ============================================================================ -// Column display presets -// ============================================================================ - type GroupingPreset = 'flat' | 'single-level' | 'nested' | 'single-child-groups'; const columnDisplayPresets: Record = { @@ -200,10 +188,6 @@ const presetOptions = [ { value: 'flat', label: 'Without grouping' }, ]; -// ============================================================================ -// Page component -// ============================================================================ - type DemoContext = React.Context< AppContextType<{ groupingPreset: GroupingPreset; From 9aa187087fec2cf4a77e30f7af4f2549f5c81a59 Mon Sep 17 00:00:00 2001 From: Nathnael Dereje Date: Wed, 10 Jun 2026 16:51:18 +0200 Subject: [PATCH 5/5] chore: Remove controls added due to 2 separate PR for collection-pref and table These were added coz there was no way to control these without collection prefs, and the 2 PRs were raised separately but now we merged them so can be done inside the collection-prefs --- pages/table/column-groups.page.tsx | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/pages/table/column-groups.page.tsx b/pages/table/column-groups.page.tsx index e314f6201d..22bb3e63b0 100644 --- a/pages/table/column-groups.page.tsx +++ b/pages/table/column-groups.page.tsx @@ -200,7 +200,6 @@ type DemoContext = React.Context< lastSticky: number; wrapLines: boolean; stripedRows: boolean; - contentDensity: 'comfortable' | 'compact' | undefined; enableKeyboardNavigation: boolean; loading: boolean; empty: boolean; @@ -222,7 +221,6 @@ export default function ColumnGroupsPage() { lastSticky = 0, wrapLines = false, stripedRows = false, - contentDensity = 'comfortable', enableKeyboardNavigation = true, loading = false, empty = false, @@ -350,18 +348,6 @@ export default function ColumnGroupsPage() { setUrlParams({ stickyHeader: detail.checked })}> Sticky header - setUrlParams({ wrapLines: detail.checked })}> - Wrap lines - - setUrlParams({ stripedRows: detail.checked })}> - Striped rows - - setUrlParams({ contentDensity: detail.checked ? 'compact' : 'comfortable' })} - > - Compact mode - setUrlParams({ enableKeyboardNavigation: detail.checked })} @@ -400,7 +386,6 @@ export default function ColumnGroupsPage() { enableKeyboardNavigation={enableKeyboardNavigation} wrapLines={wrapLines} stripedRows={stripedRows} - contentDensity={contentDensity} cellVerticalAlign={cellVerticalAlign} sortingDisabled={sortingDisabled} loading={loading} @@ -422,7 +407,7 @@ export default function ColumnGroupsPage() { pagination={} preferences={ { if (detail.contentDisplay) { setColumnDisplay([...detail.contentDisplay]); @@ -430,12 +415,10 @@ export default function ColumnGroupsPage() { setUrlParams({ wrapLines: detail.wrapLines ?? false, stripedRows: detail.stripedRows ?? false, - contentDensity: detail.contentDensity ?? 'comfortable', }); }} wrapLinesPreference={{}} stripedRowsPreference={{}} - contentDensityPreference={{}} contentDisplayPreference={{ options: [ { id: 'id', label: 'Instance ID', alwaysVisible: true },