PoC: Add grid.rowStyle and col.cellStyle options

[leeoniya]

hey @nstepien @amanmahajan7

i wanted to open this up to see how y'all feel about allowing users to style rows and cells without generating classNames.

our use case is being able to style a row or cell using something like d3 color scheme gradients, based on cell value. there can be potentially 256 different colors per column, and generating a class for each color on demand is not great. additionally we may want to style both text and background, leading to a possible combinatorial explosion of classes.

i know we can always throw an additional div into renderCell and renderRow to do this, but that leads to extra DOM and worse performance. we can use renderers, but this increases complexity a lot in user code that seems silly just to be able to add colors and change little else.

would you be open to adding arbitrary style callbacks like this?

thanks for considering!

[amanmahajan7]

Thank you for the PR. You mentioned renderRow and renderCell and I think we can use them without needing an extra div

function renderCell(props) {
  return defaultRenderCell({ ...props, style={customStyle} />
}

function renderRow(props) {
  return defaultRenderRow({ ...props, style={customStyle} />
}

function Component() {
  return <DataGrid  renderers={{ renderCell, renderRow}} ...
}

For this to work we need to make a few changes

1. Export defaultRenderCell and defaultRenderRow (https://github.com/adazzle/react-data-grid/blob/main/src/index.ts#L2)
2. Update Row component to accept style prop (
   https://github.com/adazzle/react-data-grid/blob/main/src/types.ts#L222)

wdyt?

[leeoniya]

@amanmahajan7 yep that sounds great, go for it :)

[amanmahajan7]

Do you want to make these changes in your PR?

[leeoniya]

if you prefer, sure. i don't need the credit, so if you feel like there would be less review burden / faster, feel free to close this and do the PR on your end.

[leeoniya]

@amanmahajan7 i pushed the suggested approach, but not seeing anything render. what am i missing?

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.79%. Comparing base (4bbeb50) to head (c68c653).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3775   +/-   ##
=======================================
  Coverage   98.78%   98.79%           
=======================================
  Files          46       46           
  Lines        3467     3475    +8     
  Branches      762      762           
=======================================
+ Hits         3425     3433    +8     
  Misses         42       42           

Files with missing lines	Coverage Δ
src/Row.tsx	100.00% <100.00%> (ø)
src/types.ts	100.00% <ø> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[amanmahajan7]

Thank you for the PR

[leeoniya]

@amanmahajan7 thank you!

one comment about the demo, though...

i think the scenario shown in the demo and my simple examples are probably better done with className, since the amount of possible states is limited/known.

the d3-gradient/color-by-value better illustrates a real situation when className wont work well.

anyways, looking forward to next beta. also excited to finally see a columnResizeEnd equivalent, instead of having to hack that in as a userland custom hook with click/mouseup handlers.

[amanmahajan7]

the d3-gradient/color-by-value better illustrates a real situation when className wont work well.

I think the demo illustrate the idea but feel free to update the example