diff --git a/pages/table/stacked-and-container-variant.page.tsx b/pages/table/stacked-and-container-variant.page.tsx
new file mode 100644
index 0000000000..55cf1b0c5e
--- /dev/null
+++ b/pages/table/stacked-and-container-variant.page.tsx
@@ -0,0 +1,54 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import Grid from '~components/grid';
+import Header from '~components/header';
+import Table, { TableProps } from '~components/table';
+
+import ScreenshotArea from '../utils/screenshot-area';
+import { generateItems } from './generate-data';
+import { columnsConfig } from './shared-configs';
+
+const tableItems = generateItems(6);
+
+export default () => {
+ return (
+
+ Stacked and container variants
+
+ {/* These two should look identical */}
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const ExampleTable = ({ variant }: { variant: TableProps.Variant }) => {
+ const [selectedItems, setSelectedItems] = useState([tableItems[tableItems.length - 1]]);
+
+ return (
+ setSelectedItems(detail.selectedItems)}
+ selectedItems={selectedItems}
+ columnDefinitions={columnsConfig}
+ items={tableItems}
+ selectionType="multi"
+ header={Table with variant {variant}}
+ ariaLabels={{
+ selectionGroupLabel: 'Items selection',
+ allItemsSelectionLabel: () => 'select all',
+ itemSelectionLabel: (selection, item) => item.id,
+ }}
+ />
+ );
+};
diff --git a/src/table/styles.scss b/src/table/styles.scss
index 2fe959c372..1462b7577c 100644
--- a/src/table/styles.scss
+++ b/src/table/styles.scss
@@ -76,6 +76,7 @@
padding-inline: awsui.$space-table-horizontal;
}
}
+ &.variant-stacked:not(.has-footer),
&.variant-container:not(.has-footer) {
padding-block-end: awsui.$space-table-content-bottom;
}