-1

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...

8
  • Se lá no seu objeto arrayData você mudar o nome da propriedade id para key, acontece algo diferente? Ficaria key: 1, até key: 5,. Commented 2/12/2022 às 13:36
  • @CésarRodriguez Infelizmente não. Continua do mesmo jeito... Commented 2/12/2022 às 13:43
  • Opa! Comparando com a documentação, acho que o problema está aqui: 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 seria selector: row => row[i],. Teste e diga se funcionou. Commented 2/12/2022 às 13:48
  • Mesmo que i seja uma variável que contém o valor "nome", para acessar a propriedade "nome" do objeto "foo" você precisa fazer foo[i]. Se você fizer foo.i, seu código não interpreta o conteúdo da variável, ele busca uma propriedade literalmente chamada i. Commented 2/12/2022 às 13:51
  • 1
    @CésarRodriguez era exatamente isso! Muito obrigado! Commented 2/12/2022 às 14:15

1 Resposta 1

0

Olá! Conforme a documentação da API, as colunas são definidas por objetos, os quais devem ter uma propriedade selector, cujo valor é uma arrow expression que avalia para a propriedade do objeto de dados que aquela coluna deve exibir.

No seu caso, houve dois erros:

  1. Os nomes dos objetos a serem passados no selector da coluna devem corresponder às propriedades respectivas no objeto-fonte de dados, e JavaScript é case-sensitive. Então, ou você muda sua array do nome das colunas, ou trata elas com um toLowerCase() antes de passar pro selector da coluna. Como a segunda opção vai acoplar o título da coluna (visível ao usuário do site) ao nome da propriedade, vou adotar a primeira opção. É só mudar sua array com os nomes das colunas para os nomes em minúsculas, exatamente como as propriedades da array de dados:
const arrayColumns = [
    'nome',
    'prod_vtex',
    'tipo',
]
  1. Para referenciar uma propriedade de um objeto de forma dinâmica usando uma variável, o javascript não permite a notação com ponto, é necessário usar a notação de colchetes. Veja essa resposta.. Portanto, os selectors da array columns devem ser mapeados assim:
let columns = props.columns.map((i) => {        
    return {
        name: i,
        selector: row => row[i],
        sortable: true,
    }
})

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .