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.