diff --git a/src/components/Table/README.md b/src/components/Table/README.md index 4266021d67..a23093c683 100644 --- a/src/components/Table/README.md +++ b/src/components/Table/README.md @@ -41,6 +41,7 @@ Additional functionality is enabled via HOCs: | edgePadding | Adds horizontal padding for edge cells | `boolean` | | | stickyHorizontalScroll | A horizontal sticky scroll in a table. NB: A table cannot have a fixed height and a sticky scroll at the same time. A sticky scroll will not work if the table has an overflow. | `boolean` | `false` | | stickyHorizontalScrollBreakpoint | The threshold that the parent block should reach before making a scroll sticky. This is useful in the console, for example, when the groupActions bar closes the scroll. | `number` | `0` | +| `width` | Table width | `"auto"` `"max"` | "auto" | ### DescriptorType diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss index a14411c0b1..6a63232a32 100644 --- a/src/components/Table/Table.scss +++ b/src/components/Table/Table.scss @@ -47,6 +47,10 @@ border-spacing: 0; // fix border disappear in Firefox: border-collapse: separate; + + &_width_max { + width: 100%; + } } &__cell { diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index b5eb92cd51..284ff0020d 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -92,6 +92,8 @@ export interface DescriptorType { disabled?: boolean; } +export type TableWidth = 'auto' | 'max'; + // TODO: Replace @default in props description with defaultProps in order to work with Storybook. export interface TableProps extends QAProps { /** Data */ @@ -165,6 +167,7 @@ export interface TableProps extends QAProps { className?: string; /** Adds horizontal padding for edge cells. */ edgePadding?: boolean; + width?: TableWidth; } interface TableDefaultProps { @@ -451,8 +454,9 @@ export class Table> extends Rea } private renderTable() { + const {width = 'auto'} = this.props; return ( - +
{this.renderHead()} {this.renderBody()}
diff --git a/src/components/Table/__tests__/Table.test.tsx b/src/components/Table/__tests__/Table.test.tsx index b04c9e0996..60b580eb2a 100644 --- a/src/components/Table/__tests__/Table.test.tsx +++ b/src/components/Table/__tests__/Table.test.tsx @@ -3,7 +3,7 @@ import React from 'react'; import userEvent from '@testing-library/user-event'; import {render, screen, within} from '../../../../test-utils/utils'; -import type {TableColumnConfig, TableProps} from '../Table'; +import type {TableColumnConfig, TableProps, TableWidth} from '../Table'; import {Table} from '../Table'; import type {DataItem} from './utils'; @@ -34,6 +34,12 @@ describe('Table', () => { }); }, ); + test.each(new Array('max', 'auto'))('render with given "%s" width', (width) => { + render(); + const table = screen.getByRole('table'); + + expect(table).toHaveClass(`g-table__table_width_${width}`); + }); test('render table with no data (default)', () => { const emptyText = 'No data';