Vebego Component Library
<div class="atm-table">
    <div class="table-view">
        <table>
            <tr>
                <th class="head">Header A</th>
                <td>Row 1 Col 1</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 class="list-view">
        <ul>
            <li>
                <span>Header A</span>
                <dl>
                    <dd>Row 1 Col 1</dd>
                    <dd>Row 1 Col 2</dd>
                    <dd>Row 1 Col 3</dd>
                </dl>
            </li>
            <li>
                <span>Header B</span>
                <dl>
                    <dd>Row 2 Col 1</dd>
                    <dd>Row 2 Col 2</dd>
                    <dd>Row 2 Col 3</dd>
                </dl>
            </li>
            <li>
                <span>Header C</span>
                <dl>
                    <dd>Row 3 Col 1</dd>
                    <dd>Row 3 Col 2</dd>
                    <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"
        }
      ]
    }
  ],
  "headerCol": [
    {
      "text": "Header A"
    },
    {
      "text": "Header B"
    },
    {
      "text": "Header C"
    }
  ]
}
  • 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.