feat(Table): rework render props (#21)

package.json

@@ -35,7 +35,7 @@
     "prepare": "husky",
     "prepublishOnly": "npm run build",
     "start": "storybook dev",
-    "test": "jest",
+    "test": "jest --passWithNoTests",
     "test-storybook": "test-storybook",
     "test:coverage": "jest --coverage",
     "test:watch": "jest --watchAll",

src/components/Cell/Cell.tsx

@@ -1,21 +1,29 @@
 import React from 'react';
 
-import type {Cell as CellProperties} from '@tanstack/react-table';
+import type {Cell as CellType} from '@tanstack/react-table';
 import {flexRender} from '@tanstack/react-table';
 
-import {getCellClassModes} from '../../utils/getCellClassModes';
-import {getCellStyles} from '../../utils/getCellStyles';
+import {getCellClassModes, getCellStyles} from '../../utils';
 import {b} from '../Table/Table.classname';
 
-export interface CellProps<TData> {
-    cell: CellProperties<TData, unknown>;
-    className?: string;
+export interface CellProps<TData> extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    cell?: CellType<TData, unknown>;
 }
 
-export const Cell = <TData,>({cell, className}: CellProps<TData>) => {
+export const Cell = <TData,>({
+    cell,
+    children,
+    className,
+    style,
+    ...restProps
+}: CellProps<TData>) => {
     return (
-        <td className={b('cell', getCellClassModes(cell), className)} style={getCellStyles(cell)}>
-            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        <td
+            className={b('cell', getCellClassModes(cell), className)}
+            style={getCellStyles(cell, style)}
+            {...restProps}
+        >
+            {cell ? flexRender(cell.column.columnDef.cell, cell.getContext()) : children}
         </td>
     );
 };

src/components/DraggableRow/DraggableRow.tsx

@@ -4,14 +4,13 @@ import {useSortable} from '@dnd-kit/sortable';
 import {useForkRef} from '@gravity-ui/uikit';
 
 import {useDraggableRowDepth, useDraggableRowStyle} from '../../hooks';
-import {toDataAttributes} from '../../utils';
-import type {BaseRowProps} from '../BaseRow';
-import {BaseRow} from '../BaseRow';
+import type {RowProps} from '../Row';
+import {Row} from '../Row';
 import {SortableListContext} from '../SortableListContext';
 import {TableContext} from '../TableContext';
 
 export interface DraggableRowProps<TData, TScrollElement extends Element | Window = HTMLDivElement>
-    extends BaseRowProps<TData, TScrollElement> {}
+    extends RowProps<TData, TScrollElement> {}
 
 export const DraggableRow = React.forwardRef(
     <TData, TScrollElement extends Element | Window = HTMLDivElement>(
@@ -50,24 +49,22 @@ export const DraggableRow = React.forwardRef(
         });
 
         const getDraggableRowDataAttributes = React.useCallback<
-            NonNullable<BaseRowProps<TData>['getRowAttributes']>
+            NonNullable<RowProps<TData>['getRowAttributes']>
         >(
             (draggableRow) => ({
                 ...getRowAttributes?.(draggableRow),
-                ...toDataAttributes({
-                    key: draggableRow.id,
-                    depth,
-                    draggable: true,
-                    dragging: isDragging,
-                    dragActive: isDragActive,
-                    expanded: isDragActive && isParent,
-                }),
+                'data-key': draggableRow.id,
+                'data-depth': depth,
+                'data-draggable': true,
+                'data-dragging': isDragging,
+                'data-drag-active': isDragActive,
+                'data-expanded': isDragActive && isParent,
             }),
             [getRowAttributes, depth, isDragging, isDragActive, isParent],
         );
 
         return (
-            <BaseRow
+            <Row
                 ref={handleRowRef}
                 getRowAttributes={getDraggableRowDataAttributes}
                 row={row}

src/components/GroupHeader/GroupHeader.classname.ts

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

src/components/GroupHeader/GroupHeader.scss

@@ -0,0 +1,40 @@
+@use '../variables';
+
+$block: '.#{variables.$ns}group-header';
+
+#{$block} {
+    position: sticky;
+    inset-inline-start: 0;
+    margin: 0;
+
+    &__button {
+        appearance: none;
+
+        display: flex;
+        gap: 8px;
+        padding: 0;
+        width: 100%;
+
+        border: none;
+        outline: none;
+        background: inherit;
+        cursor: pointer;
+    }
+
+    &__icon {
+        display: inline-block;
+        vertical-align: middle;
+        transform: rotate(-90deg);
+        transition: transform 0.1s ease-out;
+
+        &_expanded {
+            transform: rotate(0);
+        }
+    }
+
+    &__content {
+        display: inline-flex;
+        gap: 4px;
+        font-weight: 500;
+    }
+}

src/components/GroupHeader/GroupHeader.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import type {Row} from '@tanstack/react-table';
+
+import {b} from './GroupHeader.classname';
+
+import './GroupHeader.scss';
+
+export interface GroupHeaderProps<TData> {
+    className?: string;
+    getGroupTitle?: (row: Row<TData>) => React.ReactNode;
+    row: Row<TData>;
+}
+
+export const GroupHeader = <TData,>({className, getGroupTitle, row}: GroupHeaderProps<TData>) => {
+    return (
+        <h2 className={b(null, className)}>
+            <button className={b('button')} onClick={row.getToggleExpandedHandler()}>
+                <svg
+                    className={b('icon', {expanded: row.getIsExpanded()})}
+                    viewBox="0 0 16 16"
+                    width="16"
+                    height="16"
+                >
+                    <path
+                        d="M2.97 5.47a.75.75 0 0 1 1.06 0L8 9.44l3.97-3.97a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 0 1 0-1.06Z"
+                        fill="currentColor"
+                    />
+                </svg>
+                <span className={b('content')}>
+                    <span className={b('title')}>{getGroupTitle?.(row) ?? row.id}</span>
+                    <span className={b('total')}>{row.subRows.length}</span>
+                </span>
+            </button>
+        </h2>
+    );
+};

src/components/GroupHeader/index.ts

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