STable <s-table>

Un tableau pour les données structurées, avec pagination, état de chargement et affichage en liste sur petits écrans facultatifs. STable est le wrapper Vue 3 typé du web component <s-table> de Shopify Polaris.

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

Bonnes pratiques

• Utilisez les tableaux pour les données que les marchands comparent. Les tableaux conviennent à de nombreux enregistrements qui partagent les mêmes attributs et doivent être parcourus côte à côte. Pour une simple liste sans rien à comparer, choisissez un composant plus simple.
• Prévoyez la disposition en liste sur mobile. Sur mobile, le tableau se transforme en liste : vérifiez que vos en-têtes et vos valeurs restent lisibles sous forme de paires libellé-valeur empilées plutôt que de grille.
• Limitez le nombre de colonnes. De nombreuses colonnes rendent un tableau difficile à parcourir et imposent un défilement horizontal. N'affichez que les colonnes dont les marchands ont besoin pour leur tâche, et envisagez d'afficher le reste à la demande.
• Rédigez des en-têtes de colonnes clairs. Gardez chaque STableHeader court et descriptif pour que les marchands sachent exactement quelles données contient la colonne.
• Anticipez les grands jeux de données. Les grands tableaux nuisent aux performances et à l'ergonomie. Activez paginate dès que vous dépassez environ 50 à 100 lignes, ou envisagez d'ajouter des filtres ou une recherche pour que les marchands atteignent plus vite les bons enregistrements.

<STable paginate hasNextPage>
  <STableHeaderRow>
    <STableHeader>Product</STableHeader>
    <STableHeader format="numeric">Inventory</STableHeader>
  </STableHeaderRow>
  <STableBody>
    <STableRow>
      <STableCell>Snowboard</STableCell>
      <STableCell>24</STableCell>
    </STableRow>
  </STableBody>
</STable>

Consultez les bonnes pratiques de Shopify pour <s-table> (en anglais) pour l'ensemble des recommandations.

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 is the root: it lays out the header row + body and can switch to a
       "list" layout on narrow devices when variant="auto". -->
  <STable variant="auto">
    <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	Type	Description
hasNextPage	boolean	Indique s'il existe une page de données supplémentaire.
hasPreviousPage	boolean	Indique s'il existe une page de données précédente.
loading	boolean	Indique si le tableau est en cours de chargement, par exemple lors du chargement initial de la page ou du chargement de la page suivante d'un tableau paginé. Lorsque cette valeur est true, le tableau peut être dans un état inerte qui empêche toute interaction de l'utilisateur.
paginate	boolean	Indique s'il faut utiliser les contrôles de pagination.
variant	"auto" | "list"	La variante de mise en page du composant table. - list : s'affiche toujours sous forme de liste. - auto : s'affiche automatiquement sous forme de tableau sur les écrans larges et sous forme de liste sur les écrans étroits.

Events

Event	Type
nextpage	Event
previouspage	Event

Écoutez-les avec des listeners de la forme @nextpage sur <STable>.

Slots

Slot	Description
default	La structure du tableau affichée dans le composant table, comprenant les en-têtes, les lignes et les cellules qui organisent les données en grille.
filters	Filtres supplémentaires à afficher dans le tableau, comme des champs de recherche ou d'autres composants de saisie permettant aux utilisateurs d'affiner les données affichées.