Блог

В моем компоненте таблицы мои параметры разбивки на страницы выглядят следующим образом :

  <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} />
 

Если я перейду на вторую страницу или другую,

оттуда я нажимаю кнопку (например: добавить). Я хочу вернуться к первой странице. Как это возможно?

Одно из решений — сделать его контролируемой нумерацией страниц

 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>
    );
  }
}
 

Смотрите рабочий пример здесь: