Concorde documentation · same URL (interactive) · llms.txt

Concorde UI component — Table. sonic-table lays out tabular data with sonic-tr · sonic-th · sonic-td children, optionally grouped in sonic-thead · sonic-tbody · sonic-tfoot. It scrolls horizontally when columns overflow; set minWid Doc ID: core/components/ui/table/table. Keywords: Concorde, supersoniks, core/components/ui/table/table, table, Table, UI component, sonic-table, web component, sonic-tr, sonic-th, sonic-td, sonic-thead, sonic-tbody, sonic-tfoot, minWidth, sonic-list, bordered. URL: https://concorde.supersoniks.org/core/components/ui/table.

Table

sonic-table lays out tabular data with sonic-tr · sonic-th · sonic-td children, optionally grouped in sonic-thead · sonic-tbody · sonic-tfoot. It scrolls horizontally when columns overflow; set minWidth on wide cells to keep them readable. Render fetched rows with sonic-list.

Basic example

bordered adds an outer frame and row dividers. sonic-tbody stripes and highlights its rows on hover.

<sonic-table bordered>
      <sonic-thead>
        <sonic-tr>
          <sonic-th>Flight</sonic-th>
          <sonic-th>Destination</sonic-th>
          <sonic-th>Status</sonic-th>
        </sonic-tr>
      </sonic-thead>
      <sonic-tbody>
        <sonic-tr>
          <sonic-td>CN 001</sonic-td>
          <sonic-td>New York JFK</sonic-td>
          <sonic-td>Boarding</sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td>CN 014</sonic-td>
          <sonic-td>London LHR</sonic-td>
          <sonic-td>On time</sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td>CN 102</sonic-td>
          <sonic-td>Rio de Janeiro GIG</sonic-td>
          <sonic-td>Delayed</sonic-td>
        </sonic-tr>
      </sonic-tbody>
    </sonic-table>

List, fetch and max height

Put a sonic-list with displayContents inside sonic-tbody and render one sonic-tr per item; the list sets even · odd · last on each row. maxHeight caps the scroll container so the body scrolls vertically.

<sonic-table maxHeight="10rem">
      <sonic-thead>
        <sonic-tr>
          <sonic-th>Time</sonic-th>
          <sonic-th>Flight</sonic-th>
          <sonic-th>Destination</sonic-th>
          <sonic-th>Gate</sonic-th>
        </sonic-tr>
      </sonic-thead>
      <sonic-tbody>
        <sonic-list fetch serviceURL="/docs-mock-api" dataProvider="flights" key="flights" displayContents>
          <template>
            <sonic-tr>
              <sonic-td data-bind ::inner-html="$time"></sonic-td>
              <sonic-td data-bind ::inner-html="$code"></sonic-td>
              <sonic-td minWidth="10rem" data-bind ::inner-html="$city <b>$airport</b>"></sonic-td>
              <sonic-td data-bind ::inner-html="$gate"></sonic-td>
            </sonic-tr>

Size

With no size, the table uses md.

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

Type

type on sonic-tr · sonic-th · sonic-td sets a semantic text color.

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

Colspan and rowspan

<sonic-table bordered>
      <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>

Alignment and width

align sets horizontal alignment. width · minWidth · maxWidth set the cell dimensions. vAlign exists on sonic-td only.

<sonic-table bordered>
      <sonic-thead>
        <sonic-tr>
          <sonic-th width="8rem">align</sonic-th>
          <sonic-th maxWidth="8rem">maxWidth 8rem</sonic-th>
          <sonic-th>vAlign</sonic-th>
        </sonic-tr>
      </sonic-thead>
      <sonic-tbody>
        <sonic-tr>
          <sonic-td align="left">left</sonic-td>
          <sonic-td maxWidth="8rem">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sonic-td>
          <sonic-td vAlign="top">top</sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td align="center">center</sonic-td>
          <sonic-td maxWidth="8rem">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sonic-td>
          <sonic-td vAlign="middle">middle</sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td align="right">right</sonic-td>
          <sonic-td maxWidth="8rem">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sonic-td>
          <sonic-td vAlign="bottom">bottom</sonic-td>
        </sonic-tr>
      </sonic-tbody>
    </sonic-table>

Sticky header and caption

sonic-th cells stick to the top of the scroll container. To stick the header to the page instead, set noCustomScroll (which removes the scroll container) and position sonic-thead yourself. sonic-caption adds a caption.

<sonic-table bordered noCustomScroll>
      <sonic-thead class="sticky top-16">
        <sonic-tr>
          <sonic-th minWidth="12rem">Product</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>Desk lamp</sonic-td>
          <sonic-td align="center">2</sonic-td>
          <sonic-td align="right">40 €</sonic-td>
          <sonic-td align="right">
            <sonic-button shape="circle" variant="outline" size="sm" aria-label="Edit">
              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon>
            </sonic-button>
          </sonic-td>
        </sonic-tr>
        <sonic-tr type="warning">
          <sonic-td>Notebook</sonic-td>
          <sonic-td align="center">0</sonic-td>
          <sonic-td align="right">8 €</sonic-td>
          <sonic-td align="right">
            <sonic-button shape="circle" variant="outline" size="sm" aria-label="Edit">
              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon>
            </sonic-button>
          </sonic-td>
        </sonic-tr>
        <sonic-tr>
          <sonic-td>Headphones</sonic-td>
          <sonic-td align="center">1</sonic-td>
          <sonic-td align="right" type="danger">120 €</sonic-td>
          <sonic-td align="right">
            <sonic-button shape="circle" variant="outline" size="sm" aria-label="Edit">
              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon>
            </sonic-button>
          </sonic-td>
        </sonic-tr>
      </sonic-tbody>
      <sonic-caption>Cart contents</sonic-caption>
    </sonic-table>

API reference

sonic-table

Attribute Values Description
size 2xs … 2xl · inherit (default md) Font size
bordered boolean Outer border and row dividers
maxHeight CSS length Max height of the scroll container
noCustomScroll boolean Remove the scroll container and its custom scrollbar
Slot Description
(default) Sections, rows and caption

sonic-thead · sonic-tbody · sonic-tfoot · sonic-caption

No attributes. Default slot only. sonic-tbody stripes and highlights its rows.

sonic-tr

Attribute Values Description
type default · primary · info · success · warning · danger · neutral Text color
even · odd boolean Striping background; set by sonic-list
last boolean No bottom border; set by sonic-list
Slot Description
(default) sonic-th or sonic-td cells

sonic-th · sonic-td

Attribute Values Description
type same as sonic-tr Text color
align left · center · right Horizontal alignment
vAlign CSS vertical-align Vertical alignment (sonic-td only)
colSpan · rowSpan number Column and row span
width · minWidth · maxWidth CSS length Cell dimensions
noBorder boolean No bottom border (sonic-th only)
Slot Description
(default) Cell content