Search code examples
cssreactjsmaterialize

How to do Table Pagination with React and MaterializeCSS


I have a dynamic materialize table which needs to be paginated. I have tried using materialize pagination and linking it with the table but didnt work.. Also tried using jQuery but everyone advices not to.. I know of alternate react tables however Im really trying to only use materializeCss for weight reasons. Any help ? This prolly doesnt need any code but for those who will downvote this, here you go :)

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

Solution

  • Solved it by using another Pagination component with Materialize table. I tried using jQuery but since its advised not to use that with React, I just pulled another react pagination and combined it with the table.