Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

93
Visualizações
How to add tooltip to all the dynamically loaded column in material-table

so I am using React material Table in like 70 different components, so I've went and made my custom component that contains the material-table so the shared props are in one place and the different ones are passed as props through my customMaterialTable component

in my different components where I'm using the customMaterialTable comp. the columns prop look like this

columns={[{
            title: 'Internal CODE',
            field: 'mat_code',
            render: (rowData) => (
                <Tooltip title={'Internal CODE'}>
                    <p>{rowData.mat_code}</p>
                </Tooltip>
                ),
                },
                {
                title: 'External CODE',
                field: 'external_mat_code',
                editable: 'never',
                },
                {
                title: 'ENGLISH DESCRIPTION',
                field: 'descr_en',
    }]}

and in my customMaterialComponent I'm passing the props to the original Mateiral-Table like this

columns={columns.map((column) => {
        return {
            ...column,
            cellStyle: {
                backgroundColor: 
                       column?.editable === 'never'
                        ? 'rgba(235, 235, 228, 0.54)'
                        : 'inherit',
                },
            };
       })}

and it is working great but what I want to do is give all the columns a toolTip like in the first one up there

render: (rowData) => (
          <Tooltip title={'Internal CODE'}>
            <p>{rowData.mat_code}</p>
          </Tooltip>
        ),

the problem is if I do it that way, it means I have to do it like 300 times or so in 300 different places or more, I have access to the text that will be in the tooltip title, but I'm not sure how to render the return method:

return {
      ...column,
      cellStyle: {
      backgroundColor: 
      column?.editable === 'never'
      ? 'rgba(235, 235, 228, 0.54)'
      : 'inherit',
            },
      };
    }

inside of it when I console log each column all I found is something like this:

{
    "title": "External CODE",
    "field": "external_mat_code",
    "editable": "never"
}

I think it's more react related than Material-table

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda