feat(Table): base border/font design

src/components/Table/Table.classname.ts

@@ -0,0 +1,3 @@
+import {block} from '../../utils';
+
+export const b = block('styled-table');

src/components/Table/Table.scss

@@ -0,0 +1,25 @@
+@use '@gravity-ui/uikit/styles/mixins';
+@use '../variables';
+
+$block: '.#{variables.$ns}styled-table';
+
+#{$block} {
+    &__header {
+        background: var(--g-color-base-background);
+    }
+
+    &__cell {
+        @include mixins.text-body-1();
+    }
+
+    &__header-cell {
+        @include mixins.text-subheader-1();
+    }
+
+    &__cell,
+    &__header-cell,
+    &__footer-cell {
+        padding: 11px var(--g-spacing-2) 10px;
+        border-block-end: 1px solid var(--g-color-line-generic);
+    }
+}

src/components/Table/Table.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import {BaseTable} from '../BaseTable';
+import type {BaseTableProps} from '../BaseTable';
+
+import {b} from './Table.classname';
+
+import './Table.scss';
+
+export interface TableProps<TData, TScrollElement extends Element | Window = HTMLDivElement>
+    extends BaseTableProps<TData, TScrollElement> {}
+
+export const Table = React.forwardRef(
+    <TData, TScrollElement extends Element | Window = HTMLDivElement>(
+        {
+            className,
+            cellClassName: cellClassNameProp,
+            footerCellClassName,
+            headerCellClassName: headerCellClassNameProp,
+            headerClassName,
+            ...props
+        }: TableProps<TData, TScrollElement>,
+        ref: React.Ref<HTMLTableElement>,
+    ) => {
+        const cellClassName: TableProps<TData>['cellClassName'] = React.useMemo(() => {
+            if (typeof cellClassNameProp === 'function') {
+                return (...params) => b('cell', cellClassNameProp(...params));
+            }
+            return b('cell', cellClassNameProp);
+        }, [cellClassNameProp]);
+
+        const headerCellClassName: TableProps<TData>['headerCellClassName'] = React.useMemo(() => {
+            if (typeof headerCellClassNameProp === 'function') {
+                return (...params) => b('header-cell', headerCellClassNameProp(...params));
+            }
+            return b('header-cell', headerCellClassNameProp);
+        }, [headerCellClassNameProp]);
+
+        return (
+            <BaseTable
+                ref={ref}
+                className={b(null, className)}
+                cellClassName={cellClassName}
+                footerCellClassName={b('footer-cell', footerCellClassName)}
+                headerCellClassName={headerCellClassName}
+                headerClassName={b('header', headerClassName)}
+                {...props}
+            />
+        );
+    },
+) as (<TData, TScrollElement extends Element | Window = HTMLDivElement>(
+    props: TableProps<TData, TScrollElement> & {ref?: React.Ref<HTMLTableElement>},
+) => React.ReactElement) & {displayName: string};
+
+Table.displayName = 'Table';

src/components/Table/index.ts

@@ -0,0 +1 @@
+export * from './Table';

src/components/__stories__/BaseTable.stories.tsx

@@ -4,27 +4,27 @@ import type {Meta, StoryFn} from '@storybook/react';
 
 import {BaseTable} from '../BaseTable';
 
