Layout

Table

Tabela de dados estilizada para listagens.

Uso

Use o elemento <y-table> no seu HTML:

html

<y-table>  <y-table-header>    <y-table-row>      <y-table-head>Pedido</y-table-head>      <y-table-head>Cliente</y-table-head>      <y-table-head>Status</y-table-head>      <y-table-head>Total</y-table-head>    </y-table-row>  </y-table-header>  <y-table-body>    <y-table-row>      <y-table-cell>#1234</y-table-cell>      <y-table-cell>João Silva</y-table-cell>      <y-table-cell><y-badge variant="success">Pago</y-badge></y-table-cell>      <y-table-cell>R$ 299,90</y-table-cell>    </y-table-row>  </y-table-body></y-table>

Exemplos

Padrão

Importação

Importe todos os componentes ou apenas este:

typescript

// Importar tudoimport '@yampi/ui';// Importar apenas este componenteimport '@yampi/ui/dist/components/table.js';

Acessibilidade

Suporta navegação por teclado
Utiliza atributos ARIA apropriados
focus-visible para indicação de foco