STableBody <s-table-body>

Phần thân của bảng, chứa các hàng dữ liệu. STableBody là Vue 3 wrapper có type cho web component <s-table-body> của Shopify Polaris.

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

Ví dụ

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	Kiểu	Mô tả
children	any	Các hàng chứa nội dung dữ liệu chính của bảng. Trong biến thể table, đây là phần thân bảng mang ngữ nghĩa. Trong biến thể list, phần này có thể không mang ý nghĩa ngữ nghĩa nhưng vẫn chứa các hàng dữ liệu.
id	string | undefined	Định danh duy nhất của phần tử.

Slots

Slot	Mô tả
default	Các hàng chứa nội dung dữ liệu chính của bảng. Trong biến thể table, đây là phần thân bảng mang ngữ nghĩa. Trong biến thể list, phần này có thể không mang ý nghĩa ngữ nghĩa nhưng vẫn chứa các hàng dữ liệu.