grid-pagination-demos.html

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

    <style>
      vaadin-grid {
        text-transform: none;
      }
    </style>


    <h3>Pagination</h3>
    <p>
      The <code>&lt;vaadin-grid&gt;</code> is an infinitely scrolling list by nature, but simple pagination can be implemented for example by changing the grid's <code>items</code> array on page change.
    </p>
    <vaadin-demo-snippet id="grid-pagination-demos-pagination" when-defined="vaadin-grid">
      <template preserve-content>
        <style>
          #pages {
            display: flex;
            flex-wrap: wrap;
            margin: 20px;
          }

          #pages > button {
            user-select: none;
            padding: 5px;
            margin: 0 5px;
            border-radius: 10%;
            border: 0;
            background: transparent;
            font: inherit;
            outline: none;
            cursor: pointer;
          }

          #pages > button:not([disabled]):hover,
          #pages > button:focus {
            color: #ccc;
            background-color: #eee;
          }

          #pages > button[selected] {
            font-weight: bold;
            color: white;
            background-color: #ccc;
          }

          #pages > button[disabled] {
            opacity: 0.5;
            cursor: default;
          }
        </style>

        <vaadin-grid page-size="10" all-rows-visible>
          <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 width="200px" path="email"></vaadin-grid-column>
        </vaadin-grid>

        <div id="pages"></div>

        <script>
          window.addDemoReadyListener('#grid-pagination-demos-pagination', function(document) {
            const grid = document.querySelector('vaadin-grid');
            const pagesControl = document.querySelector('#pages');
            let pages;

            updateItemsFromPage(1);

            function updateItemsFromPage(page) {
              if (page === undefined) {
                return;
              }

              if (!pages) {
                pages = Array.apply(null, {length: Math.ceil(Vaadin.GridDemo.users.length / grid.pageSize)}).map(function(item, index) {
                  return index + 1;
                });

                const prevBtn = window.document.createElement('button');
                prevBtn.textContent = '<';
                prevBtn.addEventListener('click', function() {
                  const selectedPage = parseInt(pagesControl.querySelector('[selected]').textContent);
                  updateItemsFromPage(selectedPage - 1);
                });
                pagesControl.appendChild(prevBtn);

                pages.forEach(function(pageNumber) {
                  const pageBtn = window.document.createElement('button');
                  pageBtn.textContent = pageNumber;
                  pageBtn.addEventListener('click', function(e) {
                    updateItemsFromPage(parseInt(e.target.textContent));
                  });
                  if (pageNumber === page) {
                    pageBtn.setAttribute('selected', true);
                  }
                  pagesControl.appendChild(pageBtn);
                });

                const nextBtn = window.document.createElement('button');
                nextBtn.textContent = '>';
                nextBtn.addEventListener('click', function() {
                  const selectedPage = parseInt(pagesControl.querySelector('[selected]').textContent);
                  updateItemsFromPage(selectedPage + 1);
                });
                pagesControl.appendChild(nextBtn);
              }

              const buttons = Array.from(pagesControl.children);
              buttons.forEach(function(btn, index) {
                if (parseInt(btn.textContent) === page) {
                  btn.setAttribute('selected', true);
                } else {
                  btn.removeAttribute('selected');
                }
                if (index === 0) {
                  if (page === 1) {
                    btn.setAttribute('disabled', '');
                  } else {
                    btn.removeAttribute('disabled');
                  }
                }
                if (index === buttons.length - 1) {
                  if (page === pages.length) {
                    btn.setAttribute('disabled', '');
                  } else {
                    btn.removeAttribute('disabled');
                  }
                }
              });

              var start = (page - 1) * grid.pageSize;
              var end = page * grid.pageSize;
              grid.items = Vaadin.GridDemo.users.slice(start, end);
            }
          });
        </script>
      </template>
    </vaadin-demo-snippet>

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