grid-basic-demos.html

<dom-module id="grid-basic-demos">
  <template>
    <style include="vaadin-component-demo-shared-styles">
      :host {
        display: block;
      }
    </style>

    <h3>Defining Simple Content</h3>
    <p>
      Each item in the <code>items</code> array assigned to the <code>&lt;vaadin-grid&gt;</code> represents a single row in the grid.
    </p>
    <p>
      The <code>&lt;vaadin-grid-column&gt;</code> elements inside the <code>&lt;vaadin-grid&gt;</code> define the number of
      columns the grid has and also what gets rendered inside the cells of each column. Setting the <code>path</code> property for
      a <code>&lt;vaadin-grid-column&gt;</code> makes it render a simple text representation of the specified sub-property of the row's item.
    </p>
    <p>
      By default, the header text in the column header would also be derived from the <code>path</code> property automatically.
      To change that, an explicit <code>header</code> can be set to the column elements.
    </p>
    <vaadin-demo-snippet id="grid-basic-demos-simple-columns" when-defined="vaadin-grid">
      <template preserve-content>
        <vaadin-grid>
          <vaadin-grid-column path="name.first" header="First name"></vaadin-grid-column>
          <vaadin-grid-column path="name.last" header="Last name"></vaadin-grid-column>
          <vaadin-grid-column path="location.city"></vaadin-grid-column>
          <vaadin-grid-column path="visitCount" text-align="end" width="120px" flex-grow="0"></vaadin-grid-column>
        </vaadin-grid>

        <script>
          window.addDemoReadyListener('#grid-basic-demos-simple-columns', function(document) {
            // Assign an array of user objects as the grid's items
            document.querySelector('vaadin-grid').items = Vaadin.GridDemo.users;

            /*
             * Each object in the above "users" array follows the same structure:
             * {
             *   "name": {
             *     "first": "Laura",
             *     "last": "Arnaud",
             *     ...
             *   },
             *   "location": {
             *     "city": "Perpignan"
             *     ...
             *   }
             *   ...
             * }
             */
          });
        </script>
      </template>
    </vaadin-demo-snippet>


    <h3>Defining Content with Renderer Functions</h3>
    <p>
      The column renderer functions (<code>renderer</code>, <code>headerRenderer</code> and <code>footerRenderer</code>) 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.
    </p>
    <vaadin-demo-snippet id="grid-columns-demos-renderer-functions" when-defined="vaadin-grid">
      <template preserve-content>

        <vaadin-grid aria-label="Content Renderer Function">
          <vaadin-grid-column width="60px" flex-grow="0" text-align="end"></vaadin-grid-column>
          <vaadin-grid-column></vaadin-grid-column>
          <vaadin-grid-column></vaadin-grid-column>
          <vaadin-grid-column width="8em"></vaadin-grid-column>
        </vaadin-grid>
        <script>
          window.addDemoReadyListener('#grid-columns-demos-renderer-functions', function(document) {
            const grid = document.querySelector('vaadin-grid');
            grid.items = Vaadin.GridDemo.users;

            const columns = document.querySelectorAll('vaadin-grid-column');

            // Use renderers to populate the cell content
            columns[0].renderer = function(root, column, model) {
              root.textContent = model.index;
            };
            columns[0].headerRenderer = columns[0].footerRenderer = function(root, column) {
              root.textContent = '#';
            };

            columns[1].renderer = function(root, column, model) {
              root.textContent = model.item.name.first;
            };
            columns[1].headerRenderer = columns[1].footerRenderer = function(root, column) {
              root.textContent = 'First name';
            };

            columns[2].renderer = function(root, column, model) {
              root.textContent = model.item.name.last;
            };
            columns[2].headerRenderer = columns[2].footerRenderer = function(root, column) {
              root.textContent = 'Last name';
            };

            columns[3].renderer = function(root, column, model) {
              // Check if there is a container generated with the previous renderer call to update its content instead of recreation
              if (!root.firstElementChild) {
                root.innerHTML = '<div style="white-space: normal"></div>';
              }
              root.firstElementChild.textContent = model.item.location.street + ', ' + model.item.location.city;
            };
            columns[3].headerRenderer = columns[3].footerRenderer = function(root, column) {
              root.textContent = 'Address';
            };
          });
        </script>
      </template>
    </vaadin-demo-snippet>

    <h3>Defining Content with Polymer Templates</h3>
    <p>
      Cells contents can be defined using <code>&lt;template&gt;</code> elements.
      Inside templates, variables like <code class="polymer-binding">index</code> and <code class="polymer-binding">item.prop</code>
      can be used with Polymer's binding syntax to add dynamic content.
    </p>
    <style>
      .polymer-binding::before {
        content: "\005B\005B";
      }

      .polymer-binding::after {
        content: "\005D\005D";
      }
    </style>
    <vaadin-demo-snippet id="grid-basic-demos-basic-binding" when-defined="vaadin-grid">
      <template preserve-content>
        <dom-bind>
          <template>
            <!-- Extract an array of users to be shown in the grid -->
            <x-array-data-provider items="{{users}}"></x-array-data-provider>

            <!-- The array is set as the <vaadin-grid>'s "items" property -->
            <vaadin-grid aria-label="Basic Binding Example" items="[[users]]">

              <vaadin-grid-column width="60px" flex-grow="0">
                <template class="header">#</template>
                <template>[[index]]</template>
                <!-- If necessary, the footer could be set using <template class="footer"> -->
                <template class="footer">#</template>
              </vaadin-grid-column>

              <vaadin-grid-column>
                <template class="header">First name</template>
                <template>[[item.name.first]]</template>
                <template class="footer">First name</template>
              </vaadin-grid-column>

              <vaadin-grid-column>
                <template class="header">Last name</template>
                <template>[[item.name.last]]</template>
                <template class="footer">Last name</template>
              </vaadin-grid-column>

              <vaadin-grid-column width="8em">
                <template class="header">Address</template>
                <template>
                  <div style="white-space: normal;">[[item.location.street]], [[item.location.city]]</div>
                </template>
                <template class="footer">Address</template>
              </vaadin-grid-column>

            </vaadin-grid>
          </template>
        </dom-bind>
      </template>
    </vaadin-demo-snippet>

  </template>
  <script>
    class GridBasicDemos extends DemoReadyEventEmitter(GridDemo(Polymer.Element)) {
      static get is() {
        return 'grid-basic-demos';
      }
    }
    customElements.define(GridBasicDemos.is, GridBasicDemos);
  </script>
</dom-module>