import React, { Component } from 'react';
import { Pagination } from '@vhx/quartz-react';
class MyPage extends Component {
constructor() {
super();
this.state = {
currentPage: 0,
pageCount: 0,
};
}
componentWillMount() {
// This would make a request to get the total number of rows or pages
}
fetchPage(nextPage) {
// This function would also make an ajax request to get the new page's contents
this.setState({ currentPage: nextPage });
}
render() {
return (
<div>
<table>
{ /* video/collection rows would go here... */ }
</table>
<Pagination
length={this.state.pageCount}
currentIndex={this.state.currentPage}
onChange={this.fetchPage}
/>
</div>
);
}
}
The most important thing to understand here is the component's onChange handler. Whenever "Next", "Previous", or any of the numbers are clicked, that callback will be called with the index of the new active page.
Overview
This PR adds a Pagination component. Usage is as follows:
In context, that would be something like this:
The most important thing to understand here is the component's
onChange
handler. Whenever "Next", "Previous", or any of the numbers are clicked, that callback will be called with the index of the new active page.Preview