STableRow <s-table-row>

Une ligne de données d'un tableau. STableRow est le wrapper Vue 3 typé du web component <s-table-row> de Shopify Polaris.

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

Exemple

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 listSlot="primary">Order</STableHeader>
      <STableHeader listSlot="secondary">Customer</STableHeader>
      <STableHeader format="currency">Total</STableHeader>
      <STableHeader>Status</STableHeader>
    </STableHeaderRow>
    <STableBody>
      <!-- Each STableRow is one record; its children should be STableCell. -->
      <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	Type	Description
children	any	Les cellules de données affichées dans cette ligne du tableau, chaque cellule contenant le contenu de la colonne correspondante. N'accepte que des composants table cell comme enfants.
clickDelegate	string | undefined	L'ID d'un élément interactif de la ligne, comme s-link, qui sera la cible du clic lorsque la ligne est cliquée. Il s'agit de l'action principale de la ligne ; ne l'utilisez pas pour des actions secondaires. Cette fonctionnalité ne concerne que le clic et n'ajoute aucune prise en charge du clavier ni des lecteurs d'écran. C'est pourquoi l'élément cible doit se trouver dans le tableau : les utilisateurs du clavier et de lecteurs d'écran peuvent ainsi interagir normalement avec lui.

Slots

Slot	Description
default	Les cellules de données affichées dans cette ligne du tableau, chaque cellule contenant le contenu de la colonne correspondante. N'accepte que des composants table cell comme enfants.