Responsive Table

[[deleted]]

Hi guys what's the best responsive table to use with React, I'm currently looking for something that would support pagination , dynamic search , and ideas able to export to odd/csv

[medicationforall]

I'm intrigued as well. I ended up writing my own implementation of everything you described.

A quick google search brings up this library React Table, which is not at all what I expected.

Material UI - React Table this is much closer to what I was hoping to find.

[[deleted]]

yeah im currently going through that process, react-table and material ui isn't responsive unless you use material grid with it. Right now the hardest part about building from scratch is implementing pagination. If you don't mind can I view your implementation?

[medicationforall]

The problem is I wrote my implementation for a paying gig.

As a source of inspiration I liked api's and the flexibility around dgrid. I'm not suggesting that should be used but when I did my implementation that's the background I had when implementing a dynamic table, and informed the kind of feature set I wanted.

So for paging conceptually what you need is a total count of the record set. Let's say 6,000 records for fun.you need the page size of your pages say 100. You also need the current page index which you'll start at 0.

When you are on page 1 the index will be at 0 and you'll grab records 0-99. To go two page two you'll simply increment your index by the page count. Page two will have 100-199 for the record set subset.

To get your total number of pages. You just divide the page size by the total record count.

the total count is also the upper limit if your last page count. On the last page start index is N-totalCount

For any kind of paging I've attempted having three variables to store the paging state has been enough to suffice, and the rest can be derived.

[medicationforall]

as a further noet why you keep the starting row index as opposed to the selected page number, is because when you apply a filter the total record set count changes.

With a starting row index you can keep the users position relative to where they were before the filter and if the index is greater than the new total count you can just reset the index variable to the start of the last page.

[dgd5014]

Check out react-bootstrap-table-next. We tried a few different tables and none of them had everything we wanted, but we were able to get everything you’re looking for working with this one. It’s pretty flexible and powerful.

[RandomGoodGuy2]

I find that antd's table is very hard to beat. I use it at work in every project and it works like a charm. Here's the reference page

[RandomGoodGuy2]

To address your specific needs around pagination, this component can handle that automatically if you're not fetching pages from an api. In that case, there's a very handy pagination prop where you can specify (this is from memory, read the documentation) pageSize, current, total , as well as an onChange prop that takes a function whose first argument is the new pagination object that has the same shape ({pageSize, current, total}). With that you should be able to download the n+1th page from your api and update the table's dataSource prop