Alpaca components for Magento 2

Table 

<table class="table " tabindex="0" role="table">
    <caption class="table__caption">
        This is a table. Binded text in caption should explain what kind of data this table presents. Can be also a longer text with inline HTML elements inside
    </caption>
    <thead>
        <tr role="row">
            <th class="" scope="col" role="columnheader">
                Example heading
            </th>
            <th class="" scope="col" role="columnheader">
                Example heading
            </th>
            <th class="" scope="col" role="columnheader">
                Example heading
            </th>
        </tr>
    </thead>
    <tbody>
        <tr role="row">
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
        </tr>
        <tr role="row">
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
        </tr>
        <tr role="row">
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr role="row">
            <td class="" colspan='3' role="gridcell">
                Footer content
            </td>
        </tr>
    </tfoot>
</table>
 
<table
    class="table {{ class }}"
    tabindex="0"
    role="table"
    {{{ additionalAttributes }}}
>
    {{#if captionText}}
        <caption class="table__caption">
            {{ captionText }}
        </caption>
    {{/if}}
    {{#each mainTags }}
        <{{{ mainTag }}} {{{mainAttributes}}}>
            {{#each rowTags}}
                <{{{ rowTag }}} {{{ rowTagAttributes }}}>
                    {{#each childTags}}
                        <{{{ childTag }}}
                             class="{{ childTagClasses }}"
                             {{{ childTagAttributes }}}
                        >
                            {{#if contentVisuallyHidden}}
                                <span class="table__visually-hidden">
                                    {{{ content }}}
                                </span>
                            {{else}}
                                {{#if contentComponent}}
                                    {{ render (component contentComponent) contentContext }}
                                {{else}}
                                    {{{ content }}}
                                {{/if}}
                            {{/if}}
                        </{{{ childTag }}}>
                    {{/each}}
                </{{{ rowTag }}}>
            {{/each}}
        </{{{ mainTag }}}>
    {{/each}}
</table>
 
{
  "captionText": "This is a table. Binded text in caption should explain what kind of data this table presents. Can be also a longer text with inline HTML elements inside",
  "mainTags": [
    {
      "mainTag": "thead",
      "rowTags": [
        {
          "rowTag": "tr",
          "rowTagAttributes": "role=\"row\"",
          "childTags": [
            {
              "childTag": "th",
              "content": "Example heading",
              "childTagAttributes": "scope=\"col\" role=\"columnheader\""
            },
            {
              "childTag": "th",
              "content": "Example heading",
              "childTagAttributes": "scope=\"col\" role=\"columnheader\""
            },
            {
              "childTag": "th",
              "content": "Example heading",
              "childTagAttributes": "scope=\"col\" role=\"columnheader\""
            }
          ]
        }
      ]
    },
    {
      "mainTag": "tbody",
      "rowTags": [
        {
          "rowTag": "tr",
          "rowTagAttributes": "role=\"row\"",
          "childTags": [
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            },
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            },
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            }
          ]
        },
        {
          "rowTag": "tr",
          "rowTagAttributes": "role=\"row\"",
          "childTags": [
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            },
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            },
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            }
          ]
        },
        {
          "rowTag": "tr",
          "rowTagAttributes": "role=\"row\"",
          "childTags": [
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            },
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            },
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            }
          ]
        }
      ]
    },
    {
      "mainTag": "tfoot",
      "rowTags": [
        {
          "rowTag": "tr",
          "rowTagAttributes": "role=\"row\"",
          "childTags": [
            {
              "childTag": "td",
              "content": "Footer content",
              "childTagAttributes": "colspan='3' role=\"gridcell\""
            }
          ]
        }
      ]
    }
  ]
}
  • Content: 
    // Table
$table__width                                                : 100% !default;
$table__padding                                              : 0 !default;
$table__background                                           : $white !default;
$table__margin                                               : $spacer 0 !default;
$table__border-width-base                                    : $border-width-base !default;
$table__border                                               : $table__border-width-base $border-style-base $gray-light !default;
$table__border-radius                                        : $border-radius !default;
$table__border-collapse                                      : separate !default;
$table__border-spacing                                       : 0 !default;
$table__color                                                : $black !default;
$table__line-height                                          : $font-line-height !default;
$table__font-size                                            : $font-size-base !default;
$table__font-size\@medium                                    : $font-size-medium !default;

// Clean variant
$table__th-font-weight--clean                                : $font-weight-bold !default;
$table__th-background--clean                                 : transparent !default;
$table__background-odd--clean                                : $gray-lighter !default;
$table__background-even--clean                               : $white !default;

// Table heading
$table__th-background                                        : $gray-lightest !default;
$table__th-padding                                           : 0 !default;
$table__th-padding\@medium                                   : $spacer--medium !default;
$table__th-border-bottom\@medium                             : $table__border !default;
$table__th-border-right\@medium                              : $table__border !default;
$table__th-text-align                                        : left !default;
$table__th-background-row                                    : $white !default;
$table__th-padding-row                                       : $spacer--medium !default;
$table__th-border-width-row                                  : $table__border-width-base 0 !default;
$table__th-text-align-row                                    : left !default;
$table__th-width-row                                         : 50% !default;

// Table data
$table__td-background                                        : $white !default;
$table__td-padding                                           : $spacer $spacer--medium !default;
$table__td-padding\@medium                                   : $spacer--medium !default;
$table__td-border-bottom\@medium                             : $table__border !default;
$table__td-border-right\@medium                              : $table__border !default;
$table__td-font-weight-before                                : bold !default;
$table__td-margin-right-before                               : $spacer !default;
$table__td-width-before                                      : 25% !default;
$table__td-max-width-before                                  : 25% !default;

// Table row
$table__tr-padding                                           : $spacer--medium 0 !default;
$table__tr-padding\@medium                                   : 0 !default;
$table__tr-border-bottom                                     : $table__border !default;
$table__tr-border-bottom\@medium                             : 0 !default;

// Table footer
$table__tfoot-tr-border-top-first-child                      : $table__border !default;
$table__tfoot-td-padding                                     : $spacer $spacer--medium !default;
$table__tfoot-td-padding\@medium                             : $spacer--medium !default;
$table__tfoot-td-background                                  : $table__background !default;
$table__tfoot-td-background\@medium                          : $table__background !default;
$table__tfoot-td-border-right\@medium                        : $table__border !default;
$table__tfoot-td-border-top\@medium                          : $table__border !default;

// Odd even variant
$table__background-odd--odd-even                             : $white !default;
$table__background-even--odd-even                            : $gray-lighter !default;
$table__td-background--odd-even                              : transparent !default;
$table__border-top-left-radius-first-child--odd-even         : 0 !default;
$table__border-top-left-radius-first-child--odd-even\@medium : 0 !default;
$table__border-top-right-radius-first-child--odd-even        : 0 !default;
$table__border-top-right-radius-first-child--odd-even\@medium: 0 !default;

// Scope row variant
$table__tr-padding--scope-row                                : 0 !default;
$table__border-width--scope-row                              : $table__border-width-base 0 0 0 !default;
$table__tr-background-odd--scope-row                         : $table__background-even--odd-even !default;
$table__th-font-wieght--scope-row                            : $font-weight-normal !default;

// Table footer scope row variant
$table__tfoot-th-border-right-width--tfoot-scope-row         : $border-width-base !default;
$table__tfoot-th-border-top--tfoot-scope-row                 : $table__border !default;
  • URL: /components/raw/table/_table-variables.scss
  • Filesystem Path: build/components/Molecules/table/_table-variables.scss
  • Size: 5.4 KB
  • Content: 
    @import 'table-variables';

.table {
    width: $table__width;
    margin: $table__margin;
    padding: $table__padding;
    background: $table__background;
    border: $table__border;
    border-radius: $table__border-radius;
    border-collapse: $table__border-collapse;
    border-spacing: $table__border-spacing;
    color: $table__color;
    font-size: $table__font-size;
    line-height: $table__line-height;

    @include mq($screen-m) {
        font-size: $table__font-size\@medium;
    }

    &--odd-even {
        tbody {
            tr {
                &:nth-child(odd) {
                    background: $table__background-odd--odd-even;
                }

                &:nth-child(even) {
                    background: $table__background-even--odd-even;
                }

                &:first-child {
                    border-top-left-radius: $table__border-top-left-radius-first-child--odd-even;
                    border-top-right-radius: $table__border-top-right-radius-first-child--odd-even;

                    @include mq($screen-m) {
                        border-top-left-radius: $table__border-top-left-radius-first-child--odd-even\@medium;
                        border-top-right-radius: $table__border-top-right-radius-first-child--odd-even\@medium;
                    }
                }
            }

            td {
                background-color: $table__td-background--odd-even;
            }
        }
    }

    &--clean {
        margin: 0;
        border: 0;
        border-radius: 0;

        thead {
            tr {
                padding: 0;
                border-bottom: 0;
            }
        }

        th {
            border-bottom: 0;
            border-right: 0;
            background: $table__th-background--clean;
            text-align: left;
            font-weight: $table__th-font-weight--clean;
        }

        td {
            border-bottom: 0;
            border-right: 0;
            background: $table__th-background--clean;
        }

        tbody {
            tr {
                &:nth-child(odd) {
                    background: $table__background-odd--clean;
                }

                &:nth-child(even) {
                    background: $table__background-even--clean;
                }
            }
        }
    }

    &--tfoot-scope-row {
        tfoot {
            tr {
                th {
                    border-top: $table__tfoot-th-border-top--tfoot-scope-row;
                    border-bottom: 0;

                    &[scope="row"] {
                        border-right-width: $table__tfoot-th-border-right-width--tfoot-scope-row;
                    }
                }
            }
        }
    }

    &--scope-row {
        border-width: $table__border-width--scope-row;

        tbody {
            tr {
                padding: $table__tr-padding--scope-row;

                &:nth-child(odd) {
                    th[scope="row"],
                    td {
                        background-color: $table__tr-background-odd--scope-row;
                    }
                }

                &:last-child {
                    border-bottom: $table__tr-border-bottom;

                    td {
                        @include mq($screen-m) {
                            border-bottom: $table__td-border-bottom\@medium;
                        }
                    }
                }

                @include mq($screen-s) {
                    th {
                        &[scope="row"] + td {
                            &:before {
                                margin-bottom: 0;
                            }
                        }
                    }
                }
            }

            th {
                font-weight: $table__th-font-wieght--scope-row;
            }
        }
    }

    &__caption,
    &__visually-hidden {
        @include visually-hidden();
    }

    &__heading-wrapper {
        display: flex;
        align-items: center;
    }

    tr {
        display: block;
        padding: $table__tr-padding;
        border-bottom: $table__tr-border-bottom;

        &:last-child {
            border-bottom: 0;

            td {
                @include mq($screen-m) {
                    border-bottom: 0;
                }
            }
        }

        @include mq($screen-m) {
            display: table-row;
            padding: $table__tr-padding\@medium;
            border-bottom: $table__tr-border-bottom\@medium;
        }
    }

    th {
        display: none;
        padding: $table__th-padding;
        background: $table__th-background;
        text-align: $table__th-text-align;

        @include mq($screen-m) {
            display: table-cell;
            padding: $table__th-padding\@medium;
            border-bottom: $table__th-border-bottom\@medium;
            border-right: $table__th-border-right\@medium;
        }

        &:last-child {
            border-right: 0;
        }

        &[scope="row"] {
            padding: $table__th-padding-row;
            border-width: $table__th-border-width-row;
            background: $table__th-background-row;
            text-align: $table__th-text-align-row;
            width: $table__th-width-row;

            & + td {
                flex-flow: column nowrap;
                padding: $spacer--medium;

                @include mq($screen-s) {
                    flex-flow: row nowrap;
                }

                &:before {
                    max-width: 100%;
                    width: 100%;
                    margin-bottom: $spacer;

                    @include mq($screen-s) {
                        max-width: 50%;
                        width: 50%;
                    }
                }
            }
        }
    }

    td {
        display: flex;
        padding: $table__td-padding;
        background: $table__td-background;

        &:before {
            display: block;
            content: attr(data-th);
            font-weight: $table__td-font-weight-before;
            margin-right: $table__td-margin-right-before;
            max-width: $table__td-max-width-before;
            width: $table__td-width-before;
            min-width: $table__td-width-before;

            @include mq($screen-m) {
                display: none;
            }
        }

        &:last-child {
            @include mq($screen-m) {
                border-right: 0;
            }
        }

        @include mq($screen-m) {
            display: table-cell;
            padding: $table__td-padding\@medium;
            border-bottom: $table__td-border-bottom\@medium;
            border-right: $table__td-border-right\@medium;
        }
    }

    thead {
        tr {
            padding: 0;
            border-bottom: 0;

            @include mq($screen-m) {
                border-top-left-radius: $table__border-radius;
                border-top-right-radius: $table__border-radius;
            }
        }

        th {
            &:first-child {
                @include mq($screen-m) {
                    border-top-left-radius: $table__border-radius;
                }
            }

            &:last-child {
                @include mq($screen-m) {
                    border-top-right-radius: $table__border-radius;
                }
            }
        }
    }

    tbody {
        tr {
            &:last-child {
                td {
                    &:first-child {
                        @include mq($screen-m) {
                            border-bottom-left-radius: $table__border-radius;
                        }
                    }

                    &:last-child {
                        @include mq($screen-m) {
                            border-bottom-right-radius: $table__border-radius;
                        }
                    }
                }
            }
        }
    }

    tfoot {
        tr {
            &:first-child {
                border-top: $table__tfoot-tr-border-top-first-child;

                @include mq($screen-m) {
                    border-top: 0;
                }
            }

            &:last-child {
                border-bottom: 0;

                td {
                    &:first-child {
                        @include mq($screen-m) {
                            border-bottom-left-radius: $table__border-radius;
                        }
                    }

                    &:last-child {
                        @include mq($screen-m) {
                            border-bottom-right-radius: $table__border-radius;
                        }
                    }
                }
            }
        }

        td {
            display: block;
            padding: $table__tfoot-td-padding;
            background: $table__tfoot-td-background;

            @include mq($screen-m) {
                display: table-cell;
                padding: $table__tfoot-td-padding\@medium;
                background: $table__tfoot-td-background\@medium;
                border-top: $table__tfoot-td-border-top\@medium;
                border-right: $table__tfoot-td-border-right\@medium;
                border-bottom: 0;
            }
        }
    }
}
  • URL: /components/raw/table/_table.scss
  • Filesystem Path: build/components/Molecules/table/_table.scss
  • Size: 9.2 KB

Tables accessibility

  • Use table semantics elements: table, tbody, tr, th, td
  • Use scope="col" or scope="row" for table headings (th elements)
  • use caption element to describe what kind of data are presented in the table
  • To make mobile table accessible, please add appropriate aria roles:
    • role="columnheader" for th elements
    • role="row" for row elements
    • role="gridcell" for td elements

In desktop mode (wide screens) HTML5 tags are sufficient to make HTML table accessible. However, we change display mode on small screen to set our table visible without horizontal scrolling, so we need to ad appropriate aria roles to make it focusable and well read by AT.