1.0.1 • Published 2 years ago
react-actiontable v1.0.1
Introdução
react-actiontable
Componente React para visualização de dados em tabela. Possui suporte a paginação, busca, registros por página e fonte remota de dados. Permite a customização de ações para cada um dos registros retornados pelo endpoint ou da propriedade data. É baseado em Bootstrap 4, Superagent e FontAwesome.
Live Preview
Instalação
Via NPM:
npm install react-actiontable
Utilização
import React from 'react';
import ReactDOM from 'react-dom/client';
import ActionTable from 'react-actiontable';
import "bootstrap/dist/css/bootstrap.css";
import "react-actiontable/dist/css/actiontable.css";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<ActionTable
endpoint="http://actiontable.free.beeceptor.com"
data={ data }
/>
</React.StrictMode>
);
API
\<ActionTable \/>
Renderiza uma tabela para visualização e controle dos dados.
Exemplos
Exemplos Mínimos
Dados Estáticos
/* ... */
const data = [
"Banana", "Laranja", "Limão", /* ... */
]
/* ... */
<ActionTable data={data} />
/* ... */
Dados Remotos
/* ... */
const endpoint = "http://myendpoint.com";
/* ... */
<ActionTable endpoint={endpoint} onUpdate={data => console.log(data)} />
/* ... */
Exemplo Completo
/* ... */
const data = {
headers: [
{
title: "Nome",
order: "nome"
},
{
title: "E-mail",
order: "email"
}
],
rows: [
{
columns: [
"Harvey Auer DVM", "Glen.Gislason@hotmail.com"
]
actions: [
{
title: "Edit",
id: 1 //Parâmetro personalizado
},
{
title: "Delete",
id: 1 //Parâmetro personalizado
}
]
},
/* ... */
]
count: 99
}
/* ... */
<ActionTable
data={data}
onAction={(action, update) => asyncAction(action).then(update)}
getActionButtonComponent={action => props => <button {...props}>{action.title}</button>}
/>
/* ... */
Licença
MIT
Autor
Luiz Alfredo Galiza alfredogaliza@gmail.com
Engenheiro da Computação formado pela Universidade Federal do Pará, trabalha há mais de 20 anos na área de programação. É oficial do Corpo de Bombeiros Militar e atualmente coordena a equipe de desenvolvimento de sistemas da Secretaria de Segurança Pública do Pará.