STableBody <s-table-body>

El cuerpo de una tabla, que contiene sus filas de datos. STableBody es el wrapper de Vue 3 tipado del web component <s-table-body> de Shopify Polaris.

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

Ejemplo

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	Descripción
children	any	Las filas que contienen el contenido de datos principal de la tabla. En la variante table, representa el cuerpo semántico de la tabla. En la variante list, puede no tener significado semántico, pero sigue conteniendo las filas de datos.
id	string | undefined	Un identificador único para el elemento.

Slots

Slot	Descripción
default	Las filas que contienen el contenido de datos principal de la tabla. En la variante table, representa el cuerpo semántico de la tabla. En la variante list, puede no tener significado semántico, pero sigue conteniendo las filas de datos.