STableBody <s-table-body>

Der Body einer Tabelle, der ihre Datenzeilen enthält. STableBody ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-table-body>.

import { STableBody } 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 listSlot="primary">Order</STableHeader>
      <STableHeader listSlot="secondary">Customer</STableHeader>
      <STableHeader format="currency">Total</STableHeader>
      <STableHeader>Status</STableHeader>
    </STableHeaderRow>
    <!-- STableBody wraps every STableRow that carries actual data. -->
    <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
children	any	Die Zeilen mit dem Hauptdateninhalt der Tabelle. In der Variante table entspricht dies dem semantischen Tabellenkörper. In der Variante list hat dies eventuell keine semantische Bedeutung, enthält aber dennoch die Datenzeilen.
id	string | undefined	Eine eindeutige Kennung für das Element.

Slots

Slot	Beschreibung
default	Die Zeilen mit dem Hauptdateninhalt der Tabelle. In der Variante table entspricht dies dem semantischen Tabellenkörper. In der Variante list hat dies eventuell keine semantische Bedeutung, enthält aber dennoch die Datenzeilen.