STableHeader <s-table-header>

테이블의 열 헤더 하나입니다. STableHeader은(는) Shopify Polaris <s-table-header> web component를 위한 타입이 지정된 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	타입	설명
format	"base" | "numeric" | "currency"	셀 콘텐츠의 스타일과 정렬을 제어하는 열의 형식입니다.
listSlot	"primary" | "secondary" | "inline" | "kicker" | "labeled"	모바일 기기에서 테이블이 list 변형으로 표시될 때 이 열의 콘텐츠 지정입니다.

Slots

Slot	설명
default	table 변형에서는 열의 제목이고, list 변형에서는 해당 데이터의 레이블입니다.