itsa-react-paginator
v16.0.13
Published
React Paginator
Downloads
29
Maintainers
Readme
Paginator for react.
Lightweight, focussable and responses to the keyboard. This is only the UI-interface --> you need the callbacks to give it any functionality you want.
How to use:
const React = require("react"),
ReactDOM = require("react-dom"),
Paginator = require("itsa-react-paginator");
const pageSizes = [5, 10, 20, 50, 100, 250, 500, 1000, 'all items'];
const changePage = newPage => {
props.page = newPage;
renderPaginator();
};
const changePageSize = newIndex => {
let newItemsPerPage = pageSizes[newIndex];
if (typeof newItemsPerPage==='number') {
props.itemsPerPage = newItemsPerPage;
}
else {
delete props.itemsPerPage;
}
props.page = 1;
renderPaginator();
};
let props = {
onChange: changePage,
onChangePageSize: changePageSize,
itemsPerPage: 10,
page: 1,
pageSizes: pageSizes,
showCountOutOf: true,
totalItems: 1500
};
const renderPaginator = () => {
ReactDOM.render(
<Paginator {...props} />,
document.getElementById("component-container")
);
};
renderPaginator();
About the css
You need the right css in order to make use of itsa-react-paginator
. There are 2 options:
- You can use the css-files inside the
css
-folder. - You can use:
Component = require("itsa-react-paginator/lib/component-styled.jsx");
and build your project withwebpack
. This is needed, because you need the right plugin to handle a requirement of thescss
-file.
If you want to express your appreciation
Feel free to donate to one of these addresses; my thanks will be great :)
- Ether: 0xE096EBC2D19eaE7dA8745AA5D71d4830Ef3DF963
- Bitcoin: 37GgB6MrvuxyqkQnGjwxcn7vkcdont1Vmg