Marcador para ActiveTable

Eu escrevo muitos códigos que geram tabelas HTML. Se o código passa a ser muito utilizado, eu o integro com minha biblioteca JavaScript de ordenação de tabelas. (Meu código é baseado na Standardista Table Sorting, de Neil Crosby). Além de ordenação, às vezes é bom ser capaz de ocultar colunas supérfluas. Por exemplo, a página HTTP Archive para a visualização de resultados de um único site (por exemplo, WholeFoods) tem uma tabela com 39 colunas! Eu escrevi algum JavaScript personalizado para permitir personalizar as colunas que foram exibidas. Mas, geralmente, eu gero tabelas que não são ordenáveis e têm colunas fixas.

Acontece que isso é verdade para muitos websites. Todo dia eu visito algumas páginas com uma tabela que eu gostaria que fosse ordenável. Às vezes há tantas colunas que eu gostaria de poder esconder as menos importantes. Isso é especialmente verdadeiro se a minha tela de 13″ é o único do monitor disponível.

Esse problema finalmente tornou-se grande o suficiente para que eu escrevesse um marcador para resolver o problema: activetable.js.

Veja como usá-lo:

1. Adicionar o link do marcador ActiveTable aos seus favoritos. (Arraste-o para a sua barra de favoritos, ou clique com botão direito do mouse no link e o adicione aos favoritos.)

2. Vá para uma página com uma grande tabela. Por exemplo, Show Slow. Uma vez que a página é carregada, clique no marcador ActiveTable. Isso carrega o activetable.js, que faz com que a tabela seja ordenável e personalizável. A linha de cabeçalho da tabela é brevemente destacada em azul para indicar que está ativa.

3. Passe o mouse sobre a coluna que você deseja ordenar ou remover. O widget ActiveTable é exibido:

4. Clique no ícone de ordenação para alternar entre ascendente e descendente. Clique no “X” vermelho para esconder a coluna. Para mostrar todas as colunas, apenas use Alt + clique em qualquer elemento TH.

Outro recurso interessante do ActiveTable é que as colunas que você escolher para ocultar são armazenados em localStorage. A próxima vez que você for para a mesma página e lançar ActiveTable, você será perguntado se quer esconder as mesmas colunas novamente.

Aviso: Eu testei o código apenas no Chrome e no Firefox. Tabelas com células TD que se estendem por várias linhas ou colunas podem não funcionar como esperado.

Você pode testá-lo nestas páginas do mundo real:

• Voting Record For Feinstein – Essa tabela é de 20 páginas e não tem qualquer forma de ordenação.
• World University Rankings – Essa tabela já é ordenável, mas a ordenação da tabela faz com que a página inteira recarregue. ActiveTable não faz ordenação no local, sem uma recarga.
• Imdb All-Time USA Box office – Mesmo que essa tabela tenha 557 linhas, não é ordenável. ActiveTable permite ordenar, mas ordnea o valor do dólar, em ordem alfabética.

Eu adoro ter a minha Web do meu jeito. ActiveTable torna mais agradável para mim percorrer as tabelas enormes que encontro todos os dias.

***

Artigo traduzido pela Redação iMasters, com autorização do autor. Publicado originalmente em http://www.stevesouders.com/blog/2013/07/16/activetable-bookmarklet/