STable <s-table>

Uma tabela para dados estruturados, com paginação opcional, um estado de carregamento e um layout de lista em telas pequenas. STable é o wrapper de Vue 3 tipado do web component <s-table> do Shopify Polaris.

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

Boas práticas

• Use tabelas para dados que os lojistas comparam. Tabelas são adequadas para muitos registros que compartilham os mesmos atributos e precisam ser analisados lado a lado. Para uma lista simples sem nada para comparar, escolha um componente mais simples.
• Planeje para o layout de lista no mobile. No mobile, a tabela vira uma lista, então verifique se os cabeçalhos e os valores continuam legíveis como pares de rótulo e valor empilhados, em vez de uma grade.
• Mantenha poucas colunas. Muitas colunas tornam a tabela difícil de percorrer e forçam a rolagem horizontal. Mostre apenas as colunas de que os lojistas precisam para a tarefa e considere revelar o restante sob demanda.
• Escreva cabeçalhos de coluna claros. Mantenha cada STableHeader curto e descritivo para que os lojistas saibam exatamente quais dados a coluna contém.
• Planeje para grandes conjuntos de dados. Tabelas grandes prejudicam o desempenho e a usabilidade. Ative paginate quando houver mais de cerca de 50 a 100 linhas, ou pense em adicionar filtros ou busca para que os lojistas cheguem aos registros certos mais rápido.

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

Veja as boas práticas da Shopify para <s-table> (em inglês) para todas as recomendações.

Exemplo

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	Descrição
hasNextPage	boolean	Se existe uma página de dados adicional.
hasPreviousPage	boolean	Se existe uma página de dados anterior.
loading	boolean	Se a tabela está em estado de carregamento, como no carregamento inicial da página ou ao carregar a próxima página em uma tabela paginada. Quando true, a tabela pode ficar em estado inerte, o que impede a interação do usuário.
paginate	boolean	Se os controles de paginação devem ser usados.
variant	"auto" | "list"	A variante de layout do componente de tabela. - list: sempre exibe como layout de lista. - auto: exibe automaticamente como tabela em telas largas e como lista em telas estreitas.

Events

Event	Tipo
nextpage	Event
previouspage	Event

Escute-os com listeners no estilo @nextpage em <STable>.

Slots

Slot	Descrição
default	A estrutura da tabela exibida dentro do componente de tabela, incluindo cabeçalhos, linhas e células que organizam os dados em formato de grade.
filters	Filtros adicionais exibidos na tabela, como campos de pesquisa ou outros componentes de entrada que permitem aos usuários refinar os dados exibidos.