CODEWITHSUNDEEP
javascriptreactjspaginationmaterial-uicodesandbox
Koala7
Koala7

Reputation: 1404

React Search title result and Pagination Material UI

I am able to retrieve a list of data and search for a title name from a list of todos

This is the prototype i have done => https://codesandbox.io/s/silly-firefly-7oe25

In the demo you can see the 2 working cases in App.js

<Tasks tasks={currentTasks} loading={loading} /> // it works with Pagination
<Tasks tasks={filteredData} loading={loading} />  // It filters por title, result not paginated

I need to combine the data filteredData paginated when i do the research in my inputType, the problem that i have now is that i can not paginate the data filtered, but the pagination is working with my initial list of data.

Upvotes: 3

Views: 606

Answers (1)

itaydafna
itaydafna

Reputation: 2086

Here is a solution based on the sandbox you provided:

https://codesandbox.io/s/so-68247206-bshhd?file=/src/App.js

All I did was apply the same logic you applied on the tasks to get the currentTasks on the filteredData.

I abstracted this logic to this function on the App component:

function getCurrentTasks(tasks) {
    const indexOfLastTask = currentPage * tasksPerPage;
    const indexOfFirstTask = indexOfLastTask - tasksPerPage;
    return tasks.slice(indexOfFirstTask, indexOfLastTask);
  }

Then, I just needed to pass the filteredData to this function when passing it as a prop to <Tasks/>:

<Tasks
    tasks={getCurrentTasks(filteredData)}
    loading={loading}
  />

Finally, I've updated the number of pages passed to the <Pagination /> component based on the filtered data:

<Pagination
     className={classes.paginationContainer}
     onChange={handlePageChange}
     count={Math.ceil(filteredData.length / tasksPerPage)}
     page={currentPage}
     color="primary"
   />

Upvotes: 1

Related Questions