grid-sorting-demos.html

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

    <style>
      vaadin-checkbox {
        margin-bottom: 10px;
      }
    </style>

    <h3>Sorting</h3>
    <p>
      <code>&lt;vaadin-grid-sort-column&gt;</code> helper element can be used to define sorting for a column
      in the most simple case, where the header cell should render a text label and a sorting indicator,
      while the body cells are only expected to render values of a sorting property.
    </p>
    <p>
      Only the <code>path</code> property is mandatory to make the sorting work. The <code>header</code> property is
      optional and can be omitted, in that case the header text will be generated based on the <code>path</code> value.
    </p>
    <p>
      <b>NOTE: You must explicitly import the <code>vaadin-grid-sort-column</code> in order to use it.</b>
    </p>

    <vaadin-demo-snippet id="grid-sorting-demos-sort-column" when-defined="vaadin-grid">
      <template preserve-content>
        <vaadin-checkbox>Enable Multi-Sorting</vaadin-checkbox>

        <vaadin-grid aria-label="Sorting Example">
          <vaadin-grid-sort-column path="name.first" header="First name"></vaadin-grid-sort-column>
          <vaadin-grid-sort-column path="name.last" header="Last name"></vaadin-grid-sort-column>
          <vaadin-grid-sort-column path="email"></vaadin-grid-sort-column>
        </vaadin-grid>

        <script>
          window.addDemoReadyListener('#grid-sorting-demos-sort-column', function(document) {
            const grid = document.querySelector('vaadin-grid');
            grid.items = Vaadin.GridDemo.users;

            const checkBox = document.querySelector('vaadin-checkbox');
            checkBox.addEventListener('checked-changed', function(event) {
              grid.multiSort = event.detail.value;
            });
          });
        </script>
      </template>
    </vaadin-demo-snippet>


    <h3>Sorting with Sorter</h3>
    <p>
      <code>&lt;vaadin-grid-sorter&gt;</code> together with a <code>renderer</code> can be used to enable
      sorting for any type of column. The users in the example are sorted by last name initially.
    </p>
    <p>
      <b>NOTE: You must explicitly import the <code>vaadin-grid-sorter</code> in order to use it.</b>
    </p>

    <vaadin-demo-snippet id="grid-sorting-demos-sorter" when-defined="vaadin-grid">
      <template preserve-content>
        <vaadin-checkbox>Enable Multi-Sorting</vaadin-checkbox>

        <vaadin-grid aria-label="Sorting Example">
          <vaadin-grid-column path="name.first" id="firstnamecolumn"></vaadin-grid-column>
          <vaadin-grid-column path="name.last" id="lastnamecolumn"></vaadin-grid-column>
          <vaadin-grid-column path="email"></vaadin-grid-column>
        </vaadin-grid>

        <script>
          window.addDemoReadyListener('#grid-sorting-demos-sorter', function(document) {
            const grid = document.querySelector('vaadin-grid');
            grid.items = Vaadin.GridDemo.users;

            const checkBox = document.querySelector('vaadin-checkbox');
            checkBox.addEventListener('checked-changed', function(event) {
              grid.multiSort = event.detail.value;
            });

            grid.querySelector('#firstnamecolumn').headerRenderer = function(root) {
              root.innerHTML = '<vaadin-grid-sorter path="name.first">First name</vaadin-grid-sorter>';
            };

            grid.querySelector('#lastnamecolumn').headerRenderer = function(root) {
              root.innerHTML = '<vaadin-grid-sorter path="name.last" direction="asc">Last name</vaadin-grid-sorter>';
            };
          });
        </script>
      </template>
    </vaadin-demo-snippet>


    <h3>Sorting with Data Provider</h3>
    <p>
      When the data is fetched from a data provider, the responsibility
      of providing the correctly ordered data is on the data provider itself.
      The data provider is asked for fresh sorted data whenever the sorting
      order is changed on any <code>&lt;vaadin-grid-sorter&gt;</code>.
    </p>
    <p>
      The effective <code>sortOrders</code> array will be included as one of
      the data provider call options.
    </p>
    <p>
      <b>Hint: </b>When using a data provider, <code>path</code> on the
      <code>&lt;vaadin-grid-sorter&gt;</code> element can be set to any string,
      instead of a property on the item object.
    </p>

    <vaadin-demo-snippet id="grid-sorting-demos-sorting-with-data-provider" when-defined="vaadin-grid">
      <template preserve-content>
        <vaadin-grid aria-label="Sorting Example">
          <vaadin-grid-column path="firstName" id="firstnamecolumn"></vaadin-grid-column>
          <vaadin-grid-column path="lastName" id="lastnamecolumn"></vaadin-grid-column>
          <vaadin-grid-column path="email"></vaadin-grid-column>
        </vaadin-grid>

        <script>
          window.addDemoReadyListener('#grid-sorting-demos-sorting-with-data-provider', function(document) {
            const grid = document.querySelector('vaadin-grid');
            grid.size = 200;
            grid.dataProvider = function(params, callback) {
              const xhr = new XMLHttpRequest();
              xhr.onload = function() {
                callback(JSON.parse(xhr.responseText).result);
              };

              const index = params.page * params.pageSize;
              let url = 'https://demo.vaadin.com/demo-data/1.0/people?index=' + index + '&count=' + params.pageSize;

              // `params.sortOrders` format: [{path: 'lastName', direction: 'asc'}, ...];
              params.sortOrders.forEach(function(sort) {
                url += '&orders[]=' + sort.path + ' ' + sort.direction;
              });

              xhr.open('GET', url, true);
              xhr.send();
            };

            grid.querySelector('#firstnamecolumn').headerRenderer = function(root) {
              root.innerHTML = '<vaadin-grid-sorter path="firstName">First name</vaadin-grid-sorter>';
            };

            grid.querySelector('#lastnamecolumn').headerRenderer = function(root) {
              root.innerHTML = '<vaadin-grid-sorter path="lastName" direction="asc">Last name</vaadin-grid-sorter>';
            };
          });
        </script>
      </template>
    </vaadin-demo-snippet>


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