React - infinite scroll for table - reactjs

I have an infinite scroll located at the bottom of the page, and when scrolling to the end of the table, it will fetch and bring more data. This table contains also a search for each column:
The issue starts once the user enters a value into one of the search boxs.
That is when I filter the data and return filtered fields, but once I do that, the table has fewer rows, thus, it gets to the bottom of the page and sends a fetch call to get more data and the table is not being filtered anymore. What will be the best practice to deal with this issue?
Thanks

Related

Trigger To Delete When Rows Are Over A Certain Amount

I'm currently writing a web application that displays any sort of changes that happen within a database to the webpage. I had to write a few triggers already that insert and update a table from the table I need the information from. Because the SQL is live, I needed to create a back up table to have my webpage watch so there will be no deadlocks in the live database as it is extremely active.
I need a trigger that deletes rows from my back up table when the row amount reaches 100, is there a way to do this? I want the table to be lightweight and only display a certain amount of information at a time without taking up unnecessary space in my database

How to stop re-rendering entire table if one row changes?

I'm using antd table component.
I'm storing this table data in a state. after clicking on modify and modifying something, I'm again making an API call to get the latest data. And I'm updating the state with the latest data. But after fetching the latest data, rows are getting shuffled. If I modified the 3rd row, on re-render due to the latest data, it won't be on the 3rd row. It'll be on some other row.

SQL : Display Chunk data from huge list performance

I have to fetch n number of records from the database. The count of this record may very manager to manager. It means one manager can have 100+ records and other may have only 50+ records.
If it is all about fetching data from only one table then its super easy to get.
In my case the main pain point is I will get my result after using so many joins , temp tabels , functions , maths on some column and dates filter using switch cases and many more and yes each tables has 100k+ records with proper indexing.
I have added pagination in UI side so that I can get only 20 records at a time on screen. once I clicked on page number based on that I should offset the records for next 20. Supposed clicked on page number 3 then from db I should get only records from 41- 60.
UI part is not a big deal the point is how to optimise your query so that every time I should get only 20 records.
My current implementation is every time I am calling the same procedure with index value to offset the data. Is that correct way to run same complex with all functions , cte, cases in filters and inner/left joins again and again to fetch only piece of data from recordset.

Data Table Rendering Issue for 10k records

We are displaying 10,000 rows in table in the browser.
The example given in https://datatables.net/extensions/scroller/examples/initialisation/large_js_source.html shows we can show 50,000 records very quickly
We are using Angular with ng-repeat which takes 2 minutes to load the table. We have created 5 columns. In which one of the column has a condition options which will be enabled based on certain conditions for each rows. Whenever we add few options to the button it takes more time
example, edit, delete, view etc., in the action button which is part of a column
We observed whenever we add option along with the ng-repeat with the options takes huge time to render the table.
How to speed up the rendering time ??? Please advise.
Thanks.

Mark Unmark grid record dirty

We are providing an ability to the user to change the order/position of a grid record. For this we are using drag and drop. But after drag and drop the record doesn't appear dirty.
Thus, is there any function which can be used to forcefully mark as well as unmark a grid record as dirty? That is, forcing it to display/hide the red mark in corner.
I found a function - setDirty() on the record. But this doesn't serve the purpose.
I've done a sequencing drag and drop grid before. I had a sequence column on the database and so simply included it in my model definition.
Then in the gridview's drop event handler, I called record.set('sequence', newSequence) on all effected records whenever a drop was performed. (I say "all effected records" because whenever you change the sequence of one record it doesn't only effect the sequence of that one record e.g.: if you move a record from the very bottom of the grid to the very top all of record sequence numbers after the dropped record will be increased by one, they will all be dirty and need to be updated on the database).
Using record.set will then show that the record's sequence column is dirty with a flag.
You said that you have the server side updating ok so I am assuming that you are performing this resequencing logic on the server side, you would have to move it back onto the JS, I don't know if you want to do that.

Resources