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