If vaadin-grid is not assigned any bounds externally it will size automatically by itself. By default it
will take 100% of the horizontal space available and its default height depends on the number of
contained data rows.
Standard CSS rules can be used to set a size for the grid or alternatively vaadin-grid can be
assigned a pre-defined height (in rows) either declaratively in the DOM API or programmatically
with the JS API
| 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 explicit row count in JavaScript
grid.visibleRows = 5;
// end-code
});
vaadin-grid data rows can be labeled with individual class names by setting a rowClassGenerator.
| 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
grid.rowClassGenerator = function(row) {
var activity = row.data[2];
return 'activity-' + activity.toLowerCase();
};
// end-code
});
Single data cells can be styled with the help of a cellClassGenerator.
| 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
grid.cellClassGenerator = function(cell) {
if (cell.index == 2) {
var activity = cell.row.data[2];
return 'activity-' + activity.toLowerCase();
}
return '';
};
// end-code
});
The grid uses --default-primary-color from paper-styles as a highlight color.
Modifying the row height is enabled with --vaadin-grid-row-height custom property. For header and footer heights use --vaadin-grid-header-row-height and/or --vaadin-grid-footer-row-height properties.
| Name | Surname | Activity |
|---|---|---|
| Footer row | ||
/*
// code
<style is="custom-style">
vaadin-grid {
--default-primary-color: red;
--vaadin-grid-row-height: 36px;
--vaadin-grid-header-row-height: 44px;
--vaadin-grid-footer-row-height: 44px;
}
</style>
// end-code
*/
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 = document.querySelector("vaadin-grid.themed");
HTMLImports.whenReady(function() {
grid.items = employees;
});