feat: Add option to stretch <Table> (#2116)

marigold-ui · May 30, 2022 · 16f1459 · 16f1459
1 parent 8b56d46
commit 16f1459
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 6 deletions.
diff --git a/.changeset/wet-onions-love.md b/.changeset/wet-onions-love.md
@@ -0,0 +1,6 @@
+---
+"@marigold/docs": minor
+"@marigold/components": minor
+---
+
+feat: Add option to stretch `<Table>`
diff --git a/docs/content/components/table.mdx b/docs/content/components/table.mdx
@@ -58,10 +58,11 @@ import { Table } from '@marigold/components';
 
 ## Props
 
-| Property                       | Type                           | Default | Description                                              |
-| :----------------------------- | :----------------------------- | :------ | :------------------------------------------------------- |
-| `selectionMode` (optional)     | `'none', 'single', 'multiple'` | `none`  | The type of selection that is allowed in the collection. |
-| `onSelectionChange` (optional) | `(keys: Selection) => any`     |         | Handler that is called when the selection changes.       |
+| Property                       | Type                           | Default  | Description                                              |
+| :----------------------------- | :----------------------------- | :------- | :------------------------------------------------------- |
+| `selectionMode` (optional)     | `'none', 'single', 'multiple'` | `'none'` | The type of selection that is allowed in the collection. |
+| `onSelectionChange` (optional) | `(keys: Selection) => any`     |          | Handler that is called when the selection changes.       |
+| `stretch` (optional)           | `boolean`                      | `false`  | Stretch table to fill the container                      |
 
 ## Examples
 

diff --git a/packages/components/src/Table/Table.stories.tsx b/packages/components/src/Table/Table.stories.tsx
@@ -24,6 +24,12 @@ export default {
       description: 'Focus Mode with Keyboard',
       defaultValue: 'row',
     },
+    stretch: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Stretch to fill the container',
+    },
   },
 } as Meta;
 

diff --git a/packages/components/src/Table/Table.test.tsx b/packages/components/src/Table/Table.test.tsx
@@ -272,3 +272,23 @@ test('sorting', () => {
   expect(sortedRows[2].textContent).toContain('Banana');
   expect(sortedRows[3].textContent).toContain('Apple');
 });
+
+test('allows to strecht to fit container', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Table aria-label="Streched table" stretch>
+        <Table.Header>
+          <Table.Column>Name</Table.Column>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Alice</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    </ThemeProvider>
+  );
+
+  const table = screen.getAllByRole(/grid/);
+  expect(table[0]).toHaveStyle(`width: 100%`);
+});
diff --git a/packages/components/src/Table/Table.tsx b/packages/components/src/Table/Table.tsx
@@ -44,11 +44,17 @@ export interface TableProps
     Omit<TableStateProps<object>, 'showSelectionCheckboxes'> {
   variant?: string;
   size?: string;
+  stretch?: boolean;
 }
 
 // Table Component
 // ---------------
-export const Table: Table = ({ variant, size, ...props }: TableProps) => {
+export const Table: Table = ({
+  variant,
+  size,
+  stretch,
+  ...props
+}: TableProps) => {
   const tableRef = useRef(null);
   const state = useTableState({
     ...props,
@@ -69,7 +75,16 @@ export const Table: Table = ({ variant, size, ...props }: TableProps) => {
 
   return (
     <TableContext.Provider value={{ state, styles }}>
-      <Box as="table" ref={tableRef} css={styles.table} {...gridProps}>
+      <Box
+        as="table"
+        ref={tableRef}
+        __baseCSS={{
+          borderCollapse: 'collapse',
+          width: stretch ? '100%' : undefined,
+        }}
+        css={styles.table}
+        {...gridProps}
+      >
         <TableHeader>
           {collection.headerRows.map(headerRow => (
             <TableHeaderRow key={headerRow.key} item={headerRow}>