Table Componentes

Tabela interativa completa — busca, ordenação, paginação, seleção, colunas e export.

O que é

Transforma uma <table> HTML comum numa grade de dados completa, no estilo DataTables — tudo sem biblioteca externa.

Como funciona

Lê as linhas existentes uma vez (ou busca via sw-table-url) e re-renderiza localmente a cada busca/ordenação/página — não recarrega do servidor a cada interação, a menos que esteja no modo AJAX. Estado (página, ordenação, busca, colunas ocultas) pode persistir no localStorage.

Exemplos

Busca, ordenação e exportar (csv, copy) Ao vivo

Nome	Cargo	Status
Ana Souza	Design	Ativo
Bruno Lima	Backend	Ativo
Carla Dias	Vendas	Férias
Diego Alves	Suporte	Ativo
Elisa Rocha	Marketing	Inativo
Felipe Cruz	Frontend	Ativo

<table sw-table sw-table-search sw-table-sort sw-table-export="csv,copy" sw-table-per="5">
  <thead><tr><th>Nome</th><th>Cargo</th><th>Status</th></tr></thead>
  <tbody>
    <tr><td>Ana Souza</td><td>Design</td><td>Ativo</td></tr>
    <tr><td>Bruno Lima</td><td>Backend</td><td>Ativo</td></tr>
    <tr><td>Carla Dias</td><td>Vendas</td><td>Férias</td></tr>
    <tr><td>Diego Alves</td><td>Suporte</td><td>Ativo</td></tr>
    <tr><td>Elisa Rocha</td><td>Marketing</td><td>Inativo</td></tr>
    <tr><td>Felipe Cruz</td><td>Frontend</td><td>Ativo</td></tr>
  </tbody>
</table>

Seleção com checkbox e visibilidade de colunas Ao vivo

Nome	Cargo	Status
Ana Souza	Design	Ativo
Bruno Lima	Backend	Ativo
Carla Dias	Vendas	Férias

<table sw-table sw-table-select sw-table-colvis sw-table-per="5">
  <thead><tr><th>Nome</th><th>Cargo</th><th sw-table-novis>Status</th></tr></thead>
  <tbody>
    <tr><td>Ana Souza</td><td>Design</td><td>Ativo</td></tr>
    <tr><td>Bruno Lima</td><td>Backend</td><td>Ativo</td></tr>
    <tr><td>Carla Dias</td><td>Vendas</td><td>Férias</td></tr>
  </tbody>
</table>

Populando a partir de uma API (fetch + SW.Table.fromData) Ao vivo

A tabela nasce vazia (só sw-table, sem linhas). O JS busca o JSON e chama SW.Table.fromData() — ela ganha cabeçalho, linhas e todos os recursos (busca/ordenação/export) de uma vez.

// 1. A tabela no HTML nasce vazia:
// <table id="tabelaUsuarios" sw-table sw-table-search sw-table-sort sw-table-export="csv"></table>

const tbl = document.querySelector('#tabelaUsuarios');

fetch('/api/usuarios')
  .then((res) => res.json())
  .then((usuarios) => {
    SW.Table.fromData(
      tbl,
      // Colunas: rótulo + campo do JSON que ela lê
      [
        { label: 'Nome', field: 'nome' },
        { label: 'Cargo', field: 'cargo' },
        { label: 'Status', field: 'status', novis: true },
      ],
      usuarios, // array de objetos: [{ nome, cargo, status }, ...]
    );
  });

// Recarregar depois (ex.: após salvar um registro):
// fetch('/api/usuarios').then(r => r.json()).then(u => SW.Table.fromData(tbl, colunas, u));

Renderizada pelo PHP (foreach) — SWCore só liga em cima Ao vivo

Padrão mais comum em projeto PHP: o servidor já manda a <table> pronta, com todas as linhas. O SWCore não precisa de nenhum dado — só liga em cima do HTML que já existe, sem AJAX nenhum. Cada <td> aceita HTML de verdade, não só texto — dá pra colocar botões, badges, links, o que precisar (aqui, uma coluna de ações com os botões reais do SWCore).

<table sw-table sw-table-search sw-table-sort sw-table-export="csv,copy" sw-table-per="10">
  <thead>
    <tr>
      <th>Nome</th>
      <th>Cargo</th>
      <th>Status</th>
      <th sw-table-nosort sw-table-novis>Ações</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($usuarios as $u): ?>
    <tr>
      <td><?= htmlspecialchars($u['nome']) ?></td>
      <td><?= htmlspecialchars($u['cargo']) ?></td>
      <td><?= htmlspecialchars($u['status']) ?></td>
      <td>
        <a class="sw-btn sw-btn-sm sw-btn-pri" href="/usuarios/<?= $u['id'] ?>/editar">Editar</a>
        <button class="sw-btn sw-btn-sm sw-btn-err" sw-ajax="/usuarios/<?= $u['id'] ?>/excluir" sw-ajax-method="POST" sw-target="#linha-<?= $u['id'] ?>">Excluir</button>
      </td>
    </tr>
    <?php endforeach; ?>
  </tbody>
</table>

Atributos

sw-table-search / sw-table-sort / sw-table-select / sw-table-colvis / sw-table-state

ativam busca, ordenação, seleção com checkbox, visibilidade de colunas e persistência de estado

sw-table-export

lista separada por vírgula: "csv,copy"

sw-table-per

itens por página (padrão 10)

sw-table-per-opts

opções do seletor de itens por página

sw-table-url

endpoint pra modo AJAX (busca/ordena/pagina no servidor)

sw-table-nosort / sw-table-novis (no th)

exclui aquela coluna da ordenação/visibilidade

Variantes

tbl-stripe (automática)

linhas zebradas — ativado por padrão, desative com sw-table-stripe="false"

Eventos

sw:table:search

—

sw:table:sort

—

sw:table:page

—

sw:table:select

{ selected }

API (JavaScript)

SW.Table.reload(el)

—

SW.Table.search(el, texto)

—

SW.Table.export(el, "csv"|"copy")

—

SW.Table.fromData(el, colunas, linhas, opções?)

popula a tabela inteira a partir de dados JS puros, sem precisar de HTML pré-existente

Requisitos

Nenhuma.

Limitações — o que ele não faz

O modo AJAX espera um contrato de resposta específico (JSON com data/total/filtered, ou HTML de linhas prontas) — não se adapta sozinho a qualquer formato de API.

← AnteriorLazy Load Próximo →Content