Swegon Component Library

Table 

<table id="">
    <thead>
        <tr>
            <td></td>
            <td><a href="#"><img src="/mocks/img/product-image-gold-rx.jpg" /></>
            </td>
            <td><a href="#"><img src="/mocks/img/product-image-gold-rx.jpg" /></>
            </td>
            <td><a href="#"><img src="/mocks/img/product-image-gold-rx.jpg" /></>
            </td>
            <td><a href="#"><img src="/mocks/img/product-image-gold-rx.jpg" /></>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>GOLD RX</td>
            <td>GOLD PX</td>
            <td>GOLD CX</td>
            <td>GOLD RX/HC</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Quisque sed est a enim</td>
            <td>Proin viverra sagittis</td>
            <td>Quisque sed est a enim feugiat dapibus. Nullam at auctor ante.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed est a enim feugiat dapibus. Nullam at auctor ante. Nullam ut ligula tincidunt, sollicitudin est non, auctor lorem.</td>
            <td>Lorem ipsum <a href="#">dolor</a> sit amet</td>
        </tr>
        <tr>
            <td>Nullam at auctor ante</td>
            <td>Etiam luctus eros id nisi</td>
            <td>Nulla semper ante a libero luctus </td>
            <td>Nullam ut ligula tincidunt, sollicitudin est non, auctor lorem.</td>
            <td>Lorem ipsum <a href="#">dolor</a> sit amet</td>
        </tr>
        <tr>
            <td>Sollicitudin est non</td>
            <td>Proin viverra sagittis</td>
            <td>Quisque sed est a enim feugiat dapibus. Nullam at auctor ante.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed est a enim feugiat dapibus. Nullam at auctor ante. Nullam ut ligula tincidunt, sollicitudin est non, auctor lorem.</td>
            <td>Lorem ipsum <a href="#">dolor</a> sit amet</td>
        </tr>
        <tr>
            <td>Quisque sed est a enim</td>
            <td>Proin viverra sagittis</td>
            <td>Quisque sed est a enim feugiat dapibus. Nullam at auctor ante.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed est a enim feugiat dapibus. Nullam at auctor ante. Nullam ut ligula tincidunt, sollicitudin est non, auctor lorem.</td>
            <td>Lorem ipsum <a href="#">dolor</a> sit amet</td>
        </tr>
        <tr>
            <td>Nullam at auctor ante</td>
            <td>Etiam luctus eros id nisi</td>
            <td>Nulla semper ante a libero luctus </td>
            <td>Nullam ut ligula tincidunt, sollicitudin est non, auctor lorem.</td>
            <td>Lorem ipsum <a href="#">dolor</a> sit amet</td>
        </tr>
        <tr>
            <td>Sollicitudin est non</td>
            <td>Proin viverra sagittis</td>
            <td>Quisque sed est a enim feugiat dapibus. Nullam at auctor ante.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed est a enim feugiat dapibus. Nullam at auctor ante. Nullam ut ligula tincidunt, sollicitudin est non, auctor lorem.</td>
            <td>Lorem ipsum <a href="#">dolor</a> sit amet</td>
        </tr>
    </tbody>
</table>
 
