Add CalculatedColumn.cellStyle and RowRendererProps.rowStyle attributes

These two attributes allow for CSSProperties (JSX style) to be directly
passed to the table instead of through a class name.

Signed-off-by: Gegham Zakaryan <[email protected]>

Author: zakaryan2004

README.md

@@ -234,6 +234,10 @@ function MyGrid() {
 
 ###### `rowClass?: Maybe<(row: R) => Maybe<string>>`
 
+###### `rowStyle?: Maybe<(row: R) => Maybe<CSSProperties>>`
+
+This property sets the passed JSX style to the row.
+
 ##### `direction?: Maybe<'ltr' | 'rtl'>`
 
 This property sets the text direction of the grid, it defaults to `'ltr'` (left-to-right). Setting `direction` to `'rtl'` has the following effects:

src/Cell.tsx

@@ -37,7 +37,7 @@ function Cell<R, SR>({
 }: CellRendererProps<R, SR>) {
   const { ref, tabIndex, onFocus } = useRovingCellRef(isCellSelected);
 
-  const { cellClass } = column;
+  const { cellClass, cellStyle } = column;
   const className = getCellClassname(
     column,
     {
@@ -46,6 +46,7 @@ function Cell<R, SR>({
     },
     typeof cellClass === 'function' ? cellClass(row) : cellClass
   );
+  const style = typeof cellStyle === 'function' ? cellStyle(row) : cellStyle;
 
   function selectCellWrapper(openEditor?: boolean | null) {
     selectCell(row, column, openEditor);
@@ -79,7 +80,7 @@ function Cell<R, SR>({
       ref={ref}
       tabIndex={tabIndex}
       className={className}
-      style={getCellStyle(column, colSpan)}
+      style={getCellStyle(column, colSpan, style)}
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
       onContextMenu={handleContextMenu}

src/DataGrid.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useState, useRef, useImperativeHandle, useCallback, useMemo } from 'react';
-import type { Key, RefAttributes } from 'react';
+import type { Key, RefAttributes, CSSProperties } from 'react';
 import clsx from 'clsx';
 
 import {
@@ -175,6 +175,7 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
    */
   renderers?: Maybe<Renderers<R, SR>>;
   rowClass?: Maybe<(row: R) => Maybe<string>>;
+  rowStyle?: Maybe<CSSProperties | ((row: R) => Maybe<CSSProperties>)>;
   direction?: Maybe<Direction>;
   'data-testid'?: Maybe<string>;
 }
@@ -224,6 +225,7 @@ function DataGrid<R, SR, K extends Key>(
     className,
     style,
     rowClass,
+    rowStyle,
     direction,
     // ARIA
     'aria-label': ariaLabel,
@@ -1070,6 +1072,7 @@ function DataGrid<R, SR, K extends Key>(
           onRowClick,
           onRowDoubleClick,
           rowClass,
+          rowStyle,
           gridRowStart,
           height: getRowHeight(rowIdx),
           copiedCellIdx:

src/EditCell.tsx

@@ -95,13 +95,14 @@ export default function EditCell<R, SR>({
     }
   }
 
-  const { cellClass } = column;
+  const { cellClass, cellStyle } = column;
   const className = getCellClassname(
     column,
     'rdg-editor-container',
     !column.editorOptions?.renderFormatter && cellEditing,
     typeof cellClass === 'function' ? cellClass(row) : cellClass
   );
+  const style = typeof cellStyle === 'function' ? cellStyle(row) : cellStyle;
 
   return (
     <div
@@ -110,7 +111,7 @@ export default function EditCell<R, SR>({
       aria-colspan={colSpan}
       aria-selected
       className={className}
-      style={getCellStyle(column, colSpan)}
+      style={getCellStyle(column, colSpan, style)}
       onKeyDown={onKeyDown}
       onMouseDownCapture={commitOnOutsideClick ? cancelFrameRequest : undefined}
     >

src/HeaderCell.tsx

@@ -174,7 +174,7 @@ export default function HeaderCell<R, SR>({
       tabIndex={shouldFocusGrid ? 0 : tabIndex}
       className={className}
       style={{
-        ...getCellStyle(column, colSpan),
+        ...getCellStyle(column, colSpan, column.headerCellStyle),
         minWidth: column.minWidth,
         maxWidth: column.maxWidth ?? undefined
       }}

src/Row.tsx

@@ -26,6 +26,7 @@ function Row<R, SR>(
     onRowClick,
     onRowDoubleClick,
     rowClass,
+    rowStyle,
     setDraggedOverRowIdx,
     onMouseEnter,
     onRowChange,
@@ -53,6 +54,8 @@ function Row<R, SR>(
     className
   );
 
+  rowStyle = typeof rowStyle === 'function' ? rowStyle(row) : rowStyle;
+
   const cells = [];
 
   for (let index = 0; index < viewportColumns.length; index++) {
@@ -94,7 +97,7 @@ function Row<R, SR>(
         ref={ref}
         className={className}
         onMouseEnter={handleDragEnter}
-        style={getRowStyle(gridRowStart, height)}
+        style={getRowStyle(gridRowStart, height, rowStyle)}
         {...props}
       >
         {cells}

src/SummaryCell.tsx

@@ -27,12 +27,13 @@ function SummaryCell<R, SR>({
   selectCell
 }: SummaryCellProps<R, SR>) {
   const { ref, tabIndex, onFocus } = useRovingCellRef(isCellSelected);
-  const { summaryCellClass } = column;
+  const { summaryCellClass, summaryCellStyle } = column;
   const className = getCellClassname(
     column,
     summaryCellClassname,
     typeof summaryCellClass === 'function' ? summaryCellClass(row) : summaryCellClass
   );
+  const style = typeof summaryCellStyle === 'function' ? summaryCellStyle(row) : summaryCellStyle;
 
   function onClick() {
     selectCell(row, column);
@@ -47,7 +48,7 @@ function SummaryCell<R, SR>({
       ref={ref}
       tabIndex={tabIndex}
       className={className}
-      style={getCellStyle(column, colSpan)}
+      style={getCellStyle(column, colSpan, style)}
       onClick={onClick}
       onFocus={onFocus}
     >

src/types.ts

@@ -1,4 +1,4 @@
-import type { Key, ReactElement, ReactNode, RefObject } from 'react';
+import type { Key, ReactElement, ReactNode, RefObject, CSSProperties } from 'react';
 
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
@@ -15,9 +15,14 @@ export interface Column<TRow, TSummaryRow = unknown> {
   readonly minWidth?: Maybe<number>;
   /** Maximum column width in px. */
   readonly maxWidth?: Maybe<number>;
+  /** Standard, header and summary cell style */
   readonly cellClass?: Maybe<string | ((row: TRow) => Maybe<string>)>;
   readonly headerCellClass?: Maybe<string>;
   readonly summaryCellClass?: Maybe<string | ((row: TSummaryRow) => Maybe<string>)>;
+  /** Standard, header and summary cell style */
+  readonly cellStyle?: Maybe<CSSProperties | ((row: TRow) => Maybe<CSSProperties>)>;
+  readonly headerCellStyle?: Maybe<CSSProperties>;
+  readonly summaryCellStyle?: Maybe<CSSProperties | ((row: TSummaryRow) => Maybe<CSSProperties>)>;
   /** Formatter to be used to render the cell content */
   readonly formatter?: Maybe<(props: FormatterProps<TRow, TSummaryRow>) => ReactNode>;
   /** Formatter to be used to render the summary cell content */
@@ -143,6 +148,7 @@ export interface RowRendererProps<TRow, TSummaryRow = unknown>
   onRowClick: Maybe<(row: TRow, column: CalculatedColumn<TRow, TSummaryRow>) => void>;
   onRowDoubleClick: Maybe<(row: TRow, column: CalculatedColumn<TRow, TSummaryRow>) => void>;
   rowClass: Maybe<(row: TRow) => Maybe<string>>;
+  rowStyle: Maybe<CSSProperties | ((row: TRow) => Maybe<CSSProperties>)>;
   setDraggedOverRowIdx: ((overRowIdx: number) => void) | undefined;
   selectCell: (
     row: TRow,

src/utils/styleUtils.ts

@@ -1,27 +1,34 @@
 import type { CSSProperties } from 'react';
 import clsx from 'clsx';
 
-import type { CalculatedColumn } from '../types';
+import type { Maybe, CalculatedColumn } from '../types';
 import { cellClassname, cellFrozenClassname, cellFrozenLastClassname } from '../style';
 
-export function getRowStyle(rowIdx: number, height?: number): CSSProperties {
+export function getRowStyle(
+  rowIdx: number,
+  height?: number,
+  extraStyles?: Maybe<CSSProperties>
+): CSSProperties {
   if (height !== undefined) {
     return {
       '--rdg-grid-row-start': rowIdx,
-      '--rdg-row-height': `${height}px`
+      '--rdg-row-height': `${height}px`,
+      ...extraStyles
     } as unknown as CSSProperties;
   }
   return { '--rdg-grid-row-start': rowIdx } as unknown as CSSProperties;
 }
 
 export function getCellStyle<R, SR>(
   column: CalculatedColumn<R, SR>,
-  colSpan?: number
+  colSpan?: number,
+  extraStyles?: Maybe<CSSProperties>
 ): React.CSSProperties {
   return {
     gridColumnStart: column.idx + 1,
     gridColumnEnd: colSpan !== undefined ? `span ${colSpan}` : undefined,
-    insetInlineStart: column.frozen ? `var(--rdg-frozen-left-${column.idx})` : undefined
+    insetInlineStart: column.frozen ? `var(--rdg-frozen-left-${column.idx})` : undefined,
+    ...extraStyles
   };
 }