Want to navigate to first page on a button click

user_9556350 0
Viewed 524

In my table component my pagination options are like this :

 <Table scroll={{ y: records.length>50?'calc(100vh - 175px)':'calc(100vh - 130px)' }}
            pagination={{hideOnSinglePage:true,defaultPageSize:50,pageSizeOptions:['50','100','500'], showTotal:(total,range) => `${range[0]} to ${range[1]} of ${total} groups`}}
            columns={columns} 
            dataSource={records} />

If I go to second page or other, enter image description here

from there I click a button(for example: add) I want to go back to the first page. How is it possible?

antd reactjs
1 Answers

One solution is to make it a controlled pagination

class App extends React.Component {
  state = {
    currentPage: 1
  };

  handleChange = (page) => {
    this.setState({
      currentPage: page
    });
  };

  render() {
    return (
      <div>
        <div style={{ marginBottom: 16 }}>
          {/* back to page one when clicked */}
          <Button type="primary" onClick={() => this.handleChange(1)}>
            Add
          </Button>
        </div>
        <Table
          columns={columns}
          dataSource={data}
          pagination={{
            current: this.state.currentPage, //newly added
            onChange: this.handleChange, //newly added
            hideOnSinglePage: true,
            defaultPageSize: 50,
            pageSizeOptions: ["50", "100", "500"],
            showTotal: (total, range) =>
              `${range[0]} to ${range[1]} of ${total} groups`,
            position: ["topRight", "bottomRight"]
          }}
        />
      </div>
    );
  }
}

See working sample here:

Edit

user_122623600
Related