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);
+ });
 });