Use :nth-child/:nth-last-child selector to set frozen and summary row styles (#3433)

* Use `has` selector to set some styles

* Fix selector

* Fix group row selector

* Use nth-child selector to set summary row styles

* Update src/GroupRow.tsx

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>

* Update src/style/core.ts

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>

* Update src/style/core.ts

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>

* Reuse classname

* Remove classname test for summary row

* Fix box shadow if the frozen cell is the last cell

* Specific styles, add variable for shadow

* move `--rdg-selection-color`

* Similpify last frozen column styles

* Remove unused import

* address comments

---------

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>

Author: amanmahajan7

src/DataGrid.tsx

@@ -1132,7 +1132,6 @@ function DataGrid<R, SR, K extends Key>(
                     lastFrozenColumnIndex={lastFrozenColumnIndex}
                     selectedCellIdx={isSummaryRowSelected ? selectedPosition.idx : undefined}
                     isTop
-                    showBorder={rowIdx === topSummaryRowsCount - 1}
                     selectCell={selectCellLatest}
                   />
                 );
@@ -1164,7 +1163,6 @@ function DataGrid<R, SR, K extends Key>(
                     lastFrozenColumnIndex={lastFrozenColumnIndex}
                     selectedCellIdx={isSummaryRowSelected ? selectedPosition.idx : undefined}
                     isTop={false}
-                    showBorder={rowIdx === 0}
                     selectCell={selectCellLatest}
                   />
                 );

src/GroupRow.tsx

@@ -7,7 +7,7 @@ import { getRowStyle } from './utils';
 import type { BaseRenderRowProps, GroupRow } from './types';
 import { SELECT_COLUMN_KEY } from './Columns';
 import GroupCell from './GroupCell';
-import { cell, cellFrozenLast } from './style/cell';
+import { cell, cellFrozen } from './style/cell';
 import { rowClassname, rowSelectedClassname } from './style/row';
 
 const groupRow = css`
@@ -16,7 +16,8 @@ const groupRow = css`
       background-color: var(--rdg-header-background-color);
     }
 
-    > .${cell}:not(:last-child):not(.${cellFrozenLast}) {
+    > .${cell}:not(:last-child, .${cellFrozen}),
+    > :nth-last-child(n + 2 of .${cellFrozen}) {
       border-inline-end: none;
     }
   }

src/SummaryRow.tsx

@@ -5,7 +5,12 @@ import clsx from 'clsx';
 import { getColSpan, getRowStyle } from './utils';
 import type { RenderRowProps } from './types';
 import { cell, cellFrozen } from './style/cell';
-import { rowClassname, rowSelectedClassname } from './style/row';
+import {
+  bottomSummaryRowClassname,
+  rowClassname,
+  rowSelectedClassname,
+  topSummaryRowClassname
+} from './style/row';
 import SummaryCell from './SummaryCell';
 
 type SharedRenderRowProps<R, SR> = Pick<
@@ -21,7 +26,6 @@ interface SummaryRowProps<R, SR> extends SharedRenderRowProps<R, SR> {
   lastFrozenColumnIndex: number;
   selectedCellIdx: number | undefined;
   isTop: boolean;
-  showBorder: boolean;
 }
 
 const summaryRow = css`
@@ -46,26 +50,8 @@ const topSummaryRow = css`
   }
 `;
 
-export const topSummaryRowBorderClassname = css`
-  @layer rdg.SummaryRow {
-    > .${cell} {
-      border-block-end: 2px solid var(--rdg-summary-border-color);
-    }
-  }
-`;
-
-export const bottomSummaryRowBorderClassname = css`
-  @layer rdg.SummaryRow {
-    > .${cell} {
-      border-block-start: 2px solid var(--rdg-summary-border-color);
-    }
-  }
-`;
-
 const summaryRowClassname = `rdg-summary-row ${summaryRow}`;
 
-const topSummaryRowClassname = `rdg-top-summary-row ${topSummaryRow}`;
-
 function SummaryRow<R, SR>({
   rowIdx,
   gridRowStart,
@@ -76,7 +62,6 @@ function SummaryRow<R, SR>({
   lastFrozenColumnIndex,
   selectedCellIdx,
   isTop,
-  showBorder,
   selectCell,
   'aria-rowindex': ariaRowIndex
 }: SummaryRowProps<R, SR>) {
@@ -113,10 +98,8 @@ function SummaryRow<R, SR>({
         summaryRowClassname,
         {
           [rowSelectedClassname]: selectedCellIdx === -1,
-          [topSummaryRowClassname]: isTop,
-          [topSummaryRowBorderClassname]: isTop && showBorder,
-          [bottomSummaryRowBorderClassname]: !isTop && showBorder,
-          'rdg-bottom-summary-row': !isTop
+          [`${topSummaryRowClassname} ${topSummaryRow}`]: isTop,
+          [bottomSummaryRowClassname]: !isTop
         }
       )}
       style={

src/hooks/useCalculatedColumns.ts

@@ -92,7 +92,6 @@ export function useCalculatedColumns<R, SR>({
           idx: 0,
           level: 0,
           frozen,
-          isLastFrozenColumn: false,
           width: rawColumn.width ?? defaultWidth,
           minWidth: rawColumn.minWidth ?? defaultMinWidth,
           maxWidth: rawColumn.maxWidth ?? defaultMaxWidth,
@@ -142,10 +141,6 @@ export function useCalculatedColumns<R, SR>({
       }
     });
 
-    if (lastFrozenColumnIndex !== -1) {
-      columns[lastFrozenColumnIndex].isLastFrozenColumn = true;
-    }
-
     return {
       columns,
       colSpanColumns,

src/style/cell.ts

@@ -35,15 +35,12 @@ export const cellFrozen = css`
     position: sticky;
     /* Should have a higher value than 0 to show up above unfrozen cells */
     z-index: 1;
