javascript - 使用语义 UI React Table 进行表格分页

Question

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

任何人都可以就如何处理简单分页提供一些建议吗？假设我只想在每个页面上呈现 5 行数据。我怎样才能实现这个目标？

我有一个codesandbox here 。

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

使用 Semantic UI 中的分页组件怎么样？ https://react.semantic-ui.com/addons/pagination/

基本上，您只需要提供您将使用的属性 totalPages、activePage/defaultActivePage 和 onPageChange用于您的页面更改功能。