如何使用 React 和 MaterializeCSS 进行 Table 分页

Question

我有一个需要分页的动态实现 table。我试过使用物化分页并将其与 table 链接，但没有用。还尝试使用 jQuery，但每个人都建议不要这样做。我知道替代反应 tables 但是我真的试图只使用 materializeCss 出于重量原因。有什么帮助吗？这个 prolly 不需要任何代码，但对于那些会对此投反对票的人，给你 :)

 render() {
    const details = this.props.userData.map((data, index) => {
        return (
            <tbody key={index} onClick={this.getRowDetails.bind(this, data)}>
                <tr>
                    <td>{data.account_id}</td>
                    <td>{data.event_id}</td>
                    <td>{data.event_type}</td>
                    <td>{data.event_time}</td>
                    <td>{data.subscription_id}</td>
                </tr>
            </tbody>
        );
    })

    return (
        <div>
            {this.props.userData.length > 0 &&
                <Row>
                    <Card>
                        <Table hoverable={true} striped={true} id="table">
                            <thead>
                                <tr>
                                    <th data-field="account_id">User ID</th>
                                    <th data-field="event_id">Event ID</th>
                                    <th data-field="event_type">Event Type</th>
                                    <th data-field="event_time">Event Time</th>
                                    <th data-field="sub_id">Subscription ID</th>
                                </tr>
                            </thead>
                            {details}
                        </Table>
                    </Card>
                </Row>
            }

Answer 1

通过使用另一个带有 Materialize 的分页组件解决了这个问题 table。我尝试使用 jQuery 但由于它建议不要将其与 React 一起使用，我只是拉出另一个反应分页并将其与 table.

如何使用 React 和 MaterializeCSS 进行 Table 分页

How to do Table Pagination with React and MaterializeCSS

css

materialize

reactjs