I have an React table that contains 20k+ rows and some of these rows contains editable fields. I e.g. have a number field in which I have a component where it is possible to +/- the value.
I have been using the Examples: Editable Data from react tables own page, where all data is stored in as useState and then on each update it is changed - this however performes very badly, as the re-render delays the value changes when clicking the + button multiple times. Is there a way to handle this better and maybe also keep the original data such that is it possible to do a "reset", such that I don't need to overwrite the entire dataset for the table.
I did some research on the topic and found that you could use react-virtualized.
React components for efficiently rendering large lists and tabular data
It seems that it would be perfect solution to your problem.
Whats very cool is that by default all react-virtualized components use shallowCompare to avoid re-rendering unless props or state has changed.
Hope this will be a good replacement for react-table
Related
I need help with React-table.
I have a table that has rows with custom components (Select components and editable input).
When I change the Select/editable input the whole table is re-rendering .
how can I prevent it from happened?
I try to wrap my custom components with React.memo but I did not success to handle the problem.
This is a link for sandbox
you can see in the console that if you change the input it renders everything.
P.S don't use the last column something doesn't work there (i copied it from my project)
thanks!
I have an ag-grid instance, which have to be updated continuously, every few seconds, with fresh data by calling a service.
I want the grid to update only the cells with changed data.
Is there any way to achieve this using React?
Thanks in advance.
assuming you bind the grid data correctly, and don't alter the rowBuffer, or otherwise force the grid to render all its data to the DOM (thereby turning off virtualization), you should be fine.
the grid will test for changes in the data and only render what was updated (see the docs on change-detection).
if you still find you need some boost (like when you have real large datasets) you can try batch-transactions.
all of the above is correct regardless of framework; these are core features of ag-grid.
I'll first describe the problem I want to solve, and then my naive solution.
Problem: I want to have some grid of squares with a fixed size. When the user hovers over a cell, it should highlight the surrounding cells.
My solution: Use an HTML table, with tds representing cells. The table passes in a hover listener to every cell (e.g. () => cellEnter(5, 7) for cell at (5, 7)). The cell then calls this handler when it's hovered over, which goes to the table component which calculates which cells should be highlighted, and then updates its state to reflect which children are highlighted.
Issue: The performance on my device deteriorates once the table dimensions reach 100. I added a shouldComponentUpdate to the cells to only update when their highlighted state changes. Using the React chrome tool, I can see that only the relevant cells are being updated, but the table itself is also updating. The RAM and CPU usage blows up really fast.
Am I right in assuming there is no avoiding this, since the children can't re-render without the parent re-rendering. My original pure JS solution worked in O(1) since it just updated the cells directly. Is there a way to represent this relationship in React while keeping O(1) performance? Maybe the issue lies elsewhere, so I whipped up a fragment of my app (forgive the rushed code).
Codepen here
I'm very new to React, I appreciate any help.
I'm working on a table component with React and I'm encountering an issue with a large table set (> 500 rows). Indeed, When I try to highlight the row where I clicked on, I encounter a big leak in performances.
In order to achieve the row selection, I'm holding a state containing the currently active row in the top component which consists of a container for all the rows in my table. When I click on a cell, I'm updating this state with the row the cell is part of.
This cause a trigger of the render() method my top component and the whole application becomes slow due to huge amount of elements re-rendered.
How can I re-render just the selected row? Is there a general best-practice to avoid the re-render of all the components under by top component?
What about using CSS? You can use :hover property over each row and change the background color each time the mouse is over or clicked. The performance stress is to low if you use the CSS property.
Good luck
I recently did build a grid component in react. My approach to get a fast responding grid on selection and keyboard navigation:
Do not render rows that is outside the viewport (visible range).
Use an unique key on all rows as mentioned in the comments.
Have the selected row key as a component variable (not in state).
On selection update selected row key variable and then update the DOM directly without re-rendering. I get a ref to the grid and then use getElementsByClassName to set remove active class from any active row. Then set active class + focus to the selected row.
I realize that your implementation differs from mine but hopefully you can get some ideas at least.
I would like to use one of the many table/data-grid components available to render a table. However, I am struggling to choose one as I have very specific requirements and I'm not sure if they are supported by them.
Ok so ideally I would like the table to initialise with only column headers (which are populated by data from a database). I would then like to be able to add a row (by clicking on a button), and be able to enter data into the cells and then save the data in that row to my database. The column headers are generated by form but there can feasibly be any number of them. Most of the examples for the various components seem to expect you to already know what your data is before you render the table. But this will not be the case for me.
I was considering Griddle but they don't have an editable cell option yet (it's only part of the roadmap) so unless I create my own custom function, I think that that is out for now.
I was just hoping for some guidance is choosing the best component for what I need!
Thanks for your time