STableRow <s-table-row>

Table में data की एक row। STableRow Shopify के Polaris <s-table-row> web component का typed Vue 3 wrapper है।

import { STableRow } 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>
      <!-- Each STableRow is one record; its children should be STableCell. -->
      <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 row के अंदर दिखाई जाने वाली data cells, जिनमें से हर cell अपने संबंधित column की सामग्री रखती है। children के रूप में केवल table cell components स्वीकार करता है।
clickDelegate	string | undefined	row में किसी interactive element, जैसे s-link, की ID, जो row पर click होने पर click का target होगा। यह row का primary action है; इसका उपयोग secondary actions के लिए नहीं करना चाहिए। यह केवल click के लिए सुविधा है, और कोई keyboard या screen reader सुविधा नहीं जोड़ता। इसीलिए target element का table में होना ज़रूरी है, ताकि keyboard और screen reader users उसके साथ सामान्य रूप से interact कर सकें।

Slots

Slot	विवरण
default	इस table row के अंदर दिखाई जाने वाली data cells, जिनमें से हर cell अपने संबंधित column की सामग्री रखती है। children के रूप में केवल table cell components स्वीकार करता है।