<div class="table table--basic">
    <table>
        <thead>
            <tr>
                <th>Lorem</th>
                <th>Ipsum</th>
                <th>Dolor</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>154</td>
                <td>657</td>
                <td>19</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="table table--{{_self.name}}{{#each tableClasses}} {{this}}{{/each}}"{{#if collapsible}} data-collapsible="1"{{/if}}{{#each tableAttributes}} {{this.name}}="{{this.value}}"{{/each}}>
  <table>
    {{#if caption}}
    <caption{{#each captionAttributes}} {{this.name}}="{{this.value}}"{{/each}}>
      {{#if collapsible}}<button class="table__toggle-control js-table-toggle-control">{{/if}}
      {{caption}}
      {{#if collapsible}}
      {{render '@icons--arrow-down'}}
      {{render '@icons--arrow-up'}}
      </button>{{/if}}
    </caption>
    {{/if}}
    {{#if colgroup}}
    <colgroup>
      {{#each colgroup}}
      <col{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>
      {{/each}}
    </colgroup>
    {{/if}}
    {{#if thead}}
    <thead{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>
      <tr>
        {{#each thead.cells}}
        <{{../thead.cellType}}{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>{{value}}</{{../thead.cellType}}>
        {{/each}}
      </tr>
    </thead>
    {{/if}}
    <tbody>
      {{#each tbody.rows}}
      <tr>
        {{#each cells}}
        <{{cellType}}{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>{{value}}</{{cellType}}>
        {{/each}}
      </tr>
      {{/each}}
    </tbody>
    {{#if tfoot}}
    <tfoot{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>
      {{#each tfoot.cells}}
      <{{../tfoot.cellType}}{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>{{value}}</{{../tfoot.cellType}}>
      {{/each}}
    </tfoot>
    {{/if}}
  </table>
</div>
{
  "thead": {
    "cellType": "th",
    "cells": [
      {
        "value": "Lorem"
      },
      {
        "value": "Ipsum"
      },
      {
        "value": "Dolor"
      }
    ]
  },
  "tbody": {
    "rows": [
      {
        "cells": [
          {
            "value": "154",
            "cellType": "td"
          },
          {
            "value": "657",
            "cellType": "td"
          },
          {
            "value": "19",
            "cellType": "td"
          }
        ]
      }
    ]
  },
  "tfoot": []
}
  • Content:
    (function (window) {
      'use strict';
    
      const tableSelector = '.table';
      const tables = document.querySelectorAll(tableSelector);
      const collapsibleTableClass = 'collapsible-table';
      const collapsibleTableActiveClass = 'js-collapsible-table--active';
      const collapsibleTableToggleSelector = '.js-table-toggle-control';
      const storeHoursTableClass = 'table--store-hours';
      const storeHoursTodayClass = 'js-store-hours-table--today';
      const today = new Date;
      const weekday = today.getDay();
    
      function toggleCollapsibleTable(e) {
        e.target.closest(tableSelector).classList.toggle(collapsibleTableActiveClass);
        e.preventDefault();
      }
    
      function init() {
        if (tables) {
          for (let i = 0; i < tables.length; i++) {
            const table = tables[i];
    
            // Handle collapsible tables.
            if (table.classList.contains(collapsibleTableClass)) {
              const toggleControl = table.querySelector(collapsibleTableToggleSelector);
              toggleControl.addEventListener('click', toggleCollapsibleTable);
            }
    
            // Handle store hours tables.
            if (table.classList.contains(storeHoursTableClass)) {
              const weekStartDay = table.getAttribute('data-week-start-day');
              // Javascript considers weeks to start on Sunday, so Sunday == 0. Our
              // tables may NOT start on Sunday, so we need to account for that (but
              // we assume that if they don't start on Sunday, they start on Monday!)
              //
              // Note that we're also compensating here for the fact that the weekday
              // value is zero-based while the nth-child selector we use to mark the
              // current day's row is one-based.
              const todaysHoursRowIndex = (weekStartDay > 0) ? weekday : weekday + 1;
              const todaysHoursRow = table.querySelector('tr:nth-child(' + todaysHoursRowIndex + ')');
    
              todaysHoursRow.classList.add(storeHoursTodayClass);
            }
          }
        }
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/table/table.js
  • Filesystem Path: src/components/01-elements/table/table.js
  • Size: 2 KB
  • Content:
    .table {
      max-width: 300px;
      font-size: 1.4rem;
      line-height: 2.0rem;
      text-align: left;
      border-collapse: collapse;
    
      caption {
        width: 100%;
        margin-bottom: $gutter-width / 2;
        font-weight: bold;
        text-align: left;
      }
    
      th,
      td {
        padding: 0;
        font-weight: $font-weight-normal;
        text-align: left;
      }
    
      th {
        padding: 0;
      }
    }
    
    .table[data-collapsible='1'] {
      thead,
      tfoot,
      tr {
        display: none;
      }
    
      &.table--store-hours {
        tr.js-store-hours-table--today {
          display: table-row;
        }
      }
    }
    
    .js-collapsible-table--active[data-collapsible] {
      thead {
        display: table-header-group;
      }
    
      tfoot {
        display: table-footer-group;
      }
    
      tr {
        display: table-row;
      }
    
      .icon--arrow-up {
        display: block;
      }
    
      .icon--arrow-down {
        display: none;
      }
    }
    
    .table__toggle-control {
      width: 100%;
      margin: 0;
      padding: 0;
      border-style: none;
      background: transparent;
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
      text-align: inherit;
      cursor: pointer;
    
      .icon {
        width: 6px;
        padding: 8px 0 7px;
        float: right;
      }
    
      .icon--arrow-up {
        display: none;
      }
    }
    
    .table--store-hours {
      th {
        padding-right: 5px;
      }
    }
    
  • URL: /components/raw/table/table.scss
  • Filesystem Path: src/components/01-elements/table/table.scss
  • Size: 1.2 KB

There are no notes for this item.