Basic example
To enable pagination you need to set pagination option to true.
<div id="grid"></div>
import { DataDen } from "data-den-core";
const rows = [
{ car: 'Honda', model: 'Civic', year: '01/05/2013', price: 28000 },
{ car: 'Mitsubishi', model: 'Lancer', year: '01/05/2013', price: 56000 },
{ car: 'Porsche', model: 'Boxster', year: '09/02/2020', price: 31000 },
{ car: 'Toyota', model: 'Celica', year: '16/12/2010', price: 18000 },
{ car: 'Kia', model: 'Sportage', year: '14/09/2006', price: 28000 },
{ car: 'Ford', model: 'Focus', year: '04/07/2014', price: 24000 },
{ car: 'Ford', model: 'Focus', year: '16/12/2010', price: 24000 },
{ car: 'Porsche', model: 'Boxster', year: '24/01/2015', price: 31000 },
{ car: 'Mitsubishi', model: 'Lancer', year: '14/09/2006', price: 18000 },
{ car: 'Kia', model: 'Sportage', year: '01/05/2013', price: 24000 },
];
const options = {
columns: [
{
field: "car",
headerName: "Car",
},
{
field: "model",
headerName: "Model",
},
{
field: "year",
headerName: "Year",
},
{
field: "price",
headerName: "Price",
},
],
rows: rows,
pagination: true
};
const gridEl = document.getElementById('grid');
const dataDen = new DataDen(gridEl, options);
Page size
By default each page contains 10 rows. You can change the page size in the paginationOptions
<div id="grid"></div>
import {
DataDen,
} from "data-den-core";
const rows = [
{ car: 'Honda', model: 'Civic', year: '01/05/2013', price: 28000 },
{ car: 'Mitsubishi', model: 'Lancer', year: '01/05/2013', price: 56000 },
{ car: 'Porsche', model: 'Boxster', year: '09/02/2020', price: 31000 },
{ car: 'Toyota', model: 'Celica', year: '16/12/2010', price: 18000 },
{ car: 'Kia', model: 'Sportage', year: '14/09/2006', price: 28000 },
{ car: 'Ford', model: 'Focus', year: '04/07/2014', price: 24000 },
{ car: 'Ford', model: 'Focus', year: '16/12/2010', price: 24000 },
{ car: 'Porsche', model: 'Boxster', year: '24/01/2015', price: 31000 },
{ car: 'Mitsubishi', model: 'Lancer', year: '14/09/2006', price: 18000 },
{ car: 'Kia', model: 'Sportage', year: '01/05/2013', price: 24000 },
{ car: 'Porsche', model: 'Boxster', year: '28/08/2004', price: 28000 },
{ car: 'Toyota', model: 'Celica', year: '28/08/2004', price: 12000 },
{ car: 'Mitsubishi', model: 'Lancer', year: '16/12/2010', price: 34000 },
{ car: 'Toyota', model: 'Celica', year: '28/08/2004', price: 18000 },
{ car: 'Ford', model: 'Explorer', year: '24/01/2015', price: 56000 },
];
const options = {
columns: [
{
field: 'car',
headerName: 'Car',
},
{
field: 'model',
headerName: 'Model',
},
{
field: 'year',
headerName: 'Year',
},
{
field: 'price',
headerName: 'Price',
},
],
rows: rows,
rowHeight: 32,
pagination: true,
paginationOptions: {
pageSize: 5
}
};
const gridEl = document.getElementById('grid');
const dataDen = new DataDen(gridEl, options);
Translation
By default we display information about pagination status in the following format: 1-10 of 15.
You can replace the of word by modifying ofText parameter in
paginationOptions.
<div id="grid"></div>
import { DataDen } from "data-den-core";
const rows = [
{ car: 'Honda', model: 'Civic', year: '01/05/2013', price: 28000 },
{ car: 'Mitsubishi', model: 'Lancer', year: '01/05/2013', price: 56000 },
{ car: 'Porsche', model: 'Boxster', year: '09/02/2020', price: 31000 },
{ car: 'Toyota', model: 'Celica', year: '16/12/2010', price: 18000 },
{ car: 'Kia', model: 'Sportage', year: '14/09/2006', price: 28000 },
{ car: 'Ford', model: 'Focus', year: '04/07/2014', price: 24000 },
{ car: 'Ford', model: 'Focus', year: '16/12/2010', price: 24000 },
{ car: 'Porsche', model: 'Boxster', year: '24/01/2015', price: 31000 },
{ car: 'Mitsubishi', model: 'Lancer', year: '14/09/2006', price: 18000 },
{ car: 'Kia', model: 'Sportage', year: '01/05/2013', price: 24000 },
];
const options = {
columns: [
{
field: "car",
headerName: "Car",
},
{
field: "model",
headerName: "Model",
},
{
field: "year",
headerName: "Year",
},
{
field: "price",
headerName: "Price",
},
],
rows: rows,
pagination: true,
paginationOptions: {
ofText: 'z'
}
};
const gridEl = document.getElementById('grid');
const dataDen = new DataDen(gridEl, options);