Estoy usando un componente Material ui llamado DataTable, y quiero acceder a un TableCell específico y aplicar una función en su valor
este es el componente DataTable de la interfaz de usuario de Material:
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, };
Mi mesa:
Quiero aplicar una función a todas las TableCell de la columna Curso
Resumiendo lo que quiero es aplicar esta función así en el TableCell del siguiente código en todos los TableCells de la columna Curso de DataTable:
<TableCell align="right"> {row.curso.split('/').map((curs, idx) => ( <p key={idx}>{curs}</p> ))} </TableCell>
Me las arreglé para resolver el problema de esta manera:
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>, }, ];
Agregué un renderCell
en la columna Curso