Concorde documentation (crawl) · interactive version

Concorde UI component — Table. Values available : primary, info, success, warning, danger Doc ID: core/components/ui/table/table. Keywords: Concorde, supersoniks, core/components/ui/table/table, table, Table, UI component, sonic-table, web component. URL: https://concorde.supersoniks.org/crawl/core/components/ui/table/table.html.

Table

Basic usage

<sonic-table>
      <sonic-tr>
        <sonic-th>Id</sonic-th>
        <sonic-th>Name</sonic-th>
        <sonic-th>Email</sonic-th>
      </sonic-tr>
      <sonic-tr>
        <sonic-td>1</sonic-td>
        <sonic-td>George Bluth</sonic-td>
        <sonic-td>george.bluth@reqres.in</sonic-td>
      </sonic-tr>
      <sonic-tr>
        <sonic-td>2</sonic-td>
        <sonic-td>Janet Weaver</sonic-td>
        <sonic-td>janet.weaver@reqres.in</sonic-td>
      </sonic-tr>
      <sonic-tr>
        <sonic-td>3</sonic-td>
        <sonic-td>Emma Wong</sonic-td>
        <sonic-td>emma.wong@reqres.in</sonic-td>
      </sonic-tr>
    </sonic-table>

List / fetch

<sonic-table>
      <sonic-thead>
        <sonic-tr>
          <sonic-th>Id</sonic-th>
          <sonic-th>Name</sonic-th>
          <sonic-th>Email</sonic-th>
        </sonic-tr> 
      </sonic-thead>
      <sonic-tbody>
        <sonic-list debug fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
          <template>
            <sonic-tr>
              <sonic-td data-bind ::inner-html="$id"></sonic-td>
              <sonic-td data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
              <sonic-td data-bind ::inner-html="$email"></sonic-td>
            </sonic-tr>

Size

<div class="grid grid-cols-4 gap-3">
      <sonic-table size="2xs" bordered>
        <sonic-tr><sonic-td class="w-[5rem]">2xs</sonic-td></sonic-tr>
      </sonic-table>
      <sonic-table size="xs" bordered>
        <sonic-tr><sonic-td class="w-[5rem]">xs</sonic-td></sonic-tr>
      </sonic-table>
      <sonic-table size="sm" bordered>
        <sonic-tr><sonic-td class="w-[5rem]">sm</sonic-td></sonic-tr>
      </sonic-table>
      <sonic-table size="md" bordered>
        <sonic-tr><sonic-td class="w-[5rem]">md</sonic-td></sonic-tr>
      </sonic-table>
      <sonic-table bordered>
        <sonic-tr><sonic-td class="w-[5rem]">default</sonic-td></sonic-tr>
      </sonic-table>
      <sonic-table size="lg" bordered>
        <sonic-tr><sonic-td class="w-[5rem]">lg</sonic-td></sonic-tr>
      </sonic-table>
      <sonic-table size="xl" bordered>
        <sonic-tr><sonic-td class="w-[5rem]">xl</sonic-td></sonic-tr>
      </sonic-table>
      <sonic-table size="2xl" bordered>
        <sonic-tr><sonic-td class="w-[5rem]">2xl</sonic-td></sonic-tr>
      </sonic-table>
    </div>

Bordered

<sonic-table bordered>
      <sonic-thead>
        <sonic-tr>
          <sonic-th>Id</sonic-th>
          <sonic-th>Name</sonic-th>
          <sonic-th>Email</sonic-th>
        </sonic-tr>
      </sonic-thead>
      <sonic-tbody>
        <sonic-tr>
          <sonic-td>1</sonic-td>
          <sonic-td>George Bluth</sonic-td>
          <sonic-td>george.bluth@reqres.in</sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td>2</sonic-td>
          <sonic-td>Janet Weaver</sonic-td>
          <sonic-td>janet.weaver@reqres.in</sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td>3</sonic-td>
          <sonic-td>Emma Wong</sonic-td>
          <sonic-td>emma.wong@reqres.in</sonic-td>
        </sonic-tr>
      </sonic-tbody>
    </sonic-table>

MaxHeight

<sonic-table maxHeight="8rem">
      <sonic-thead>
        <sonic-tr>
          <sonic-th>Id</sonic-th>
          <sonic-th>Name</sonic-th>
          <sonic-th>Email</sonic-th>
        </sonic-tr> 
      </sonic-thead>
      <sonic-tbody>
        <sonic-list  fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
          <template>
            <sonic-tr>
              <sonic-td data-bind ::inner-html="$id"></sonic-td>
              <sonic-td data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
              <sonic-td data-bind ::inner-html="$email"></sonic-td>
            </sonic-tr>

