'use strict';
import React, { useState } from 'react';
import { render } from 'react-dom';
import { AgGridReact, AgGridColumn } from 'ag-grid-react';
import 'ag-grid-enterprise';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
const GridExample = () => {
const [gridApi, setGridApi] = useState(null);
const [gridColumnApi, setGridColumnApi] = useState(null);
const [rowData, setRowData] = useState(null);
const onGridReady = (params) => {
setGridApi(params.api);
setGridColumnApi(params.columnApi);
const updateData = (data) => params.api.setRowData(data);
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then((resp) => resp.json())
.then((data) => updateData(data));
};
const onPaginationChanged = () => {
console.log('onPaginationPageLoaded');
if (gridApi) {
setText('#lbLastPageFound', gridApi.paginationIsLastPageFound());
setText('#lbPageSize', gridApi.paginationGetPageSize());
setText('#lbCurrentPage', gridApi.paginationGetCurrentPage() + 1);
setText('#lbTotalPages', gridApi.paginationGetTotalPages());
setLastButtonDisabled(!gridApi.paginationIsLastPageFound());
}
};
const onBtFirst = () => {
gridApi.paginationGoToFirstPage();
};
const onBtLast = () => {
gridApi.paginationGoToLastPage();
};
const onBtNext = () => {
gridApi.paginationGoToNextPage();
};
const onBtPrevious = () => {
gridApi.paginationGoToPreviousPage();
};
const onBtPageFive = () => {
gridApi.paginationGoToPage(4);
};
const onBtPageFifty = () => {
gridApi.paginationGoToPage(49);
};
return (
<div style={{ width: '100%', height: '100%' }}>
<div className="example-wrapper">
<div className="example-header">
<div>
<button onClick={() => onBtFirst()}>To First</button>
<button onClick={() => onBtLast()} id="btLast">
To Last
</button>
<button onClick={() => onBtPrevious()}>To Previous</button>
<button onClick={() => onBtNext()}>To Next</button>
<button onClick={() => onBtPageFive()}>To Page 5</button>
<button onClick={() => onBtPageFifty()}>To Page 50</button>
</div>
<div style={{ marginTop: '6px' }}>
<span className="label">Last Page Found:</span>
<span className="value" id="lbLastPageFound">
-
</span>
<span className="label">Page Size:</span>
<span className="value" id="lbPageSize">
-
</span>
<span className="label">Total Pages:</span>
<span className="value" id="lbTotalPages">
-
</span>
<span className="label">Current Page:</span>
<span className="value" id="lbCurrentPage">
-
</span>
</div>
</div>
<div
id="myGrid"
style={{
height: '100%',
width: '100%',
}}
className="ag-theme-alpine"
>
<AgGridReact
defaultColDef={{
resizable: true,
filter: true,
}}
debug={true}
rowSelection={'multiple'}
paginationPageSize={500}
pagination={true}
suppressPaginationPanel={true}
suppressScrollOnNewData={true}
onGridReady={onGridReady}
onPaginationChanged={onPaginationChanged}
rowData={rowData}
>
<AgGridColumn
headerName="#"
width={50}
cellRenderer={cellRenderer}
/>
<AgGridColumn headerName="Athlete" field="athlete" width={150} />
<AgGridColumn headerName="Age" field="age" width={90} />
<AgGridColumn headerName="Country" field="country" width={120} />
<AgGridColumn headerName="Year" field="year" width={90} />
<AgGridColumn headerName="Date" field="date" width={110} />
<AgGridColumn headerName="Sport" field="sport" width={110} />
<AgGridColumn headerName="Gold" field="gold" width={100} />
<AgGridColumn headerName="Silver" field="silver" width={100} />
<AgGridColumn headerName="Bronze" field="bronze" width={100} />
<AgGridColumn headerName="Total" field="total" width={100} />
</AgGridReact>
</div>
</div>
</div>
);
};
var cellRenderer = function (params) {
return parseInt(params.node.id) + 1;
};
function setText(selector, text) {
document.querySelector(selector).innerHTML = text;
}
function setLastButtonDisabled(disabled) {
document.querySelector('#btLast').disabled = disabled;
}
function setRowData(rowData) {
allOfTheData = rowData;
createNewDatasource();
}
render(<GridExample></GridExample>, document.querySelector('#root'));
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}
.example-header {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 13px;
margin-bottom: 5px;
}
.label {
color: #0f0f0f;
}
.value {
margin-right: 20px;
border: 1px solid lightgrey;
width: 50px;
display: inline-block;
text-align: right;
padding-right: 2px;
background: #eee;
}
(function(global) {
// simplified version of Object.assign for es3
function assign() {
var result = {};
for (var i = 0, len = arguments.length; i < len; i++) {
var arg = arguments[i];
for (var prop in arg) {
result[prop] = arg[prop];
}
}
return result;
}
System.config({
transpiler: 'plugin-babel',
defaultExtension: 'js',
paths:
assign(
{
// paths serve as alias
"npm:": "https://unpkg.com/",
}, systemJsPaths),
map: assign(
{
// css plugin
'css': 'npm:systemjs-plugin-css/css.js',
// babel transpiler
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// react
react: 'npm:react@16.13.1',
'react-dom': 'npm:react-dom@16.13.1',
'react-dom-factories': 'npm:react-dom-factories',
redux: 'npm:redux@3.6.0',
'react-redux': 'npm:react-redux@5.0.6',
'prop-types': 'npm:prop-types',
app: appLocation + 'app'
},
systemJsMap
), // systemJsMap comes from index.html
packages: {
react: {
main: './umd/react.profiling.min.js'
},
'react-dom': {
main: './umd/react-dom.profiling.min.js'
},
'react-dom/server': {
main: '../umd/react-dom-server.browser.production.min.js'
},
'prop-types': {
main: './prop-types.min.js',
defaultExtension: 'js'
},
redux: {
main: './dist/redux.min.js',
defaultExtension: 'js'
},
'react-redux': {
main: './dist/react-redux.min.js',
defaultExtension: 'js'
},
app: {
defaultExtension: 'jsx'
},
'ag-grid-react': {
main: './main.js',
defaultExtension: 'js'
},
'ag-grid-community': {
main: './dist/ag-grid-community.cjs.js',
defaultExtension: 'js'
},
'ag-grid-enterprise': {
main: './dist/ag-grid-enterprise.cjs.js',
defaultExtension: 'js'
},
'@ag-grid-community/react': {
main: './main.js',
defaultExtension: 'js'
}
},
meta: {
'*.jsx': {
babelOptions: {
react: true
}
},
'*.css': { loader: 'css' }
}
});
})(this);
<!DOCTYPE html>
<html lang="en">
<head>
<title>React example</title>
<meta charSet="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style media="only screen">
html, body, #root {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
}
body {
padding: 1rem;
overflow: auto;
}
</style>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div id="root">Loading React example…</div>
<script>
var appLocation = './';
var boilerplatePath = '';
var systemJsMap = {
"@ag-grid-community/all-modules/dist/styles/ag-grid.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-grid.css",
"@ag-grid-community/core/dist/styles/ag-grid.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-grid.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-alpine-dark.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-theme-alpine-dark.css",
"@ag-grid-community/core/dist/styles/ag-theme-alpine-dark.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-theme-alpine-dark.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-alpine.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-theme-alpine.css",
"@ag-grid-community/core/dist/styles/ag-theme-alpine.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-theme-alpine.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-balham-dark.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-theme-balham-dark.css",
"@ag-grid-community/core/dist/styles/ag-theme-balham-dark.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-theme-balham-dark.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-theme-balham.css",
"@ag-grid-community/core/dist/styles/ag-theme-balham.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-theme-balham.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-blue.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-theme-blue.css",
"@ag-grid-community/core/dist/styles/ag-theme-blue.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-theme-blue.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-bootstrap.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-theme-bootstrap.css",
"@ag-grid-community/core/dist/styles/ag-theme-bootstrap.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-theme-bootstrap.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-dark.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-theme-dark.css",
"@ag-grid-community/core/dist/styles/ag-theme-dark.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-theme-dark.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-fresh.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-theme-fresh.css",
"@ag-grid-community/core/dist/styles/ag-theme-fresh.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-theme-fresh.css",
"@ag-grid-community/all-modules/dist/styles/ag-theme-material.css": "https://unpkg.com/@ag-grid-community/all-modules@26.2.0/dist/styles/ag-theme-material.css",
"@ag-grid-community/core/dist/styles/ag-theme-material.css": "https://unpkg.com/@ag-grid-community/core@26.2.0/dist/styles/ag-theme-material.css",
"@ag-grid-community/react": "https://unpkg.com/@ag-grid-community/react@26.2.0/",
"@ag-grid-community/angular": "https://unpkg.com/@ag-grid-community/angular@26.2.0/",
"@ag-grid-community/vue": "https://unpkg.com/@ag-grid-community/vue@26.2.0/",
"@ag-grid-community/vue3": "https://unpkg.com/@ag-grid-community/vue3@26.2.0/",
"ag-grid-community": "https://unpkg.com/ag-grid-community@26.2.0/",
"ag-grid-enterprise": "https://unpkg.com/ag-grid-enterprise@26.2.0/",
"ag-grid-angular": "https://unpkg.com/ag-grid-angular@26.2.0/",
"ag-grid-react": "https://unpkg.com/ag-grid-react@26.2.0/",
"ag-grid-vue": "https://unpkg.com/ag-grid-vue@26.2.0/",
"ag-grid-vue3": "https://unpkg.com/ag-grid-vue3@26.2.0/"
};
var systemJsPaths = {
"@ag-grid-community/all-modules": "https://unpkg.com/@ag-grid-community/all-modules/dist/ag-grid-community.cjs.js",
"@ag-grid-community/client-side-row-model": "https://unpkg.com/@ag-grid-community/client-side-row-model/dist/client-side-row-model.cjs.js",
"@ag-grid-community/core": "https://unpkg.com/@ag-grid-community/core/dist/core.cjs.js",
"@ag-grid-community/csv-export": "https://unpkg.com/@ag-grid-community/csv-export/dist/csv-export.cjs.js",
"@ag-grid-community/infinite-row-model": "https://unpkg.com/@ag-grid-community/infinite-row-model/dist/infinite-row-model.cjs.js",
"@ag-grid-enterprise/all-modules": "https://unpkg.com/@ag-grid-enterprise/all-modules/dist/ag-grid-enterprise.cjs.js",
"@ag-grid-enterprise/charts": "https://unpkg.com/@ag-grid-enterprise/charts/dist/charts.cjs.js",
"@ag-grid-enterprise/clipboard": "https://unpkg.com/@ag-grid-enterprise/clipboard/dist/clipboard.cjs.js",
"@ag-grid-enterprise/column-tool-panel": "https://unpkg.com/@ag-grid-enterprise/column-tool-panel/dist/column-tool-panel.cjs.js",
"@ag-grid-enterprise/core": "https://unpkg.com/@ag-grid-enterprise/core/dist/core.cjs.js",
"@ag-grid-enterprise/excel-export": "https://unpkg.com/@ag-grid-enterprise/excel-export/dist/excel-export.cjs.js",
"@ag-grid-enterprise/filter-tool-panel": "https://unpkg.com/@ag-grid-enterprise/filter-tool-panel/dist/filter-tool-panel.cjs.js",
"@ag-grid-enterprise/master-detail": "https://unpkg.com/@ag-grid-enterprise/master-detail/dist/master-detail.cjs.js",
"@ag-grid-enterprise/menu": "https://unpkg.com/@ag-grid-enterprise/menu/dist/menu.cjs.js",
"@ag-grid-enterprise/multi-filter": "https://unpkg.com/@ag-grid-enterprise/multi-filter/dist/multi-filter.cjs.js",
"@ag-grid-enterprise/range-selection": "https://unpkg.com/@ag-grid-enterprise/range-selection/dist/range-selection.cjs.js",
"@ag-grid-enterprise/rich-select": "https://unpkg.com/@ag-grid-enterprise/rich-select/dist/rich-select.cjs.js",
"@ag-grid-enterprise/row-grouping": "https://unpkg.com/@ag-grid-enterprise/row-grouping/dist/row-grouping.cjs.js",
"@ag-grid-enterprise/server-side-row-model": "https://unpkg.com/@ag-grid-enterprise/server-side-row-model/dist/server-side-row-model.cjs.js",
"@ag-grid-enterprise/set-filter": "https://unpkg.com/@ag-grid-enterprise/set-filter/dist/set-filter.cjs.js",
"@ag-grid-enterprise/side-bar": "https://unpkg.com/@ag-grid-enterprise/side-bar/dist/side-bar.cjs.js",
"@ag-grid-enterprise/sparklines": "https://unpkg.com/@ag-grid-enterprise/sparklines/dist/sparklines.cjs.js",
"@ag-grid-enterprise/status-bar": "https://unpkg.com/@ag-grid-enterprise/status-bar/dist/status-bar.cjs.js",
"@ag-grid-enterprise/viewport-row-model": "https://unpkg.com/@ag-grid-enterprise/viewport-row-model/dist/viewport-row-model.cjs.js"
};
</script>
<script src="https://unpkg.com/systemjs@0.19.47/dist/system.js">
</script>
<script src="systemjs.config.js">
</script>
<script>System.import('./index.jsx').catch(function(err) { console.error(err); });</script>
</body>
</html>
# Custom Pagination Control Example
AG Grid offers full control over pagination using the API.
In this example we have switched off the Pagination Panel and taken full control of the pagination.
Learn more about AG Grid pagination options at https://www.ag-grid.com/react-data-grid/row-pagination/