• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

307
Views
React - How to access a TableCell from the DataTable component of the Material UI?

I'm using a Material ui component called DataTable, and I want to access a specific TableCell and apply a function on its value

this is the DataTable component of the Material UI:

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { PropTypes } from 'prop-types';

export default function DataTable({ rows, columns, func }) {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        // checkboxSelection
        onCellClick={func}
      />
      {/* finalClickInfo &&
        `Final clicked id = ${finalClickInfo.id},
        Final clicked field = ${finalClickInfo.field},
      Final clicked value = ${finalClickInfo.value}` */}
    </div>
  );
}

DataTable.defaultProps = {
  func: () => {},
};

DataTable.propTypes = {
  rows: PropTypes.arrayOf(
    PropTypes.shape({
      conteudo: PropTypes.string,
      disciplina: PropTypes.string,
      curso: PropTypes.string,
      data: PropTypes.string,
    })
  ).isRequired,
  // eslint-disable-next-line react/forbid-prop-types
  columns: PropTypes.array.isRequired,
  func: PropTypes.func,
};

My Table:

enter image description here

I want to apply a function to all TableCell of the Curso column

Summarizing what I want is to apply this function like this in the TableCell of the code below in all the TableCells of the Curso column of the DataTable:

<TableCell align="right">
  {row.curso.split('/').map((curs, idx) => (
  <p key={idx}>{curs}</p>
  ))}
</TableCell>
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

I managed to solve the problem this way:

import React from 'react';
import Button from '@material-ui/core/Button';
import TableCell from '@material-ui/core/TableCell';

export const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'disciplina', headerName: 'Disciplina', width: 100 },
  {
    field: 'curso',
    headerName: 'Curso',
    width: 130,
    renderCell: (params) => (
      <TableCell align="right">
        {params.row.curso.split('/').map((curs, idx) => (
          // eslint-disable-next-line react/no-array-index-key
          <p key={idx}>{curs}</p>
        ))}
      </TableCell>
    ),
  },
  {
    field: 'data',
    headerName: 'Data',
    type: 'date',
    width: 130,
  },
  {
    field: 'accao',
    headerName: 'Acção',
    sortable: false,
    width: 130,
    disableClickEventBubbling: true,
    renderCell: () => <Button size="small">Ver Sumário</Button>,
  },
];


I added a renderCell in the Curso column

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error