<table id="{{id}}">
    <thead>
        {{#each headerRows}}
            <tr>
                {{#each cols}}
                    <td>{{{ this }}}</td>
                {{/each}}
            </tr>
        {{/each}}
    </thead>
    <tbody>
        {{#each rows}}
            <tr>
                {{#each cols}}
                    <td>{{{this}}}</td>
                {{/each}}
            </tr>
        {{/each}}
    </tbody>
</table>
 
{
  "headerRows": [
    {
      "cols": [
        "",
        "<a href=\"#\"><img src=\"/mocks/img/product-image-gold-rx.jpg\" /></>",
        "<a href=\"#\"><img src=\"/mocks/img/product-image-gold-rx.jpg\" /></>",
        "<a href=\"#\"><img src=\"/mocks/img/product-image-gold-rx.jpg\" /></>",
        "<a href=\"#\"><img src=\"/mocks/img/product-image-gold-rx.jpg\" /></>"
      ]
    },
    {
      "cols": [
        "",
        "GOLD RX",
        "GOLD PX",
        "GOLD CX",
        "GOLD RX/HC"
      ]
    }
  ],
  "rows": [
    {
      "cols": [
        "Quisque sed est a enim",
        "Proin viverra sagittis",
        "Quisque sed est a enim feugiat dapibus. Nullam at auctor ante.",
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed est a enim feugiat dapibus. Nullam at auctor ante. Nullam ut ligula tincidunt, sollicitudin est non, auctor lorem.",
        "Lorem ipsum <a href=\"#\">dolor</a> sit amet"
      ]
    },
    {
      "cols": [
        "Nullam at auctor ante",
        "Etiam luctus eros id nisi",
        "Nulla semper ante a libero luctus ",
        "Nullam ut ligula tincidunt, sollicitudin est non, auctor lorem.",
        "Lorem ipsum <a href=\"#\">dolor</a> sit amet"
      ]
    },
    {
      "cols": [
        "Sollicitudin est non",
        "Proin viverra sagittis",
        "Quisque sed est a enim feugiat dapibus. Nullam at auctor ante.",
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed est a enim feugiat dapibus. Nullam at auctor ante. Nullam ut ligula tincidunt, sollicitudin est non, auctor lorem.",
        "Lorem ipsum <a href=\"#\">dolor</a> sit amet"
      ]
    },
    {
      "cols": [
        "Quisque sed est a enim",
        "Proin viverra sagittis",
        "Quisque sed est a enim feugiat dapibus. Nullam at auctor ante.",
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed est a enim feugiat dapibus. Nullam at auctor ante. Nullam ut ligula tincidunt, sollicitudin est non, auctor lorem.",
        "Lorem ipsum <a href=\"#\">dolor</a> sit amet"
      ]
    },
    {
      "cols": [
        "Nullam at auctor ante",
        "Etiam luctus eros id nisi",
        "Nulla semper ante a libero luctus ",
        "Nullam ut ligula tincidunt, sollicitudin est non, auctor lorem.",
        "Lorem ipsum <a href=\"#\">dolor</a> sit amet"
      ]
    },
    {
      "cols": [
        "Sollicitudin est non",
        "Proin viverra sagittis",
        "Quisque sed est a enim feugiat dapibus. Nullam at auctor ante.",
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed est a enim feugiat dapibus. Nullam at auctor ante. Nullam ut ligula tincidunt, sollicitudin est non, auctor lorem.",
        "Lorem ipsum <a href=\"#\">dolor</a> sit amet"
      ]
    }
  ]
}
  • Content: 
    table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: size(4);

    .rich-text & {
        margin-bottom: size(4);
    }

    &.product-description-table {
        th, 
        td {
            @include breakpoint($l) {
                min-width: 100px;
            }
        }
    }

    .bold {
        font-weight: $font-weight-bold;
    }
    &.tab-documents-table {
        th,
        td {
            &:first-child {
                @include breakpoint($m) {
                    padding-left: size(5);
                }
                padding-left: size(3);
            }
        }
    }
}

tr {
    text-align: left;
}

th,
td {
    min-width: 60vw;
    padding: size(1.5) size(2);
    font-size: size(2);
    border-left: 1px solid $color-gray-2;
    vertical-align: top;

    &:first-child {
        border-left: 0;
    }

    @include breakpoint($xs) {
        min-width: 30vw;
    }

    @include breakpoint($m) {
        min-width: 20vw;
    }

    @include breakpoint($l) {
        min-width: 140px;
    }

    tbody & {
        background-color: $color-white;
    }

    tbody tr:first-child & {
        border-top: 1px solid $color-gray-2;
    }

    tbody tr:last-child & {
        border-bottom: 1px solid $color-gray-2;
    }

    tbody tr:nth-child(2n + 1) & {
        background-color: $color-gray-1;
    }

    svg {
        display: inline-block;
        vertical-align: middle;
        fill: currentColor;
        max-width: size(3);
        max-height: size(3);
    }
}

table thead th,
table thead td {
    font-weight: $font-weight-bold;
}

thead th,
thead td {
    border: none;
    vertical-align: bottom;
    padding-top: 0;
}

.table a,
.table__icon {
    @include color-theme {
        color: $arg-theme-color;
    }
}
  • URL: /components/raw/table/table.scss
  • Filesystem Path: src/components/table/table.scss
  • Size: 1.8 KB

No notes defined.