DataTable on Steroids

[pffreitas]

Guys...

Alguns projetos tem demandado recursos avançados para exibição de dados tabulares. Dada a característica data centric de nossas aplicações isso é esperado.

Tentei elencar abaixo o que considero "recursos avançados" e gostaria de iniciar uma discussão para tomarmos as decisões necessárias para seguirmos com o desenvolvimento.

Infinite Scroll

A ideia aqui é carregar todos os dados, sem paginação, provendo ao usuário uma experiência de continuidade ao explorar os dados. Ou seja, o usuário pode ir do primeiro ao último registro apenas scrolando a tabela.

Temos que ter cuidado com a implementação pois o carregamento de todos os dados pode ser demorado pensando em um caso de um grid de 30k registros, por exemplo. Uma possível saida seria o uso de streams, websockets e outras técnicas de realtime apps.

Com todos os dados no front, o usuário terá uma resposta mais fluida ao navegar pelos dados e executar operações de filtro e ordenação.

Filtro e Ordenação

Proposta de protótipo do componente de ordenação e filtro

Agrupamento de Colunas

Proposta de protótipo para agrupamento de colunas

Agrupamento de Linhas

Proposta de protótipo para agrupamento de linhas

O que vocês acham? Faz sentido?

[marcio]

Pesquisei bastante sobre o assunto nos últimos dias, encontrei algumas implementações usando React que servem como um ponto de partida, são elas:

• http://facebook.github.io/fixed-data-table/

O projeto está parado faz um tempo, tem muitas Issues e PR abertos, mas com certeza é uma referência a se considerar, pois é da mesma galera que criou o React.

• http://davidguttman.github.io/react-pivot/

Projeto até que atual, simples e muito funcional, tem poucas issues abertas e resolve bem o esquema de agrupar os dados.

• http://orbjs.net/

Esse está parado faz tempo e parece fazer coisas demais, porém é bem completo. Tem muitas issues e PR abertos tbm.

• http://adazzle.github.io/react-data-grid/examples.html#/all-features

Esse está bem ativo, faz bastante coisa tbm (até d+), talvez tenha tudo o que precisamos, porém o layout e a forma de agrupamento precise evoluir para o nosso cenário.

• https://github.com/ayrton/react-cluster

Projeto parece estar parado, mas resolve de forma bem simples a questão do scroll.

Alguém tem mais referências?

[pffreitas]

Legal essas referências... acho que podem ser muito úteis como base para codificação.

Mas quanto aos 4 tópicos que eu abordei acima, do ponto de vista funcional, faz sentido?

Precisamos decidir quais funcionaldades ele terá inicialmente e como será seu funcionamento.

[marcio]

Proposta de especificações funcionais.

Primeira Versão:

• [x] A tabela deve trabalhar com os dados no client, e executar todas as funcionalidades localmente;
• [x] O desempenho deve levar em consideração grandes volumes de dados (> 100k linhas)
• [x] Os dados serão "paginados" via scroll (scroll infinito);
• [x] O header da tabela deve ser fixo;
• [x] Deve ser possível agrupar colunas;
• [x] Deve ser possível agrupar linhas;
• [x] Deve ser possível ordenar colunas;
• [x] Deve ser possível passar uma função de formatação para as colunas (datas, dinheiro, imagens, botões, etc);
• [x] Deve ser possível especificar quais atributos dos dados serão mostrados na tabela (nem todos os atributos precisam ser exibido);
• [x] Deve ser possível determinar em que posição na tabela um determinado dado deve ser exibido;
• [x] Deve ser possível criar uma coluna que não está ligada a um dado;
• [x] Deve ser possível criar colunas ou linhas sumarizadas;
• [x] Deve ser possível passar um style ou tamanho para a coluna;
• [x] Filtro por coluna
• [x] O foco da PowerTable será atender os cenários de relatórios e exibição de dados mais complexos, as tabelas de crud padrao não serão consideradas PowerTables

Exemplo imaginário

const meusDados = [
  {
    id:1, 
    name:"John", 
    lastName:"Doe", 
    birthDate:"26/10/1974", 
    hourRate:30, 
    spentTime:82
  },
  {
    id:2, 
    name:"Walter", 
    lastName:"White", 
    birthDate:"28/06/1968", 
    hourRate:50, 
    spentTime:99 
  },
];

function fullNameFormatter(rowData) {
  return `${rowData.name} ${rowData.lastName}`;
}

function totalFormatter(rowData) {
  return rowData.hourRate * spentTime;
}

<PowerTable data='meusDados'>
  <PowerColumn columnTitle='Nome Completo' formatter={fullNameFormatter} />
  <PowerColumn columnTitle='Data de  Nascimento' dataKey='birthDate' noSort />
  <PowerColumn columnTitle='Preço da Hora' dataKey='hourRate' summarized />
  <PowerColumn columnTitle='Horas trabalhadas' dataKey='spentTime' summarized />
  <PowerColumn columnTitle='Total' formatter={totalFormatter} summarized />
</PowerTable>

Resultado

Nome Completo	Data de Nascimento	Preço da Hora	Horas trabalhadas	Total
John Doe	26/10/1974	30	82	2460
Walter White	28/06/1968	50	99	4950
		80	181	7410

---

Ideias para versões futuras:

• [ ] Possibilidade de dar um freeze em uma coluna
• [ ] Possibilidade de escolher entre paginação tradicional ou infinity scroll
• [ ] Possibilitar drag on drop para reordenar as colunas
• [ ] Possibilitar o resize das colunas
• [ ] Possibilitar trabalhar com dados no servidor
• [ ] Edit in place

O que acham?

[pffreitas]

Achei da hora! Me parece fazer bastante sentido.

Só fiquei em dúvida quanto ao filtro:

O filtro será apenas um campo de texto, que filtrará todos os termos em todas as colunas

Não tenho muita segurança de que isso funciona bem como filtro para o usuário. Isso me soa mais como busca e não filtro. Acho que devemos considerar filtro como sendo restrições aplicadas em cima de dados estruturados. Ou seja, o usuário conhece qual coluna e qual valor deseja restringir. Ao contrário da busca, onde ele só conhece um termo aproximado, mas não sabe onde esse termo pode ocorrer.

Na minha opinião essa funcionalidade de filtro é crucial para a percepção de valor pelo usuário.

Enxergo esse componente PowerTable como algo específico voltado para "relatórios" de dados tabulares, algo como uma planilha mesmo. No entanto, ainda teremos a tabela mais simples, usada para listagem de objetos CRUD, por exemplo.

[marcio]

Atualizei a proposta para a primeira versão, fechamos assim? Estamos esquecendo de algo mais?

[marcio]

Foi implementado o Power Sheet