feat(Table): get rid of gravity usage in the base table (#17)

src/components/SortIndicator/SortIndicator.scss

@@ -1,20 +1,25 @@
 @use '../variables';
 
 $block: '.#{variables.$ns}sort-indicator';
+$blockTable: '.#{variables.$ns}table';
 
 #{$block} {
     display: inline-flex;
-    align-items: center;
-
-    transform: rotate(180deg);
+    margin-inline-start: 4px;
+    vertical-align: middle;
+    transform: rotate(0);
 
     color: var(--g-color-text-hint);
 
     &_invisible {
         opacity: 0;
+
+        #{$blockTable}__header-cell:hover & {
+            opacity: 1;
+        }
     }
 
     &_order_asc {
-        transform: rotate(0);
+        transform: rotate(180deg);
     }
 }

src/components/Table/Table.scss

@@ -14,17 +14,9 @@ $block: '.#{variables.$ns}table';
     &__row {
         &_interactive {
             cursor: pointer;
-
-            &:hover {
-                background-color: var(--g-color-base-generic);
-            }
         }
     }
 
-    &__header {
-        background: var(--g-color-base-background);
-    }
-
     &__cell,
     &__header-cell {
         height: inherit;
@@ -36,10 +28,6 @@ $block: '.#{variables.$ns}table';
         font-weight: normal;
     }
 
-    &__sort-indicator {
-        margin-inline-start: var(--g-spacing-1);
-    }
-
     &__header-cell {
         position: relative;
 
@@ -48,39 +36,37 @@ $block: '.#{variables.$ns}table';
         &_sortable {
             cursor: pointer;
             user-select: none;
-
-            &:hover {
-                #{$block}__sort-indicator {
-                    opacity: 1;
-                }
-            }
         }
 
         &:hover {
             #{$block}__resizer {
                 opacity: 1;
             }
         }
-
-        &_wide {
-        }
     }
 
