Módulo / table-dynamic
Este módulo será utilizado para gerar uma tabela dinâmica.
Install Package
$ npm i table-dymanic
Install Package BootStrap.
$ npm i bootstrap
Import
$ import Table from 'table-dymanic'
Configuração de exibição da Table.
| Propriedade | Ação | Tipo |
|---|
| checkbox | Exibe a caixa de marcação "Checked" OR "Unchecked". | Boolean |
| chkAll | Exibe a caixa de marcação para todos os itens da lista. "Checked All" OR "Unchecked All". | Boolean |
| viewHeader | Exibe o titulo da tabela. | Boolean |
| rowSelect | Marca a linha que o usuário selecionar. | var |
| chgCheck | Função utilizada para marcar ou desmarcar, tendo como parâmetro row e o chk. | function |
| unchkAll | Função utilizada para marcar ou desmarcar todos os itens da tabela, tendo como parâmetro row. | function |
| select | Função utilizada capturar os dados da tabela, tendo como parâmetro a row. | function |
Exemplo da Configuração da tabela.
const config = {
checkbox : true,
chkAll : true,
viewHeader: true,
rowSelect : 'variável que recebe o valor da linha selecionada',
chgCheck : (row, chk) => {'Aqui será utilizado a lógica para marcar ou desmarcar a check-box. '},
unchkAll : (chk) => {'Aqui será utilizado a lógica para desmarcar todos os itens da tabela.'},
select : (row) => {'Aqui será utilizado a lógica de seleção de linha. '}
}
Exemplo da Configuração do columns .
| Propriedade | Ação | Tipo |
|---|
| data | Recebe o valor do dado a ser exibido. | string |
| text | Apresenta o titulo da tabela. | string |
| hidden | Oculta as informações da tabela, como padrão ele é false. | boolean |
| Key | Define o valor como chave primaria da linha | boolean |
Array JSON elementos a serem utilizado para exibição da tabela.
const config_columns = () => {
return [
{ data: "1" , text: "ID" , hidden: true, key: true },
{ data: "James Sulivar" , text: "Nome" },
{ data: "29" , text: "IDADE" }
]
}
Propriedades do component Table.
| Propriedade | Ação | Tipo |
|---|
| disabled | Ativa ou desativa a seleção da tabela. | Boolean |
| data | Recebe os dados para exibição da tela. | Boolean |
| columns | Recebe a formatação da tabela. | function |
| config | Recebe a configuração da tabela. | const |
Exemplo do Component Table.
<Table disabled={false} data={'coleção de dados'} columns={'function()'} config={'const'} />
Código exemplo table sem filtro.
import React, { useState } from 'react'
import Table from 'table-dymanic'
/*
Obs: Este Array de dados Json representa as colunas dos dados que você deseja aparesentar.
Ou seja o data representa o dado, text representa a coluna a ser exibida na tela e o hidden será utilizado para ocultar a coluna.
Como padrão o hidden ele é false, caso você queira especificar o valor não será alterado, ele só será alterado caso você especifique ele como true.
*/
var columns = [
{ data: "objID" , text: "objID" , hidden: true, key: true },
{ data: "name" , text: "Nome" },
{ data: "age" , text: "Idade" , hidden: false },
{ data: "car" , text: "Carro" , hidden: false },
{ data: "casa" , text: "Casa" , hidden: true },
{ data: "filhos" , text: "Filhos" , hidden: true },
{ data: "cachorro" , text: "Cachorro" , hidden: true }
]
function Teste() {
const [sFile, setFile] = useState()
//Obs: A coluna chk, representa o valor do check-box, caso o usuário queira a tabela com check-box, caso contrario pode ser removido.
const [data, setData] = useState(
[
{ objID: 'a26f7850-44c6-4a76-a8d8-f83208a7d5b5', name: "John" , age: 30, car: "santana" , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'f69bc240-074d-4a11-8798-8c3bec626cb8', name: "José" , age: 30, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'fd568840-c909-4cd5-9eff-ed2eab30c61d', name: "Maria" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'cc3f48f5-c3d3-4872-9c1a-5d713a752d8a', name: "Paulo" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '1ebdfa0a-947c-4d65-b686-6f3907240c7f', name: "Pedro" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'b14717e7-46d9-4433-939b-1a1af2926f54', name: "Layla" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '7696fbb2-f84e-4b61-84a8-58944c8e47b5', name: "Michel" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'c33f858a-e5fc-492e-b8e1-ed640f5cbdd9', name: "Jake" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '8a26f1ee-d2ef-4217-803a-4777cbc4326a', name: "Marco" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '04cb5331-85f7-414c-a0ff-79fa9ea18dbd', name: "Adriane" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'a4f1db65-14f1-47d2-a43f-20b454f9daf3', name: "Hudson" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'ca68d793-71ae-47d6-a04e-eaf1cf7fd998', name: "Erika" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '9dabf612-b739-44e2-8aca-f122507bd7d0', name: "Patricia" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'd6efda62-c4f4-4ffb-b63b-c54c003660c1', name: "Niagara" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '3aff1951-2c0d-462c-b258-42944e55d2f4', name: "Paola" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '50173dc0-cb1a-410f-b353-97671d815c62', name: "Paolina" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '46ce232a-8bb8-4e5d-8827-130a328cb305', name: "James" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'd37a41d6-d42c-4509-883b-f13715280b07', name: "Diemes" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'ee7d1c49-466f-4214-85c0-5c021dbe5e89', name: "Alex" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '6d50f472-10a6-446e-a86e-0849e1aede25', name: "Rafaela" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '40bb7387-f477-4f44-911c-dc096c6bc747', name: "Rafaely" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '83f9ed1f-9fbf-41f4-af60-50663fc59324', name: "Lisley" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '445e0e04-8770-42bb-a8a3-545ae5677846', name: "Jean" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '7b07ca61-5b58-47c0-889f-a962bed3dfc9', name: "Antonisia", age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '8e14f3b0-2a8d-41c6-80a6-2e38ee546c76', name: "José Rosa", age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '5d116b0a-4fe8-46cf-96aa-510f37fd0688', name: "Cristina" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'e36bff49-4e20-4f4b-8191-f48819eedbeb', name: "Isabela" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'c682a503-1e5f-4b19-a296-af799001abe6', name: "Elisete" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'e864a308-f2ad-4225-8871-3dbb3500d57a', name: "Adenilson", age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '32bca2bb-5097-4bc1-9d13-c50980c96451', name: "Júlio" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'b78c5efa-a30f-4102-ba7b-62b09d4a852d', name: "Henrique" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '2fdffa7e-531d-40f0-9a1e-7c9b8757a8b3', name: "Fernando" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '185e9f74-61f5-4ea6-8ecf-8c77e13be5ab', name: "Fernanda" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'ef6cded3-7b3e-46d5-bc66-6f1febe7f26d', name: "Juliana" , age: 40, car: null , casa: true, filhos: true, cachorro: false, primos: true, chk: true }
]
)
const cnfg = {
checkbox: true,
chkAll: true,
viewHeader: true,
rowSelect: sFile,
chgCheck: (row, chk) => {
console.log(row);
console.log(chk);
let newDate = data.map(obj => {
if (obj.objID === row.objID)
obj.chk = chk;
return obj
})
console.log(newDate)
setData(newDate);
},
unchkAll: (chk) => {
console.log(chk);
let newDate = undefined;
if (chk === true)
newDate = data.map(obj => { obj.chk = true; return obj })
else
newDate = data.map(obj => { obj.chk = false; return obj })
setData(newDate)
},
select: (row) => { setFile(row); console.log(row) }
}
return (
<Table disabled={false} data={data} columns={columns} config={cnfg} />
)
}
export default Teste
Código exemplo table com filtro.
import React, { useState } from 'react'
import { Table, FilterTable } from 'table-dymanic'
function Teste() {
const [sFile, setFile] = useState()
const [data, setData] = useState(
[
{ objID: 'a26f7850-44c6-4a76-a8d8-f83208a7d5b5', name: "John" , age: 30, car: "santana", casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'f69bc240-074d-4a11-8798-8c3bec626cb8', name: "José" , age: 30, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'fd568840-c909-4cd5-9eff-ed2eab30c61d', name: "Maria" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'cc3f48f5-c3d3-4872-9c1a-5d713a752d8a', name: "Paulo" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '1ebdfa0a-947c-4d65-b686-6f3907240c7f', name: "Pedro" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'b14717e7-46d9-4433-939b-1a1af2926f54', name: "Layla" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '7696fbb2-f84e-4b61-84a8-58944c8e47b5', name: "Michel" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'c33f858a-e5fc-492e-b8e1-ed640f5cbdd9', name: "Jake" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '8a26f1ee-d2ef-4217-803a-4777cbc4326a', name: "Marco" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '04cb5331-85f7-414c-a0ff-79fa9ea18dbd', name: "Adriane" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'a4f1db65-14f1-47d2-a43f-20b454f9daf3', name: "Hudson" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'ca68d793-71ae-47d6-a04e-eaf1cf7fd998', name: "Erika" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '9dabf612-b739-44e2-8aca-f122507bd7d0', name: "Patricia" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'd6efda62-c4f4-4ffb-b63b-c54c003660c1', name: "Niagara" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '3aff1951-2c0d-462c-b258-42944e55d2f4', name: "Paola" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '50173dc0-cb1a-410f-b353-97671d815c62', name: "Paolina" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '46ce232a-8bb8-4e5d-8827-130a328cb305', name: "James" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'd37a41d6-d42c-4509-883b-f13715280b07', name: "Diemes" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'ee7d1c49-466f-4214-85c0-5c021dbe5e89', name: "Alex" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '6d50f472-10a6-446e-a86e-0849e1aede25', name: "Rafaela" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '40bb7387-f477-4f44-911c-dc096c6bc747', name: "Rafaely" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '83f9ed1f-9fbf-41f4-af60-50663fc59324', name: "Lisley" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '445e0e04-8770-42bb-a8a3-545ae5677846', name: "Jean" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '7b07ca61-5b58-47c0-889f-a962bed3dfc9', name: "Antonisia" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '8e14f3b0-2a8d-41c6-80a6-2e38ee546c76', name: "José Rosa" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '5d116b0a-4fe8-46cf-96aa-510f37fd0688', name: "Cristina" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'e36bff49-4e20-4f4b-8191-f48819eedbeb', name: "Isabela" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'c682a503-1e5f-4b19-a296-af799001abe6', name: "Elisete" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'e864a308-f2ad-4225-8871-3dbb3500d57a', name: "Adenilson" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '32bca2bb-5097-4bc1-9d13-c50980c96451', name: "Júlio" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'b78c5efa-a30f-4102-ba7b-62b09d4a852d', name: "Henrique" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '2fdffa7e-531d-40f0-9a1e-7c9b8757a8b3', name: "Fernando" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: '185e9f74-61f5-4ea6-8ecf-8c77e13be5ab', name: "Fernanda" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
{ objID: 'ef6cded3-7b3e-46d5-bc66-6f1febe7f26d', name: "Juliana" , age: 40, car: null, casa: true, filhos: true, cachorro: false, primos: true, chk: true },
]
)
const columns = [
{ data: "objID" , text: "objID" , hidden: true, key: true },
{ data: "name" , text: "Nome" },
{ data: "age" , text: "Idade" , hidden: false, header_config : () => {return { width: 120, align_itens: "left" }} },
{ data: "car" , text: "Carro" , hidden: false },
{ data: "casa" , text: "Casa" , hidden: true },
{ data: "filhos" , text: "Filhos" , hidden: true },
{ data: "cachorro" , text: "Cachorro" , hidden: true },
// { data: "primos" , text: "Ativo" , hidden: false, funct: (date) => { return date === 1 ? "ATIVO" : "DESATIVADO" } }, /// Fase de construção .
]
const cnfg = {
checkbox : true,
chkAll : true ,
viewHeader : true,
rowSelect : sFile,
chgCheck: (row, chk) => {
console.log(row);
console.log(chk);
let newDate = data.map(obj => {
if (obj.objID === row.objID)
obj.chk = chk;
return obj
})
console.log(newDate)
setData(newDate);
},
unchkAll: (chk) => {
console.log(chk);
let newDate = undefined;
if (chk === true)
newDate = data.map(obj => { obj.chk = true; return obj })
else
newDate = data.map(obj => { obj.chk = false; return obj })
setData(newDate)
},
select: (row) => { setFile(row); console.log(row) }
}
return (
<div>
<FilterTable upDate={setData} width={350} position="right">
<Table disabled={false} data={data} columns={columns} config={cnfg} />
</FilterTable>
</div>
)
}
export default Teste