Table

A styled native table for data you write yourself: a few columns, read from top to bottom.

<script setup lang="ts">
import { FsTable } from '@fivespark/ui'

const lines = [
  { name: 'Arbeid montage', count: 12, unit: '45,00', total: '540,00' },
  { name: 'Materiaal', count: 1, unit: '380,00', total: '380,00' },
  { name: 'Voorrijkosten', count: 1, unit: '35,00', total: '35,00' },
]
</script>

<template>
  <FsTable caption="Regels van offerte 2026-0117">
    <thead>
      <tr>
        <th scope="col">Omschrijving</th>
        <th scope="col" data-align="end">Aantal</th>
        <th scope="col" data-align="end">Prijs (€)</th>
        <th scope="col" data-align="end">Totaal (€)</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="line in lines" :key="line.name">
        <th scope="row">{{ line.name }}</th>
        <td data-align="end">{{ line.count }}</td>
        <td data-align="end">{{ line.unit }}</td>
        <td data-align="end">{{ line.total }}</td>
      </tr>
    </tbody>
  </FsTable>
</template>

Usage

<script setup lang="ts">
import { FsTable } from '@fivespark/ui'
</script>

<template>
  <FsTable caption="Orders deze week">
    <thead>
      <tr>
        <th scope="col">Order</th>
        <th scope="col" data-align="end">Bedrag (€)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">OR-2026-231</th>
        <td data-align="end">1.250,00</td>
      </tr>
    </tbody>
  </FsTable>
</template>

You write the thead, tbody and cells yourself. Give every <th> a scope, put the unit in the column header, and align numbers with data-align="end". A table wider than its box scrolls sideways. For sorting, paging or selection, use Data table.

Examples

With a footer

A tfoot row is the place for totals.

<script setup lang="ts">
import { FsTable } from '@fivespark/ui'
</script>

<template>
  <FsTable caption="Orders deze week">
    <thead>
      <tr>
        <th scope="col">Order</th>
        <th scope="col">Klant</th>
        <th scope="col" data-align="end">Bedrag (€)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">OR-2026-231</th>
        <td>Bouwbedrijf Jansen</td>
        <td data-align="end">1.250,00</td>
      </tr>
      <tr>
        <th scope="row">OR-2026-232</th>
        <td>Van Dijk Installatie</td>
        <td data-align="end">890,00</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row" colspan="2">Totaal</th>
        <td data-align="end">2.140,00</td>
      </tr>
    </tfoot>
  </FsTable>
</template>

Dense

size="dense" for tables beside dense controls or in a side panel.

<script setup lang="ts">
import { FsTable } from '@fivespark/ui'
</script>

<template>
  <FsTable caption="Planning van maandag" size="dense">
    <thead>
      <tr>
        <th scope="col">Tijd</th>
        <th scope="col">Monteur</th>
        <th scope="col">Adres</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">08:00</th>
        <td>Pieter</td>
        <td>Dorpsstraat 12, Zwolle</td>
      </tr>
      <tr>
        <th scope="row">10:30</th>
        <td>Sanne</td>
        <td>Kerkplein 3, Deventer</td>
      </tr>
      <tr>
        <th scope="row">13:00</th>
        <td>Pieter</td>
        <td>Industrieweg 45, Apeldoorn</td>
      </tr>
    </tbody>
  </FsTable>
</template>

Hidden caption

Under a heading that already names the table, hide-caption keeps the caption for screen readers only.

<script setup lang="ts">
import { FsTable } from '@fivespark/ui'
</script>

<template>
  <section class="w-full">
    <h3 class="type-region-title mb-2">Openstaande facturen</h3>
    <FsTable caption="Openstaande facturen" hide-caption>
      <thead>
        <tr>
          <th scope="col">Factuur</th>
          <th scope="col" data-align="end">Bedrag (€)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">FA-2026-088</th>
          <td data-align="end">1.815,00</td>
        </tr>
        <tr>
          <th scope="row">FA-2026-091</th>
          <td data-align="end">420,50</td>
        </tr>
      </tbody>
    </FsTable>
  </section>
</template>

Keyboard

Key	Does
Tab	When the table is wider than its box, it is a Tab stop, so the scroll can be reached
←, →, ↑, ↓	Scroll the focused table

API Reference

FsTable

Prop	Type	Default	Description
caption	string		The table's name, shown above it. Required unless an `aria-labelledby` attribute names the table; for a name not to show, use `hideCaption`, not `aria-label`.
hideCaption	boolean	false	Keeps the caption for assistive technology only, for a table under a heading or title that already names it.
size	"default" | "dense"	"default"	`dense` beside dense controls.

Slot	Props	Description
default	any	The table's rows and sections, written as plain `<thead>`, `<tbody>` and `<tr>`.