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 |
|---|
function random(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
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 = [random(names), random(surnames), random(activities), random(targets)];
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 |
|---|
function random(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
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 = [random(names), random(surnames), random(activities), random(targets)];
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 |
|---|
function random(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
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 = [random(names), random(surnames), random(activities), random(targets)];
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();
}
};
// end-code
});
The grid uses --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 {
--primary-color: red;
--vaadin-grid-row-height: 36px;
--vaadin-grid-header-row-height: 44px;
--vaadin-grid-footer-row-height: 44px;
}
</style>
// end-code
*/
function random(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
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 = [random(names), random(surnames), random(activities), random(targets)];
employees.push(row);
}
var grid = document.querySelector('vaadin-grid.themed');
HTMLImports.whenReady(function() {
grid.items = employees;
});