feat(Table): use <colgroup/> to set cells width (#831)

gravity-ui · Dec 7, 2023 · c33b330 · c33b330
1 parent 8851ac8
commit c33b330
Showing 1 changed file with 27 additions and 2 deletions.
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -336,6 +336,23 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
         );
     }
 
+    private renderColgroup() {
+        const {columns} = this.props;
+        const {columnsStyles} = this.state;
+
+        if (!columnsStyles.length) {
+            return null;
+        }
+
+        return (
+            <colgroup>
+                {columnsStyles.map(({width}, index) => (
+                    <col style={{width}} key={columns[index].id} />
+                ))}
+            </colgroup>
+        );
+    }
+
     private renderHead() {
         const {columns, edgePadding, wordWrap} = this.props;
         const {columnsStyles} = this.state;
@@ -351,7 +368,7 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
                             <th
                                 key={id}
                                 ref={this.state.columnHeaderRefs[index]}
-                                style={columnsStyles[index]}
+                                style={this.getCellStyles(columnsStyles[index])}
                                 className={b(
                                     'cell',
                                     {
@@ -386,6 +403,7 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
     private renderTable() {
         return (
             <table ref={this.tableRef} className={b('table')}>
+                {this.renderColgroup()}
                 {this.renderHead()}
                 {this.renderBody()}
             </table>
@@ -445,7 +463,7 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
                     return (
                         <td
                             key={id}
-                            style={columnsStyles[colIndex]}
+                            style={this.getCellStyles(columnsStyles[colIndex])}
                             className={b(
                                 'cell',
                                 {
@@ -535,6 +553,13 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
         return style;
     }
 
+    private getCellStyles({
+        width: _width,
+        ...styles
+    }: React.CSSProperties): React.CSSProperties | undefined {
+        return Object.keys(styles).length ? styles : undefined;
+    }
+
     private handleScrollContainerMouseenter = () => {
         this.setState({activeScrollElement: 'scrollContainer'});
     };