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; }