SWTable — SW Docs

1. Demo completo

Todos os recursos ativos: busca, ordenação, paginação, exportação CSV/Copiar e visibilidade de colunas.

Nome	Cargo	Departamento	Cidade	Salário	Status
Ana Carolina Silva	UX Designer	Criativo	São Paulo	R$ 8.500	Ativo
Bruno Henrique Santos	Dev Frontend	TI	Curitiba	R$ 11.200	Ativo
Carla Mendes Oliveira	Product Manager	Produto	São Paulo	R$ 15.800	Férias
Diego Costa Ferreira	Dev Backend	TI	Belo Horizonte	R$ 12.400	Ativo
Elena Rodrigues Lima	QA Engineer	TI	Porto Alegre	R$ 9.300	Inativo
Felipe Araújo Lima	DevOps Engineer	TI	Recife	R$ 13.700	Ativo
Gabriela Ferraz Duarte	UX Writer	Criativo	São Paulo	R$ 7.900	Ativo
Hugo Almeida Prado	Analista Financeiro	Financeiro	Brasília	R$ 10.100	Férias
Isabela Nunes Carvalho	Dev Full Stack	TI	Florianópolis	R$ 14.200	Ativo
João Vitor Nascimento	CEO	Diretoria	São Paulo	R$ 42.000	Ativo
Karen Duarte Moreira	Gestora de RH	Pessoas	Campinas	R$ 11.500	Ativo
Lucas Prado Batista	Dev Mobile	TI	Manaus	R$ 10.800	Inativo
Mariana Torres Gomes	Data Analyst	Dados	São Paulo	R$ 13.000	Ativo
Nicolas Souza Ribeiro	Scrum Master	Produto	Curitiba	R$ 12.900	Ativo
Olivia Castro Pereira	Marketing Lead	Marketing	Rio de Janeiro	R$ 11.100	Férias
Pedro Henrique Luz	Infra Engineer	TI	Goiânia	R$ 10.400	Ativo
Rafaela Netto Viana	Business Analyst	Produto	São Paulo	R$ 12.200	Ativo

2. Uso básico

Adicione sw-table em qualquer <table> existente. Busca, ordenação e paginação são ativadas automaticamente.

Desativar recursos individuais:

3. Ordenação e Busca

Ordenação automática em todas as colunas (números são ordenados numericamente). Use sw-table-nosort no <th> para desabilitar uma coluna específica.

// Busca programática
const tabela = document.querySelector('#minha-tabela');
SWTable.search(tabela, 'São Paulo');

// Escutar evento de busca
tabela.addEventListener('sw:table:search', e => {
    console.log('Query:', e.detail.query);
});

// Escutar evento de sort
tabela.addEventListener('sw:table:sort', e => {
    console.log('Coluna:', e.detail.col, 'Direção:', e.detail.dir);
});

4. Exportação

O atributo sw-table-export aceita csv e copy separados por vírgula. A exportação respeita a busca e as colunas visíveis.

5. Seleção de linhas

O atributo sw-table-select adiciona uma coluna de checkboxes com "Selecionar tudo". O evento sw:table:select dispara ao alterar a seleção.

6. Visibilidade de colunas

O atributo sw-table-colvis adiciona o botão de visibilidade para mostrar/ocultar colunas. Use sw-table-novis no <th> para proteger colunas.

7. Server-side AJAX

Use sw-table-url para buscar dados no servidor via AJAX. O SWTable detecta automaticamente se o backend respondeu em JSON ou com fragmento HTML (view PHP).

1. Resposta em JSON (API PHP / Laravel):

{
  "data": [
    {
      "nome": "Sandro",
      "cargo": "Desenvolvedor",
      "acoes": ""
    }
  ],
  "total": 100,
  "filtered": 100
}

8. API JavaScript (SWTable.fromData)

Popule tabelas com arrays JS puros ou objetos JSON dinamicamente.

// Popular com arrays ou objetos
SWTable.fromData('#tabela',
    ['Nome', 'Cargo', 'Cidade'],
    [
        ['Ana Silva', 'Designer', 'São Paulo'],
        ['Bruno Santos', 'Dev Frontend', 'Curitiba']
    ],
    { per: 10, export: 'csv,copy', colvis: true }
);

9. PHP — Integração Completa (foreach, Variáveis & Botões)

O SWTable foi projetado para funcionar perfeitamente com aplicações PHP tradicionais (PHP puro, Laravel Blade, CodeIgniter, Symfony, etc.).

💡 Como o SWTable trata a renderização PHP:

Preservação 100% do HTML e Eventos: Cada célula (<td>) mantém o seu HTML exato. Botões com acionadores inline (ex: onclick="editar(123)"), links com href, formulários e modais funcionam sem perda de escopo ou evento.
Filtro e Busca Inteligente: Ao digitar no campo de busca, o motor filtra apenas o texto visível (textContent), garantindo que nomes de classes CSS (ex: is-suc) ou SVGs não gerem resultados falsos na busca.
Ordenação Limpa: A ordenação reordena os nós mantendo todos os listeners de botões ativos e comparando apenas os valores de texto ou números.
Colunas Especiais de Ações: Utilize sw-table-nosort no <th> para impedir ordenação indevida na coluna de botões e sw-table-novis para evitar que a coluna seja oculta no menu de visibilidade.

10. Quick Reference

Atributo / Método	Padrão	Descrição
`sw-table`	—	Ativa o SWTable no elemento `<table>`.
`sw-table-per`	`10`	Linhas por página.
`sw-table-per-opts`	`10,25,50,100`	Opções do seletor de linhas por página.
`sw-table-export`	—	Habilita botões de exportação (ex: `csv,copy`).
`sw-table-select`	—	Adiciona coluna de checkboxes com seleção múltipla.
`sw-table-colvis`	—	Adiciona botão para exibir/ocultar colunas.
`sw-table-state`	—	Salva preferências de busca/paginação no `localStorage`.
`sw-table-nosort`	—	No `<th>`: desativa a ordenação na coluna.
`sw-table-novis`	—	No `<th>`: impede que a coluna seja ocultada.
`SWTable.fromData()`	—	Popula/atualiza a tabela dinamicamente a partir de dados JS/JSON.

SWTable DataTables-like