STableHeaderRow <s-table-header-row>

A linha de cabeçalhos de coluna no topo de uma tabela. STableHeaderRow é o wrapper de Vue 3 tipado do web component <s-table-header-row> do Shopify Polaris.

import { STableHeaderRow } from 'polaris-vue-elements'

Exemplo

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	Tipo	Descrição
children	any	As células de cabeçalho que definem as colunas da tabela. Aceita apenas componentes de cabeçalho de tabela como filhos, em que cada cabeçalho representa uma coluna e fornece seu rótulo.
id	string | undefined	Um identificador exclusivo para o elemento.

Slots

Slot	Descrição
default	As células de cabeçalho que definem as colunas da tabela. Aceita apenas componentes de cabeçalho de tabela como filhos, em que cada cabeçalho representa uma coluna e fornece seu rótulo.