-  }
-`;
-
-export const cellFrozenClassname = `rdg-cell-frozen ${cellFrozen}`;
 
-export const cellFrozenLast = css`
-  @layer rdg.Cell {
-    box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3);
+    /* Add box-shadow on the last frozen cell */
+    &:nth-last-child(1 of &) {
+      box-shadow: var(--rdg-cell-frozen-box-shadow);
+    }
   }
 `;
 
-export const cellFrozenLastClassname = `rdg-cell-frozen-last ${cellFrozenLast}`;
+export const cellFrozenClassname = `rdg-cell-frozen ${cellFrozen}`;

src/style/core.ts

@@ -1,6 +1,7 @@
 import { css } from '@linaria/core';
 
-import { row } from './row';
+import { cell } from './cell';
+import { bottomSummaryRowClassname, row, topSummaryRowClassname } from './row';
 
 const lightTheme = `
   --rdg-color: #000;
@@ -49,6 +50,7 @@ const root = css`
     ${lightTheme}
     --rdg-selection-color: #66afe9;
     --rdg-font-size: 14px;
+    --rdg-cell-frozen-box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3);
 
     display: grid;
 
@@ -88,6 +90,18 @@ const root = css`
         ${darkTheme}
       }
     }
+
+    > :nth-last-child(1 of .${topSummaryRowClassname}) {
+      > .${cell} {
+        border-block-end: 2px solid var(--rdg-summary-border-color);
+      }
+    }
+
+    > :nth-child(1 of .${bottomSummaryRowClassname}) {
+      > .${cell} {
+        border-block-start: 2px solid var(--rdg-summary-border-color);
+      }
+    }
   }
 `;
 

src/style/row.ts

@@ -43,3 +43,7 @@ export const rowSelectedWithFrozenCell = css`
     }
   }
 `;
+
+export const topSummaryRowClassname = 'rdg-top-summary-row';
+
+export const bottomSummaryRowClassname = 'rdg-bottom-summary-row';

src/types.ts

@@ -71,7 +71,6 @@ export interface CalculatedColumn<TRow, TSummaryRow = unknown> extends Column<TR
   readonly sortable: boolean;
   readonly draggable: boolean;
   readonly frozen: boolean;
-  readonly isLastFrozenColumn: boolean;
   readonly renderCell: (props: RenderCellProps<TRow, TSummaryRow>) => ReactNode;
 }
 

src/utils/styleUtils.ts

@@ -2,7 +2,7 @@ import type { CSSProperties } from 'react';
 import clsx from 'clsx';
 
 import type { CalculatedColumn, CalculatedColumnOrColumnGroup } from '../types';
-import { cellClassname, cellFrozenClassname, cellFrozenLastClassname } from '../style/cell';
+import { cellClassname, cellFrozenClassname } from '../style/cell';
 
 export function getRowStyle(rowIdx: number, height?: number): CSSProperties {
   if (height !== undefined) {
@@ -59,8 +59,7 @@ export function getCellClassname<R, SR>(
   return clsx(
     cellClassname,
     {
-      [cellFrozenClassname]: column.frozen,
-      [cellFrozenLastClassname]: column.isLastFrozenColumn
+      [cellFrozenClassname]: column.frozen
     },
     ...extraClasses
   );

test/column/frozen.test.ts

@@ -1,5 +1,5 @@
 import type { Column } from '../../src';
-import { cellClassname, cellFrozenClassname, cellFrozenLastClassname } from '../../src/style/cell';
+import { cellClassname, cellFrozenClassname } from '../../src/style/cell';
 import { getHeaderCells, setup } from '../utils';
 
 interface Row {
@@ -36,9 +36,7 @@ test('frozen column have a specific class, and are stable-sorted before non-froz
   const [cell1, cell2, cell3, cell4] = getHeaderCells();
 
   expect(cell1).toHaveClass(`${cellClassname} ${cellFrozenClassname}`, { exact: true });
-  expect(cell2).toHaveClass(`${cellClassname} ${cellFrozenClassname} ${cellFrozenLastClassname}`, {
-    exact: true
-  });
+  expect(cell2).toHaveClass(`${cellClassname} ${cellFrozenClassname}`, { exact: true });
   expect(cell3).toHaveClass(`${cellClassname}`, { exact: true });
   expect(cell4).toHaveClass(`${cellClassname}`, { exact: true });