-    &__group-title-wrapper {
+    &__group-title {
         position: sticky;
         inset-inline-start: 0;
-        padding: var(--g-spacing-1) 0;
+        margin: 0;
     }
 
-    &__group-title {
-        margin: 0;
+    &__group-title-arrow {
+        display: inline-block;
+        vertical-align: middle;
+        transform: rotate(-90deg);
+        transition: transform 0.1s ease-out;
+
+        &_down {
+            transform: rotate(0);
+        }
     }
 
     &__group-expand-button {
         appearance: none;
 
         display: flex;
-        gap: var(--g-spacing-2);
+        gap: 8px;
         padding: 0;
         width: 100%;
 
@@ -92,15 +78,8 @@ $block: '.#{variables.$ns}table';
 
     &__group-title-content {
         display: inline-flex;
-        gap: var(--g-spacing-1);
-
-        font-size: var(--g-text-body-2-font-size);
+        gap: 4px;
         font-weight: 500;
-        line-height: var(--g-text-body-2-line-height);
-    }
-
-    &__group-total {
-        color: var(--g-color-text-secondary);
     }
 
     &__resizer {

src/components/__stories__/ColumnPinningDemo.classname.ts

@@ -1,3 +1,3 @@
-import {block} from '../../utils';
+import {cn} from '../../utils';
 
-export const cnColumnPinningDemo = block('column-pinning-demo');
+export const cnColumnPinningDemo = cn('column-pinning-demo');

src/components/__stories__/ColumnPinningDemo.scss

@@ -1,8 +1,4 @@
-@use '../variables';
-
-$block: '.#{variables.$ns}column-pinning-demo';
-
-#{$block} {
+.column-pinning-demo {
     --default-border: 1px solid var(--g-color-line-generic);
 
     width: 600px;

src/components/__stories__/GroupingDemo.classname.ts

@@ -0,0 +1,3 @@
+import {cn} from '../../utils';
+
+export const cnGroupingDemo = cn('grouping-demo');

src/components/__stories__/GroupingDemo.scss

@@ -0,0 +1,5 @@
+.grouping-demo {
+    .gt-table__group-total {
+        color: var(--g-color-text-secondary);
+    }
+}

src/components/__stories__/GroupingDemo.tsx

@@ -5,9 +5,12 @@ import type {ExpandedState, Row} from '@tanstack/react-table';
 import {useTable} from '../../hooks';
 import {Table} from '../Table';
 
+import {cnGroupingDemo} from './GroupingDemo.classname';
 import type {GroupOrItem} from './constants/grouping';
 import {columns, data} from './constants/grouping';
 
+import './GroupingDemo.scss';
+
 const checkIsGroupRow = (row: Row<GroupOrItem>) => 'items' in row.original;
 const getGroupTitle = (row: Row<GroupOrItem>) => row.getValue<string>('name');
 
@@ -26,5 +29,12 @@ export const GroupingDemo = () => {
         checkIsGroupRow,
     });
 
-    return <Table table={table} checkIsGroupRow={checkIsGroupRow} getGroupTitle={getGroupTitle} />;
+    return (
+        <Table
+            className={cnGroupingDemo()}
+            table={table}
+            checkIsGroupRow={checkIsGroupRow}
+            getGroupTitle={getGroupTitle}
+        />
+    );
 };

src/components/__stories__/GroupingDemo2.tsx

@@ -5,10 +5,13 @@ import type {ExpandedState, Row} from '@tanstack/react-table';
 import {useTable} from '../../hooks';
 import {Table} from '../Table';
 
+import {cnGroupingDemo} from './GroupingDemo.classname';
 import {columns} from './constants/columns';
 import type {Item} from './types';
 import {generateData} from './utils';
 
+import './GroupingDemo.scss';
+
 const data = generateData(300);
 const grouping: Array<keyof Item> = ['status', 'age'];
 
@@ -31,5 +34,12 @@ export const GroupingDemo2 = () => {
         checkIsGroupRow,
     });
 
-    return <Table table={table} checkIsGroupRow={checkIsGroupRow} getGroupTitle={getGroupTitle} />;
+    return (
+        <Table
+            className={cnGroupingDemo()}
+            table={table}
+            checkIsGroupRow={checkIsGroupRow}
+            getGroupTitle={getGroupTitle}
+        />
+    );
 };

src/components/__stories__/GroupingWithSelectionDemo.tsx

@@ -6,9 +6,11 @@ import {defaultSelectionColumn} from '../../constants';
 import {useTable} from '../../hooks';
 import {Table} from '../Table';
 
+import {cnGroupingDemo} from './GroupingDemo.classname';
 import type {GroupOrItem} from './constants/grouping';
 import {data, columns as originalColumns} from './constants/grouping';
 
+import './GroupingDemo.scss';
 const columns: ColumnDef<GroupOrItem>[] = [
     defaultSelectionColumn as ColumnDef<GroupOrItem>,
     ...originalColumns,
@@ -37,5 +39,12 @@ export const GroupingWithSelectionDemo = () => {
         checkIsGroupRow,
     });
 
-    return <Table table={table} checkIsGroupRow={checkIsGroupRow} getGroupTitle={getGroupTitle} />;
+    return (
+        <Table
+            className={cnGroupingDemo()}
+            table={table}
+            checkIsGroupRow={checkIsGroupRow}
+            getGroupTitle={getGroupTitle}
+        />
+    );
 };

src/components/__stories__/HeaderGroupsDemo.classname.ts

@@ -1,3 +1,3 @@
-import {cn} from '@bem-react/classname';
+import {cn} from '../../utils';
 
 export const cnHeaderGroupsDemo = cn('header-groups-demo');

src/components/__stories__/TreeWithGroupsDemo.tsx

@@ -5,9 +5,12 @@ import type {ExpandedState, Row} from '@tanstack/react-table';
 import {useTable} from '../../hooks';
 import {Table} from '../Table';
 
+import {cnGroupingDemo} from './GroupingDemo.classname';
 import type {TreeGroupItem} from './constants/tree';
 import {groupsColumns, groupsData} from './constants/tree';
 
