STableHeader <s-table-header>

Eine Spaltenüberschrift in einer Tabelle. STableHeader ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-table-header>.

import { STableHeader } from 'polaris-vue-elements'

Beispiel

OrderCustomerTotalStatus#1001Alex Morgan$120.00Fulfilled#1002Sam Rivera$45.50Pending#1003Jamie Lee$310.25Cancelled

<script setup>
import {
  STable,
  STableHeaderRow,
  STableHeader,
  STableBody,
  STableRow,
  STableCell,
  SBadge,
} from 'polaris-vue-elements'
</script>

<template>
  <STable variant="auto">
    <STableHeaderRow>
      <!-- STableHeader labels a column. `format` styles cell content (e.g. currency),
           and `listSlot` designates its role when the table falls back to `list` layout. -->
      <STableHeader listSlot="primary">Order</STableHeader>
      <STableHeader listSlot="secondary">Customer</STableHeader>
      <STableHeader format="currency">Total</STableHeader>
      <STableHeader>Status</STableHeader>
    </STableHeaderRow>
    <STableBody>
      <STableRow>
        <STableCell>#1001</STableCell>
        <STableCell>Alex Morgan</STableCell>
        <STableCell>$120.00</STableCell>
        <STableCell><SBadge tone="success">Fulfilled</SBadge></STableCell>
      </STableRow>
      <STableRow>
        <STableCell>#1002</STableCell>
        <STableCell>Sam Rivera</STableCell>
        <STableCell>$45.50</STableCell>
        <STableCell><SBadge tone="warning">Pending</SBadge></STableCell>
      </STableRow>
      <STableRow>
        <STableCell>#1003</STableCell>
        <STableCell>Jamie Lee</STableCell>
        <STableCell>$310.25</STableCell>
        <STableCell><SBadge tone="critical">Cancelled</SBadge></STableCell>
      </STableRow>
    </STableBody>
  </STable>
</template>

Props

Prop	Typ	Beschreibung
format	"base" | "numeric" | "currency"	Das Format der Spalte, das Styling und Ausrichtung des Zelleninhalts steuert.
listSlot	"primary" | "secondary" | "inline" | "kicker" | "labeled"	Die Inhaltsbezeichnung für diese Spalte, wenn die Tabelle auf Mobilgeräten in der Listenvariante angezeigt wird.

Slots

Slot	Beschreibung
default	Die Überschrift der Spalte in der Variante table und die Beschriftung ihrer Daten in der Variante list.