Busca, ordenar por coluna, paginar e exportar CSV — tudo automático a partir de um <table> comum.
Pega uma tabela HTML normal e adiciona busca, ordenação por coluna (clicando no cabeçalho), paginação e exportação, sem precisar de dados vindos de API.
Abaixo de sw-table-collapse (largura DO CONTAINER, não da tela), muda pra modo responsivo: mostra só a 1ª coluna + ▸, clicar a linha abre o resto empilhado — sem rolagem lateral.
| Nome | Cargo | Setor | Status |
|---|---|---|---|
| Ana Souza | Designer | Produto | Ativo |
| Bruno Lima | Dev | Engenharia | Férias |
| Carla Dias | PM | Produto | Ativo |
| Diego Alves | Dev | Engenharia | Ativo |
| Elisa Ramos | Suporte | Atendimento | Ativo |
| Fábio Torres | Dev | Engenharia | Afastado |
| Gabriela Reis | Designer | Produto | Ativo |
| Heitor Nunes | Financeiro | Administrativo | Ativo |
Clique nos cabeçalhos pra ordenar, use a busca, troque de página. A coluna Status está travada (sw-table-nosort).
<table sw-table sw-table-per="10">
<thead>
<tr><th>Nome</th><th>Cargo</th><th sw-table-nosort>Status</th></tr>
</thead>
<tbody>
<tr><td>Ana Souza</td><td>Designer</td><td>Ativo</td></tr>
</tbody>
</table>
<!-- busca, ordenação e zebra já vêm ligadas -->| Produto | Categoria | Preço |
|---|---|---|
| Teclado mecânico | Periféricos | R$ 349,00 |
| Monitor 27" | Telas | R$ 1.899,00 |
| Mouse sem fio | Periféricos | R$ 129,00 |
| Webcam HD | Vídeo | R$ 289,00 |
| Headset | Áudio | R$ 459,00 |
| Suporte de monitor | Acessórios | R$ 179,00 |
<table sw-table
sw-table-per="10"
sw-table-per-opts="5,10,25,50"
sw-table-export="csv"
sw-table-print>
…
</table>
<!-- sem sw-table-per-opts, o seletor oferece 10, 25, 50 e 100 -->| Pedido | Cliente | Valor | ID |
|---|---|---|---|
| #1042 | Ana Souza | R$ 349,00 | a1 |
| #1043 | Bruno Lima | R$ 129,00 | b2 |
| #1044 | Carla Dias | R$ 1.899,00 | c3 |
| #1045 | Diego Alves | R$ 289,00 | d4 |
A coluna ID não aparece no menu de colunas (sw-table-novis).
<table sw-table sw-table-select sw-table-colvis>
<thead>
<tr><th>Pedido</th><th>Cliente</th><th sw-table-novis>ID</th></tr>
</thead>
…
</table>
<script>
tabela.addEventListener('sw:table:select', (e) => {
console.log('linhas marcadas:', e.detail);
});
</script>| Cidade | Estado | Habitantes |
|---|---|---|
| Recife | PE | 1.653.461 |
| Olinda | PE | 393.115 |
| Caruaru | PE | 369.343 |
| Petrolina | PE | 354.317 |
| Jaboatão | PE | 706.867 |
Com sw-table-state: ordene ou busque, saia da página e volte — ele lembra.
<!-- sem a zebra -->
<table sw-table sw-table-stripe="false">…</table>
<!-- lembra busca, ordem e página entre visitas -->
<table sw-table sw-table-state>…</table>sw-table-collapse mede a largura do contêiner, não da tela. Abaixo dela, a tabela mostra só a primeira coluna com um ▸; clicar na linha abre o resto empilhado.
É melhor do que rolagem lateral: ninguém precisa arrastar a tabela pro lado pra ler.
<table sw-table sw-table-collapse="760">
…
</table>
<!-- abaixo de 760px DE CONTÊINER, vira lista empilhada -->Sem demonstração visual — é uma chamada de JavaScript. Veja o código ao lado.
SWTable.fromData(
document.querySelector('#minhaTabela'),
['Nome', 'Cargo', { label: 'Status', nosort: true }],
[
['Ana Souza', 'Designer', 'Ativo'],
['Bruno Lima', 'Dev', 'Férias']
]
);
// outras chamadas
SWTable.search(tabela, 'ana');
SWTable.export(tabela, 'csv');
SWTable.reload(tabela);sw-table-persw-table-per-optssw-table-searchsw-table-exportsw-table-printsw-table-stripesw-table-selectsw-table-colvissw-table-statesw-table-collapsesw-table-nosort (no <th>)sw-table-novis (no <th>)(sem nada)sw-table-selectsw-table-colvissw-table-statesw-table-collapse="760"sw:table:sortsw:table:searchsw:table:pagesw:table:selectSWTable.reload(el)SWTable.search(el, texto)SWTable.export(el, "csv")SWTable.fromData(el, colunas, linhas)Nenhuma.
