PoC: Add grid.rowStyle and col.cellStyle options

src/Row.tsx

@@ -25,6 +25,7 @@ function Row<R, SR>({
   rowClass,
   onRowChange,
   selectCell,
+  style,
   ...props
 }: RenderRowProps<R, SR>) {
   const renderCell = useDefaultRenderers<R, SR>()!.renderCell!;
@@ -83,7 +84,15 @@ function Row<R, SR>({
 
   return (
     <RowSelectionContext value={selectionValue}>
-      <div role="row" className={className} style={getRowStyle(gridRowStart)} {...props}>
+      <div
+        role="row"
+        className={className}
+        style={{
+          ...getRowStyle(gridRowStart),
+          ...style
+        }}
+        {...props}
+      >
         {cells}
       </div>
     </RowSelectionContext>

src/types.ts

@@ -219,7 +219,7 @@ export interface CellSelectArgs<TRow, TSummaryRow = unknown> {
 }
 
 export interface BaseRenderRowProps<TRow, TSummaryRow = unknown>
-  extends Omit<React.ComponentProps<'div'>, 'style' | 'children'>,
+  extends Omit<React.ComponentProps<'div'>, 'children'>,
     Pick<
       DataGridProps<TRow, TSummaryRow>,
       'onCellClick' | 'onCellDoubleClick' | 'onCellContextMenu'

website/routes/CustomizableRenderers.tsx

@@ -2,8 +2,15 @@ import { useMemo, useState } from 'react';
 import { createFileRoute } from '@tanstack/react-router';
 import { css } from '@linaria/core';
 
-import { DataGrid, SelectColumn, textEditor } from '../../src';
-import type { Column, RenderCheckboxProps, RenderSortStatusProps, SortColumn } from '../../src';
+import { Row as BaseRow, Cell, DataGrid, SelectColumn, textEditor } from '../../src';
+import type {
+  CellRendererProps,
+  Column,
+  RenderCheckboxProps,
+  RenderRowProps,
+  RenderSortStatusProps,
+  SortColumn
+} from '../../src';
 import { useDirection } from '../directionContext';
 
 export const Route = createFileRoute('/CustomizableRenderers')({
@@ -115,7 +122,7 @@ function CustomizableRenderers() {
       onSortColumnsChange={setSortColumns}
       selectedRows={selectedRows}
       onSelectedRowsChange={setSelectedRows}
-      renderers={{ renderSortStatus, renderCheckbox }}
+      renderers={{ renderSortStatus, renderCheckbox, renderCell, renderRow }}
       direction={direction}
     />
   );
@@ -149,6 +156,23 @@ function renderSortStatus({ sortDirection, priority }: RenderSortStatusProps) {
   );
 }
 
+const cellStyle: React.CSSProperties = { color: 'red' };
+
+function renderCell(key: React.Key, props: CellRendererProps<Row, unknown>) {
+  const style =
+    props.column.key === 'priority' && props.row.priority === 'Critical' ? cellStyle : undefined;
+
+  return <Cell key={key} {...props} style={style} />;
+}
+
+const rowStyle: React.CSSProperties = { color: 'green' };
+
+function renderRow(key: React.Key, props: RenderRowProps<Row>) {
+  const style = props.row.complete === 100 ? rowStyle : undefined;
+
+  return <BaseRow key={key} {...props} style={style} />;
+}
+
 function rowKeyGetter(row: Row) {
   return row.id;
 }