grid-columns-demos.html

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

    <h3>Automatic Column Width</h3>
    <p>
      Applying <code>auto-width</code> on the <code>&lt;vaadin-grid-column&gt;</code> will set the width of the column
      to automatically fit the content.
    </p>
    <p>
      The column width will be calculated and set only once based on the contents of the initially rendered cells.
      You can manually trigger the auto sizing behavior again by calling <code>grid.recalculateColumnWidths()</code>.
    </p>
    <p>
      By default the column might still expand if there is more space available, unless you also set <code>flex-grow="0"</code>.
    </p>
    <p>
      <b>Note:</b> If all the columns have <code>flex-grow="0"</code> there might be empty space after the last column
      if the grid is wider than what is needed to fit all the columns. You probably want to leave at least one column
      without <code>flex-grow="0"</code> so that column will take all the remaining space that is left.
    </p>
    <p>
      <b>Note:</b> When using column renderer functions, those should be set before setting the grid <code>items</code> or
      <code>dataProvider</code>. Otherwise the initial column widths may be calculated before the renderers have been run and
      the widths of the renderer columns might be wrong initially.
    </p>
    <vaadin-demo-snippet id="grid-columns-demos-auto-width" when-defined="vaadin-grid">
      <template preserve-content>
        <vaadin-button>Recalculate column widths</vaadin-button>
        <vaadin-grid theme="compact column-borders" aria-label="Automatic Column Width Example">
          <vaadin-grid-column width="50px" flex-grow="0" text-align="end" header="#"></vaadin-grid-column>
          <vaadin-grid-column auto-width flex-grow="0" text-align="center"></vaadin-grid-column>
          <vaadin-grid-column auto-width path="name.first"></vaadin-grid-column>
          <vaadin-grid-column auto-width path="name.last"></vaadin-grid-column>
          <vaadin-grid-column auto-width path="location.city"></vaadin-grid-column>
          <vaadin-grid-column auto-width path="location.state"></vaadin-grid-column>
          <vaadin-grid-column auto-width path="location.street"></vaadin-grid-column>
        </vaadin-grid>

        <script>
          window.addDemoReadyListener('#grid-columns-demos-auto-width', function(document) {
            const grid = document.querySelector('vaadin-grid');

            const columns = document.querySelectorAll('vaadin-grid-column');
            columns[0].renderer = function(root, column, model) {
              root.textContent = model.index;
            };
            columns[1].renderer = function(root, column, model) {
              if (!root.firstElementChild) {
                root.innerHTML = '<iron-image width="25" height="25" sizing="cover"></iron-image>';
              }
              root.firstElementChild.alt = model.item.name.first + ' ' + model.item.name.last;
              root.firstElementChild.src = model.item.picture.thumbnail;
            };

            grid.items = Vaadin.GridDemo.users;

            const button = document.querySelector('vaadin-button');
            button.addEventListener('click', function() {
              grid.recalculateColumnWidths();
            });
          });
        </script>
      </template>
    </vaadin-demo-snippet>

    <h3>Column Grouping</h3>
    <p>
      Columns can be grouped together with <code>&lt;vaadin-grid-column-group&gt;</code> elements.
      Grouped columns can have a common header and footer cells.
    </p>
    <p>
      <b>Note:</b> Remember to define explicit bounds for images in order to avoid glitches once an image has fully loaded.
    </p>
    <p>
      <b>NOTE: You must explicitly import the <code>vaadin-grid-column-group</code> in order to use it.</b>
    </p>
    <vaadin-demo-snippet id="grid-columns-demos-column-grouping" when-defined="vaadin-grid">
      <template preserve-content>
        <vaadin-grid aria-label="Column Grouping Example">
          <vaadin-grid-column width="60px" flex-grow="0" text-align="end" header="#"></vaadin-grid-column>
          <vaadin-grid-column width="60px" flex-grow="0" text-align="center"></vaadin-grid-column>

          <vaadin-grid-column-group header="Name">
            <vaadin-grid-column path="name.first" width="calc(25% - 20px)"></vaadin-grid-column>
            <vaadin-grid-column path="name.last" width="calc(25% - 20px)"></vaadin-grid-column>
          </vaadin-grid-column-group>

          <vaadin-grid-column-group header="Location">
            <vaadin-grid-column path="location.city" width="calc(25% - 20px)"></vaadin-grid-column>
            <vaadin-grid-column path="location.state" width="calc(25% - 20px)"></vaadin-grid-column>
            <vaadin-grid-column path="location.street" width="200px"></vaadin-grid-column>
          </vaadin-grid-column-group>
        </vaadin-grid>

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

            const columns = document.querySelectorAll('vaadin-grid-column');
            columns[0].renderer = function(root, column, model) {
              root.textContent = model.index;
            };

            columns[1].renderer = function(root, column, model) {
              if (!root.firstElementChild) {
                root.innerHTML = '<iron-image width="30" height="30" sizing="cover"></iron-image>';
              }
              root.firstElementChild.alt = model.item.name.first + ' ' + model.item.name.last;
              root.firstElementChild.src = model.item.picture.thumbnail;
            };
          });
        </script>
      </template>
    </vaadin-demo-snippet>


    <h3>Freezing Columns</h3>
    <p>
      Applying <code>frozen</code> on a column will make it frozen. It can be
      also be applied to a column group to freeze all of its child columns.
    </p>
    <p>
      <b>Note:</b> Columns are frozen in-place, freeze columns from left to right
      for a consistent outcome.
    </p>
    <vaadin-demo-snippet id="grid-columns-demos-freezing-columns" when-defined="vaadin-grid">
      <template preserve-content>
        <vaadin-checkbox>Freeze First Two Columns</vaadin-checkbox>

        <vaadin-grid aria-label="Freezing Columns Example">
          <vaadin-grid-column width="60px" flex-grow="0" text-align="end" header="#"></vaadin-grid-column>
          <vaadin-grid-column width="60px" flex-grow="0" text-align="center"></vaadin-grid-column>
          <vaadin-grid-column path="name.first" width="20%" flex-grow="0"></vaadin-grid-column>
          <vaadin-grid-column path="name.last" width="20%" flex-grow="0"></vaadin-grid-column>
          <vaadin-grid-column path="location.city" width="33%"></vaadin-grid-column>
          <vaadin-grid-column path="location.state" width="33%"></vaadin-grid-column>
          <vaadin-grid-column path="location.street" width="33%"></vaadin-grid-column>
        </vaadin-grid>

        <script>
          window.addDemoReadyListener('#grid-columns-demos-freezing-columns', function(document) {
            const checkBox = document.querySelector('vaadin-checkbox');

            checkBox.addEventListener('checked-changed', function(event) {
              columns[0].frozen = columns[1].frozen = event.detail.value;
            });

            document.querySelector('vaadin-grid').items = Vaadin.GridDemo.users;

            const columns = document.querySelectorAll('vaadin-grid-column');
            columns[0].renderer = function(root, column, model) {
              root.textContent = model.index;
            };

            columns[1].renderer = function(root, column, model) {
              if (!root.firstElementChild) {
                root.innerHTML = '<iron-image width="30" height="30" sizing="cover"></iron-image>';
              }
              root.firstElementChild.alt = model.item.name.first + ' ' + model.item.name.last;
              root.firstElementChild.src = model.item.picture.thumbnail;
            };
          });
        </script>
      </template>
    </vaadin-demo-snippet>


    <h3>Hiding Columns</h3>
    <p>
      Applying <code>hidden</code> on a column or column group will hide it.
    </p>
    <vaadin-demo-snippet id="grid-columns-demos-hiding-columns" when-defined="vaadin-grid">
      <template preserve-content>
        <vaadin-context-menu>
          <vaadin-button theme="icon" aria-label="Hide column menu">
            <iron-icon icon="lumo:menu"></iron-icon>
          </vaadin-button>
        </vaadin-context-menu>
        <vaadin-grid aria-label="Hiding Columns Example">
          <vaadin-grid-column width="60px" flex-grow="0" text-align="end" header="#" name="Index"></vaadin-grid-column>
          <vaadin-grid-column width="60px" flex-grow="0" text-align="center" name="Picture"></vaadin-grid-column>
          <vaadin-grid-column path="name.first" width="20%" flex-grow="0" name="First Name"></vaadin-grid-column>
          <vaadin-grid-column path="name.last" width="20%" flex-grow="0" name="Last Name"></vaadin-grid-column>
          <vaadin-grid-column path="location.city" width="33%" name="City"></vaadin-grid-column>
          <vaadin-grid-column path="location.state" width="33%" name="State" hidden></vaadin-grid-column>
          <vaadin-grid-column path="location.street" width="33%" name="Street"></vaadin-grid-column>
        </vaadin-grid>

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

            const columns = document.querySelectorAll('vaadin-grid-column');
            columns[0].renderer = function(root, column, model) {
              root.textContent = model.index;
            };

            columns[1].renderer = function(root, column, model) {
              if (!root.firstElementChild) {
                root.innerHTML = '<iron-image width="30" height="30" sizing="cover"></iron-image>';
              }
              root.firstElementChild.alt = model.item.name.first + ' ' + model.item.name.last;
              root.firstElementChild.src = model.item.picture.thumbnail;
            };

            const contextMenu = document.querySelector('vaadin-context-menu');
            contextMenu.listenOn = document.querySelector('vaadin-button');
            contextMenu.openOn = 'click';
            contextMenu.renderer = function(root) {
              root.innerHTML = '';
              columns.forEach(function(column, i) {
                const checkbox = window.document.createElement('vaadin-checkbox');
                checkbox.style.display = 'block';
                checkbox.textContent = column.getAttribute('name');
                checkbox.checked = !column.hidden;
                checkbox.addEventListener('change', function() {
                  column.hidden = !checkbox.checked;
                });
                // Prevent the context menu from closing when clicking a checkbox
                checkbox.addEventListener('click', function(e) {
                  e.stopPropagation();
                });
                root.appendChild(checkbox);
              });
            };
          });
        </script>
      </template>
    </vaadin-demo-snippet>


    <h3>Reordering and Resizing Columns</h3>
    <p>
      Applying <code>column-reordering-allowed</code> on the grid will make all
      columns reorderable. Drag and drop the columns by headers to reorder.
    </p>
    <p>
      Applying <code>resizable</code> on a column will make it resizable.
    </p>
    <p>
      <b>Note: </b>When using column groups, columns can be reordered only within
      their parent group.
    </p>
    <vaadin-demo-snippet id="grid-columns-demos-reordering-and-resizing-columns" when-defined="vaadin-grid">
      <template preserve-content>
        <vaadin-grid aria-label="Reordering and Resizing Columns Example" size="200" column-reordering-allowed>
          <vaadin-grid-column resizable width="60px" flex-grow="0" text-align="end" header="#"></vaadin-grid-column>
          <vaadin-grid-column resizable width="60px" flex-grow="0" text-align="center"></vaadin-grid-column>

          <vaadin-grid-column-group header="Name" resizable>
            <vaadin-grid-column path="name.first" width="calc(25% - 20px)"></vaadin-grid-column>
            <vaadin-grid-column path="name.last" width="calc(25% - 20px)"></vaadin-grid-column>
          </vaadin-grid-column-group>

          <vaadin-grid-column-group header="Location" resizable>
            <vaadin-grid-column path="location.city" width="calc(25% - 20px)"></vaadin-grid-column>
            <vaadin-grid-column path="location.state" width="calc(25% - 20px)"></vaadin-grid-column>
            <vaadin-grid-column path="location.street" width="200px"></vaadin-grid-column>
          </vaadin-grid-column-group>
        </vaadin-grid>

        <script>
          window.addDemoReadyListener('#grid-columns-demos-reordering-and-resizing-columns', function(document) {
            document.querySelector('vaadin-grid').items = Vaadin.GridDemo.users;

            const columns = document.querySelectorAll('vaadin-grid-column');
            columns[0].renderer = function(root, column, model) {
              root.textContent = model.index;
            };

            columns[1].renderer = function(root, column, model) {
              if (!root.firstElementChild) {
                root.innerHTML = '<iron-image width="30" height="30" sizing="cover"></iron-image>';
              }
              root.firstElementChild.alt = model.item.name.first + ' ' + model.item.name.last;
              root.firstElementChild.src = model.item.picture.thumbnail;
            };
          });
        </script>
      </template>
    </vaadin-demo-snippet>

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