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 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;
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>
grid.footer.getCell(0, 0).colspan = 2;
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.
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).
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.