Any regular HTML can be placed inside the grid cells with the DOM api.
| Name | Value | Progress |
|---|---|---|
| Project A | 10 000€ | |
| Project B | 982 999€ |
Column data can be presented in any format using a renderer function.
| Name | Value | Progress |
|---|---|---|
| Project A | 10 000 | 0.8 |
| Project B | 982 999 | 0.2 |
var grid = grid || document.querySelector("vaadin-grid");
HTMLImports.whenReady(function() {
// code
var currencyRenderer = function(cell) {
cell.element.innerHTML = '$' + cell.data;
};
var progressRenderer = function(cell) {
cell.element.innerHTML = '';
var child = document.createElement('progress');
child.setAttribute('value', cell.data);
cell.element.appendChild(child);
};
grid.columns[1].renderer = currencyRenderer;
grid.columns[2].renderer = progressRenderer;
// end-code
});