feat: row and cell className generator

src/config.ts

@@ -16,6 +16,8 @@ import { GridEvents } from './events';
 import { PluginManager, PluginPosition, Plugin } from './plugin';
 import Grid from './grid';
 import { Store } from './state/store';
+import Row from './row';
+import Cell from './cell';
 
 export const ConfigContext = createContext(null);
 
@@ -67,8 +69,8 @@ export interface Config {
     th: string;
     thead: string;
     tbody: string;
-    tr: string;
-    td: string;
+    tr: string | ((row: Row, header: boolean) => string);
+    td: string | ((cell: Cell, column: string, row: Row) => string);
     container: string;
     footer: string;
     header: string;

src/view/table/td.tsx

@@ -66,6 +66,13 @@ export function TD(
     }
   };
 
+  let tdClassName: string = "";
+  if (typeof config.className.td === 'function') {
+    tdClassName = config.className.td(props.cell, props.column?.id, props.row)
+  } else {
+    tdClassName = config.className.td
+  }
+
   return (
     <td
       role={props.role}
@@ -74,7 +81,7 @@ export function TD(
       className={classJoin(
         className('td'),
         props.className,
-        config.className.td,
+        tdClassName,
       )}
       style={{
         ...props.style,

src/view/table/tr.tsx

@@ -50,9 +50,16 @@ export function TR(props: {
     });
   };
 
+  let trClassName: string = "";
+  if (typeof config.className.tr === 'function') {
+    trClassName = config.className.tr(props.row, this.header)
+  } else {
+    trClassName = config.className.tr
+  }
+
   return (
     <tr
-      className={classJoin(className('tr'), config.className.tr)}
+      className={classJoin(className('tr'), trClassName)}
       onClick={handleClick}
     >
       {getChildren()}

tests/jest/view/table/td.test.tsx

@@ -38,4 +38,46 @@ describe('TD component', () => {
     expect(cells.length).toEqual(1);
     expect(onClick).toHaveBeenCalledTimes(1);
   });
+
+  it('should attach the custom td className', async () => {
+    const td = mount(
+      <ConfigContext.Provider
+        value={{
+          ...config,
+          ...{
+            className: {
+              td: 'custom-td-classname',
+            },
+          },
+        }}
+      >
+        <TD cell={new Cell('boo')} />
+      </ConfigContext.Provider>,
+    );
+
+    expect(td.find('td.custom-td-classname')).toHaveLength(1);
+  });
+
+  it('should attach the custom td className callback', async () => {
+    const cellStyleGenerator = jest.fn();
+
+    const td = mount(
+      <ConfigContext.Provider value={{
+        ...config,
+        ...{
+          className: {
+            td: () => {
+              cellStyleGenerator()
+              return 'custom-td-classname-callback'
+            }
+          },
+        },
+      }}>
+        <TD cell={new Cell('boo')} />
+      </ConfigContext.Provider>,
+    );
+
+    expect(cellStyleGenerator).toHaveBeenCalledTimes(1);
+    expect(td.find('td.custom-td-classname-callback')).toHaveLength(1);
+  });
 });

tests/jest/view/table/tr.test.tsx

@@ -64,4 +64,30 @@ describe('TR component', () => {
 
     expect(tr.find('tr.custom-tr-classname')).toHaveLength(1);
   });
+
+  it('should attach the custom tr className callback', async () => {
+    const rowStyleGenerator = jest.fn();
+    const tr = mount(
+      <ConfigContext.Provider
+        value={{
+          ...config,
+          ...{
+            className: {
+              tr: () => {
+                rowStyleGenerator()
+                return 'custom-tr-classname-callback'
+              }
+            },
+          },
+        }}
+      >
+        <TR>
+          <TD cell={new Cell('boo')} />
+        </TR>
+      </ConfigContext.Provider>,
+    );
+
+    expect(rowStyleGenerator).toHaveBeenCalledTimes(1);
+    expect(tr.find('tr.custom-tr-classname-callback')).toHaveLength(1);
+  });
 });