You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
Customizing Headers and Footers · Vaadin
Vaadin Elements - Grid - Customizing Headers and Footers

Customizing Headers and Footers

The vaadin-grid element has a header section above and a footer section below the scrollable data area (compares to thead and tfoot sections of an HTML table element).

Typically, you would use the header section to place a caption above an individual column. This section explains the special cases, while Configuring Columns gives the details of the basic configuration.

HTML Cell Content

What can be placed inside header and footer is not limited to text only. You may define the cell content in plain HTML to add elements and style tweaks for the content. The following example adds HTML (an image and some bolded text) in the vaadin-grid footer.

<vaadin-grid>
  <table>
    <colgroup>
      <col>
      <col>
    </colgroup>
    <tfoot>
      <tr>
        <td>
          <img src="footerimage.jpg">
        </td>
        <td>
          <b>Bold text</b>
        </td>
      </tr>
    </tfoot>
  </table>
</vaadin-grid>

Cell and Content API

The vaadin-grid element exposes JavaScript APIs for programmatically changing the content of a cell in the header (and footer respectively).

The first thing you will need is access to the cell whose content is to be changed. There are properties grid.header and grid.footer for accessing the dedicated APIs. You can access a specific cell using the getCell(rowIndex, columnIndex) method on the header and footer objects.

From there on changing the content is a matter of modifying the cell’s content property. Similarly to the declarative version, the imperative API accepts plain text, HTML, or an element to be displayed inside the cell.

// Text placed in the first cell of the first row in the grid header
grid.header.getCell(0, 0).content = 'Project Name';

// HTML placed in the first cell of the first row in the grid footer
grid.footer.getCell(0, 0).content = '<b>Bold text</b>'

// A pre-defined element placed in the second cell of the first row in the grid header
grid.header.getCell(0, 1).content = this.$.filterTextField;

Column Span

By default each cell in the header/footer has the same width as the column’s data cells. Adjusting a cell’s colspan attribute will extended it to span over more than just one column.

The following example adds some HTML content inside the footer of vaadin-grid and spans it over 2 columns.

<vaadin-grid>
  <table>
    <colgroup>
      <col>
      <col>
    </colgroup>
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th colspan="2">Number of selected rows:
          <span id="selected-counter">0</span>
        </th>
      </tr>
    </tfoot>
  </table>
</vaadin-grid>

Colspan can also be adjusted in JavaScript by changing the cell’s colspan property.

grid.footer.getCell(0, 0).colspan = 2;

Additional Rows

By default there is one row in the vaadin-grid header and no rows in the footer. You can add new tr elements to your declarative table configurator on each section to affect the number of visible rows.

Customized header and footer

vaadin grid headers row count

The header and footer in Customized header and footer is achieved with the following markup.

<vaadin-grid>
  <table>
    <colgroup>
      <col>
      <col>
      <col>
      <col>
    </colgroup>
    <thead>
      <tr>
        <th colspan="2">Name</th>
        <th colspan="2">Location</th>
      </tr>
      <tr>
        <th>First</th>
        <th>Last</th>
        <th>Street</th>
        <th>City</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th colspan="4">Number of selected rows:
          <span id="selected-counter">0</span>
        </th>
      </tr>
    </tfoot>
  </table>
</vaadin-grid>

Header and Footer APIs

In addition to the getCell(rowIndex, columnIndex) method mentioned earlier, the header/footer objects expose also other APIs.

New rows can be added with the addRow(rowIndex, cellContent) method and existing ones removed with removeRow(rowIndex). The parameter rowIndex should be self-explanatory in both cases; a zero-based index of the targeted row. The second parameter cellContent is an optional array that allows you to easily specify content for the cells on the new row.

// Adding a new row to the grid header with some
// predefined cell content (text, element, HTML).
grid.header.addRow(1, ['First Name', document.createElement('input'), '<b>Score</b>']);

There are also a handful of related properties in the header and footer objects.

If you have multiple header rows, you can define the placement of the default row by using the header.defaultRow property. The default row is the one containing column headers as well as sort indicators and the select all checkbox.

Also the header.rowCount and footer.rowCount properties (read-only) can be used to get the number of currently defined header or footer rows. In case you need to completely toggle the visibility of the header or footer section, you can use the respective header.hidden or footer.hidden properties.