Bruno Giovanni

Desenvolvedor

Tabelas editáveis com ReactJS


Hey, povos!

Neste post, vou exemplificar como implementar tabelas editáveis em um sistema web.

Problema

Um software que praticamente ninguém abre mão é o Excel. Pela facilidade em incluir e editar dados, navegando basicamente pelo teclado e quase não precisando do mouse pra nada, as planilhas são as queridinhas de quem trabalha com muitos dados o tempo inteiro.

Principalmente em cargos administrativos e contábeis, onde se você desinstalar o Excel é o fim do mundo para esses profissionais!

Apesar de existirem muitos softwares que visam auxiliar esses profissionais, a maioria prefere continuar nas planilhas pela facilidade de trabalhar com elas. E a maior reclamação em relação a esses softwares é o alto número de cliques para se chegar no lugar que precisa.

cadê o excel!?

Solução

Felizmente, existem algumas bibliotecas que auxiliam na implementação de planilhas, e são bem fáceis de configurar no seu software de gestão e agradar os olhos dos clientes/patrão.

Vou apresentar aqui o Handsontable. Essa biblioteca javascript é bastante completa e, particularmente, gostei bastante de trabalhar com ela.

Com um projeto ReactJS iniciado, vamos instalar o Handsontable:

npm install --save handsontable @handsontable/react

No seu App.js importe o seguinte:

import {HotTable} from '@handsontable/react';
import 'handsontable/dist/handsontable.full.css';

No construtor da classe, declare o seguinte:

this.state = {
data: [],
colHeaders: ['Nome', 'Sexo', 'Planeta'],
settings: {
columns: [
{
data: "name", type: "text", title: 'Nome'
},
{
data: "gender", title: 'Sexo', editor: 'select', selectOptions: ['male', 'female']
},
{
data: "homeplanet", title: 'Planeta', type: "text"
}
]
}
};

O data é onde ficarão os dados para exibição na tabela. Você pode setá-los manualmente ou puxar de alguma API.

O colHeaders é o cabeçalho das colunas. Você pode setar apenas como true e vai aparecer o cabeçalho padrão do Excel. Nesse caso, definimos os nomes das colunas que queremos.

O settings é onde ficará toda a configuração da planilha. No nosso caso, definimos apenas as configurações das colunas, como tipo de dado, e nome do campo.

Agora vamos às funções para preenchimento dos dados. Neste exemplo, vamos utilizar a API do Star Wars e iremos pegar os nomes, gêneros e planetas dos personagens.

_listarPessoas() {
fetch('https://swapi.co/api/people/')
.then((response) => response.json())
.then((responseJson) => {
if (responseJson.count > 0) {
for (let i in responseJson.results) {
this._pegarPlaneta(responseJson.results[i]);
}
}
})
.catch((error) => {
console.error(error);
});
}

_pegarPlaneta(pessoa) {
fetch(pessoa.homeworld)
.then((response) => response.json())
.then((responseJson) => {
let dados = this.state.data;
if (responseJson !== null) {
dados.push({
name: pessoa.name, gender: pessoa.gender,
homeplanet: responseJson.name});
} else {
dados.push({
name: pessoa.name, gender: pessoa.gender,
homeplanet: 'unknow'});
}
this.setState({data: dados});
})
.catch((error) => {
console.error(error);
});
}

E para finalizar, colocamos a tag da planilha no render():

<HotTable data={this.state.data} colHeaders={this.state.colHeaders} settings={this.state.settings} />

Pronto! Agora a planilha será exibida com os dados. Para editar, basta clicar sobre a célula e começar a digitar. As informações editadas serão salvas automaticamente em this.state.data, que pode ser usada para enviar para alguma API, como no exemplo abaixo:

_submeterDados() {
fetch('url/da/sua/api', {
method: 'post',
body: JSON.stringify(this.state.data)
})
.then()
.catch();
}

O código completo está nesse link: https://github.com/brunogiovanni/tabela-editavel

 


Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *