STableBody <s-table-body>

O corpo de uma tabela, que contém suas linhas de dados. STableBody é o wrapper de Vue 3 tipado do web component <s-table-body> do Shopify Polaris.

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

Exemplo

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	Tipo	Descrição
children	any	As linhas que contêm o conteúdo de dados principal da tabela. Na variante table, representa o corpo semântico da tabela. Na variante list, pode não ter significado semântico, mas ainda contém as linhas de dados.
id	string | undefined	Um identificador exclusivo para o elemento.

Slots

Slot	Descrição
default	As linhas que contêm o conteúdo de dados principal da tabela. Na variante table, representa o corpo semântico da tabela. Na variante list, pode não ter significado semântico, mas ainda contém as linhas de dados.