Start typing to search components and docs…
↵ select ↑ ↓ navigate ESC close

Table

Simple table based on JSON data object.

IdNameEmail
1Lorem Ipsumlorem@email.com
2Chuck Norrisipsum@email.com
3Ipsum Loremlorem@email.com
<script setup>
import Table from 'spoko-design-system/src/components/Table.vue';

const data = [
{ id: 1, name: 'Lorem Ipsum', email: 'lorem@email.com' },
{ id: 2, name: 'Chuck Norris', email: 'ipsum@email.com' },
{ id: 3, name: 'Ipsum Lorem', email: 'lorem@email.com' },
];
</script>
<Table :data="data" />

Without explicit id

NameEmail
Lorem Ipsumlorem@email.com
Chuck Norrisipsum@email.com
Ipsum Loremlorem@email.com
<Table :data="[
{ name: 'Lorem Ipsum', email: 'lorem@email.com' },
{ name: 'Chuck Norris', email: 'ipsum@email.com' },
{ name: 'Ipsum Lorem', email: 'lorem@email.com' },
]" />

Generic Table Classes

Plain HTML table using SDS shortcut classes — no JavaScript required.

NameEmailStatus
Lorem Ipsumlorem@email.comActive
Chuck Norrischuck@email.comInactive
Ipsum Loremipsum@email.comSuspended
<table class="table-base">
<thead>
  <tr>
    <th class="table-header">Name</th>
    <th class="table-header">Email</th>
    <th class="table-header">Status</th>
  </tr>
</thead>
<tbody>
  <tr class="table-row">
    <td class="table-cell">Lorem Ipsum</td>
    <td class="table-cell">lorem@email.com</td>
    <td class="table-cell"><span class="badge-success">Active</span></td>
  </tr>
  <tr class="table-row">
    <td class="table-cell">Chuck Norris</td>
    <td class="table-cell">chuck@email.com</td>
    <td class="table-cell"><span class="badge-neutral">Inactive</span></td>
  </tr>
  <tr class="table-row">
    <td class="table-cell">Ipsum Lorem</td>
    <td class="table-cell">ipsum@email.com</td>
    <td class="table-cell"><span class="badge-error">Suspended</span></td>
  </tr>
</tbody>
</table>

Striped rows

Apply table-striped to <tr> elements for alternating row backgrounds.

NameEmail
Lorem Ipsumlorem@email.com
Chuck Norrischuck@email.com
Ipsum Loremipsum@email.com
<table class="table-base">
<thead>
  <tr>
    <th class="table-header">Name</th>
    <th class="table-header">Email</th>
  </tr>
</thead>
<tbody>
  <tr class="table-striped">
    <td class="table-cell">Lorem Ipsum</td>
    <td class="table-cell">lorem@email.com</td>
  </tr>
  <tr class="table-striped">
    <td class="table-cell">Chuck Norris</td>
    <td class="table-cell">chuck@email.com</td>
  </tr>
  <tr class="table-striped">
    <td class="table-cell">Ipsum Lorem</td>
    <td class="table-cell">ipsum@email.com</td>
  </tr>
</tbody>
</table>

Props

PropTypeDefaultDescription
data*object[]—Array of objects where each object represents a table row. Object keys become column headers.

CSS Shortcuts

For plain HTML tables, use these CSS classes:

Class Purpose
table-base Base table container with borders and styling
table-header Table header cell styling
table-row Standard table row
table-cell Table cell with padding and alignment
table-striped Alternating row backgrounds for readability