Swegon Component Library

Scrollable Table 

<div class="
        horizontal-scroller
            horizontal-scroller--show-icon
         " data-show-scroll-icon="true">
    <div class="horizontal-scroller__scroller">
        <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><svg class="icon" focusable="false">
                            <use xlink:href="#icon-checkmark"></use>
                        </svg></td>
                    <td>-</td>
                    <td>-</td>
                    <td>Lorem ipsum <a href="#">dolor</a> sit amet</td>
                </tr>
                <tr>
                    <td>Nullam at auctor ante</td>
                    <td>-</td>
                    <td><svg class="icon" focusable="false">
                            <use xlink:href="#icon-checkmark"></use>
                        </svg></td>
                    <td>-</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>Sollicitudin est non</td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td><svg class="icon" focusable="false">
                            <use xlink:href="#icon-checkmark"></use>
                        </svg></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
 
{{#> @horizontal-scroller showScrollIcon="true" contentContainer="scrollable-table"}}
    {{> @table scrollableTable }}
{{/@horizontal-scroller}}
 
{
  "scrollableTable": {
    "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",
          "<svg class=\"icon\" focusable=\"false\"><use xlink:href=\"#icon-checkmark\"></use></svg>",
          "-",
          "-",
          "Lorem ipsum <a href=\"#\">dolor</a> sit amet"
        ]
      },
      {
        "cols": [
          "Nullam at auctor ante",
          "-",
          "<svg class=\"icon\" focusable=\"false\"><use xlink:href=\"#icon-checkmark\"></use></svg>",
          "-",
          "-"
        ]
      },
      {
        "cols": [
          "Sollicitudin est non",
          "-",
          "-",
          "-",
          "<svg class=\"icon\" focusable=\"false\"><use xlink:href=\"#icon-checkmark\"></use></svg>"
        ]
      }
    ]
  }
}

No notes defined.