STableHeader <s-table-header>

Một tiêu đề cột trong bảng. STableHeader là Vue 3 wrapper có type cho web component <s-table-header> của Shopify Polaris.

import { STableHeader } 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 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	Kiểu	Mô tả
format	"base" | "numeric" | "currency"	Định dạng của cột, kiểm soát kiểu hiển thị và căn chỉnh nội dung ô.
listSlot	"primary" | "secondary" | "inline" | "kicker" | "labeled"	Vai trò nội dung của cột này khi bảng hiển thị ở biến thể list trên thiết bị di động.

Slots

Slot	Mô tả
default	Tiêu đề của cột trong biến thể table, và nhãn cho dữ liệu của cột trong biến thể list.