Easiest way to show simple data inside vaadin-grid is to define it in the tbody element.
This type of a source is typically meant for static data of limited size.
| Name | Value | Progress |
|---|---|---|
| Project A | 10000 | 0.8 |
| Project B | 999999 | 0.8 |
Data sources defined as JavaScript functions provide more robustness and support
displaying larger sets of data in vaadin-grid.
| Name | Value | Progress |
|---|
var grid = grid || document.querySelector("vaadin-grid");
HTMLImports.whenReady(function() {
// code
var data = [ [ "Project A", 10000, 0.8 ],
[ "Project B", 87654, 0.2 ],
[ "Project C", 12999, 0.6 ] ];
grid.items = function(params, callback) {
callback(data.slice(params.index, params.index + params.count));
};
grid.size = data.length;
// end-code
});
Data consisting of JS objects can be mapped directly to vaadin-grid columns. Use
column.name property to map to the corresponding key in the object.
Nested property names are also supported.
var grid = grid || document.querySelector("vaadin-grid");
HTMLImports.whenReady(function() {
// code
grid.items = [ { projectName: "Project A", cost: {estimate: 10000, current: 8000 } },
{ projectName: "Project B", cost: {estimate: 20000, current: 11000 } },
{ projectName: "Project C", cost: {estimate: 15000, current: 1000 } } ];
// Optionally set the column names in JS
grid.columns[0].name = "projectName";
grid.columns[1].name = "cost.estimate";
// end-code
});
If the data is an array of primitive values (number, boolean, string) vaadin-grid
presents it in a single column by default.
| Hero Name |
|---|
var grid = grid || document.querySelector("vaadin-grid");
HTMLImports.whenReady(function() {
// code
grid.items = ["Steel", "Dr. Manhattan", "Batman", "Black Widow", "Rorschach", "Gambit", "Swamp Thing", "Mystique", "Ozymandias", "Bubastis", "Ozymandias", "Magneto", "Goat Faced Girl", "Aqualad", "Mister Fantastic", "Superman", "Iron Monger", "Professor X", "Namor the Sub-Mariner", "Namorita", " Rocket Raccoon", " The Penguin", "Lex Luthor", "Martian Man Hunter", "Pepper Potts", "Fin Fang Foom", "Elongated Man", "Savage Dragon", "Thing", "Thor Odinson", "The Maxx", "Deadpool", "Storm", "Sabertooth", "Jezebel Jet", "Darwin", "Sasquatch", "Abe (Abraham) Sapien", "The Goon", "Ra’s Al Ghul", "Oracle", "Hellboy", " Doctor Doom", " Solomon Grundy", "Ferro Lad"];
// end-code
});
vaadin-grid is informed of available data by calling the callback function.
Required arguments are the data as an array and the full size of the source data as row count.
This example uses a timeout to simulate lazily loading data.
Scroll vaadin-grid down fast to see the data loading with a delay.
| Name | Surname | 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");
HTMLImports.whenReady(function() {
// code
grid.items = function(params, callback) {
setTimeout(function() {
callback(employees.slice(params.index, params.index + params.count));
}, 400);
};
grid.size = employees.length;
// end-code
});
In case the source data changes dynamically, vaadin-grid must be notified with
refreshItems() so it knows to fetch updates for the currently cached data.
Whenever new rows are added to or existing ones are removed from the end of the data set,
refreshItems() can be skipped and grid.size property updated instead.
| Name | Value | Progress |
|---|
function createButton(text, fnc) {
var button = document.createElement("button");
button.innerHTML = text;
button.addEventListener("click", fnc);
return button;
}
function addButton(caption, callback) {
grid.parentNode.appendChild(createButton(caption, callback));
}
var grid = grid || document.querySelector("vaadin-grid");
HTMLImports.whenReady(function() {
// code
// Define the items
var data = [ [ "Project A", 10000, 0.8 ],
[ "Project B", 87654, 0.2 ],
[ "Project C", 12999, 0.6 ] ];
grid.items = data;
// Clicking the button changes the data
addButton('Remove the first row', function() {
data.splice(0, 1);
// Data size was reduced so size property needs an update
grid.size = data.length;
// We also need to clear the cached data set as data was removed from the
// beginning of the list (causing the remaining rows to shift upwards)
grid.refreshItems();
});
// end-code
});
Aside the explicit size property, vaadin-grid can be informed
about the data source size trough a callback parameter in data source request. This comes in handy when
the size changes frequently or if the total size isn't even known beforehand.
Infinite scrolling is an example use case where this api might be useful.
| First Name | Last Name | |
|---|---|---|
var grid = grid || document.querySelector("vaadin-grid");
HTMLImports.whenReady(function() {
grid.size = 10;
grid.scrollToStart();
// code
grid.items = function(params, callback) {
// 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);
var size = grid.size;
if (params.index + params.count == size) {
// Requested for the final batch of data, increase the size
size += 10;
}
callback(json.results, size);
// Update footer label
grid.footer.getCell(0, 0).content = "Current size: " + size;
}
}
}
var rowsNeeded = Math.max(params.count, 1);
xhr.open("GET", randomUserUrl + "?results=" + rowsNeeded, true);
xhr.send();
};
// end-code
});
Data fetched dynamically from a remote source may be hooked to vaadin-grid with a custom data source
implementation.
Notice that size is declared as an attribute in this example.
| # | Pic | First Name | Last Name |
|---|
var grid = grid || document.querySelector("vaadin-grid");
HTMLImports.whenReady(function() {
// code
grid.items = function(params, callback) {
// 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);
callback(json.results);
}
}
}
var rowsNeeded = Math.max(params.count, 1);
xhr.open("GET", randomUserUrl + "?results=" + rowsNeeded, true);
xhr.send();
};
// Add a renderer for the index column
grid.columns[0].renderer = function(cell) {
cell.element.innerHTML = cell.row.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);
}
// end-code
});