Tabela avançada JavaScript

O que é

É a tabela de painel: lista de clientes, pedidos, produtos, inscritos. Você escreve a tabela normal do HTML (<thead> com os títulos e <tbody> com as linhas) e coloca sw-table nela. Ela ganha sozinha um campo de busca, ordenação por coluna, faixas alternadas (zebra), escolha de quantas linhas por página e a paginação embaixo. Outros recursos — exportar CSV, copiar, imprimir, marcar linhas, esconder colunas, modo celular — você liga com mais atributos.

Precisa do JavaScript do SW Core. O script lê as linhas que já estão no HTML e faz busca, ordem e paginação no navegador, sem recarregar a página. A ordenação entende número e texto em português (acentos contam como a letra sem acento). Os botões de busca, exportar e imprimir usam ícones swi-*, que vêm no pacote complementar. Para milhares de linhas, existe o modo servidor (sw-table-url), que pede cada página ao seu back-end.

Quando usar

• Lista em painel administrativo (clientes, pedidos, estoque) com até algumas centenas de linhas: <table sw-table>.
• Relatório que o cliente leva para o Excel: acrescente sw-table-export="csv".
• Ações em lote (excluir vários, enviar e-mail para vários): sw-table-select.
• Tabela que precisa caber no celular sem arrastar para o lado: sw-table-collapse.
• Milhares de registros no banco: modo servidor com sw-table-url — a busca e a página vêm do seu back-end.

Comece aqui

1. 1

   Coloque o SW Core na página. O segundo CSS traz os ícones da busca e dos botões (lupa, planilha, impressora).

   <link rel="stylesheet" href="swcore/swcore.min.css">
   <link rel="stylesheet" href="swcore/swcore.compl.min.css">
   
   <!-- fim do body -->
   <script src="swcore/swcore.min.js"></script>

2. 2

   Escreva a tabela normal e coloque sw-table. Busca, ordenação e zebra já vêm ligadas. Aqui, 5 linhas por página.

   Cliente	Cidade	Situação	Total
   Ana Souza	Recife	Ativo	R$ 1.240,00
   Bruno Lima	Olinda	Ativo	R$ 380,00
   Carla Dias	Caruaru	Inativo	R$ 2.050,00
   Diego Alves	Recife	Ativo	R$ 95,00
   Elisa Ramos	Petrolina	Ativo	R$ 710,00
   Fábio Torres	Garanhuns	Inativo	R$ 1.480,00
   Gabriela Reis	Recife	Ativo	R$ 560,00
   Heitor Nunes	Olinda	Ativo	R$ 3.200,00

   <table sw-table sw-table-per="5">
     <thead>
       <tr><th>Cliente</th><th>Cidade</th><th>Situação</th><th>Total</th></tr>
     </thead>
     <tbody>
         <tr><td>Ana Souza</td><td>Recife</td><td>Ativo</td><td>R$ 1.240,00</td></tr>
         <tr><td>Bruno Lima</td><td>Olinda</td><td>Ativo</td><td>R$ 380,00</td></tr>
     </tbody>
   </table>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<table sw-table sw-table-per="5" sw-table-export="csv">
  <thead>
    <tr><th>Pedido</th><th>Cliente</th><th>Valor</th><th sw-table-nosort>Ações</th></tr>
  </thead>
  <tbody>
    <tr><td>#1042</td><td>Ana Souza</td><td>349,00</td><td><button sw-btn="ghost rnd pp" aria-label="Editar"><i class="swi-edit"></i></button> <button sw-btn="ghost err rnd pp" aria-label="Excluir"><i class="swi-trash"></i></button></td></tr>
    <tr><td>#1043</td><td>Bruno Lima</td><td>129,00</td><td><button sw-btn="ghost rnd pp" aria-label="Editar"><i class="swi-edit"></i></button> <button sw-btn="ghost err rnd pp" aria-label="Excluir"><i class="swi-trash"></i></button></td></tr>
    <tr><td>#1044</td><td>Carla Dias</td><td>1899,00</td><td><button sw-btn="ghost rnd pp" aria-label="Editar"><i class="swi-edit"></i></button> <button sw-btn="ghost err rnd pp" aria-label="Excluir"><i class="swi-trash"></i></button></td></tr>
  </tbody>
</table>

<table sw-table id="clientes" sw-table-select>…</table>

<script>
  document.getElementById('clientes').addEventListener('sw:table:select', (e) => {
    // e.detail.selected = linhas marcadas, pela posição na lista original do HTML
    // (0 = primeira) — não muda quando a pessoa busca ou ordena
    console.log(e.detail.selected);
  });
</script>

<table id="produtos"></table>

<script>
  SW.Table.fromData(
    '#produtos',                                               // a tabela (ou o elemento)
    ['Produto', 'Estoque', { label: 'Obs.', nosort: true }],   // colunas
    [                                                          // linhas
      ['Café 500g', 42, 'Torra média'],
      ['Café 1kg', 18, 'Torra escura'],
      ['Filtro de papel', 120, '']
    ],
    { per: 10, export: 'csv' }                                 // opcional: vira sw-table-per, sw-table-export…
  );
  // chamar de novo com outras linhas substitui o conteúdo
</script>

<table sw-table
       sw-table-url="/api/clientes"
       sw-table-per="25"
       sw-table-cols='[{"label":"Cliente","field":"nome"},{"label":"Cidade","field":"cidade"}]'>
</table>

<!-- A cada busca, ordem ou troca de página, a tabela chama:
     /api/clientes?page=1&per=25&search=ana&sort=nome&dir=asc
     (sort = o "field" da coluna clicada; search já vem em minúsculas)

     O seu servidor responde JSON num destes formatos:
     { "data": [ {"nome":"Ana","cidade":"Recife"} ], "total": 1840, "filtered": 12 }
     [ {"nome":"Ana","cidade":"Recife"} ]                 (sem total: conta as linhas que vieram)
     { "html": "<tr><td>Ana</td><td>Recife</td></tr>", "total": 1840, "filtered": 12 }

     "total" = quantos existem; "filtered" = quantos batem com a busca.
     Sem sw-table-cols, as colunas são as chaves do 1º registro. -->

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css e swcore.min.js.
• swcore.compl.min.css para os ícones da busca e dos botões extras.
• Tabela com <thead> (títulos) e <tbody> (linhas).
• Modo servidor: um endereço no seu back-end que responda JSON no formato mostrado na receita.

Cuidados — erros comuns

• Tabela sem <thead>/<tbody>: o script não acha as linhas e a tabela fica vazia.
• Valor com "R$" ou ponto de milhar ("R$ 1.240,00") ordena como texto, não como número. Para ordenar certo, deixe o número puro na célula ("1240.00") ou comece a célula pelo número.
• Coluna de botões (editar/excluir) ordenável não faz sentido: coloque sw-table-nosort no <th> dela.
• sw-table-state em duas tabelas sem id na mesma página: elas dividem a mesma memória. Dê um id para cada.
• Chamar SWTable.reload(...): o nome certo é SW.Table.reload(...).
• Esperar que a paginação do navegador aguente 10 mil linhas: todas vão no HTML e pesam. Acima de algumas centenas, use o modo servidor.

O que ele não faz

• Sem sw-table-url, busca/ordem/paginação são feitas com as linhas que já estão no HTML — não busca nada no servidor.
• Não edita células: é para listar. Para editar, abra um formulário (ex.: num Modal) a partir de um botão da linha.
• No modo servidor, o menu de colunas (sw-table-colvis) não lista as colunas, e a ordenação só usa colunas com field em sw-table-cols.