Kistenkoning 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                       : $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          : 1px 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-background             : $gray-lightest !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;

// 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                              : 1px 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;
  • URL: /components/raw/table/_table-variables.scss
  • Filesystem Path: build/components/Molecules/table/_table-variables.scss
  • Size: 3.9 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;
                }
            }
        }
    }

    &--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;
                    }
                }
                @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;

        @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 {
            &:last-child {
                border-bottom: 0;

                td {
                    border-bottom: 0;

                    &: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-right: $table__tfoot-td-border-right\@medium;
            }
        }
    }
}
  • URL: /components/raw/table/_table.scss
  • Filesystem Path: build/components/Molecules/table/_table.scss
  • Size: 8 KB

Tables accessibility

  • Use table semantics elements: table, tbody, tr, th, td
  • Use scope="col" or scope="row" for table headings (th elements)
  • use capion element to describe what kind of data are presented in the table
  • To make mobile table accessible, please add apropriate 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 apropriate aria roles to make it focusable and well read by AT.