STable <s-table>

Una tabla para datos estructurados, con paginación opcional, un estado de carga y un diseño de lista en pantallas pequeñas. STable es el wrapper de Vue 3 tipado del web component <s-table> de Shopify Polaris.

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

Buenas prácticas

• Usa tablas para los datos que los comerciantes comparan. Las tablas son adecuadas para muchos registros que comparten los mismos atributos y deben revisarse uno al lado del otro. Para una lista sencilla sin nada que comparar, elige un componente más simple.
• Ten en cuenta el diseño de lista en móvil. En móvil, la tabla se convierte en una lista, así que comprueba que tus encabezados y valores se sigan leyendo bien como pares de etiqueta y valor apilados en lugar de una cuadrícula.
• Mantén pocas columnas. Muchas columnas hacen que una tabla sea difícil de revisar y obligan a desplazarse horizontalmente. Muestra solo las columnas que los comerciantes necesitan para su tarea y considera mostrar el resto bajo demanda.
• Escribe encabezados de columna claros. Mantén cada STableHeader breve y descriptivo para que los comerciantes sepan exactamente qué datos contiene la columna.
• Prepárate para conjuntos de datos grandes. Las tablas grandes perjudican el rendimiento y la usabilidad. Activa paginate en cuanto tengas más de unas 50 a 100 filas, o plantéate añadir filtros o búsqueda para que los comerciantes lleguen antes a los registros correctos.

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

Consulta las buenas prácticas de Shopify para <s-table> (en inglés) para ver todas las recomendaciones.

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 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	Tipo	Descripción
hasNextPage	boolean	Si hay una página de datos adicional.
hasPreviousPage	boolean	Si hay una página de datos anterior.
loading	boolean	Si la tabla está en estado de carga, como durante la carga inicial de la página o al cargar la página siguiente en una tabla paginada. Cuando es true, la tabla puede estar en un estado inerte que impide la interacción del usuario.
paginate	boolean	Si se usan controles de paginación.
variant	"auto" | "list"	La variante de diseño del componente de tabla. - list: se muestra siempre como lista. - auto: se muestra automáticamente como tabla en pantallas anchas y como lista en pantallas estrechas.

Events

Event	Tipo
nextpage	Event
previouspage	Event

Escúchalos con listeners del estilo @nextpage en <STable>.

Slots

Slot	Descripción
default	La estructura de tabla que se muestra dentro del componente table, incluidos los encabezados, las filas y las celdas que organizan los datos en formato de cuadrícula.
filters	Filtros adicionales que se muestran en la tabla, como campos de búsqueda u otros componentes de entrada que permiten a los usuarios acotar los datos mostrados.