adazzle / react-data-grid

Feature-rich and customizable data grid React component
https://adazzle.github.io/react-data-grid/
Other
6.93k stars 2.18k forks source link

pass rowIdx to renderEditCell #3511

Closed dalmolinz closed 2 months ago

dalmolinz commented 4 months ago

rowIdx is passed to renderCell but not to renderEditCell. This PR fixes that unless there's any reason otherwise.

In my use case, I'm rendering a custom input component that updates a react-hook-form context, and it references the form field using the dot notation e.g. persons.1.height etc.

The status quo with rdg only exposing row, I have to expand my rows objects to contain their own indexes, or do a rows.findIndex, which forces me to declare columns inside the render cycle and deal with memoization etc. Neither are ideal, especially because the solution is right under our noses.

The proposed PR makes it trivially simple to achieve that:

renderEditCell: ({ rowIdx, column }) => {
  return <input name={`myField.${rowIdx}.${column.key}`} />;
}
codecov[bot] commented 2 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 98.17%. Comparing base (3904d58) to head (5796889).

Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #3511 +/- ## ======================================= Coverage 98.17% 98.17% ======================================= Files 47 47 Lines 5083 5084 +1 Branches 720 720 ======================================= + Hits 4990 4991 +1 Misses 93 93 ``` | [Files](https://app.codecov.io/gh/adazzle/react-data-grid/pull/3511?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=adazzle) | Coverage Δ | | |---|---|---| | [src/EditCell.tsx](https://app.codecov.io/gh/adazzle/react-data-grid/pull/3511?src=pr&el=tree&filepath=src%2FEditCell.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=adazzle#diff-c3JjL0VkaXRDZWxsLnRzeA==) | `98.82% <100.00%> (+<0.01%)` | :arrow_up: |