Remove lineHeight and use align-content to vertically align items

src/DataGrid.tsx

@@ -1004,7 +1004,6 @@ function DataGrid<R, SR, K extends Key>(
           onCellContextMenu: onCellContextMenuLatest,
           rowClass,
           gridRowStart,
-          height: getRowHeight(rowIdx),
           copiedCellIdx:
             copiedCell !== null && copiedCell.row === row
               ? columns.findIndex((c) => c.key === copiedCell.columnKey)
@@ -1077,8 +1076,6 @@ function DataGrid<R, SR, K extends Key>(
               : undefined,
           gridTemplateColumns,
           gridTemplateRows: templateRows,
-          '--rdg-header-row-height': `${headerRowHeight}px`,
-          '--rdg-summary-row-height': `${summaryRowHeight}px`,
           '--rdg-scroll-height': `${scrollHeight}px`,
           '--rdg-sign': isRtl ? -1 : 1,
           ...layoutCssVars

src/GroupRow.tsx

@@ -40,7 +40,6 @@ function GroupedRow<R, SR>({
   isRowSelected,
   selectCell,
   gridRowStart,
-  height,
   groupBy,
   toggleGroup,
   ...props
@@ -68,7 +67,7 @@ function GroupedRow<R, SR>({
           className
         )}
         onClick={handleSelectGroup}
-        style={getRowStyle(gridRowStart, height)}
+        style={getRowStyle(gridRowStart)}
         {...props}
       >
         {viewportColumns.map((column) => (

src/HeaderRow.tsx

@@ -28,7 +28,6 @@ export interface HeaderRowProps<R, SR, K extends React.Key> extends SharedDataGr
 const headerRow = css`
   @layer rdg.HeaderRow {
     display: contents;
-    line-height: var(--rdg-header-row-height);
     background-color: var(--rdg-header-background-color);
     font-weight: bold;
 

src/Row.tsx

@@ -12,7 +12,6 @@ function Row<R, SR>(
     className,
     rowIdx,
     gridRowStart,
-    height,
     selectedCellIdx,
     isRowSelected,
     copiedCellIdx,
@@ -94,7 +93,7 @@ function Row<R, SR>(
         ref={ref}
         className={className}
         onMouseEnter={handleDragEnter}
-        style={getRowStyle(gridRowStart, height)}
+        style={getRowStyle(gridRowStart)}
         {...props}
       >
         {cells}

src/SummaryRow.tsx

@@ -30,8 +30,6 @@ interface SummaryRowProps<R, SR> extends SharedRenderRowProps<R, SR> {
 
 const summaryRow = css`
   @layer rdg.SummaryRow {
-    line-height: var(--rdg-summary-row-height);
-
     > .${cell} {
       position: sticky;
     }

src/style/cell.ts

@@ -14,6 +14,7 @@ export const cell = css`
     border-inline-end: 1px solid var(--rdg-border-color);
     border-block-end: 1px solid var(--rdg-border-color);
     grid-row-start: var(--rdg-grid-row-start);
+    align-content: center;
     background-color: inherit;
 
     white-space: nowrap;

src/style/row.ts

@@ -3,7 +3,6 @@ import { css } from '@linaria/core';
 export const row = css`
   @layer rdg.Row {
     display: contents;
-    line-height: var(--rdg-row-height);
     background-color: var(--rdg-background-color);
 
     &:hover {

src/types.ts

@@ -210,7 +210,6 @@ export interface BaseRenderRowProps<TRow, TSummaryRow = unknown>
   selectedCellIdx: number | undefined;
   isRowSelected: boolean;
   gridRowStart: number;
-  height: number;
   selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
 }
 

src/utils/styleUtils.ts

@@ -4,14 +4,7 @@ import clsx from 'clsx';
 import type { CalculatedColumn, CalculatedColumnOrColumnGroup } from '../types';
 import { cellClassname, cellFrozenClassname } from '../style/cell';
 
-export function getRowStyle(rowIdx: number, height?: number): CSSProperties {
-  if (height !== undefined) {
-    return {
-      '--rdg-grid-row-start': rowIdx,
-      '--rdg-row-height': `${height}px`
-    } as unknown as CSSProperties;
-  }
-
+export function getRowStyle(rowIdx: number): CSSProperties {
   return { '--rdg-grid-row-start': rowIdx } as unknown as CSSProperties;
 }
 

test/rowHeight.test.ts

@@ -24,14 +24,11 @@ function setupGrid(rowHeight: DataGridProps<Row>['rowHeight']) {
 test('rowHeight is number', async () => {
   setupGrid(40);
 
-  const rows = getRows();
-  expect(rows[0]).toHaveStyle({ '--rdg-row-height': '40px' });
-  expect(rows[1]).toHaveStyle({ '--rdg-row-height': '40px' });
-  expect(rows[2]).toHaveStyle({ '--rdg-row-height': '40px' });
+  const grid = screen.getByRole('grid');
+  expect(grid).toHaveStyle({ 'grid-template-rows': 'repeat(1, 40px) repeat(50, 40px)' });
   expect(getRows()).toHaveLength(31);
 
   await userEvent.tab();
-  const grid = screen.getByRole('grid');
   expect(grid.scrollTop).toBe(0);
 
   // Go to the last cell
@@ -43,15 +40,14 @@ test('rowHeight is number', async () => {
 test('rowHeight is function', async () => {
   setupGrid((row) => [40, 60, 80][row % 3]);
 
-  const rows = getRows();
-  expect(rows[0]).toHaveStyle({ '--rdg-row-height': '40px' });
-  expect(rows[1]).toHaveStyle({ '--rdg-row-height': '60px' });
-  expect(rows[2]).toHaveStyle({ '--rdg-row-height': '80px' });
-  expect(rows[3]).toHaveStyle({ '--rdg-row-height': '40px' });
-  expect(rows).toHaveLength(22);
+  const grid = screen.getByRole('grid');
+  expect(grid).toHaveStyle({
+    'grid-template-rows':
+      'repeat(1, 35px) 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px'
+  });
+  expect(getRows()).toHaveLength(22);
 
   await userEvent.tab();
-  const grid = screen.getByRole('grid');
   expect(grid.scrollTop).toBe(0);
 
   const spy = vi.spyOn(window.HTMLElement.prototype, 'scrollIntoView');

website/demos/Animation.tsx

@@ -14,11 +14,6 @@ const rangeClassname = css`
 
 const transitionClassname = css`
   transition: grid-template-rows 0.5s ease;
-
-  > .rdg-header-row,
-  > .rdg-row {
-    transition: line-height 0.5s ease;
-  }
 `;
 
 interface Row {

website/demos/TreeView.tsx

@@ -139,25 +139,30 @@ export default function TreeView({ direction }: Props) {
           const hasChildren = row.children !== undefined;
           const style = hasChildren ? undefined : { marginInlineStart: 30 };
           return (
-            <>
+            <div
+              className={css`
+                display: flex;
+                gap: 10px;
+                block-size: 100%;
+                align-items: center;
+              `}
+            >
               {hasChildren && (
                 <CellExpanderFormatter
                   tabIndex={tabIndex}
                   expanded={row.isExpanded === true}
                   onCellExpand={() => dispatch({ id: row.id, type: 'toggleSubRow' })}
                 />
               )}
-              <div className="rdg-cell-value">
-                {!hasChildren && (
-                  <ChildRowDeleteButton
-                    tabIndex={tabIndex}
-                    isDeleteSubRowEnabled={allowDelete}
-                    onDeleteSubRow={() => dispatch({ id: row.id, type: 'deleteSubRow' })}
-                  />
-                )}
-                <div style={style}>{row.format}</div>
-              </div>
-            </>
+              {!hasChildren && (
+                <ChildRowDeleteButton
+                  tabIndex={tabIndex}
+                  isDeleteSubRowEnabled={allowDelete}
+                  onDeleteSubRow={() => dispatch({ id: row.id, type: 'deleteSubRow' })}
+                />
+              )}
+              <div style={style}>{row.format}</div>
+            </div>
           );
         }
       },

website/demos/components/CellExpanderFormatter.tsx

@@ -1,17 +1,10 @@
 import { css } from '@linaria/core';
 
 const cellExpandClassname = css`
-  /* needed on chrome */
-  float: right;
-  float: inline-end;
-  display: table;
   block-size: 100%;
-
-  > span {
-    display: table-cell;
-    vertical-align: middle;
-    cursor: pointer;
-  }
+  align-content: center;
+  text-align: center;
+  cursor: pointer;
 `;
 
 interface CellExpanderFormatterProps {
@@ -33,10 +26,8 @@ export function CellExpanderFormatter({
   }
 
   return (
-    <div className={cellExpandClassname}>
-      <span onClick={onCellExpand} onKeyDown={handleKeyDown}>
-        <span tabIndex={tabIndex}>{expanded ? '\u25BC' : '\u25B6'}</span>
-      </span>
+    <div className={cellExpandClassname} onClick={onCellExpand} onKeyDown={handleKeyDown}>
+      <span tabIndex={tabIndex}>{expanded ? '\u25BC' : '\u25B6'}</span>
     </div>
   );
 }

website/demos/components/ChildRowDeleteButton.tsx

@@ -1,6 +1,7 @@
 import { css } from '@linaria/core';
 
 const childRowActionCrossClassname = css`
+  block-size: 100%;
   &::before,
   &::after {
     content: '';
@@ -16,7 +17,7 @@ const childRowActionCrossClassname = css`
 
   &::after {
     inset-block-start: 50%;
-    inset-inline-start: 20px;
+    inset-inline-start: 21px;
     block-size: 1px;
     inline-size: 15px;
   }