fix: align checkbox when there is more than 1 line of text in any cell (

#1149)
gravity-ui · Nov 27, 2023 · 8011430 · 8011430
1 parent 950848a
commit 8011430
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/src/components/Table/__stories__/utils.tsx b/src/components/Table/__stories__/utils.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {withTableSelection} from '..';
 import {Table} from '../Table';
 import type {TableColumnConfig} from '../Table';
@@ -54,6 +56,19 @@ export const columns: TableColumnConfig<DataItem>[] = [
     {
         id: 'name',
         name: 'Name',
+        template(item, i) {
+            if (i % 2 === 0) {
+                return item.name;
+            }
+            const [name, surname] = item.name.split(' ');
+            return (
+                <div>
+                    {name}
+                    <br />
+                    {surname}
+                </div>
+            );
+        },
     },
     {
         id: 'city',

diff --git a/src/components/Table/hoc/withTableSelection/withTableSelection.scss b/src/components/Table/hoc/withTableSelection/withTableSelection.scss
@@ -7,13 +7,19 @@
     }
 
     &__selection-checkbox {
+        display: flex;
+        align-items: center;
         padding: inherit;
         border-bottom: none;
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
+
+        &_vertical-align_top {
+            align-items: start;
+        }
     }
 
     &__row_selected {

diff --git a/src/components/Table/hoc/withTableSelection/withTableSelection.tsx b/src/components/Table/hoc/withTableSelection/withTableSelection.tsx
@@ -103,7 +103,9 @@ export function withTableSelection<I extends TableDataItem, E extends {} = {}>(
                     checked={checked}
                     disabled={disabled}
                     onChange={handler}
-                    className={b('selection-checkbox')}
+                    className={b('selection-checkbox', {
+                        'vertical-align': this.props.verticalAlign,
+                    })}
                 />
             );
         }