Add prop rowClassName

Author: nick-keller

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## 3.5.0
+> Date: 2021-12-26
+### Added
+- New prop `rowClassName`
+
 ## 3.4.0
 > Date: 2021-12-23
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-datasheet-grid",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "An Excel-like React component to create beautiful spreadsheets.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/components/DataSheetGrid.tsx

@@ -85,6 +85,7 @@ export const DataSheetGrid = React.memo(
         onBlur = DEFAULT_EMPTY_CALLBACK,
         onActiveCellChange = DEFAULT_EMPTY_CALLBACK,
         onSelectionChange = DEFAULT_EMPTY_CALLBACK,
+        rowClassName,
       }: DataSheetGridProps<T>,
       ref: React.ForwardedRef<DataSheetGridRef>
     ): JSX.Element => {
@@ -1553,6 +1554,7 @@ export const DataSheetGrid = React.memo(
         insertRowAfter,
         stopEditing,
         getContextMenuItems,
+        rowClassName,
       })
 
       const itemSize = useCallback(

src/components/Row.tsx

@@ -24,6 +24,7 @@ const RowComponent = React.memo(
     duplicateRows,
     stopEditing,
     getContextMenuItems,
+    rowClassName,
   }: RowProps<any>) => {
     const firstRender = useFirstRender()
 
@@ -50,7 +51,16 @@ const RowComponent = React.memo(
     }, [insertRowAfter, index])
 
     return (
-      <div className="dsg-row" style={style}>
+      <div
+        className={cx(
+          'dsg-row',
+          typeof rowClassName === 'string' ? rowClassName : null,
+          typeof rowClassName === 'function'
+            ? rowClassName({ rowData: data, rowIndex: index })
+            : null
+        )}
+        style={style}
+      >
         {columns.map((column, i) => {
           const Component = column.component
 
@@ -153,6 +163,7 @@ export const Row = <T extends any>({
           : undefined
       }
       getContextMenuItems={data.getContextMenuItems}
+      rowClassName={data.rowClassName}
     />
   )
 }

src/components/StaticDataSheetGrid.tsx

@@ -20,6 +20,7 @@ export const StaticDataSheetGrid = React.forwardRef<
       onBlur,
       onActiveCellChange,
       onSelectionChange,
+      rowClassName,
       ...rest
     }: DataSheetGridProps<T>,
     ref: React.ForwardedRef<DataSheetGridRef>
@@ -36,6 +37,7 @@ export const StaticDataSheetGrid = React.forwardRef<
       onBlur,
       onActiveCellChange,
       onSelectionChange,
+      rowClassName,
     })
 
     return <DataSheetGrid {...staticProps} {...rest} ref={ref} />

src/types.ts

@@ -64,6 +64,9 @@ export type ListItemData<T> = {
   insertRowAfter: (row: number, count?: number) => void
   stopEditing: (opts?: { nextRow?: boolean }) => void
   getContextMenuItems: () => ContextMenuItem[]
+  rowClassName?:
+    | string
+    | ((opt: { rowData: T; rowIndex: number }) => string | undefined)
 }
 
 export type HeaderContextType<T> = {
@@ -109,6 +112,9 @@ export type RowProps<T> = {
   insertRowAfter: (row: number, count?: number) => void
   stopEditing?: (opts?: { nextRow?: boolean }) => void
   getContextMenuItems: () => ContextMenuItem[]
+  rowClassName?:
+    | string
+    | ((opt: { rowData: T; rowIndex: number }) => string | undefined)
 }
 
 export type SimpleColumn<T, C> = Partial<
@@ -151,6 +157,9 @@ export type DataSheetGridProps<T> = {
   value?: T[]
   style?: React.CSSProperties
   className?: string
+  rowClassName?:
+    | string
+    | ((opt: { rowData: T; rowIndex: number }) => string | undefined)
   onChange?: (value: T[], operations: Operation[]) => void
   columns?: Partial<Column<T, any>>[]
   gutterColumn?: SimpleColumn<T, any> | false