fix(Table): vertical alignment for virtualized rows

gravity-ui · Dec 18, 2024 · 7663ad1 · 7663ad1
1 parent 2d28f81
commit 7663ad1
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 100 deletions.
diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss
@@ -31,27 +31,25 @@ $block: '.#{variables.$ns}styled-table';
     &__footer-cell {
         padding: var(--_--cell-padding);
         border-block-end: 1px solid var(--g-color-line-generic);
-    }
-
-    &__row {
-        &:last-of-type {
-            #{$block}__cell {
-                border-block-end: none;
-            }
-        }
 
         &_vertical-align {
             &_top {
-                vertical-align: top;
+                align-content: start;
             }
 
             &_center {
-                vertical-align: middle;
+                align-content: center;
             }
 
             &_bottom {
-                vertical-align: bottom;
+                align-content: end;
             }
         }
     }
+
+    &__row:last-of-type {
+        #{$block}__cell {
+            border-block-end: none;
+        }
+    }
 }
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -8,12 +8,16 @@ import type {TableSize} from './types';
 
 import './Table.scss';
 
+type VerticalAlignment = 'top' | 'center' | 'bottom';
+
 export interface TableProps<TData, TScrollElement extends Element | Window = HTMLDivElement>
     extends BaseTableProps<TData, TScrollElement> {
     /** Table size */
     size?: TableSize;
     /** Row vertical align */
-    verticalAlign?: 'top' | 'center' | 'bottom';
+    verticalAlign?: VerticalAlignment;
+    headerVerticalAlign?: VerticalAlignment;
+    footerVerticalAlign?: VerticalAlignment;
 }
 
 export const Table = React.forwardRef(
@@ -26,45 +30,53 @@ export const Table = React.forwardRef(
             rowClassName: rowClassNameProp,
             headerClassName,
             size = 'm',
-            verticalAlign = 'center',
+            verticalAlign = 'top',
+            headerVerticalAlign = 'top',
+            footerVerticalAlign = 'top',
             ...props
         }: TableProps<TData, TScrollElement>,
         ref: React.Ref<HTMLTableElement>,
     ) => {
         const cellClassName: TableProps<TData>['cellClassName'] = React.useMemo(() => {
+            const mod = {
+                'vertical-align': verticalAlign,
+            };
             if (typeof cellClassNameProp === 'function') {
-                return (...args) => b('cell', cellClassNameProp(...args));
+                return (...args) => b('cell', mod, cellClassNameProp(...args));
             }
 
-            return b('cell', cellClassNameProp);
-        }, [cellClassNameProp]);
+            return b('cell', mod, cellClassNameProp);
+        }, [cellClassNameProp, verticalAlign]);
 
         const headerCellClassName: TableProps<TData>['headerCellClassName'] = React.useMemo(() => {
+            const mod = {
+                'vertical-align': headerVerticalAlign,
+            };
             if (typeof headerCellClassNameProp === 'function') {
-                return (...args) => b('header-cell', headerCellClassNameProp(...args));
+                return (...args) => b('header-cell', mod, headerCellClassNameProp(...args));
             }
 
-            return b('header-cell', headerCellClassNameProp);
-        }, [headerCellClassNameProp]);
+            return b('header-cell', mod, headerCellClassNameProp);
+        }, [headerCellClassNameProp, headerVerticalAlign]);
 
         const footerCellClassName: TableProps<TData>['footerCellClassName'] = React.useMemo(() => {
+            const mod = {
+                'vertical-align': footerVerticalAlign,
+            };
             if (typeof footerCellClassNameProp === 'function') {
-                return (...args) => b('footer-cell', footerCellClassNameProp(...args));
+                return (...args) => b('footer-cell', mod, footerCellClassNameProp(...args));
             }
 
-            return b('footer-cell', footerCellClassNameProp);
-        }, [footerCellClassNameProp]);
+            return b('footer-cell', mod, footerCellClassNameProp);
+        }, [footerCellClassNameProp, footerVerticalAlign]);
 
         const rowClassName: TableProps<TData>['rowClassName'] = React.useMemo(() => {
-            const mod = {
-                'vertical-align': verticalAlign,
-            };
             if (typeof rowClassNameProp === 'function') {
-                return (...args) => b('row', mod, rowClassNameProp(...args));
+                return (...args) => b('row', rowClassNameProp(...args));
             }
 
-            return b('row', mod, rowClassNameProp);
-        }, [rowClassNameProp, verticalAlign]);
+            return b('row', rowClassNameProp);
+        }, [rowClassNameProp]);
 
         return (
             <BaseTable

diff --git a/src/components/Table/__stories__/Table.stories.tsx b/src/components/Table/__stories__/Table.stories.tsx
@@ -2,7 +2,6 @@ import type {Meta, StoryObj} from '@storybook/react';
 
 import {Table} from '../index';
 
-import {AlignmentStory} from './stories/AlignmentStory';
 import {DefaultStory} from './stories/DefaultStory';
 import {ReorderingStory} from './stories/ReorderingStory';
 import {ReorderingWithVirtualizationStory} from './stories/ReorderingWithVirtualizationStory';
@@ -30,16 +29,6 @@ export default meta;
 
 export const Default: StoryObj<typeof DefaultStory> = {
     render: DefaultStory,
-    args: {
-        verticalAlign: 'center',
-    },
-};
-
-export const Alignment: StoryObj<typeof AlignmentStory> = {
-    render: AlignmentStory,
-    args: {
-        verticalAlign: 'center',
-    },
 };
 
 export const SizeS: StoryObj<typeof SizeSStory> = {

diff --git a/src/components/Table/__stories__/stories/AlignmentStory.tsx b/src/components/Table/__stories__/stories/AlignmentStory.tsx
diff --git a/src/components/Table/__stories__/stories/VirtualizationStory.tsx b/src/components/Table/__stories__/stories/VirtualizationStory.tsx
@@ -2,12 +2,14 @@ import React from 'react';
 
 import {useRowVirtualizer, useTable} from '../../../../hooks';
 import {columns} from '../../../BaseTable/__stories__/constants/columns';
+import type {Item} from '../../../BaseTable/__stories__/types';
 import {generateData} from '../../../BaseTable/__stories__/utils';
 import {Table} from '../../index';
+import type {TableProps} from '../../index';
 
 const data = generateData(300);
 
-export const VirtualizationStory = () => {
+export const VirtualizationStory = (args: Omit<TableProps<Item>, 'table' | 'rowVirtualizer'>) => {
     const table = useTable({
         columns,
         data,
@@ -25,7 +27,7 @@ export const VirtualizationStory = () => {
 
     return (
         <div ref={containerRef} style={{height: '90vh', overflow: 'auto'}}>
-            <Table table={table} rowVirtualizer={rowVirtualizer} stickyHeader />
+            <Table {...args} table={table} rowVirtualizer={rowVirtualizer} stickyHeader />
         </div>
     );
 };