University of Leeds Design System v1.0.15

Index Table: links

Guidance

Index tables allow you to present structured data. This is the type of data that typically comes from JSON or databases where the data structure is predictable.

This differs from the @uol-rich-text-table for use in Rich Text Areas where authors can edit the table content.

If the data can be presented with a single heading row and does not rely on column headings there is the option to present a “stacked” view for smaller screens. See Options for tables.

When to use

  • Where data is predictable and comes from a structured source such as JSON or a database

When not to use

  • Where the data is unpredictable or can be edited by a CMS editor

Developer guidance

Options

Name Type Description
tables array An array of tables.

Options for tables

Name Type Description
stackable boolean Provides a “stacked” view for smaller screens. Only use when date has a single heading row.
caption string Provides a title for the table, renders as a <h2>. Recommended unless preceded by an alternative semantic title.
headings array The table headings, includes a “label: string that provides the cell data and boolean options for ‘image_column’ ‘sortable’ and ‘numeric’ which affect layout and functionality.
rows array Each table row contains an array of ‘cells’ with the following required or optional fields:

Required: ‘content’ string.

Optional: ‘type’ that currently accepts a value of ‘numeric’.

Optional: ‘img’ object that can have a ‘src’, ‘alt’ and ‘type’ (currently accepts ‘profile’).

Optional: ‘link’ URL which acts as an active link.

