feat(collection): Add table type to Collection UI primitive (#6665)

* feat(collection): Add table type to collection primitive

* chore(collection): Use partial type to avoid type parsing linter error

* chore(collection): Add changeset for adding `table` type to `Collection` UI primitive

Author: jvh-aws

.changeset/unlucky-otters-dress.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": minor
+---
+
+feat(collection): Add `table` type to `Collection` UI primitive

packages/react/src/primitives/Collection/Collection.tsx

@@ -16,8 +16,10 @@ import type {
   ElementType,
   GridCollectionProps,
   ListCollectionProps,
+  TableCollectionProps,
 } from '../types';
 import { getItemsAtPage, itemHasText, getPageCount } from './utils';
+import { Table, TableBody } from '../Table';
 
 const DEFAULT_PAGE_SIZE = 10;
 const TYPEAHEAD_DELAY_MS = 300;
@@ -41,6 +43,18 @@ const GridCollection = <Item,>({
   <Grid {...rest}>{Array.isArray(items) ? items.map(children) : null}</Grid>
 );
 
+const TableCollection = <Item,>({
+  children,
+  items,
+  tableHeader: TableHeader,
+  ...rest
+}: TableCollectionProps<Item>) => (
+  <Table {...rest}>
+    <TableHeader />
+    <TableBody>{Array.isArray(items) ? items.map(children) : null}</TableBody>
+  </Table>
+);
+
 const renderCollectionOrNoResultsFound = <Item,>(
   collection: React.JSX.Element | null,
   items: Item[],
@@ -114,6 +128,13 @@ export const Collection = <Item, Element extends ElementType>({
         items={items}
         {...rest}
       />
+    ) : type === 'table' ? (
+      <TableCollection
+        className={ComponentClassName.CollectionItems}
+        items={items}
+        tableHeader={(rest as Partial<TableCollectionProps<Item>>).tableHeader!}
+        {...rest}
+      />
     ) : null;
 
   return (

packages/react/src/primitives/Collection/__tests__/Collection.test.tsx

@@ -10,6 +10,7 @@ import { Flex } from '../../Flex';
 import { Text } from '../../Text';
 import { ComponentText } from '../../shared/constants';
 import { ComponentPropsToStylePropsMap } from '../../types';
+import { TableCell, TableHead, TableRow } from '../../Table';
 
 const emojis = [
   {
@@ -282,4 +283,45 @@ describe('Collection component', () => {
     const noResults = await screen.findByText(customText);
     expect(noResults).toBeDefined();
   });
+
+  it('should render table with table header when type is table', async () => {
+    const borderStyle = '1px solid red';
+    render(
+      <Collection
+        testId={testList}
+        type="table"
+        items={emojis}
+        border={borderStyle}
+        tableHeader={() => (
+          <TableRow>
+            <TableHead>Title</TableHead>
+            <TableHead>Emoji</TableHead>
+          </TableRow>
+        )}
+      >
+        {(item, _index) => (
+          <TableRow>
+            <TableCell>{item.title}</TableCell>
+            <TableCell>{item.emoji}</TableCell>
+          </TableRow>
+        )}
+      </Collection>
+    );
+
+    const collection = await screen.findByTestId(testList);
+    const items = getElementByClassName<HTMLDivElement>(
+      collection,
+      ComponentClassName.CollectionItems
+    );
+
+    expect(
+      items?.style.getPropertyValue(
+        kebabCase(ComponentPropsToStylePropsMap.border)
+      )
+    ).toBe(borderStyle);
+
+    const tdNode = items?.children[1].children[0].children[0];
+    expect(tdNode?.nodeName).toBe('TD');
+    expect(tdNode?.innerHTML).toBe('LOL');
+  });
 });

packages/react/src/primitives/types/collection.ts

@@ -81,6 +81,14 @@ export type ListCollectionProps<Item> = Omit<BaseFlexProps, 'children'> &
   CollectionBaseProps<Item>;
 export type GridCollectionProps<Item> = Omit<BaseGridProps, 'children'> &
   CollectionBaseProps<Item>;
+export type TableCollectionProps<Item> = Omit<BaseGridProps, 'children'> &
+  CollectionBaseProps<Item> & {
+    /**
+     * @description
+     * Custom table header component to be rendered at the top of the table
+     */
+    tableHeader: () => React.ReactNode;
+  };
 
 /**
  * Omits `React.ReactNode` as children to prevent intersection type for `children` of
@@ -98,6 +106,7 @@ export type BaseCollectionProps<
   (
     | ReplaceChildren<{ type: 'list' } & ListCollectionProps<Item>, Item>
     | ReplaceChildren<{ type: 'grid' } & GridCollectionProps<Item>, Item>
+    | ReplaceChildren<{ type: 'table' } & TableCollectionProps<Item>, Item>
   );
 
 export type CollectionProps<