Data Table Implementation For Large Data

(Vincent) #1

Hi guys, I’ve got a problem with implementing data table for large records.
I’m currently using React-Table to show 1000 most recent (of ~1mil) records of a table. When the user performs a filter, it will only match in the first 1000 most recent records because we’re doing client side filtering. But sometimes user also need to search the records that are not displayed in the 1000 most recent data.
Does anyone know of a nice implementation which reverts back to the server-side (database) if zero (or some small threshold) number of results are found?

A similar problem is when the user clicks a column heading to change the table sort order. We have text under the table saying “Displaying 1,000 out of 996,435 records” but users still mistakingly think they sorted table represents the top or bottom 1000 records of the field they clicked. This might be more of a UX issue and less important. But if anyone is experiencing the same issue, I would love to hear their take on this.

I have created code sandbox to demonstrate this issue:

Any ideas or links to more complex implementations for this would be super appreciated.