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

Row Details

The row details feature can be used to display additional information related to a single row inside the data grid. The vaadin-grid element provides an API to assign a function that acts as a row details generator and to toggle the visibility of the row details.

vaadin grid row details
Figure 1. A vaadin-grid displaying row details

Generator Function

The row details generator should be a function assigned to the grid.rowDetailsGenerator property. This callback function is called when the row details are displayed and it is expected to return an HTML element that is to be displayed below the row. As the sole parameter the function gets the index of the row.

See the following example on how you can implement this function:

grid.rowDetailsGenerator = function(rowIndex) {
  var element = document.createElement('div');

  grid.getItem(rowIndex, function(error, item) {
    if (!error) {
      // The getUserDetails should return HTML.
      element.innerHTML = getUserDetails(item.user);

  return element;

Displaying the Details

In order to actually display the row details, you need to call the setRowDetailsVisible() method. This method takes two parameters: the index number of the row and a Boolean value to indicate whether to display or hide the row details.

See the following example on how to display details for the currently selected row:

var detailsOpenIndex = -1;

// Show details for the selected row
grid.addEventListener('selected-items-changed', function() {
  grid.setRowDetailsVisible(detailsOpenIndex, false);
  var selected = grid.selection.selected();
  if (selected.length == 1) {
    grid.setRowDetailsVisible(selected[0], true);
    detailsOpenIndex = selected[0];