-import {ColumnPinningDemo} from './ColumnPinningDemo';
-import {ColumnPinningWithReorderingDemo} from './ColumnPinningWithReorderingDemo';
-import {ColumnPinningWithSelectionDemo} from './ColumnPinningWithSelectionDemo';
-import {DefaultDemo} from './DefaultDemo';
-import {EmptyContentDemo} from './EmptyContent';
-import {GroupingDemo} from './GroupingDemo';
-import {GroupingDemo2} from './GroupingDemo2';
-import {GroupingWithSelectionDemo} from './GroupingWithSelectionDemo';
-import {HeaderGroupsDemo} from './HeaderGroupsDemo';
-import {ReorderingDemo} from './ReorderingDemo';
-import {ReorderingTreeDemo} from './ReorderingTreeDemo';
-import {ReorderingWithVirtualizationDemo} from './ReorderingWithVirtualizationDemo';
-import {ResizingDemo} from './ResizingDemo';
-import {SortingDemo} from './SortingDemo';
-import {StickyHeaderDemo} from './StickyHeaderDemo';
-import {TreeDemo} from './TreeDemo';
-import {TreeWithGroupsDemo} from './TreeWithGroupsDemo';
-import {VirtualizationDemo} from './VirtualizationDemo';
-import {WindowVirtualizationDemo} from './WindowVirtualizationDemo';
-import {WithSelectionDemo} from './WithSelectionDemo';
-import {WithoutHeaderDemo} from './WithoutHeaderDemo';
+import {ColumnPinningDemo} from './components/BaseTable/ColumnPinningDemo';
+import {ColumnPinningWithReorderingDemo} from './components/BaseTable/ColumnPinningWithReorderingDemo';
+import {ColumnPinningWithSelectionDemo} from './components/BaseTable/ColumnPinningWithSelectionDemo';
+import {DefaultDemo} from './components/BaseTable/DefaultDemo';
+import {EmptyContentDemo} from './components/BaseTable/EmptyContent';
+import {GroupingDemo} from './components/BaseTable/GroupingDemo';
+import {GroupingDemo2} from './components/BaseTable/GroupingDemo2';
+import {GroupingWithSelectionDemo} from './components/BaseTable/GroupingWithSelectionDemo';
+import {HeaderGroupsDemo} from './components/BaseTable/HeaderGroupsDemo';
+import {ReorderingDemo} from './components/BaseTable/ReorderingDemo';
+import {ReorderingTreeDemo} from './components/BaseTable/ReorderingTreeDemo';
+import {ReorderingWithVirtualizationDemo} from './components/BaseTable/ReorderingWithVirtualizationDemo';
+import {ResizingDemo} from './components/BaseTable/ResizingDemo';
+import {SortingDemo} from './components/BaseTable/SortingDemo';
+import {StickyHeaderDemo} from './components/BaseTable/StickyHeaderDemo';
+import {TreeDemo} from './components/BaseTable/TreeDemo';
+import {TreeWithGroupsDemo} from './components/BaseTable/TreeWithGroupsDemo';
+import {VirtualizationDemo} from './components/BaseTable/VirtualizationDemo';
+import {WindowVirtualizationDemo} from './components/BaseTable/WindowVirtualizationDemo';
+import {WithSelectionDemo} from './components/BaseTable/WithSelectionDemo';
+import {WithoutHeaderDemo} from './components/BaseTable/WithoutHeaderDemo';
 
 export default {
     title: 'BaseTable',

src/components/__stories__/Table.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+import {Table} from '../Table';
+
+import {DefaultDemo} from './components/Table/DefaultDemo';
+import {StickyHeaderDemo} from './components/Table/StickyHeaderDemo';
+import {VirtualizationDemo} from './components/Table/VirtualizationDemo';
+import {WindowVirtualizationDemo} from './components/Table/WindowVirtualizationDemo';
+
+export default {
+    title: 'Table',
+    component: Table,
+} as Meta<typeof Table>;
+
+const DefaultTemplate: StoryFn = () => <DefaultDemo />;
+export const Default: StoryFn = DefaultTemplate.bind({});
+
+const VirtualizationTemplate: StoryFn = () => <VirtualizationDemo />;
+export const Virtualization: StoryFn = VirtualizationTemplate.bind({});
+
+const WindowVirtualizationTemplate: StoryFn = () => <WindowVirtualizationDemo />;
+export const WindowVirtualization: StoryFn = WindowVirtualizationTemplate.bind({});
+
+const StickyHeaderTamplate: StoryFn = () => <StickyHeaderDemo />;
+export const StickyHeader: StoryFn = StickyHeaderTamplate.bind({});

src/components/__stories__/cells/ColumnPinningHeaderCell.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type {HeaderContext} from '@tanstack/react-table';
 
-import {cnColumnPinningDemo} from '../ColumnPinningDemo.classname';
+import {cnColumnPinningDemo} from '../components/BaseTable/ColumnPinningDemo.classname';
 
 interface ColumnPinningHeaderCellProps<TData> {
     info: HeaderContext<TData, unknown>;

src/components/__stories__/ColumnPinningDemo.classname.ts → src/components/__stories__/components/BaseTable/ColumnPinningDemo.classname.ts

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

src/components/__stories__/ColumnPinningDemo.tsx → src/components/__stories__/components/BaseTable/ColumnPinningDemo.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 
 import type {ColumnPinningState} from '@tanstack/react-table';
 
-import {useTable} from '../../hooks';
-import {BaseTable} from '../BaseTable';
+import {useTable} from '../../../../hooks';
+import {BaseTable} from '../../../BaseTable';
+import {columns} from '../../constants/columnPinning';
+import {data} from '../../constants/data';
 
 import {cnColumnPinningDemo} from './ColumnPinningDemo.classname';
-import {columns} from './constants/columnPinning';
-import {data} from './constants/data';
 
 import './ColumnPinningDemo.scss';
 

src/components/__stories__/ColumnPinningWithReorderingDemo.tsx → src/components/__stories__/components/BaseTable/ColumnPinningWithReorderingDemo.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 
 import type {ColumnDef, ColumnPinningState} from '@tanstack/react-table';
 
-import {defaultDragHandleColumn} from '../../constants';
-import {withTableReorder} from '../../hocs';
-import {useTable} from '../../hooks';
-import {BaseTable} from '../BaseTable';
-import type {SortableListDragResult} from '../SortableList';
+import {defaultDragHandleColumn} from '../../../../constants';
+import {withTableReorder} from '../../../../hocs';
+import {useTable} from '../../../../hooks';
+import {BaseTable} from '../../../BaseTable';
+import type {SortableListDragResult} from '../../../SortableList';
+import {columns} from '../../constants/columnPinning';
+import {data as originalData} from '../../constants/data';
+import type {Item} from '../../types';
 
 import {cnColumnPinningDemo} from './ColumnPinningDemo.classname';
-import {columns} from './constants/columnPinning';
-import {data as originalData} from './constants/data';
-import type {Item} from './types';
 
 import './ColumnPinningDemo.scss';
 

src/components/__stories__/ColumnPinningWithSelectionDemo.tsx → src/components/__stories__/components/BaseTable/ColumnPinningWithSelectionDemo.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 
 import type {ColumnDef, ColumnPinningState, RowSelectionState} from '@tanstack/react-table';
 
-import {defaultSelectionColumn} from '../../constants';
-import {useTable} from '../../hooks';
-import {BaseTable} from '../BaseTable';
+import {defaultSelectionColumn} from '../../../../constants';
+import {useTable} from '../../../../hooks';
+import {BaseTable} from '../../../BaseTable';
+import {columns} from '../../constants/columnPinning';
+import {data} from '../../constants/data';
+import type {Item} from '../../types';
 
 import {cnColumnPinningDemo} from './ColumnPinningDemo.classname';
-import {columns} from './constants/columnPinning';
-import {data} from './constants/data';
-import type {Item} from './types';
 
 import './ColumnPinningDemo.scss';
 

src/components/__stories__/components/BaseTable/DefaultDemo.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {useTable} from '../../../../hooks';
+import {BaseTable} from '../../../BaseTable';
+import {columns} from '../../constants/columns';
+import {data} from '../../constants/data';
+
+export const DefaultDemo = () => {
+    const table = useTable({
+        columns,
+        data,
+    });
+
+    return <BaseTable table={table} />;
+};

src/components/__stories__/EmptyContent.classname.ts → src/components/__stories__/components/BaseTable/EmptyContent.classname.ts

@@ -1,3 +1,3 @@
-import {cn} from '../../utils';
+import {cn} from '../../../../utils';
 
 export const cnEmptyContentDemo = cn('empty-content-demo');

src/components/__stories__/EmptyContent.tsx → src/components/__stories__/components/BaseTable/EmptyContent.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import {useTable} from '../../hooks';
-import {BaseTable} from '../BaseTable';
+import {useTable} from '../../../../hooks';
+import {BaseTable} from '../../../BaseTable';
+import {columns} from '../../constants/columns';
 
 import {cnEmptyContentDemo} from './EmptyContent.classname';
-import {columns} from './constants/columns';
 
 import './EmptyContent.scss';
 

src/components/__stories__/GroupingDemo.classname.ts → src/components/__stories__/components/BaseTable/GroupingDemo.classname.ts

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

src/components/__stories__/GroupingDemo.tsx → src/components/__stories__/components/BaseTable/GroupingDemo.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 
 import type {ExpandedState, Row} from '@tanstack/react-table';
 
-import {useTable} from '../../hooks';
-import {BaseTable} from '../BaseTable';
+import {useTable} from '../../../../hooks';
+import {BaseTable} from '../../../BaseTable';
+import type {GroupOrItem} from '../../constants/grouping';
+import {columns, data} from '../../constants/grouping';
 
 import {cnGroupingDemo} from './GroupingDemo.classname';
-import type {GroupOrItem} from './constants/grouping';
-import {columns, data} from './constants/grouping';
 
 import './GroupingDemo.scss';
 

src/components/__stories__/GroupingDemo2.tsx → src/components/__stories__/components/BaseTable/GroupingDemo2.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 
 import type {ExpandedState, Row} from '@tanstack/react-table';
 
-import {useTable} from '../../hooks';
-import {BaseTable} from '../BaseTable';
+import {useTable} from '../../../../hooks';
+import {BaseTable} from '../../../BaseTable';
+import {columns} from '../../constants/columns';
+import type {Item} from '../../types';
+import {generateData} from '../../utils';
 
 import {cnGroupingDemo} from './GroupingDemo.classname';
-import {columns} from './constants/columns';
-import type {Item} from './types';
-import {generateData} from './utils';
 
 import './GroupingDemo.scss';
 

src/components/__stories__/GroupingWithSelectionDemo.tsx → src/components/__stories__/components/BaseTable/GroupingWithSelectionDemo.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 
 import type {ColumnDef, ExpandedState, Row, RowSelectionState} from '@tanstack/react-table';
 
-import {defaultSelectionColumn} from '../../constants';
-import {useTable} from '../../hooks';
-import {BaseTable} from '../BaseTable';
+import {defaultSelectionColumn} from '../../../../constants';
+import {useTable} from '../../../../hooks';
+import {BaseTable} from '../../../BaseTable';
+import type {GroupOrItem} from '../../constants/grouping';
+import {data, columns as originalColumns} from '../../constants/grouping';
 
 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>[] = [

src/components/__stories__/HeaderGroupsDemo.classname.ts → src/components/__stories__/components/BaseTable/HeaderGroupsDemo.classname.ts

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

src/components/__stories__/HeaderGroupsDemo.tsx → src/components/__stories__/components/BaseTable/HeaderGroupsDemo.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 
 import type {ColumnDef} from '@tanstack/react-table';
 
-import {useTable} from '../../hooks';
-import {BaseTable} from '../BaseTable';
+import {useTable} from '../../../../hooks';
+import {BaseTable} from '../../../BaseTable';
+import {columns as nestedColumns} from '../../constants/columns';
+import {data} from '../../constants/data';
+import type {Item} from '../../types';
 
 import {cnHeaderGroupsDemo} from './HeaderGroupsDemo.classname';
-import {columns as nestedColumns} from './constants/columns';
-import {data} from './constants/data';
-import type {Item} from './types';
 
 import './HeaderGroupsDemo.scss';