Type

Values available : primary, info, success, warning, danger

<sonic-table bordered>
        <sonic-tr>
          <sonic-th type="info">Attribute type set on</sonic-th>
          <sonic-th type="info">sonic-th</sonic-th>
        </sonic-tr>
        <sonic-tr>
          <sonic-td type="danger">Attribute type set on</sonic-td>
          <sonic-td type="danger">sonic-td</sonic-td>
        </sonic-tr>
        <sonic-tr type="success">
          <sonic-td>Attribute type set on</sonic-td>
          <sonic-td>sonic-tr</sonic-td>
        </sonic-tr>
      </sonic-tbody>
    </sonic-table>

Colspan / rowspan

<sonic-table >
      <sonic-tbody>
        <sonic-tr>
          <sonic-td colspan="2" class="bg-info text-neutral-0">colspan : 2</sonic-td>
          <sonic-td>cell</sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td>cell</sonic-td>
          <sonic-td>cell</sonic-td>
          <sonic-td rowspan="2" class="bg-success text-neutral-0">rowspan : 2</sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td>cell</sonic-td>
          <sonic-td>cell</sonic-td>
        </sonic-tr>
      </sonic-tbody>
    </sonic-table>

Cell style attributes

The following attributes will be used to set the style of the component : 

<sonic-table bordered>
      <sonic-thead>
        <sonic-tr>
          <sonic-th width="7rem">align</sonic-th>
          <sonic-th minWidth="20rem">minWidth</sonic-th>
          <sonic-th>maxWidth</sonic-th>
          <sonic-th>width</sonic-th>
        </sonic-tr>
      </sonic-thead>
      <sonic-tbody>
        <sonic-tr>
          <sonic-td align="left">Left</sonic-td>
          <sonic-td>20rem</sonic-td>
          <sonic-td>5rem</sonic-td>
          <sonic-td>15rem</sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td align="center">center</sonic-td>
          <sonic-td>20rem</sonic-td>
          <sonic-td maxWidth="5rem">5rem</sonic-td>
          <sonic-td>15rem</sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td align="right">right</sonic-td>
          <sonic-td>20rem</sonic-td>
          <sonic-td>5rem - Lorem ipsum dolor</sonic-td>
          <sonic-td width="60rem">15rem - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta sollicitudin mollis. Curabitur sit amet nibh diam. Vivamus a pharetra mauris.</sonic-td>
        </sonic-tr>
    </sonic-table>

Responsive

Every table is responsive by default

<sonic-table bordered>
      <sonic-thead>
        <sonic-tr>
          <sonic-th>Id</sonic-th>
          <sonic-th>Name</sonic-th>
          <sonic-th>Email</sonic-th>
          <sonic-th>Comment</sonic-th>
        </sonic-tr> 
      </sonic-thead>
      <sonic-tbody>
        <sonic-list fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
          <template>
            <sonic-tr>
              <sonic-td data-bind ::inner-html="$id"></sonic-td>
              <sonic-td minWidth="10rem" data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
              <sonic-td data-bind ::inner-html="$email"></sonic-td>
              <sonic-td minWidth="40rem">
                hasellus suscipit vulputate lacus, in tempor turpis aliquam vel. Nunc eleifend, velit id ultrices elementum, ipsum felis porttitor dui, id laoreet diam nulla sed urna. 
              </sonic-td>
            </sonic-tr>

