grid-theme-demos.html

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

    <p>You can combine all of these variants together, e.g. <code>&lt;vaadin-grid <b>theme="compact no-row-borders row-stripes"</b>&gt;</code></p>

    <h3>Compact</h3>
    <p><code>&lt;vaadin-grid <b>theme="compact"</b>&gt;</code></p>
    <p>The following styles changes are applied by setting <code>&lt;<b>theme="compact"</b>&gt;</code></p>
    <ul>
      <li>
        header cells:
        <ul>
          <li><code>min-height</code> is decreased from <code><b>--lumo-size-xl</b></code> to <code><b>--lumo-size-m</b></code></li>
        </ul>
      </li>
      <li>body and row details cells:</li>
      <ul>
        <li><code>min-height</code> is decreased from <code><b>--lumo-size-m</b></code> to <code> <b>--lumo-size-s</b></code></li>
        <li>vertical padding is decreased from <code><b>----lumo-space-m</b></code> to <code><b>--lumo-space-s</b></code></li>
      </ul>
    </ul>

    <vaadin-demo-snippet id="grid-theme-demos-compact" when-defined="vaadin-grid">
      <template preserve-content>
        <vaadin-grid theme="compact" column-reordering-allowed multi-sort>
          <vaadin-grid-selection-column auto-select></vaadin-grid-selection-column>
          <vaadin-grid-sort-column path="name.first" header="First name" width="9em"></vaadin-grid-sort-column>
          <vaadin-grid-sort-column path="name.last" header="Last name" width="9em"></vaadin-grid-sort-column>
          <vaadin-grid-sort-column path="location.street" header="Address" width="15em" flex-grow="2"></vaadin-grid-sort-column>
        </vaadin-grid>

        <script>
          window.addDemoReadyListener('#grid-theme-demos-compact', function(document) {
            document.querySelector('vaadin-grid').items = Vaadin.GridDemo.users;
          });
        </script>
      </template>
    </vaadin-demo-snippet>

    <h3>No border</h3>
    <p><code>&lt;vaadin-grid <b>theme="no-border"</b>&gt;</code></p>
    <p>When setting <code><b>theme="no-border"</b></code>, the outer border on the grid is removed.</p>
    <vaadin-demo-snippet id="grid-theme-demos-bordered" when-defined="vaadin-grid">
      <template preserve-content>
        <vaadin-grid theme="no-border" column-reordering-allowed multi-sort>
          <vaadin-grid-selection-column auto-select></vaadin-grid-selection-column>
          <vaadin-grid-sort-column path="name.first" header="First name" width="9em"></vaadin-grid-sort-column>
          <vaadin-grid-sort-column path="name.last" header="Last name" width="9em"></vaadin-grid-sort-column>
          <vaadin-grid-sort-column path="location.street" header="Address" width="15em" flex-grow="2"></vaadin-grid-sort-column>
        </vaadin-grid>

        <script>
          window.addDemoReadyListener('#grid-theme-demos-bordered', function(document) {
            document.querySelector('vaadin-grid').items = Vaadin.GridDemo.users;
          });
        </script>
      </template>
    </vaadin-demo-snippet>

    <h3>No row borders</h3>
    <p><code>&lt;vaadin-grid <b>theme="no-row-borders"</b>&gt;</code></p>
    <p>When setting <code><b>theme="no-row-borders"</b></code>, all the borders on the grid rows are removed.</p>
    <vaadin-demo-snippet id="grid-theme-demos-row-borders" when-defined="vaadin-grid">
      <template preserve-content>
        <vaadin-grid theme="no-row-borders" column-reordering-allowed multi-sort>
          <vaadin-grid-selection-column auto-select></vaadin-grid-selection-column>
          <vaadin-grid-sort-column path="name.first" header="First name" width="9em"></vaadin-grid-sort-column>
          <vaadin-grid-sort-column path="name.last" header="Last name" width="9em"></vaadin-grid-sort-column>
          <vaadin-grid-sort-column path="location.street" header="Address" width="15em" flex-grow="2"></vaadin-grid-sort-column>
        </vaadin-grid>

        <script>
          window.addDemoReadyListener('#grid-theme-demos-row-borders', function(document) {
            document.querySelector('vaadin-grid').items = Vaadin.GridDemo.users;
          });
        </script>
      </template>
    </vaadin-demo-snippet>

    <h3>Column borders</h3>
    <p><code>&lt;vaadin-grid <b>theme="column-borders"</b>&gt;</code></p>
    <p>When setting <code><b>theme="column-borders"</b></code>,
      all the cells (except row details) have the border-right set.
      This doesn't apply to the last column, to ensure proper outer grid border appearance.</p>
    <vaadin-demo-snippet id="grid-theme-demos-column-borders" when-defined="vaadin-grid">
      <template preserve-content>
        <vaadin-grid theme="column-borders" column-reordering-allowed multi-sort>
          <vaadin-grid-selection-column auto-select></vaadin-grid-selection-column>
          <vaadin-grid-sort-column path="name.first" header="First name" width="9em"></vaadin-grid-sort-column>
          <vaadin-grid-sort-column path="name.last" header="Last name" width="9em"></vaadin-grid-sort-column>
          <vaadin-grid-sort-column path="location.street" header="Address" width="15em" flex-grow="2"></vaadin-grid-sort-column>
        </vaadin-grid>

        <script>
          window.addDemoReadyListener('#grid-theme-demos-column-borders', function(document) {
            document.querySelector('vaadin-grid').items = Vaadin.GridDemo.users;
          });
        </script>
      </template>
    </vaadin-demo-snippet>

    <h3>Row Stripes</h3>
    <p><code>&lt;vaadin-grid <b>theme="row-stripes"</b>&gt;</code></p>
    <p>When setting <code><b>theme="row-stripes"</b></code>,
      all the even grid rows (their body and details cells) are filled with the background of
      <code><b>--lumo-contrast-5pct</b></code>.
      The odd rows cells appearance is left unchanged.</p>
    <vaadin-demo-snippet id="grid-theme-demos-row-stripes" when-defined="vaadin-grid">
      <template preserve-content>
        <vaadin-grid theme="row-stripes" column-reordering-allowed multi-sort>
          <vaadin-grid-selection-column auto-select></vaadin-grid-selection-column>
          <vaadin-grid-sort-column path="name.first" header="First name" width="9em"></vaadin-grid-sort-column>
          <vaadin-grid-sort-column path="name.last" header="Last name" width="9em"></vaadin-grid-sort-column>
          <vaadin-grid-sort-column path="location.street" header="Address" width="15em" flex-grow="2"></vaadin-grid-sort-column>
        </vaadin-grid>

        <script>
          window.addDemoReadyListener('#grid-theme-demos-row-stripes', function(document) {
            document.querySelector('vaadin-grid').items = Vaadin.GridDemo.users;
          });
        </script>
      </template>
    </vaadin-demo-snippet>

    <h3>Wrap Cell Content</h3>
    <p><code>&lt;vaadin-grid <b>theme="wrap-cell-content"</b>&gt;</code></p>
    <p>By default, cell contents don’t wrap and all overflowing content is either clipped or truncated. Apply the <code>wrap-cell-content</code> theme to make the cell content wrap instead.</p>
    <vaadin-demo-snippet id="grid-theme-demos-wrap-cell-content" when-defined="vaadin-grid">
      <template preserve-content>
        <vaadin-grid theme="wrap-cell-content" column-reordering-allowed multi-sort>
          <vaadin-grid-selection-column auto-select></vaadin-grid-selection-column>
          <vaadin-grid-sort-column path="name.first" header="First name" width="9em"></vaadin-grid-sort-column>
          <vaadin-grid-sort-column path="name.last" header="Last name" width="9em"></vaadin-grid-sort-column>
          <vaadin-grid-sort-column path="location.street" header="Address" width="9em" flex-grow="2"></vaadin-grid-sort-column>
        </vaadin-grid>

        <script>
          window.addDemoReadyListener('#grid-theme-demos-wrap-cell-content', function(document) {
            document.querySelector('vaadin-grid').items = Vaadin.GridDemo.users;
          });
        </script>
      </template>
    </vaadin-demo-snippet>

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