Skip to content

Conversation

amanmahajan7
Copy link
Collaborator

@amanmahajan7 amanmahajan7 commented May 3, 2021

  • Change rowHeight to a number/function to support variable row heights
  • Ensure performance is not impacted when rowHeight is a number
  • Add unit tests

I think this can really useful specially on readonly grids

@amanmahajan7 amanmahajan7 self-assigned this May 3, 2021
}, [expandedGroupIds, groupedRows, rawRows]);

const { totalRowHeight, getRowTop, getRowHeight, findRowIdx } = useMemo(() => {
if (typeof rowHeight === 'number') {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change does not impact the performance if rowHeight is a number.


const rowPositions: ({ height: number; top: number })[] = [];
let totalRowHeight = 0;
// Calcule the height of all the rows upfront. This can cause performance issues
Copy link
Collaborator Author

@amanmahajan7 amanmahajan7 May 3, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did not notice any performance issues even on a large grid. Tried editing, colspan and a few other features. This can be slow if rowHeight itself is expensive

return rowPositions[rowIdx].top;
},
getRowHeight: (rowIdx: number) => rowPositions[rowIdx].height,
findRowIdx(offset: number) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use binary search on a sorted array.

rows.push({
id: i,
year: 2015 + faker.random.number(3),
year: 2015 + faker.datatype.number(3),
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

faker.random is deprecated

@amanmahajan7
Copy link
Collaborator Author

Working on tests but ready for review.

@amanmahajan7 amanmahajan7 marked this pull request as ready for review May 3, 2021 16:16
@amanmahajan7 amanmahajan7 requested a review from nstepien May 3, 2021 16:16
@amanmahajan7 amanmahajan7 changed the title POC: Variable row heights Add support for variable row heights May 3, 2021
amanmahajan7 and others added 5 commits May 4, 2021 08:48
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
amanmahajan7 and others added 2 commits May 4, 2021 10:08
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
nstepien
nstepien previously approved these changes May 4, 2021
@amanmahajan7 amanmahajan7 merged commit c18dd2c into canary May 4, 2021
@amanmahajan7 amanmahajan7 deleted the am-variable-height-row branch May 4, 2021 16:55
gernotkogler pushed a commit to Garaio-REM/react-data-grid that referenced this pull request May 13, 2021
* Change rowHeight to a function to support variable row heights

* Fix hooks order

* Remove memo

* Add a comment

* Fix tests

* Fix types

* Cleanup

* Use a single array

* Fix pageup/pagedown

* Update src/DataGrid.tsx

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>

* Update src/hooks/useViewportRows.ts

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>

* newScrollTop -> nextRowY

* move/deduplicate getRowTop(rowIdx) and getRowHeight(rowIdx) calls outside the ifs

* Validate rowIdx

* Update src/hooks/useViewportRows.ts

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>

* Fix typo

* Add rowHeight tests

* typo

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants