CODEWITHSUNDEEP
reactjsmaterial-ui
Siddu hadapad
Siddu hadapad

Reputation: 3723

Material-ui table pagination

I am using Material-ui table for listing data. table will load all data at once from remote server. Is there any way to load data through pagination, as page changes data has to be fetched from remote.

when page loads i will get data from following code.

const options = { method: 'GET', headers: { Origin: '*' } };
    fetch(`https://some-url/user_groups`, options)
        .then(function (result) {
           //i will get data here
        })
        .catch(error => console.log('error while fetching ', error));

Upvotes: 1

Views: 11300

Answers (2)

Tamer Fouad
Tamer Fouad

Reputation: 21

yes you can by adding condition to the pagination slicing logic

rows.slice((useDbPagination ? 0 : page) * rowsPerPage,
           (useDbPagination ? 0 : page) * rowsPerPage + rowsPerPage).map(/*render row here*/);

Upvotes: 1

Khiem Tran
Khiem Tran

Reputation: 6169

Follow following steps:

Step 1. Change the server side to return only 1 page of data, and also return number of available records.

/api/getData?offset=5&limit=10

Step 2. On your react components, or redux store, create following state:

{
    data: list of data item to display on the table
    page: the current page of the table
    resultCount: number of available records
}

Step 3. Implement loadData to load the current page of data & result count.

Step 4. On component mount & page change event, reload the data.

Upvotes: 2

Related Questions