javascriptreactjsmaterial-uimui-x-data-grid

React - How to access a TableCell from the DataTable component of the MUI X?


I'm using a MUI X 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>

Solution

  • 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