feat(Table): remove cell-content (#15)

gravity-ui · Jul 18, 2024 · 51a84c5 · 51a84c5
1 parent 3ef0a16
commit 51a84c5
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 81 deletions.
diff --git a/src/components/Cell/Cell.tsx b/src/components/Cell/Cell.tsx
@@ -10,15 +10,12 @@ import {b} from '../Table/Table.classname';
 export interface CellProps<TData> {
     cell: CellProperties<TData, unknown>;
     className?: string;
-    contentClassName?: string;
 }
 
-export const Cell = <TData,>({cell, className, contentClassName}: CellProps<TData>) => {
+export const Cell = <TData,>({cell, className}: CellProps<TData>) => {
     return (
         <td className={b('cell', getCellClassModes(cell), className)} style={getCellStyles(cell)}>
-            <div className={b('cell-content', contentClassName)}>
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-            </div>
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
         </td>
     );
 };
diff --git a/src/components/HeaderCell/HeaderCell.tsx b/src/components/HeaderCell/HeaderCell.tsx
@@ -10,7 +10,6 @@ import {b} from '../Table/Table.classname';
 
 export interface HeaderCellProps<TData, TValue> {
     className?: string;
-    contentClassName?: string;
     header: Header<TData, TValue>;
     parentHeader?: Header<TData, unknown>;
     renderSortIndicator?: (header: Header<TData, TValue>, className?: string) => React.ReactNode;
@@ -19,7 +18,6 @@ export interface HeaderCellProps<TData, TValue> {
 
 export const HeaderCell = <TData, TValue>({
     className,
-    contentClassName,
     header,
     parentHeader,
     renderSortIndicator = renderDefaultSortIndicator,
@@ -54,31 +52,29 @@ export const HeaderCell = <TData, TValue>({
             rowSpan={rowSpan}
             onClick={header.column.getToggleSortingHandler()}
         >
-            <div className={b('header-cell-content', contentClassName)}>
-                {flexRender(header.column.columnDef.header, header.getContext())}{' '}
-                {header.column.getCanSort() && renderSortIndicator(header, sortIndicatorClassName)}
-                {enableColumnResizing && (
-                    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-                    <div
-                        className={b('resizer', {
-                            direction: columnResizeDirection,
-                            resizing: header.column.getIsResizing(),
-                        })}
-                        onDoubleClick={() => header.column.resetSize()}
-                        onMouseDown={header.getResizeHandler()}
-                        onTouchStart={header.getResizeHandler()}
-                        style={{
-                            transform:
-                                columnResizeMode === 'onEnd' && header.column.getIsResizing()
-                                    ? `translateX(${
-                                          (columnResizeDirection === 'rtl' ? -1 : 1) *
-                                          (columnSizingInfo.deltaOffset ?? 0)
-                                      }px)`
-                                    : '',
-                        }}
-                    />
-                )}
-            </div>
+            {flexRender(header.column.columnDef.header, header.getContext())}{' '}
+            {header.column.getCanSort() && renderSortIndicator(header, sortIndicatorClassName)}
+            {enableColumnResizing && (
+                // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                <div
+                    className={b('resizer', {
+                        direction: columnResizeDirection,
+                        resizing: header.column.getIsResizing(),
+                    })}
+                    onDoubleClick={() => header.column.resetSize()}
+                    onMouseDown={header.getResizeHandler()}
+                    onTouchStart={header.getResizeHandler()}
+                    style={{
+                        transform:
+                            columnResizeMode === 'onEnd' && header.column.getIsResizing()
+                                ? `translateX(${
+                                      (columnResizeDirection === 'rtl' ? -1 : 1) *
+                                      (columnSizingInfo.deltaOffset ?? 0)
+                                  }px)`
+                                : '',
+                    }}
+                />
+            )}
         </th>
     );
 };
diff --git a/src/components/HeaderRow/HeaderRow.tsx b/src/components/HeaderRow/HeaderRow.tsx
@@ -8,7 +8,6 @@ import {b} from '../Table/Table.classname';
 
 export interface HeaderRowProps<TData, TValue> {
     cellClassName: HeaderCellProps<TData, TValue>['className'];
-    cellContentClassName: HeaderCellProps<TData, TValue>['contentClassName'];
     className?: string;
     headerGroup: HeaderGroup<TData>;
     parentHeaderGroup?: HeaderGroup<TData>;
@@ -18,7 +17,6 @@ export interface HeaderRowProps<TData, TValue> {
 
 export const HeaderRow = <TData, TValue>({
     cellClassName,
-    cellContentClassName,
     className,
     headerGroup,
     parentHeaderGroup,
@@ -31,7 +29,6 @@ export const HeaderRow = <TData, TValue>({
                 <HeaderCell
                     key={header.column.id}
                     className={cellClassName}
-                    contentClassName={cellContentClassName}
                     header={header as Header<TData, TValue>}
                     parentHeader={parentHeaderGroup?.headers.find(
                         (item) => header.column.id === item.column.id,

diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss
@@ -6,16 +6,12 @@ $block: '.#{variables.$ns}table';
     --gc-tree-view-padding: 0px;
     --gc-draggable-row-marker-offset: 20px;
 
-    height: 1px;
-
     border-spacing: 0;
     border-collapse: separate;
 
     border: none;
 
     &__row {
-        height: 100%;
-
         &_interactive {
             cursor: pointer;
 
@@ -29,10 +25,6 @@ $block: '.#{variables.$ns}table';
         background: var(--g-color-base-background);
     }
 
-    &__header-row {
-        height: 100%;
-    }
-
     &__cell,
     &__header-cell {
         height: inherit;
@@ -71,29 +63,16 @@ $block: '.#{variables.$ns}table';
         }
 
         &_wide {
-            #{$block}__header-cell-content {
-                justify-content: center;
-            }
         }
     }
 
-    &__header-cell-content,
-    &__cell-content {
-        display: flex;
-        align-items: center;
-
-        height: 100%;
-    }
-
     &__group-title-wrapper {
         position: sticky;
         inset-inline-start: 0;
         padding: var(--g-spacing-1) 0;
     }
 
     &__group-title {
-        width: 100%;
-        height: 100%;
         margin: 0;
     }
 
@@ -104,7 +83,6 @@ $block: '.#{variables.$ns}table';
         gap: var(--g-spacing-2);
         padding: 0;
         width: 100%;
-        height: 100%;
 
         border: none;
         outline: none;

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -24,14 +24,12 @@ import './Table.scss';
 export interface TableProps<TData, TScrollElement extends Element | Window = HTMLDivElement> {
     bodyClassName?: string;
     cellClassName?: string;
-    cellContentClassName?: string;
     checkIsGroupRow?: BaseRowProps<TData>['checkIsGroupRow'];
     className?: string;
     enableNesting?: boolean;
     getGroupTitle?: BaseRowProps<TData>['getGroupTitle'];
     getRowAttributes?: BaseRowProps<TData>['getRowAttributes'];
     headerCellClassName?: string;
-    headerCellContentClassName?: string;
     headerClassName?: string;
     headerRowClassName?: string;
     onRowClick?: BaseRowProps<TData>['onClick'];
@@ -49,14 +47,12 @@ export const Table = React.forwardRef(
         {
             bodyClassName,
             cellClassName,
-            cellContentClassName,
             checkIsGroupRow,
             className,
             enableNesting,
             getGroupTitle,
             getRowAttributes,
             headerCellClassName,
-            headerCellContentClassName,
             headerClassName,
             headerRowClassName,
             onRowClick,
@@ -82,15 +78,9 @@ export const Table = React.forwardRef(
 
         const renderCell = React.useCallback(
             (cell: CellProperties<TData, unknown>) => {
-                return (
-                    <Cell
-                        cell={cell}
-                        className={cellClassName}
-                        contentClassName={cellContentClassName}
-                    />
-                );
+                return <Cell cell={cell} className={cellClassName} />;
             },
-            [cellClassName, cellContentClassName],
+            [cellClassName],
         );
 
         const {rows} = table.getRowModel();
@@ -113,7 +103,6 @@ export const Table = React.forwardRef(
                                     parentHeaderGroup={headerGroups[index - 1]}
                                     className={headerRowClassName}
                                     cellClassName={headerCellClassName}
-                                    cellContentClassName={headerCellContentClassName}
                                     sortIndicatorClassName={sortIndicatorClassName}
                                     renderSortIndicator={renderSortIndicator}
                                 />

diff --git a/src/utils/renderDefaultGroupHeader.tsx b/src/utils/renderDefaultGroupHeader.tsx
@@ -9,15 +9,13 @@ export const renderDefaultGroupHeader = <TData,>(
     row: Row<TData>,
     getGroupTitle?: (row: Row<TData>) => React.ReactNode,
 ) => (
-    <div className={b('cell-content', b('group-title-wrapper'))}>
-        <h2 className={b('group-title')}>
-            <button onClick={row.getToggleExpandedHandler()} className={b('group-expand-button')}>
-                <ArrowToggle direction={row.getIsExpanded() ? 'bottom' : 'right'} size={16} />
-                <span className={b('group-title-content')}>
-                    <span>{getGroupTitle?.(row) ?? row.id}</span>
-                    <span className={b('group-total')}>{row.subRows.length ?? ''}</span>
-                </span>
-            </button>
-        </h2>
-    </div>
+    <h2 className={b('group-title')}>
+        <button onClick={row.getToggleExpandedHandler()} className={b('group-expand-button')}>
+            <ArrowToggle direction={row.getIsExpanded() ? 'bottom' : 'right'} size={16} />
+            <span className={b('group-title-content')}>
+                <span>{getGroupTitle?.(row) ?? row.id}</span>
+                <span className={b('group-total')}>{row.subRows.length ?? ''}</span>
+            </span>
+        </button>
+    </h2>
 );