<sonic-table bordered noCustomScroll>
      <sonic-thead class="sticky top-16">
        <sonic-tr>
          <sonic-th minWidth="max(20ch,12rem)">Company</sonic-th>
          <sonic-th type="success">Contact</sonic-th>
          <sonic-th>Country</sonic-th>
          <sonic-th align="center">Quantity</sonic-th>
          <sonic-th align="right">Price</sonic-th>
          <sonic-th></sonic-th>
        </sonic-tr>
      </sonic-thead>
      <sonic-tbody>
        <sonic-tr>
          <sonic-td>Alfreds Futterkiste</sonic-td>
          <sonic-td>Maria Anders</sonic-td>
          <sonic-td>Germany</sonic-td>
          <sonic-td align="center">2</sonic-td>
          <sonic-td align="right">40€</sonic-td>
          <sonic-td td align="right"
            ><sonic-button shape="circle" variant="outline" size="sm">
              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
            ></sonic-button>
          </sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td>Centro comercial Moctezuma</sonic-td>
          <sonic-td
            colspan="2"
            align="center"
            class="
              text-center
              text-neutral-400
            "
            >no information yet</sonic-td
          >
          <sonic-td align="center">3</sonic-td>
          <sonic-td align="right">40€</sonic-td>
          <sonic-td td align="right"
            ><sonic-button shape="circle" variant="outline" size="sm">
              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
            ></sonic-button>
          </sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td>Ernst Handel</sonic-td>
          <sonic-td>Roland Mendel</sonic-td>
          <sonic-td>Austria</sonic-td>
          <sonic-td align="center">4</sonic-td>
          <sonic-td align="right">40€</sonic-td>
          <sonic-td td align="right"
            ><sonic-button shape="circle" variant="outline" size="sm">
              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
            ></sonic-button>
          </sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td>Island Trading</sonic-td>
          <sonic-td>Helen Bennett</sonic-td>
          <sonic-td>UK</sonic-td>
          <sonic-td align="center">1</sonic-td>
          <sonic-td align="right">40€</sonic-td>
          <sonic-td td align="right"
            ><sonic-button shape="circle" variant="outline" size="sm">
              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
            ></sonic-button>
          </sonic-td>
        </sonic-tr>
        <sonic-tr type="warning">
          <sonic-td>Laughing Bacchus Winecellars</sonic-td>
          <sonic-td>Yoshi Tannamuri</sonic-td>
          <sonic-td>Canada</sonic-td>
          <sonic-td align="center">0</sonic-td>
          <sonic-td align="right">40€</sonic-td>
          <sonic-td td align="right"
            ><sonic-button shape="circle" variant="outline" size="sm">
              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
            ></sonic-button>
          </sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td>Magazzini Alimentari Riuniti</sonic-td>
          <sonic-td>Giovanni Rovelli</sonic-td>
          <sonic-td type="danger">Italy</sonic-td>
          <sonic-td align="center">20</sonic-td>
          <sonic-td align="right">40€</sonic-td>
          <sonic-td td align="right"
            ><sonic-button shape="circle" variant="outline" size="sm">
              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
            ></sonic-button>
          </sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td>Alfreds Futterkiste</sonic-td>
          <sonic-td>Maria Anders</sonic-td>
          <sonic-td>Germany</sonic-td>
          <sonic-td align="center">2</sonic-td>
          <sonic-td align="right">40€</sonic-td>
          <sonic-td td align="right"
            ><sonic-button shape="circle" variant="outline" size="sm">
              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
            ></sonic-button>
          </sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td>Centro comercial Moctezuma</sonic-td>
          <sonic-td
            colspan="2"
            align="center"
            class="
              text-center
              text-neutral-400
            "
            >no information yet</sonic-td
          >
          <sonic-td align="center">3</sonic-td>
          <sonic-td align="right">40€</sonic-td>
          <sonic-td td align="right"
            ><sonic-button shape="circle" variant="outline" size="sm">
              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
            ></sonic-button>
          </sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td>Ernst Handel</sonic-td>
          <sonic-td>Roland Mendel</sonic-td>
          <sonic-td>Austria</sonic-td>
          <sonic-td align="center">4</sonic-td>
          <sonic-td align="right">40€</sonic-td>
          <sonic-td td align="right"
            ><sonic-button shape="circle" variant="outline" size="sm">
              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
            ></sonic-button>
          </sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td>Island Trading</sonic-td>
          <sonic-td>Helen Bennett</sonic-td>
          <sonic-td>UK</sonic-td>
          <sonic-td align="center">1</sonic-td>
          <sonic-td align="right">40€</sonic-td>
          <sonic-td td align="right"
            ><sonic-button shape="circle" variant="outline" size="sm">
              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
            ></sonic-button>
          </sonic-td>
        </sonic-tr>
        <sonic-tr type="warning">
          <sonic-td>Laughing Bacchus Winecellars</sonic-td>
          <sonic-td>Yoshi Tannamuri</sonic-td>
          <sonic-td>Canada</sonic-td>
          <sonic-td align="center">0</sonic-td>
          <sonic-td align="right">40€</sonic-td>
          <sonic-td td align="right"
            ><sonic-button shape="circle" variant="outline" size="sm">
              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
            ></sonic-button>
          </sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td>Magazzini Alimentari Riuniti</sonic-td>
          <sonic-td>Giovanni Rovelli</sonic-td>
          <sonic-td>Italy</sonic-td>
          <sonic-td align="center">20</sonic-td>
          <sonic-td align="right">40€</sonic-td>
          <sonic-td td align="right"
            ><sonic-button shape="circle" variant="outline" size="sm">
              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
            ></sonic-button>
          </sonic-td>
        </sonic-tr>
      </sonic-tbody>
      <sonic-caption>table caption</sonic-caption>
    </sonic-table>