UHasselt Component Library

Table: Table With Header Row And Col 

<div class="table-wrapper">
    <div class="table-responsive">
        <table>
            <tr>
                <th></th>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
            <tr>
                <th class="head">Header A</th>
                <td><a href="www.google.nl">Row 1 Col 1</a></td>
                <td>Row 1 Col 2</td>
                <td>Row 1 Col 3</td>
            </tr>
            <tr>
                <th class="head">Header B</th>
                <td>Row 2 Col 1</td>
                <td>Row 2 Col 2</td>
                <td>Row 2 Col 3</td>
            </tr>
            <tr>
                <th class="head">Header C</th>
                <td>Row 3 Col 1</td>
                <td>Row 3 Col 2</td>
                <td>Row 3 Col 3</td>
            </tr>
        </table>
    </div>
</div>
 
<div class="table-wrapper">
  <div class="table-responsive">
      <table>
        {{#if headerRow}}
          <tr>
            {{#if headerCol}}
              <th></th>
            {{/if}}
            {{#each headerRow}}
              <th>{{text}}</th>
            {{/each}}
          </tr>
        {{/if}}
        {{#each rows}}
          <tr>
            {{#if ../headerCol}}
                {{#with (lookup ../headerCol @index) as |header|}}
                  <th class="head">{{header.text}}</th>
                {{/with}}
            {{/if}}
            {{#each cells}}
              <td>{{{text}}}</td>
            {{/each}}
          </tr>
        {{/each}}
      </table>
  </div>
</div>
 
{
  "rows": [
    {
      "cells": [
        {
          "text": "<a href=\"www.google.nl\">Row 1 Col 1</a>"
        },
        {
          "text": "Row 1 Col 2"
        },
        {
          "text": "Row 1 Col 3"
        }
      ]
    },
    {
      "cells": [
        {
          "text": "Row 2 Col 1"
        },
        {
          "text": "Row 2 Col 2"
        },
        {
          "text": "Row 2 Col 3"
        }
      ]
    },
    {
      "cells": [
        {
          "text": "Row 3 Col 1"
        },
        {
          "text": "Row 3 Col 2"
        },
        {
          "text": "Row 3 Col 3"
        }
      ]
    }
  ],
  "headerRow": [
    {
      "text": "Header 1"
    },
    {
      "text": "Header 2"
    },
    {
      "text": "Header 3"
    }
  ],
  "headerCol": [
    {
      "text": "Header A"
    },
    {
      "text": "Header B"
    },
    {
      "text": "Header C"
    }
  ]
}
  • Content: 
    .table-wrapper {
    @apply overflow-x-auto;

    a {
        @apply text-red underline;
    }

    .table-responsive {
        @apply block w-full;

        table {
            @apply w-full bg-white border-solid border-l border-t border-black-300;

            tr {
                th {
                    @apply bg-gray p-4 font-semibold text-left border-solid border-r border-b border-black-300;
                }

                .head {
                    @apply align-top;
                }

                td {
                    @apply p-4 align-top border-solid border-r border-b border-black-300;
                }

                &:hover {
                    @apply bg-gray-300;
                }
            }
        }
    }
}
  • URL: /components/raw/table/table.css
  • Filesystem Path: src\components\02-atoms\table\table.css
  • Size: 780 Bytes
  • Handle: @table--table-with-header-row-and-col
  • Preview:
  • Filesystem Path: src\components\02-atoms\table\table.hbs

No notes defined.