STable <s-table>

Eine Tabelle für strukturierte Daten, optional mit Paginierung, Ladezustand und Listenlayout auf kleinen Bildschirmen. STable ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-table>.

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

Best Practices

• Tabellen für Daten, die Händler vergleichen. Tabellen eignen sich für viele Datensätze mit denselben Attributen, die nebeneinander überflogen werden müssen. Für eine einfache Liste ohne Vergleich wählen Sie eine einfachere Komponente.
• Das mobile Listenlayout einplanen. Mobil wird die Tabelle zu einer Liste. Prüfen Sie daher, ob Ihre Header und Werte auch als gestapelte Label-Wert-Paare statt als Raster gut lesbar sind.
• Wenige Spalten verwenden. Viele Spalten machen eine Tabelle schwer überfliegbar und erzwingen horizontales Scrollen. Zeigen Sie nur die Spalten, die Händler für ihre Aufgabe brauchen, und erwägen Sie, den Rest bei Bedarf einzublenden.
• Klare Spaltenüberschriften schreiben. Halten Sie jeden STableHeader kurz und aussagekräftig, damit Händler genau wissen, welche Daten die Spalte enthält.
• Große Datenmengen einplanen. Große Tabellen beeinträchtigen Performance und Benutzbarkeit. Aktivieren Sie paginate ab etwa 50 bis 100 Zeilen oder erwägen Sie Filter oder eine Suche, damit Händler schneller zu den richtigen Datensätzen gelangen.

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

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-table> (auf Englisch).

Beispiel

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	Typ	Beschreibung
hasNextPage	boolean	Ob es eine weitere Datenseite gibt.
hasPreviousPage	boolean	Ob es eine vorherige Datenseite gibt.
loading	boolean	Ob sich die Tabelle in einem Ladezustand befindet, etwa beim ersten Laden der Seite oder beim Laden der nächsten Seite in einer paginierten Tabelle. Bei true kann die Tabelle inert sein, was Benutzerinteraktionen verhindert.
paginate	boolean	Ob Paginierungs-Steuerelemente verwendet werden.
variant	"auto" | "list"	Die Layout-Variante der Tabellenkomponente. - list: Wird immer als Listenlayout angezeigt. - auto: Wird auf breiten Bildschirmen automatisch als Tabelle und auf schmalen Bildschirmen als Liste angezeigt.

Events

Event	Typ
nextpage	Event
previouspage	Event

Auf diese Events lauschen Sie mit Listenern im Stil von @nextpage auf <STable>.

Slots

Slot	Beschreibung
default	Die Tabellenstruktur innerhalb der Table-Komponente, einschließlich Tabellenköpfen, Zeilen und Zellen, die Daten in Rasterform organisieren.
filters	Zusätzliche Filter, die in der Tabelle angezeigt werden, etwa Suchfelder oder andere Eingabekomponenten, mit denen Nutzer die angezeigten Daten eingrenzen können.