DOTD Component Library

Table 

<table class="o-table">
      <thead>
          <tr>
              <th class="o-table__heading-cell">
                  <span>Heading 1</span>
              </th>
              <th class="o-table__heading-cell">
                  <span>Heading 2</span>
              </th>
              <th class="o-table__heading-cell">
                  <span>Heading 3</span>
              </th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td class="o-table__cell">Cell 1</td>
              <td class="o-table__cell">Cell 2</td>
              <td class="o-table__cell">Cell 3</td>
          </tr>
          <tr>
              <td class="o-table__cell">Cell 1</td>
              <td class="o-table__cell">Cell 2</td>
              <td class="o-table__cell">Cell 3</td>
          </tr>
          <tr>
              <td class="o-table__cell">Cell 1</td>
              <td class="o-table__cell">Cell 2</td>
              <td class="o-table__cell">Cell 3</td>
          </tr>
      </tbody>
  </table>
 
{% set base_class = table.base_class|default('o-table') %}
{% if table %}
  <table class="{{ bem(base_class, table.element, table.modifiers, table.extra) }}">
    {% if table.heading.rows %}
      <thead>
        {% for row in table.heading.rows %}
          <tr>
            {% for cell in row.cells %}
              <th class="{{ bem(base_class, 'heading-cell') }}" {% if cell.colspan %}colspan="{{ cell.colspan }}"{% endif %}>
                <span>{{ cell.text }}</span>
                {% if cell.include %}
                  {% include "@" ~ cell.include.name with cell.include.data %}
                {% endif %}
              </th>
            {% endfor %}
          </tr>
        {% endfor %}
      </thead>
    {% endif %}
    {% if table.body %}
      <tbody>
        {% for row in table.body.rows %}
          {% if row.cells %}
            <tr>
              {% for cell in row.cells %}
                <td class="{{ bem(base_class, 'cell') }}"{% if cell.colspan %}colspan="{{ cell.colspan }}"{% endif %}>{{ cell.text }}</td>
              {% endfor %}
            </tr>
          {% endif %}
          {% if table.body.include %}
            {% include "@" ~ table.body.include with row %}
          {% endif %}
        {% endfor %}
      </tbody>
    {% endif %}
    {% if table.footer %}
      <tfoot>
        {% for row in table.footer.rows %}
          <tr>
            {% for cell in row.cells %}
              <th class="{{ bem(base_class, 'footer-cell') }}" {% if cell.colspan %}colspan="{{ cell.colspan }}"{% endif %}>{{ cell.text }}</th>
            {% endfor %}
          </tr>
        {% endfor %}
      </tfoot>
    {% endif %}
  </table>
{% endif %}
 
{
  "table": {
    "heading": {
      "rows": [
        {
          "cells": [
            {
              "text": "Heading 1"
            },
            {
              "text": "Heading 2"
            },
            {
              "text": "Heading 3"
            }
          ]
        }
      ]
    },
    "body": {
      "rows": [
        {
          "cells": [
            {
              "text": "Cell 1"
            },
            {
              "text": "Cell 2"
            },
            {
              "text": "Cell 3"
            }
          ]
        },
        {
          "cells": [
            {
              "text": "Cell 1"
            },
            {
              "text": "Cell 2"
            },
            {
              "text": "Cell 3"
            }
          ]
        },
        {
          "cells": [
            {
              "text": "Cell 1"
            },
            {
              "text": "Cell 2"
            },
            {
              "text": "Cell 3"
            }
          ]
        }
      ]
    }
  }
}
  • Content: 
    /* ------------------------------------ *\
  $TABLES
\* ------------------------------------ */

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
  width: 100%;
  overflow: auto;

  th,
  td {
    text-align: left;
    padding: var(--dotd-space-sm) var(--dotd-space);
  }

  th {
    vertical-align: bottom;
    font-weight: var(--dotd-font-weight-bold);
    color: var(--dotd-color-content-primary-weak);
    background-color: var(--dotd-color-background-primary-default);
  }

  tr:not(:first-child) td {
    background-color: var(--dotd-color-background-default);
  }

  tr {
    border-top: var(--dotd-border-width) solid var(--dotd-color-border-default);

    &:nth-child(even) td {
      background-color: var(--dotd-color-background-default-strong);
    }
  }
}

/**
 * Responsive Table
 */
.o-table--responsive {
  th {
    border: none;
    @include o-typography-body--sm('bold');
  }

  tr th:not(:first-child),
  tr td:not(:first-child) {
    text-align: center;
  }

  th,
  td {
    background-color: transparent;
    padding: var(--dotd-space-lg);
  }

  td {
    border-top: var(--dotd-border-width) solid var(--dotd-color-border-default);
    border-left: none;
    border-bottom: none;
    border-right: none;
  }

  tr:nth-child(even) {
    background-color: transparent;
  }

  @include media("<=medium") {
    display: flex;

    thead {
      display: none;
    }

    tbody {
      display: block;
      width: 100%;
    }

    tr {
      display: flex;
      flex-direction: column;
      width: 100%;

      &:not(:first-child) td:first-child {
        margin-top: var(--dotd-space-md);
      }

      &:first-child td:first-child {
        border-top: none;
        padding-top: 0;
      }
    }

    td {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--dotd-space-xs) 0;
      gap: var(--dotd-space);

      &:not(:first-child) {
        border: none;
      }

      &:first-child {
        padding-top: var(--dotd-space-md);
      }

      &::before {
        content: attr(data-label);
        @include o-typography-body--sm('bold');
      }
    }
  }
}
  • URL: /components/raw/table/_table.scss
  • Filesystem Path: components/01-atoms/table/_table.scss
  • Size: 2.2 KB

No notes defined.