Criei uma tabela usando React Data Table Component. Fiz a tabela como um componente separado, importando-a para o App onde será usada. A princípio, as colunas e os dados da tabela devem ser passados pelo App, já que a ideia é usar o componente tabela também em outros lugares. Sendo assim, criei o App passando as colunas e os dados por props para o componente. O problema é que apenas os nomes das colunas aparecem no cabeçalho da tabela, mas os dados ficam em branco. O engraçado é que as linhas da tabela são criadas, mas os dados não aparecem. No exemplo abaixo, passei um array de dados com 5 objetos e foram criadas 5 linhas na tabela. Porém as linhas ficam em branco. Poderiam me ajudar?
import Tabela from '../../componentes/dataTable';
export function Card(){
const arrayColumns = [
'Nome',
'Prod_vtex',
'Tipo',
]
const arrayData = [
{
id: 1,
nome: 'name01',
prod_vtex: '0001',
tipo: 'tipo1'
},
{
id: 2,
nome: 'name02',
prod_vtex: '0002',
tipo: 'tipo2'
},
{
id: 3,
nome: 'name03',
prod_vtex: '0003',
tipo: 'tipo3'
},
{
id: 4,
nome: 'name04',
prod_vtex: '0004',
tipo: 'tipo4'
},
{
id: 5,
nome: 'name05',
prod_vtex: '0005',
tipo: 'tipo5'
}
]
return(
<div id='tabela'>
<Tabela
columns = {arrayColumns}
data = {arrayData}
/>
</div>
)
}
No componente da Tabela está assim:
import DataTable, { createTheme } from 'react-data-table-component';
const Tabela = (props) => {
createTheme('solarized', {
background: {
default: '#dcdcdc'
},
striped: {
default: '#ffffff',
}
})
const customStyles = {
headCells: {
style: {
backgroundColor: '#000',
color: '#fff',
height: '50px',
fontWeight: 'bold',
fontSize: '15px'
}
},
}
let columns = props.columns.map((i) => {
return (
{
name: i,
selector: row => row.i,
sortable: true,
}
)
})
let data = props.data
return (
<>
<DataTable
columns={columns}
data={data}
pagination
customStyles={customStyles}
theme='solarized'
striped
fixedHeader
fixedHeaderScrollHeight="400px"
highlightOnHover
subHeader
subHeaderComponent={
<input
type='text'
placeholder='Pesquisar'
className='form-control'
/>
}
subHeaderAlign='left'
/>
</>
)
}
export default Tabela
Já tentei criar uma variável para os dados e retornar props.data de uma function, percorrer o array, dentre outras coisas e nada. Se eu der um console.log(data) me retorna um array com os objetos. Enfim, é isso...
arrayData
você mudar o nome da propriedadeid
parakey
, acontece algo diferente? Ficariakey: 1,
atékey: 5,
.selector: row => row.i,
. Em JavaScript, para usar nomes dinâmicos de propriedades, você precisa da notação com colchetes, então creio que o correto seriaselector: row => row[i],
. Teste e diga se funcionou.i
seja uma variável que contém o valor "nome", para acessar a propriedade "nome" do objeto "foo" você precisa fazerfoo[i]
. Se você fizerfoo.i
, seu código não interpreta o conteúdo da variável, ele busca uma propriedade literalmente chamada i.