feat(Table): add width property (#1907)

gravity-ui · Oct 18, 2024 · 7eb5e1e · 7eb5e1e
1 parent 0fcf6b8
commit 7eb5e1e
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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<I> extends QAProps {
     /** Data */
@@ -165,6 +167,7 @@ export interface TableProps<I> extends QAProps {
     className?: string;
     /** Adds horizontal padding for edge cells. */
     edgePadding?: boolean;
+    width?: TableWidth;
 }
 
 interface TableDefaultProps {
@@ -451,8 +454,9 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
     }
 
     private renderTable() {
+        const {width = 'auto'} = this.props;
         return (
-            <table ref={this.tableRef} className={b('table')}>
+            <table ref={this.tableRef} className={b('table', {width})}>
                 {this.renderHead()}
                 {this.renderBody()}
             </table>

diff --git 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<TableWidth>('max', 'auto'))('render with given "%s" width', (width) => {
+        render(<Table data={data} columns={columns} width={width} />);
+        const table = screen.getByRole('table');
+
+        expect(table).toHaveClass(`g-table__table_width_${width}`);
+    });
 
     test('render table with no data (default)', () => {
         const emptyText = 'No data';