STableHeader <s-table-header>

Table का एक column header। STableHeader Shopify के Polaris <s-table-header> web component का typed Vue 3 wrapper है।

import { STableHeader } 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 labels a column. `format` styles cell content (e.g. currency),
           and `listSlot` designates its role when the table falls back to `list` layout. -->
      <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	विवरण
format	"base" | "numeric" | "currency"	column का format, जो cell सामग्री की styling और alignment को नियंत्रित करता है।
listSlot	"primary" | "secondary" | "inline" | "kicker" | "labeled"	mobile devices पर table के list variant में दिखने पर इस column के content की भूमिका।

Slots

Slot	विवरण
default	table variant में column की heading, और list variant में उसके data का label।