Headers and footer can be customized in the thead element and
footers respectively in the tfoot section
JavaScript API exposes the header and footer objects
for same functionality. Excluding the default row property headers and
footers share the same exact API.
| Employee | Responsibility | ||
|---|---|---|---|
| First Name | Last Name | Operation | Product |
var employees = [];
var names = ["Artur", "Patrik", "Henrik", "Teemu"];
var surnames = ["Signell","Lehtinen","Ahlroos","Paul"];
var activities = ["Design","Implement","Polish","Deliver"];
var targets = ["soup","Vaadin","dog","world peace"];
for (var i = 0; i < 400; i++){
var row = [];
[names, surnames, activities, targets].forEach(function(array){
row.push(array[Math.floor(Math.random()*array.length)]);
});
employees.push(row);
}
var grid = grid || document.querySelector("vaadin-grid");
HTMLImports.whenReady(function() {
grid.items = employees;
// code
// Adding and removing headers and footers in JavaScript
grid.header.addRow(1, ["First Name", "Last Name", "Operation", "Product"]);
grid.header.removeRow(2);
grid.footer.addRow();
grid.footer.removeRow(0);
// end-code
});
Colspan property defines the count of columns a single header/footer cell should span.
The value can be set either declaratively trough the lightDom API or programmatically
with the cell API header.getCell(rowIndex, colIndex).colspan.
| Employee | Responsibility | ||
|---|---|---|---|
var employees = [];
var names = ["Artur", "Patrik", "Henrik", "Teemu"];
var surnames = ["Signell","Lehtinen","Ahlroos","Paul"];
var activities = ["Design","Implement","Polish","Deliver"];
var targets = ["soup","Vaadin","dog","world peace"];
for (var i = 0; i < 400; i++){
var row = [];
[names, surnames, activities, targets].forEach(function(array){
row.push(array[Math.floor(Math.random()*array.length)]);
});
employees.push(row);
}
var grid = grid || document.querySelector("vaadin-grid");
HTMLImports.whenReady(function() {
grid.items = employees;
// code
// Cell API can be used to define cell colspans.
grid.header.getCell(0, 0).colspan = 2;
grid.header.getCell(0, 2).colspan = 2;
// end-code
});
Typically header/footer cells contain plain text but also HTML or even custom elements may be wrapped in the cells.
Cell content can be placed declaratively using the table element's
thead section or in JavaScript by modifying
header.getCell(rowIndex, colIndex).content property.
| Employee | Activity | |
|---|---|---|
var employees = [];
var names = ["Artur", "Patrik", "Henrik", "Teemu"];
var surnames = ["Signell","Lehtinen","Ahlroos","Paul"];
var activities = ["Design","Implement","Polish","Deliver"];
var targets = ["soup","Vaadin","dog","world peace"];
for (var i = 0; i < 400; i++){
var row = [];
[names, surnames, activities, targets].forEach(function(array){
row.push(array[Math.floor(Math.random()*array.length)]);
});
employees.push(row);
}
var grid = grid || document.querySelector("vaadin-grid");
var filterElement = document.createElement("input");
filterElement.setAttribute("type", "search");
filterElement.setAttribute("placeholder", "Filter...");
filterElement.style.width = "100%";
var timer = 0;
function filter(){
clearTimeout(timer);
timer = setTimeout(grid.refreshItems.bind(grid), 500);
}
filterElement.addEventListener("keyup", filter);
filterElement.addEventListener("click", filter);
HTMLImports.whenReady(function() {
grid.items = function(params, callback) {
var filterValue = filterElement.value.toLowerCase();
var data = employees.filter(function(val){ return (val.toString().toLowerCase()).indexOf(filterValue) != -1 } );
var slice = data.slice(params.index, params.index + params.count);
callback(slice, data.length);
};
grid.then(function(){
// code
grid.header.getCell(1, 0).content = filterElement;
// end-code
});
});
Class names for header/footer rows and cells can be assigned with either the
class attribute in the lightDom API or header.setRowClassName
and cell.className in the JavaScript API.
| First Name | Last Name |
|---|
var employees = [];
var names = ["Artur", "Patrik", "Henrik", "Teemu"];
var surnames = ["Signell","Lehtinen","Ahlroos","Paul"];
var activities = ["Design","Implement","Polish","Deliver"];
var targets = ["soup","Vaadin","dog","world peace"];
for (var i = 0; i < 400; i++){
var row = [];
[names, surnames, activities, targets].forEach(function(array){
row.push(array[Math.floor(Math.random()*array.length)]);
});
employees.push(row);
}
var grid = grid || document.querySelector("vaadin-grid");
HTMLImports.whenReady(function() {
grid.items = employees;
// code
// Set the class names using JavaScript API
grid.header.setRowClassName(0, "firstrow");
grid.header.getCell(0, 1).className = "lastcell";
// end-code
});
Default row in the grid header is the row that contains sort-indicators if sorting rules are applied and the "select all" checkbox on multi-select mode.
| Employee | Responsibility | ||
|---|---|---|---|
| First | Last | Operation | Product |
var employees = [];
var names = ["Artur", "Patrik", "Henrik", "Teemu"];
var surnames = ["Signell","Lehtinen","Ahlroos","Paul"];
var activities = ["Design","Implement","Polish","Deliver"];
var targets = ["soup","Vaadin","dog","world peace"];
for (var i = 0; i < 400; i++){
var row = [];
[names, surnames, activities, targets].forEach(function(array){
row.push(array[Math.floor(Math.random()*array.length)]);
});
employees.push(row);
}
var grid = grid || document.querySelector("vaadin-grid");
HTMLImports.whenReady(function() {
grid.items = employees;
// code
// Set the default row using JavaScript API
grid.header.defaultRow = 1;
// end-code
});
| First Name | Last Name | Score |
|---|---|---|
| Number of selected rows: 0 | total | |
var employees = [];
var names = ["Artur", "Patrik", "Henrik", "Teemu"];
var surnames = ["Signell","Lehtinen","Ahlroos","Paul"];
for (var i = 0; i < 400; i++){
var row = [];
[names, surnames].forEach(function(array){
row.push(array[Math.floor(Math.random()*array.length)]);
});
row.push(Math.floor(Math.random()*100));
employees.push(row);
}
var grid = grid || document.querySelector("vaadin-grid");
function totalScore(employees) {
var initialValue = employees[0][2];
return employees.reduce(function (prev, curr, index, array) {
return prev + curr[2];
}, initialValue);
}
HTMLImports.whenReady(function() {
grid.items = employees;
// code
grid.addEventListener("selected-items-changed", function(e) {
grid.$$("#selected-counter").textContent = grid.selection.size;
});
grid.$$("#total-score").textContent = totalScore(employees);
// end-code
});
| # | First Name | Last Name | ||
|---|---|---|---|---|
| /10 | ||||
var grid = grid || document.querySelector("vaadin-grid");
function loadData(page, count) {
// Fetch the JSON data from a URL
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == XMLHttpRequest.DONE) {
if (xhr.status == 200) {
var json = JSON.parse(xhr.responseText);
json.results.forEach(function(row, index){
row.index = (page - 1) * count + index + 1;
});
grid.items = json.results;
}
}
};
xhr.open("GET", randomUserUrl + "?results=" + count, true);
xhr.send();
}
HTMLImports.whenReady(function() {
var count = 10;
loadData(1, count);
// code
grid.$$("#prev").addEventListener('click', function(e) {
var input = grid.$$("#page");
var value = parseInt(input.value);
if (value > parseInt(input.min)) {
var page = value - 1;
input.value = page;
loadData(page, count);
}
e.stopPropagation();
});
grid.$$("#next").addEventListener('click', function(e) {
var input = grid.$$("#page");
var value = parseInt(input.value);
if (value < parseInt(input.max)) {
var page = value + 1;
input.value = page;
loadData(page, count);
}
e.stopPropagation();
});
grid.$$("#page").addEventListener('input', function(e) {
if (this.validity.valid) {
loadData(parseInt(this.value), count);
}
});
// end-code
grid.$$("#page").addEventListener('click', function(e) {
e.stopPropagation();
});
// Add a renderer for the index column
grid.columns[0].renderer = function(cell) {
cell.element.innerHTML = cell.row.data.index;
};
// Add a renderer for the picture column
grid.columns[1].renderer = function(cell) {
cell.element.innerHTML = "";
var img = document.createElement("img");
img.style.width = "24px";
img.setAttribute("src", cell.data);
cell.element.appendChild(img);
};
});
var grid = grid || document.querySelector("vaadin-grid");
HTMLImports.whenReady(function() {
grid.items = [{
index: 1,
user: {
name: {
firstName: "Manolo",
surname: "Pirolo"
},
email: "manu@foo.com",
job_info: "Developer"
}
},{
index: 1,
user: {
name: {
firstName: "Julián",
surname: "Gañán"
},
email: "juli@bar.com",
job_info: "Designer"
}
}];
});