STableBody <s-table-body>

Le corps d'un tableau, qui contient ses lignes de données. STableBody est le wrapper Vue 3 typé du web component <s-table-body> de Shopify Polaris.

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

Exemple

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	Type	Description
children	any	Les lignes contenant les données principales du tableau. Dans la variante table, cela représente le corps sémantique du tableau. Dans la variante list, cela peut ne pas avoir de signification sémantique, mais contient tout de même les lignes de données.
id	string | undefined	Un identifiant unique pour l'élément.

Slots

Slot	Description
default	Les lignes contenant les données principales du tableau. Dans la variante table, cela représente le corps sémantique du tableau. Dans la variante list, cela peut ne pas avoir de signification sémantique, mais contient tout de même les lignes de données.