STableBody <s-table-body>

Table का body, जिसमें उसकी data rows होती हैं। STableBody Shopify के Polaris <s-table-body> web component का typed Vue 3 wrapper है।

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

उदाहरण

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	विवरण
children	any	table की मुख्य data सामग्री वाली rows। table variant में यह semantic table body को दर्शाता है। list variant में इसका कोई semantic अर्थ न भी हो, फिर भी इसमें data rows होती हैं।
id	string | undefined	element के लिए एक unique identifier।

Slots

Slot	विवरण
default	table की मुख्य data सामग्री वाली rows। table variant में यह semantic table body को दर्शाता है। list variant में इसका कोई semantic अर्थ न भी हो, फिर भी इसमें data rows होती हैं।