I am developing a react JS component with JSX coding structure that gets a JSON array of data from api. The component is a table like structure and has two arrows at the top and bottom. I want to achieve a functionality where on click of top arrow the table rows should be updated with new set of data in rows and vice-versa happens on click of down arrow. Is there a way to achieve this functionality?
It seems you are trying to do some sort of table paging. You can do this by storing the current page on the state of your control, and on the onClick handler:
make the call to the server API to retrieve the data for the next/previous page if you are paging and sorting on the server, then update the state with the retrieved data
or calculate and update the state with whichever rows you want to display if you already have all rows in memory but are showing a small set of them
Related
I have a table implemented in material table and it has served its purpose, unfortunately due to the poor performance issue where it re-renders every time there is a change in the state regardless of the states connection to the table itself.
I've opted to move to a different table and looking at React table as a possibility.
Can react table rows be customized that's not inline with the column data fully like the table below?
The parent has a different data compared to the sub-parent and the data in the sub-parent is different from its own parent (Which is the sub-parent).
To answer my own question.
Yes, react-table can certainly do these, you just need to conditionally render each row and table differently.
I want to know how to get all the nodes or rows that are in the current AG-Grid pagination.
The closest I got to this was this.gridApi.getRenderedNodes(), but it does not bring all the lines from the current page.
Framework website: https://www.ag-grid.com/.
You can get the data of your table with the API method getModel(). Make sure to use the filtered data. Then, you can use the method paginationGetPageSize() to find out the currently configured page size. Together with paginationGetCurrentPage() you can then extract the subset of rows which are on the current page.
See also the documentation: https://www.ag-grid.com/documentation/javascript/grid-api/
Can someone please give me an idea on how to display the data fetched from an api in a grid/tiles/box view rather that a tabular view in React.js?
The data should be displayed in boxes/grids/tiles and should resize it self to fit on a single page.
So when more data is added, the boxes need to become smaller in order to fit the single page.
Auto-resizable grid view in React js
Assume i have multiple columns and i am going to swap the columns to perform some operation which could reload the page. How to reload the page with same slick grid column position?
Assuming you're using the 6pac/SlickGrid fork, you need to save the grid state before you leave the page and then call grid.setColumns(reoderedColumns) but what would be easier is to use the Slick.State Plugin slick.state.js which is used in this Example - Plugin State
The Example was missing from the Wiki - Examples, I added it Example Grid State
I am working on a project that fetches at least 50,000 data sets that have to be displayed as tabular data. The data sets are fetched from our MySQL database. The users have the following requirements...
The users don't want to set up pagination but they want to render more and more table rows as they scroll down the page.
If they scroll up, the users should not see the table rows that were previously displayed when they scrolled down. That means that I have to either delete the table rows that were previously created or hide them.
The lag or load time so as to not detect any obvious latency or lag.
Our project uses a LAMP (Python) stack with Django as a framework. We use Django templates which are server side templates. I don't know how to translate the same experience to client side. I have an idea for an approach, can someone either validate it or correct it?
My intended approach is given below:
Fetch a certain subset of rows of the original data set upon load (say 5000). This will be cached server side with memcached. On page load, only a certain subset of it (say 100) will be displayed. Each page will have certain state associated with such as page number or page size. These will be initialized using HTML5 history pushstate API.
When an ajax request is made, then additional data sets will be fetched and additional table rows will be appended to the existing table rows.
When the user scrolls up and reaches what would have been a previous page, the table rows get deleted or hidden.
I don't know how to implement step 3. What event should I listen to? What preconditions should I check for in order to trigger step 3. I also don't know if step 2 is the correct approach.
Here's what I would do:
Add a class (scrolled-past) to any row that is scrolled past the window top. (If you're using jQuery, jQuery Waypoints is a great tool to detect this.)
Fetch more data when reaching bottom.
When the data has been fetched, hide all .scrolled-past elements, append new rows and scroll to the top of the table (where to first row now is the one that was previously the uppermost visible row).
There might be glitches when hiding, appending and scrolling, but I bet you'll nail it with an hour of tweaking. Adding the exact top offset of the uppermost visible row to the scroll offset in step 3 is one way of making it more neat.