Each item in the items array assigned to the <vaadin-grid> represents a single row in the grid.
The <vaadin-grid-column> elements inside the <vaadin-grid> define the number of
columns the grid has and also what gets rendered inside the cells of each column. Setting the path property for
a <vaadin-grid-column> makes it render a simple text representation of the specified sub-property of the row's item.
By default, the header text in the column header would also be derived from the path property automatically.
To change that, an explicit header can be set to the column elements.
The column renderer functions (renderer, headerRenderer and footerRenderer) can
alternatively be used for defining content for the column cells. They're especially useful when the columns should display
custom content that can't be defined with just the shorthand properties.
Cells contents can be defined using <template> elements.
Inside templates, variables like index and item.prop
can be used with Polymer's binding syntax to add dynamic content.