STableHeaderRow <s-table-header-row>

Hàng chứa các tiêu đề cột ở đầu bảng. STableHeaderRow là Vue 3 wrapper có type cho web component <s-table-header-row> của Shopify Polaris.

import { STableHeaderRow } 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 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	Kiểu	Mô tả
children	any	Các ô header định nghĩa các cột của bảng. Chỉ chấp nhận các component table header làm phần tử con, mỗi header đại diện cho một cột và cung cấp nhãn cho cột đó.
id	string | undefined	Định danh duy nhất của phần tử.

Slots

Slot	Mô tả
default	Các ô header định nghĩa các cột của bảng. Chỉ chấp nhận các component table header làm phần tử con, mỗi header đại diện cho một cột và cung cấp nhãn cho cột đó.