STableHeaderRow <s-table-header-row>

La fila de encabezados de columna en la parte superior de una tabla. STableHeaderRow es el wrapper de Vue 3 tipado del web component <s-table-header-row> de Shopify Polaris.

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

Ejemplo

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	Descripción
children	any	Las celdas de encabezado que definen las columnas de la tabla. Solo acepta componentes de encabezado de tabla como hijos; cada encabezado representa una columna y proporciona su etiqueta.
id	string | undefined	Un identificador único para el elemento.

Slots

Slot	Descripción
default	Las celdas de encabezado que definen las columnas de la tabla. Solo acepta componentes de encabezado de tabla como hijos; cada encabezado representa una columna y proporciona su etiqueta.