How to programatically navigate to the last or n-th page of antd table component?

3.5k views Asked by At

I am adding a new item to antd table component with pagination component and would like to navigate table contents to last or n-th page in pagination. How can I programatically navigate to the last or n-th page of antd table component with antd pagination?

2

There are 2 answers

1
vladimirp On BEST ANSWER

This is how I solved it:

1) Add pagination object to component state

constructor(props) {
        super(props);

        this.state =
            {
                pagination: null,
            };
    }

2) Pass pagination from component state to Tables pagination prop in your components render method:

    ...
    <Table
        dataSource={dataSource}
        ...
        pagination={this.state.pagination}
    />
    ...

3) In your components event handler of your choice you can now use SetState to set pagination object. For example I navigate to the last page in pagination after new item is added to the table:

handleCreateItem = () => {
        ...
        let pagination = {
            current: YourNewCurrentPageInPagination,
            maxSize: YourNewMaxSizeGridValue
        }
        ...
        this.setState({
            pagination: pagination
        })
        ...
}
0
benjycui On

You can control it by Table[pagination], see: https://ant.design/components/table/#Table