Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

86
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!