You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
Data Formatting · Vaadin
Vaadin Elements - Grid - Data Formatting

Data Formatting

In the Assigning Data section, we learned how to assign data items to be displayed as the rows of the Grid. You often need to format data in a more suitable way for displaying it in the user interface. This section explains how to format your data before it is displayed in vaadin-grid.

Inline Data

If you are providing the data for the grid with an inline HTML table, you can have any HTML elements in the grid cells. In the following example, we use a progress element within the provided data.

<vaadin-grid>
  <table>
    [...]
      <tr>
        <td>Project A</td>
        <td>15 650€</td>
        <td><progress value="0.8"></progress></td>
      </tr>
  </table>
</vaadin-grid>
vaadin grid formatting inline
Figure 1. Adding an HTML element into a cell

Using Data Renderers

When providing data as an array of items or as a datasource function, you can use a renderer function to format the data. Each column can be given a renderer function with their renderer property.

A renderer function will get a reference to the cell being rendered as a parameter. This reference can be used to manipulate the innerHTML property of the cell or, for example, use the standard DOM API to append a child element.

For example, if you have numeric data and want to represent it with a progress element, as we did in an earlier example with inline HTML, you can write a renderer function such as the following:

var progressRenderer = function(cell) {
  cell.element.innerHTML = '';

  var progressElement = document.createElement('progress');
  progressElement.setAttribute('value', cell.data);
  cell.element.appendChild(progressElement);
};

After you have defined the function, you still need to hook it into a column in the grid. You can do this by using the grid.columns array as follows.

grid.columns[2].renderer = progressRenderer;