Columns can be defined using HTML or Javascript.
For the HTML version, the table element might seem
redundant, but it is required in order for the browsers to parse the
contained markup correctly. We also need to provide some data for the
grid, using tbody, in order to render something.
| First column | Second column |
|---|---|
| One | Two |
var grid = grid || document.querySelector("vaadin-grid");
HTMLImports.whenReady(function() {
/*
// code
// Columns can also be configured in JS
grid.columns = [
{ name: "firstColumn" },
{ name: "secondColumn" }
];
// end-code
*/
});
Columns can be added dynamically using the JavaScript API. You can also modify the lightDom of the element, but it is not the recommended way.
var grid = grid || document.querySelector("vaadin-grid");
HTMLImports.whenReady(function() {
grid.items = [["One", "Two"]];
// code
grid.addColumn({ name: "secondColumn" });
// Specify the index or name of the column before which to add the new column
grid.addColumn({ name: "firstColumn"}, 0);
// end-code
});
By default all the columns share the available size equally.
column.flex property can be used to adjust how much a column spans
in width in relation to other columns.
Columns may also be assigend an explicit width, a maximum width and a minimum width.
| 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() {
grid.items = employees;
// code
// Setting the width properties with JS api
grid.columns[0].width = 100;
grid.columns[1].maxWidth = 200;
grid.columns[2].minWidth = 100;
// Setting the flex properties with JS api
grid.columns[0].flex = 1;
grid.columns[1].flex = 2;
grid.columns[2].flex = 1;
// end-code
});
A number of columns starting from the leftmost may be set frozen which forces them to remain
horizontally still while rest of the columns scroll normally. On multi-select mode the selection column
containing the checkboxes is frozen by default but setting grid.frozenColumns to
-1 will unfreeze it as well.
| Name | Surname | Operation | Product | Progress |
|---|
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;
grid.columns[4].renderer = function(cell) {
cell.element.textContent = Math.random(1).toFixed(2);
};
// code
// Alternatively set the frozen columns in JS
grid.frozenColumns = 1;
// end-code
});
Columns can be hidden or visible.
By default none of the columns are user-hidable. Setting a column's hidable property
true appends it to the dropdown menu on the right where individual columns can be toggled
hidden/visible by the user.
| Name | Surname | Activity | Target |
|---|
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
// Setting the properties with JS api
grid.columns[1].hidable = true;
grid.columns[2].hidable = true;
grid.columns[2].hidden = true;
grid.columns[3].hidden = true;
// end-code
});