Optional: ‘sortBy’ string can be added for when the data is to be sorted by a value other than the displayed content (eg. ‘content’: ‘Dr Richard Ansell’, ‘sortBy’: ‘Ansell Richard Dr’). This should also be used when the displayed content is a mixture of text and numerical data and the content is to be sorted by the numerical value (eg. ‘content’: ‘£8’, ‘sortBy’: ‘8’).		 
{% for table in tables %}
  {% if table.caption %}<h2 class="uol-index-table-caption{{ ' uol-index-table-caption__border' if table.stackable else ' uol-index-table-caption__no-border'}}">{{ table.caption }}</h2>{% endif %}
  {% if table.search_results and table.search_results.term %}
    <div class="uol-index-table--results-container">
      <h2 class="uol-index-table--results">{{ table.rows.length }} results for <strong>'{{ table.search_results.term }}'</strong></h2>
    </div>
  {% endif %}
  <table class="uol-index-table{{ ' js-uolTableStackable' if table.stackable else ' uolTableNotStackable'}} {{ ' uol-index-table--search-results' if table.search_results}}">

    {# Currently unused due to Safari position: sticky bug #}
    {# {% if table.caption %}<caption>{{ table.caption }}</caption>{% endif %} #}

    {% if table.headings.length > 0 %}
      <thead>
        <tr>
          {% for heading in table.headings%}
            <th
              class="uol-index-table__th {{ 'uol-index-table__th--numeric' if heading.numeric }} {{ 'uol-index-table__th--image-column' if heading.image_column }}"
              {{ ' data-sortable=true' if heading.sortable }}>
              {{ heading.label }}
            </th>
          {% endfor %}
        </tr>
      </thead>
    {% endif %}

    {% if table.rows.length > 0%}
      <tbody>
        {% for row in table.rows %}
          <tr>
            {% for cell in row.cells %}
              <td
                class="uol-index-table__td {{ 'uol-index-table__td--type-img' if cell.img }} {{ 'uol-index-table__td--type-numeric' if cell.type=='numeric' }}"
                data-value="{{ cell.content }}"
                {% if cell.sortBy %}
                  data-sortby="{{ cell.sortBy }}"
                {% endif%}
                >
                {% if cell.link %}<a href="{{ cell.link }}">{% endif %}
                {{ cell.content }}
                {% if cell.img %}
                  <span
                    class="uol-index-table__td__img uol-index-table__td__img--profile"
                    {% if cell.img.src %}
                      role="img"
                      aria-label="{{ cell.img.alt }}"
                      style="background-image: url({{ cell.img.src }})"
                    {% endif%}
                    {% if cell.sortBy %}
                      data-sortkey="{{ cell.sortBy }}"
                    {% endif%}
                    >
                  </span>
                {% endif %}
                {% if cell.link %}</a>{% endif %}

                {% if cell.email %}
                  <a href="mailto:{{cell.email}}">{{cell.email}}</a>
                {% endif %}
              </td>
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>
    {% endif %}
  </table>
{% endfor %}
 
<h2 class="uol-index-table-caption uol-index-table-caption__border">Staff</h2>

<table class="uol-index-table js-uolTableStackable ">

    <thead>
        <tr>

            <th class="uol-index-table__th  uol-index-table__th--image-column">
                Name
            </th>

            <th class="uol-index-table__th  ">
                Role
            </th>

            <th class="uol-index-table__th  ">
                Department
            </th>

        </tr>
    </thead>

    <tbody>

        <tr>

            <td class="uol-index-table__td uol-index-table__td--type-img " data-value="Person name">
                <a href="/profiles/name">
                    Person name

                    <span class="uol-index-table__td__img uol-index-table__td__img--profile" role="img" aria-label="Person name" style="background-image: url(/placeholders/avatars/Avatar-1.jpg)">
                    </span>

                </a>

            </td>

            <td class="uol-index-table__td  " data-value="Data Analyst">

                Data Analyst

            </td>

            <td class="uol-index-table__td  " data-value="IT">

                IT

            </td>

        </tr>

        <tr>

            <td class="uol-index-table__td uol-index-table__td--type-img " data-value="Person with long name which spans over one line">
                <a href="/profiles/name">
                    Person with long name which spans over one line

                    <span class="uol-index-table__td__img uol-index-table__td__img--profile" role="img" aria-label="Person with long name which spans over one line" style="background-image: url(/placeholders/avatars/Avatar-2.jpg)">
                    </span>

                </a>

            </td>

            <td class="uol-index-table__td  " data-value="System Administrator">

                System Administrator

            </td>

            <td class="uol-index-table__td  " data-value="IT">

                IT

            </td>

        </tr>

        <tr>

            <td class="uol-index-table__td uol-index-table__td--type-img " data-value="Person name">
                <a href="/profiles/name">
                    Person name

                    <span class="uol-index-table__td__img uol-index-table__td__img--profile" role="img" aria-label="Person name" style="background-image: url(/placeholders/avatars/Avatar-4.jpg)">
                    </span>

                </a>

            </td>

            <td class="uol-index-table__td  " data-value="Network Administrator">

                Network Administrator

            </td>

            <td class="uol-index-table__td  " data-value="IT">

                IT

            </td>

        </tr>

        <tr>

            <td class="uol-index-table__td uol-index-table__td--type-img " data-value="Person name">
                <a href="/profiles/name">
                    Person name

                    <span class="uol-index-table__td__img uol-index-table__td__img--profile" role="img" aria-label="Person name" style="background-image: url(/placeholders/avatars/Avatar-5.jpg)">
                    </span>

                </a>

            </td>

            <td class="uol-index-table__td  " data-value="Database Administrator">

                Database Administrator

            </td>

            <td class="uol-index-table__td  " data-value="IT">

                IT

            </td>

        </tr>

        <tr>

            <td class="uol-index-table__td uol-index-table__td--type-img " data-value="Person name">
                <a href="/profiles/name">
                    Person name

                    <span class="uol-index-table__td__img uol-index-table__td__img--profile" role="img" aria-label="Person name" style="background-image: url(/placeholders/avatars/Avatar-6.jpg)">
                    </span>

                </a>

            </td>

            <td class="uol-index-table__td  " data-value="Network Technician">

                Network Technician

            </td>

            <td class="uol-index-table__td  " data-value="IT">

                IT

            </td>

        </tr>

        <tr>

            <td class="uol-index-table__td uol-index-table__td--type-img " data-value="Person name">
                <a href="/profiles/name">
                    Person name

                    <span class="uol-index-table__td__img uol-index-table__td__img--profile" role="img" aria-label="Person name" style="background-image: url(/placeholders/avatars/Avatar-7.jpg)">
                    </span>

                </a>

            </td>

            <td class="uol-index-table__td  " data-value="Devops Engineer">

                Devops Engineer

            </td>

            <td class="uol-index-table__td  " data-value="IT">

                IT

            </td>

        </tr>

    </tbody>

</table>
  • Content: 
    .uol-index-table-caption {
  @extend %text-size-heading-4;
  
  color: $color-font--dark;
  margin: $spacing-4 0 0;
  padding: $spacing-4;

  @include media("<uol-media-m") {
    border: 1px solid $color-border;
    border-bottom: none;
  }
}

.uol-index-table--results-container {
  padding: $spacing-4;

  @include media(">uol-media-m") {
    text-align: right;
  }
}

.uol-index-table--results {
  @include font-size-responsive(1rem);
}

.uol-index-table {
  @extend %text-size-paragraph--small;

  margin-bottom: $spacing-4;
  border: 1px solid $color-border;
  border-bottom: none;
  font-variant-numeric: lining-nums;

  @include media(">=uol-media-m") {
    margin: $spacing-4;
    position: relative;
  }

  .uol-index-table__th {
    border-top: 1px solid $color-border;
    border-bottom: 1px solid $color-border;
  }

  thead {

    @include media(">=uol-media-m") {
      z-index: 2;
    }
  }

  th,
  td {
    vertical-align: top;

    @include media(">=uol-media-m") {
      padding: $spacing-4;
    }
  }

  th {
    font-size: 20px !important;
    font-weight:  $font-weight-bold--sans-serif;

    @include media(">=uol-media-m") { 
      text-align: left;
      position: sticky;
      top: 0;
      padding-bottom: 20px;
      background: $color-white;
      z-index: 2;

      .csspositionsticky & {
        &::before {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          bottom: -4px;
          left: 0;
          right: 0;
          background: linear-gradient(0deg, rgba(#000, 0) 0, rgba(#000, 0.4) 4px, rgba(#000, 0) 4px);
          opacity: 0;
          transition: opacity 0.7s ease;
        }
      }

      &.uol-index-table__th--numeric {
        text-align: right;
      }

      &.uol-index-table__th--image-column {
        @include media(">=uol-media-m") {
          padding-left: 6.5rem;
        }
      }
    }
  }

  .thead--stuck th {
    @include media(">=uol-media-m") {
      &::before {
        opacity: 1;
      }
    }
  }

  td {
    color: $color-font;

    a {
      color: $color-font;
      text-decoration: underline;

      &:hover,
      &:focus {
        text-decoration-color: $color-brand;
      }
    }
  }

  tbody {
    line-height: 1.5;

    @include media(">=uol-media-m") {
      z-index: 1;
    }

    tr {
      transition: all 0.3s ease;

      @include media(">=uol-media-m") {
        &:nth-child(odd) {
          background: $color-grey--faded;
        }
      }
    }

    td {
     border-bottom: 1px solid $color-border; 
    }
  }

  .uol-index-table__td--type-numeric {
    @include media(">=uol-media-m") {
      text-align: right;
    }
  }

  .uol-index-table__td--type-img {
    position: relative;
    margin-top: -#{$spacing-4};
    margin-left: -#{$spacing-4};
    margin-right: -#{$spacing-4};
    padding: $spacing-4 $spacing-4 $spacing-4 6.5rem;

    &::before {
      content: "";
      float: left;
      overflow: hidden;
      height: $spacing-8;
      font-size: 0;
   }
  }

  .uol-index-table__td__img {
    position: absolute;
    top: $spacing-4;
    left: $spacing-4;
    display: block;
    width: $spacing-9;
    height: $spacing-9;
    background-color: $color-white;
    border-radius: 50%;
    overflow: hidden;

    @include media(">=uol-media-m") {
      width: 64px;
      height: 64px;
      top: 16px;
    }

    &::before,
    &::after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      width: inherit;
      height: inherit;
      border-radius: inherit;
    }

    &::before {
      background: 50% / cover;
      background-image: inherit;
    }

    &::after {
      box-shadow: inset 0 2px 5px rgba($color-black, 0.16);
    }
  }

  .uol-index-table__td__img--profile {
    background: $color-white url("../img/avatar-missing.png");
  }

  .uol-index-table__sort-select {
    display: block;
    font-weight: $font-weight-bold--sans-serif;
    width: 100%;
    margin: 0;
    padding: $spacing-4;
    border: none;
    border-top: 1px solid $color-border;
    border-bottom: none; 

    @supports (-webkit-appearance:none) {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background: url("../img/sort.svg") no-repeat right $spacing-4 top 50%;
    }

    @media (-ms-high-contrast: active) {
      -webkit-appearance: menulist;
      -moz-appearance: menulist;
      appearance: menulist;
      background: initial;
    }

    @include media(">=uol-media-m") {
      display: none;
    }
  }

  .uol-index-table__th-inner {
    display: flex;
  }

  .uol-index-table__btn-sort {
    position: relative;
    width: 25px;
    height: 24px;
    background: transparent;
    border: none;

    @include media("<uol-media-m") {
      display: none;
    }

    &::before,
    &::after {
      content: "";
      display: block;
      position: absolute;
      width: 0;
      height: 0;
      left: 8px;
      border: 0.35rem solid transparent;
      border-bottom: none;
      border-top: 0.4rem solid $color-black--dark;

      @media (forced-colors: active) {
        border: 0.35rem solid canvas;
        border-top: 0.4rem solid $color-black--dark;
      }

      @media (-ms-high-contrast: active) {
        border: 0.35rem solid window;
        border-top: 0.4rem solid windowText;
      }
    }

    &::before {
      transform: rotate(180deg) translateY(120%);
    }

    &::after {
      transform: translateY(20%);
    }

    &.sorted--asc {

      &::after {
        opacity: 0;
      }
    }

    &.sorted--desc {

      &::before {
        opacity: 0;
      }
    }
  }
}

// uol-index-table--stacked class added with javascript
.uol-index-table--stacked {
  margin: 0 0 $spacing-4;

  @include media("<uol-media-m") {
    display: block;
    border-top: none;

    thead {
      position: absolute !important;
      clip: rect(1px, 1px, 1px, 1px);
      height: 1px;
      width: 1px;
      overflow: hidden;
      left: -9999px;
    }

    tbody {
      display: block;

      tr {
        display: block;
        margin-bottom: 0;

        &:last-of-type {
          
          td:last-of-type {
            border-bottom: 1px solid $color-border;
          }
        }
      }

      td {
        display: block;
        padding: $spacing-4;
        color: $color-font--dark;
        border-top: 1px solid $color-border;
        border-bottom: none;

        &:first-of-type {
          background: $color-grey--faded;
        } 
      }

      .uol-index-table__td--type-img {
        position: relative;
        background: $color-cream--dark;
        padding: $spacing-5 $spacing-4 $spacing-5 7rem;
        margin: 0;
        min-height: 64px;
      }

      .uol-index-table__td__img {
        position: absolute;
        top: $spacing-4;
        left: $spacing-4;
        display: block;
        width: $spacing-9;
        height: $spacing-9;
        background-color: $color-white;
        border-radius: 50%;
        overflow: hidden;

        &::before,
        &::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          width: inherit;
          height: inherit;
          border-radius: inherit;
        }

        &::before {
          background: 50% / cover;
          background-image: inherit;
        }

        &::after {
          box-shadow: inset 0 2px 5px rgba($color-black, 0.16);
        }

        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }
}

.uol-index-table__pseudo-th {
  display: block;
  font-size: 18px !important;
  font-weight: $font-weight-bold--sans-serif;
  color: $color-font;
  margin-bottom: $spacing-1;

  @include media(">=uol-media-m") {
    display: none;
  }
}
  • URL: /components/raw/uol-index-table/_index-table.scss
  • Filesystem Path: src/library/02-components/index-table/_index-table.scss
  • Size: 7.8 KB
  • Content: 
    // TODO: Add colspan support
export const uolTableStackable = () => {
  // Config
  const
    stackableTableClass = '.js-uolTableStackable',
    stackableTablePseudoThClass = 'uol-index-table__pseudo-th',
    stackedTableClass = 'uol-index-table--stacked';

  // Get tables
  const tables = document.querySelectorAll(stackableTableClass);

  // Process tables
  tables.forEach( (table) => {
    const ths = table.querySelectorAll('thead th');
    const rows = table.querySelectorAll('tbody tr');

    rows.forEach( (row) => {

      const cells = row.querySelectorAll('td')

      cells.forEach( (cell, i) => {
        cell.innerHTML = `
          <span
            class="${stackableTablePseudoThClass}"
            aria-hidden="true">
                ${ths.item(i).innerText}
          </span>
          ${cell.innerHTML}
      `;
      })
    })

    table.classList.add(stackedTableClass);
  })
}

export const uolTablesSortable = () => {
  let ascending;
  const sortRowsByIndex = (table, colNumber) => {
    const tBody = table.querySelector('tbody');
    const rows = tBody.rows;
    let newTableArray = [];
    for (let i = 0; i < (rows.length); i++) {
      newTableArray[i] = rows[i];
    }
    
    /**
     * Sort function - switches through adjacent table elements
     * Sorts in array, no swapping in DOM
     * @param {element} a - first element to compare
     * @param {element} b - second element to compare
     * @returns {number} if -ve a is sorted before b, +ve b before a, 0 no change
     */
    newTableArray.sort(function(a, b){
      let aElement = a.getElementsByTagName("TD")[colNumber];
      let bElement = b.getElementsByTagName("TD")[colNumber];

      let aItem = aElement.dataset.sortby ?
        aElement.dataset.sortby :
        aElement.innerText;

      let bItem = bElement.dataset.sortby ?
        bElement.dataset.sortby :
        bElement.innerText;

      /**
       * Nested ternary return statement
       * Outer checks if both values are number or not
       * Inner checks ascending boolean
       * Returns -ve, +ve or 0
       */
      return (!isNaN(parseFloat(aItem)) && !isNaN(parseFloat(bItem)) ? 
        ascending ? aItem - bItem : bItem - aItem :
        ascending ? ('' + aItem).localeCompare(bItem) : ('' + bItem).localeCompare(aItem)
      );         
    });
    
    /** after sort completed build new table body from sorted array */
    let newTBody = '';
    for (let i = 0; i < (newTableArray.length); i++) {
      newTBody += '<tr>' + newTableArray[i].innerHTML + '</tr>';
    }
    
    /** update DOM with new sorted table body content */
    tBody.innerHTML = newTBody;
  }

  const tables = document.querySelectorAll('.uol-index-table');

  tables.forEach( (table) => {

    const tableHeadings = table.querySelectorAll('thead th');

    /** Create map for mobile dropdown */
    let mobileSortableColumns = new Map();

    tableHeadings.forEach( (th, index) => {

      if (th.dataset.sortable) {
        const thValue = th.innerText;
        th.innerHTML = `<span class="uol-index-table__th-inner"><span class="uol-index-table__sortable-label">${thValue}</span></span>`

        // Add value to mobile dropdown map
        mobileSortableColumns.set(index, thValue);

        const sortButton = document.createElement('button');
        sortButton.classList.add('uol-index-table__btn-sort');
        sortButton.type = 'button';
        sortButton.setAttribute('aria-label', 'Sort column');

        sortButton.onclick = () => {
          const allTh = table.querySelectorAll('thead th');
          const thisBtn = allTh[index].querySelector('button');
          
         if (thisBtn.classList.contains('sorted--asc')) {
            ascending = false;
            thisBtn.classList.add('sorted');
            thisBtn.classList.add('sorted--desc');
            thisBtn.classList.remove('sorted--asc');
          } else {
            ascending = true;
            thisBtn.classList.add('sorted');
            thisBtn.classList.remove('sorted--desc');
            thisBtn.classList.add('sorted--asc');
          }

          // Reset all the other buttons
          allTh.forEach( (th, i) => {
            // Don't reset the button just clicked
            if (i != index) {
              // Get the button
              const otherBtn = th.querySelector('button');
              // Not all th have buttons
              if (otherBtn) {
                otherBtn.classList.remove('sorted');
                otherBtn.classList.remove('sorted--asc');
                otherBtn.classList.remove('sorted--desc');
              }
            }
          })

          sortRowsByIndex(table, index);
        }
        th.querySelector('.uol-index-table__th-inner').appendChild(sortButton);
      }
    })

    if (mobileSortableColumns.size > 0) {

      let selectSort = document.createElement('select');
      selectSort.classList.add('uol-index-table__sort-select');
      selectSort.setAttribute('aria-label', 'Sort table columns');

      let selectSortOptions = `<option value="">Sort by</option>`;

      mobileSortableColumns.forEach( (value, key) => {
        selectSortOptions += `
          <option data-sort_index="${key}" data-sort_dir="asc" value="${key}">${value} - ascending</option>
          <option data-sort_index="${key}" data-sort_dir="desc" value="${key}">${value} - descending</option>
        `;
      })

      selectSort.innerHTML = selectSortOptions;

      selectSort.addEventListener('change', (e) => {
        const selected = e.target.options[e.target.selectedIndex],
          selectedIndex = selected.dataset.sort_index,
          selectedDir = selected.dataset.sort_dir;
        ascending = (selectedDir == "asc") ? true: false;
        sortRowsByIndex(table, selectedIndex); 
      })

      // Insert select
      const thead = table.querySelector('thead');
      thead.parentNode.insertBefore(selectSort, thead);
    }
  })
}

export const uolTableSticky = () => {
  require('intersection-observer');

  const tHeads = document.querySelectorAll('.uol-index-table thead')

  tHeads.forEach( (thead) => {

    (new IntersectionObserver(function(e,options){
      if(e[0].intersectionRatio>0){
        thead.classList.remove('thead--stuck');
      } else {
        thead.classList.add('thead--stuck');
      };
    })).observe(thead);
  })
}
  • URL: /components/raw/uol-index-table/index-table.module.js
  • Filesystem Path: src/library/02-components/index-table/index-table.module.js
  • Size: 6.3 KB 
{
  "tables": [
    {
      "stackable": true,
      "caption": "Staff",
      "headings": [
        {
          "image_column": true,
          "label": "Name"
        },
        {
          "label": "Role"
        },
        {
          "label": "Department"
        }
      ],
      "rows": [
        {
          "cells": [
            {
              "link": "/profiles/name",
              "img": {
                "type": "profile",
                "src": "/placeholders/avatars/Avatar-1.jpg",
                "alt": "Person name"
              },
              "content": "Person name"
            },
            {
              "content": "Data Analyst"
            },
            {
              "content": "IT"
            }
          ]
        },
        {
          "cells": [
            {
              "link": "/profiles/name",
              "img": {
                "type": "profile",
                "src": "/placeholders/avatars/Avatar-2.jpg",
                "alt": "Person with long name which spans over one line"
              },
              "content": "Person with long name which spans over one line"
            },
            {
              "content": "System Administrator"
            },
            {
              "content": "IT"
            }
          ]
        },
        {
          "cells": [
            {
              "link": "/profiles/name",
              "img": {
                "type": "profile",
                "src": "/placeholders/avatars/Avatar-4.jpg",
                "alt": "Person name"
              },
              "content": "Person name"
            },
            {
              "content": "Network Administrator"
            },
            {
              "content": "IT"
            }
          ]
        },
        {
          "cells": [
            {
              "link": "/profiles/name",
              "img": {
                "type": "profile",
                "src": "/placeholders/avatars/Avatar-5.jpg",
                "alt": "Person name"
              },
              "content": "Person name"
            },
            {
              "content": "Database Administrator"
            },
            {
              "content": "IT"
            }
          ]
        },
        {
          "cells": [
            {
              "link": "/profiles/name",
              "img": {
                "type": "profile",
                "src": "/placeholders/avatars/Avatar-6.jpg",
                "alt": "Person name"
              },
              "content": "Person name"
            },
            {
              "content": "Network Technician"
            },
            {
              "content": "IT"
            }
          ]
        },
        {
          "cells": [
            {
              "link": "/profiles/name",
              "img": {
                "type": "profile",
                "src": "/placeholders/avatars/Avatar-7.jpg",
                "alt": "Person name"
              },
              "content": "Person name"
            },
            {
              "content": "Devops Engineer"
            },
            {
              "content": "IT"
            }
          ]
        }
      ]
    }
  ]
}