+import './GroupingDemo.scss';
+
 const checkIsGroupRow = (row: Row<TreeGroupItem>) => 'items' in row.original;
 const getGroupTitle = (row: Row<TreeGroupItem>) => row.getValue<string>('name');
 
@@ -26,5 +29,12 @@ export const TreeWithGroupsDemo = () => {
         checkIsGroupRow,
     });
 
-    return <Table table={table} checkIsGroupRow={checkIsGroupRow} getGroupTitle={getGroupTitle} />;
+    return (
+        <Table
+            className={cnGroupingDemo()}
+            table={table}
+            checkIsGroupRow={checkIsGroupRow}
+            getGroupTitle={getGroupTitle}
+        />
+    );
 };

src/components/__stories__/VirtualizationDemo.classname.ts

@@ -0,0 +1,3 @@
+import {cn} from '../../utils';
+
+export const cnVirtualizationDemo = cn('virtualization-demo');

src/components/__stories__/VirtualizationDemo.scss

@@ -0,0 +1,5 @@
+.virtualization-demo {
+    &__header {
+        background: var(--g-color-base-background);
+    }
+}

src/components/__stories__/VirtualizationDemo.tsx

@@ -3,9 +3,12 @@ import React from 'react';
 import {useRowVirtualizer, useTable} from '../../hooks';
 import {Table} from '../Table';
 
+import {cnVirtualizationDemo} from './VirtualizationDemo.classname';
 import {columns} from './constants/columns';
 import {generateData} from './utils';
 
+import './VirtualizationDemo.scss';
+
 const data = generateData(300);
 
 export const VirtualizationDemo = () => {
@@ -26,7 +29,12 @@ export const VirtualizationDemo = () => {
 
     return (
         <div ref={containerRef} style={{height: '90vh', overflow: 'auto'}}>
-            <Table table={table} rowVirtualizer={rowVirtualizer} />
+            <Table
+                table={table}
+                rowVirtualizer={rowVirtualizer}
+                className={cnVirtualizationDemo()}
+                headerClassName={cnVirtualizationDemo('header')}
+            />
         </div>
     );
 };

src/components/__stories__/WindowVirtualizationDemo.tsx

@@ -3,9 +3,12 @@ import React from 'react';
 import {useTable, useWindowRowVirtualizer} from '../../hooks';
 import {Table} from '../Table';
 
+import {cnVirtualizationDemo} from './VirtualizationDemo.classname';
 import {columns} from './constants/columns';
 import {generateData} from './utils';
 
+import './VirtualizationDemo.scss';
+
 const data = generateData(300);
 
 export const WindowVirtualizationDemo = () => {
@@ -21,5 +24,12 @@ export const WindowVirtualizationDemo = () => {
         overscan: 5,
     });
 
-    return <Table table={table} rowVirtualizer={rowVirtualizer} />;
+    return (
+        <Table
+            table={table}
+            rowVirtualizer={rowVirtualizer}
+            className={cnVirtualizationDemo()}
+            headerClassName={cnVirtualizationDemo('header')}
+        />
+    );
 };

src/components/__stories__/cells/ColumnPinningHeaderCell.tsx

@@ -2,18 +2,16 @@ import React from 'react';
 
 import type {HeaderContext} from '@tanstack/react-table';
 
-import type {HeaderCellProps} from '../../HeaderCell';
+import {cnColumnPinningDemo} from '../ColumnPinningDemo.classname';
 
 interface ColumnPinningHeaderCellProps<TData> {
     info: HeaderContext<TData, unknown>;
     value: string;
-    className?: HeaderCellProps<TData, unknown>['className'];
 }
 
 export const ColumnPinningHeaderCell = <TData,>({
     value,
     info,
-    className,
 }: ColumnPinningHeaderCellProps<TData>) => {
     const canPin = info.column.getCanPin();
 
@@ -34,7 +32,7 @@ export const ColumnPinningHeaderCell = <TData,>({
     };
 
     return (
-        <div className={className}>
+        <div className={cnColumnPinningDemo('header-cell')}>
             <div>{value}</div>
             {canPin && (
                 <div>