CODEWITHSUNDEEP
javascripthtmlreactjstypescriptantd
user10727653
user10727653

Reputation:

filtering table data still stays at the same page

New react developer here, here i have antd table with filtering system. My question is like this: if there is much data in the table so that there are for example page 1 page 2 page 3(with these i mean enter image description here)

for example if you click page 3 (in table) and above are filtering buttons and you click one of those buttons and scroll down, you can see it is still at page 3, how to make it so when button is clicked it should always go automatically to page 1. my code: https://codesandbox.io/s/dreamy-surf-t9eh3?file=/src/Test.js

english is not my mother language so there could be mistakes

Upvotes: 0

Views: 1958

Answers (1)

Bjorne
Bjorne

Reputation: 1484

From Table docs https://ant.design/components/table/ you can pass pagination props to your table. This means that you can pass on onChange and current to pagination element in order to reset pagination page when filtering.

Here is an example of how to manage pages using state:

const [paginationPage, setPaginationPage] = useState(1);

return (
  <Table
    pagination={{
    current: paginationPage,
      onChange: (pageNum) => setPaginationPage(pageNum)
    }}
    dataSource={filteredEventsData}
    columns={tableColumns}
  />
)

You can now reset the current page anywhere with:

setPaginationPage(youPageNumber);

https://codesandbox.io/s/nervous-banach-d7ff2?file=/src/Test.js

Upvotes: 1

Related Questions