Vebego Component Library

Table: Table With Header Row 

<div class="atm-table">
    <div class="table-view">
        <table>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
            <tr>
                <td>Row 1 Col 1</td>
                <td>Row 1 Col 2</td>
                <td>Row 1 Col 3</td>
            </tr>
            <tr>
                <td>Row 2 Col 1</td>
                <td>Row 2 Col 2</td>
                <td>Row 2 Col 3</td>
            </tr>
            <tr>
                <td>Row 3 Col 1</td>
                <td>Row 3 Col 2</td>
                <td>Row 3 Col 3</td>
            </tr>
        </table>
    </div>

    <div class="list-view">
        <ul>
            <li>
                <dl>
                    <dt>Header 1</dt>
                    <dd>Row 1 Col 1</dd>
                    <dt>Header 2</dt>
                    <dd>Row 1 Col 2</dd>
                    <dt>Header 3</dt>
                    <dd>Row 1 Col 3</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>Header 1</dt>
                    <dd>Row 2 Col 1</dd>
                    <dt>Header 2</dt>
                    <dd>Row 2 Col 2</dd>
                    <dt>Header 3</dt>
                    <dd>Row 2 Col 3</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>Header 1</dt>
                    <dd>Row 3 Col 1</dd>
                    <dt>Header 2</dt>
                    <dd>Row 3 Col 2</dd>
                    <dt>Header 3</dt>
                    <dd>Row 3 Col 3</dd>
                </dl>
            </li>
        </ul>
    </div>
</div>
 
<div class="atm-table">
  <div class="table-view">
    <table>
      {{#if headerRow}}
      <tr>
        {{#if headerCol}}
        <th></th>
        {{/if}}
        {{#each headerRow}}
        <th {{attributes}}>{{text}}</th>
        {{/each}}
      </tr>
      {{/if}}
      {{#each rows}}
      <tr>
        {{#if ../headerCol}}
        {{#with (lookup ../headerCol @index) as |header|}}
        <th class="head" {{header.attributes}}>{{header.text}}</th>
        {{/with}}
        {{/if}}
        {{#each cells}}
        <td {{{attributes}}}>{{text}}</td>
        {{/each}}
      </tr>
      {{/each}}
    </table>
  </div>

  <div class="list-view">
    <ul>
      {{#each rows}}
      <li>
        {{#with (lookup ../headerCol @index) as |header|}}
        <span>{{header.text}}</span>
        {{/with}}
        <dl>
          {{#each cells}}
          {{#if ../../headerRow}}
          {{#with (lookup ../../headerRow @index) as |header|}}
          <dt {{header.attributes}}>{{header.text}}</dt>
          {{/with}}
          {{/if}}
          <dd>{{text}}</dd>
          {{/each}}
        </dl>
      </li>
      {{/each}}
    </ul>
  </div>
</div>
 
{
  "rows": [
    {
      "cells": [
        {
          "text": "Row 1 Col 1"
        },
        {
          "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"
    }
  ]
}
  • Content: 
    .atm-table {
    .table-view {
        @apply hidden md:block w-full;

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

            tr {
                th {
                    @apply bg-cta text-white;
                    @apply p-4;
                    @apply font-normal text-left;
                    @apply border-solid border-r border-b border-shade;
                }

                .head {
                    @apply align-top;
                    @apply bg-cta-100 text-gray;
                    @apply border-solid border-r border-b border-shade;
                }

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

                &:hover {
                    @apply cursor-pointer;
                    @apply bg-cta-100;
                }
            }
        }
    }

    .list-view {
        @apply md:hidden;

        ul {
            li {
                span {
                    @apply mb-4;
                    @apply block;
                    @apply text-left;
                }

                &:not(:last-child) {
                    @apply mb-4;
                }

                dl {
                    @apply flex flex-wrap;

                    dt {
                        @apply p-4;
                        @apply w-2/6;
                        @apply font-normal text-left;
                        @apply bg-cta text-white;
                        @apply border-solid border-b border-l border-shade;
                        @apply first:border-t;
                    }

                    dd {
                        @apply p-4;
                        @apply w-4/6;
                        @apply border-solid border-t border-l border-r border-shade;
                        @apply last:border-b;
                    }
                }
            }
        }
    }
}
  • URL: /components/raw/table/table.css
  • Filesystem Path: src\components\02-atoms\table\table.css
  • Size: 2.1 KB

No notes defined.