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