Table

Leichtgewichtiges, zugängliches Tabellen‑Grundgerüst mit Slots.

<script setup lang="ts">
import { Table } from '@stratton-cologne/ui'
const rows = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]
</script>

<template>
  <Table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="r in rows" :key="r.id">
        <td>{{ r.id }}</td>
        <td>{{ r.name }}</td>
      </tr>
    </tbody>
  </Table>
  
</template>

Props

• data: Array von Einträgen (Default: []).
• columns: { key, label }[] (Default: []).
• rowKey: Propertyname oder (entry, index) => key (Default: 'id').
• rowClickable: boolean | (entry, index) => boolean – macht Zeilen klickbar.
• showActions: Aktionen-Spalte einblenden (Default: true).
• selectedKeys: v-model für Selektion.
• ariaLabel: Beschriftung (Default: „Datentabelle“).
• id / instance: Stabile Root-ID und data-instance.

Events

• row-click(entry)
• action({ action, entry }) – für eigene Action-Buttons
• update:selectedKeys(keys)

Slots

• th: Kopfzelle { column }
• cell: Zelle { column, entry, value, index }
• actions-header: Header der Actions-Spalte
• actions: Inhalt der Actions-Zelle { entry, index, emitAction }
• empty: Leerzustand
• footer: Footer-Zeile unterhalb der Tabelle

Styling (data-Attribute)

• Root: [data-component="sc-table"]
• Bereiche: [data-role="scroll"|"footer"]
• Table: [data-role="table"], Thead: [data-role="head"], Tbody: [data-role="body"]
• Row: [data-role~="row"], Zellen: [data-role~="cell"], Zusätze: .select, .actions, .empty
• Klickbare Zeilen: [data-clickable]