使用语义UI React Table的表分页

Question

我有一个来自semantic-ui-react的<Table>组件，该组件用于呈现来自semantic-ui-react api调用的获取数据。 我可能有X的行数，所以我正在考虑添加分页。 我找到了一些解决方案，但它们看起来实在太大了。

谁能提供一些有关如何处理简单分页的建议？ 假设我只想在每个页面上呈现5行数据。 我该如何实现？

我在这里有一个codeandbox 。

class PaginationExample extends Component {
  constructor(props) {
    super(props);

    this.state = { tableData: [], activePage: 1 };
  }

  async componentDidMount() {
    await this.getData();
  }

  getData = async () => {
    const { data } = await axios.get("/slotInfo");
    console.log(data);
    const tableData = data.data.slotInfo;
    this.setState({ tableData: tableData });
  };

  //change handlers for pagination

  handlePageClick = (e, { name }) => this.setState({ activePage: name });

  render() {
    const { tableData, activePage } = this.state;
    return (
      <div className="App">
        <h1>Table Pagination w/ SUI-React Component</h1>
        <Table style={{ marginTop: "5em" }} inverted celled>
          <Table.Header fullWidth>
            <Table.Row>
              <Table.HeaderCell>Slot Id</Table.HeaderCell>
              <Table.HeaderCell>deviceId</Table.HeaderCell>
              <Table.HeaderCell>Initialized</Table.HeaderCell>
              <Table.HeaderCell>Label</Table.HeaderCell>
            </Table.Row>
          </Table.Header>

          <Table.Body>
            {Object.values(tableData).map(
              ({ slotId, deviceId, initialized, label }) => {
                return (
                  <Table.Row>
                    <Table.Cell>{slotId}</Table.Cell>
                    <Table.Cell>{deviceId}</Table.Cell>
                    <Table.Cell>{initialized}</Table.Cell>
                    <Table.Cell>{label}</Table.Cell>
                  </Table.Row>
                );
              }
            )}
          </Table.Body>

          <Table.Footer>
            <Table.Row>
              <Table.HeaderCell colSpan="4">
                <Menu floated="right" pagination>
                  <Menu.Item as="a" icon>
                    <Icon name="chevron left" />
                  </Menu.Item>
                  <Menu.Item
                    name="1"
                    active={activePage === "1"}
                    onClick={this.handlePageClick}
                  />
                  <Menu.Item
                    name="2"
                    active={activePage === "2"}
                    onClick={this.handlePageClick}
                  />
                  <Menu.Item
                    name="3"
                    active={activePage === "3"}
                    onClick={this.handlePageClick}
                  />
                  <Menu.Item
                    name="4"
                    active={activePage === "4"}
                    onClick={this.handlePageClick}
                  />
                  <Menu.Item as="a" icon>
                    <Icon name="chevron right" />
                  </Menu.Item>
                </Menu>
              </Table.HeaderCell>
            </Table.Row>
          </Table.Footer>
        </Table>
      </div>
    );
  }
}

Answer 1

如何使用语义UI中的分页组件？ https://react.semantic-ui.com/addons/pagination/

基本上，您只需要提供道具totalPages ， activePage / defaultActivePage和onPageChange用于页面更改功能。