I already have a table that renders my data. But there can be as many as 1000 rows in the table.
Right now, the dataprovider component sends date to the table component via props. What's the best way to start pagination? Should I still fetch all the data at once, as is currently the case? If so, where do I store it? Keep it in memory and take slices as needed? Or somehow use query params for the the number of records to fetch (0 - 24, 25 - 49, etc)?
Returning all the data in one response could be too large, this depends on the size of each item. If the size of the response is small, you can simply request all the data and do the pagination on the UI. You can use react-table to do this.
If the response is too heavy (time-consuming), you have to implement pagination on your server. Then you can use react-table to seamlessly integrate the pagination to the UI.
The approach you use to paginate it is up to you, here are a few ways you can do it in: API pagination guide
Related
i am trying to update the data according to search filter in material table, i didn't find any method or param by which i access the data updated on search filter, i can call an api and provide search filter but it may slow down the query so i want to do it on frontend side.
i have tried the method above mentioned handleSearchChange which only give the search query nothing else, if i can get access the data of updated after searching in search field then i can do what i want
I have found an answer for the above query I have posted, the simple way to use the useRef in material table, by which you can access the current data of your table displaying.
tableRef={tableRef}
to access the data you can use
tableRef?.current?.state.data
I have a data table which supports server side pagination and sorting.
I am using Redux as my store and React for display. The scenario is :
I have 5000 rows and hence server side pagination. Now the real challange is :
How do I use redux optimally to fetch data remotely in combination with Pagination and Sorting ?.
This link explains how I can handle server pagination by not hitting the server API for repeated data. But how can I handle pagination and sorting (together) in terms of saving data in REDUX and not making unnecessary calls to API for repeated data.
Example :
Pagination - Page Size = 10 =>
I am on Page1 -> I get first 10 records and display / save them with a FLAG that Page 1 data fetched true (as mentioned in the above article). Same for other pages. Now when I go to ANY page number; I check the flag, based on which I fetch data from REDUX or API.
If sorting is introduced in this solution; what can be done ? Need optimal solutions performance wise. Thanks !
I want to display the data returned from an api in a tabular form.What is preferable:
Building a table from scratch and adding functionality like pagination, search and row select
or
Using already built in components like react-table or react-data-table-component, MDBDataTable, etc
My requirement is, I just want to show the data returned from an axios call and also should have functions like pagination, row-select and search. Also, which component is best which will solve my requirement
try this react table component ka-table https://komarovalexander.github.io/ka-table/#/overview
It has all required functionality. Works with both js and ts. And easy to start because of big set of demos
I am using react with redux for development.
I have around 20000 rows in database. I need to display list to users on screen, 10 rows at a time. I also have sorting and filters applied to the list.
I can think of 2 options
Store only UI state of component in the redux state and bring data for each page using ajax/fetch. This way all sorting and filters are applied on server end and i get only 10 rows to display at a time.
Bring all data once to redux state and display 10 records. This way we do not request server for data again, as all sorting and filters are applied within data stored in state
What is better option/practice?
I have a big data portion that I would like to post in a table. However, the data should be sorted and paginated. I know I am able to pass the whole data to the client at once and then paginate it using angular, but this will be too slow. I prefer to pass the data page-by-page, so one the client want to open a page from a table to load the data for it.
Up until now I have created an API that returns me the data that I need, based on the page number and the number of rows on the page. However, I don't know how to use it with AngularJS.
Can you please help me?
It looks like a backend problem. If you are using a standard restful backend, use the limit/skip parameters, you can encapsulate into a paginate.
Example:
localhost:1337/dataTable?skip=0&limit=100
localhost:1337/dataTable?skip=100&limit=100
localhost:1337/dataTable?skip=200&limit=100
...
On the frontend use a table object like ng-Table, and use the pages to keep track of the offset, the page number and the total items available.
skip = (pagNum - 1 * pageSize)
limit = pageSize
Make your backend return you the page you want plus the available dataNumber so you can build the pages controller.
Documentation for skip/limit on sails
http://sailsjs.org/documentation/reference/waterline-orm/queries/limit
http://sailsjs.org/documentation/reference/waterline-orm/queries/skip
Best approach is to keep track of the limit and offset in your controller. Then when user selects new page (offset) or changes items per page (limit), update the corresponding values and use them to make a new http request.
You could call a function on ng-change of a dropdown and that drop down would contain values of page number and number of records to fetch. Or you can provide two text boxes one for page number other for number of records and keep a button and on its ng-click event that will take value of those text boxes and post to your server and bring back data based on new values in text boxes