STableHeaderRow <s-table-header-row>

Table के ऊपर column headers वाली row। STableHeaderRow Shopify के Polaris <s-table-header-row> web component का typed Vue 3 wrapper है।

import { STableHeaderRow } 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 holds the column headers (STableHeader children). -->
    <STableHeaderRow>
      <STableHeader listSlot="primary">Order</STableHeader>
      <STableHeader listSlot="secondary">Customer</STableHeader>
      <STableHeader format="currency">Total</STableHeader>
      <STableHeader>Status</STableHeader>
    </STableHeaderRow>
    <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	header cells जो table के columns को परिभाषित करती हैं। children के रूप में केवल table header components स्वीकार करता है; हर header एक column को दर्शाता है और उसका label प्रदान करता है।
id	string | undefined	element के लिए एक unique identifier।

Slots

Slot	विवरण
default	header cells जो table के columns को परिभाषित करती हैं। children के रूप में केवल table header components स्वीकार करता है; हर header एक column को दर्शाता है और उसका label प्रदान करता है।