0
104
VistasAgregar descripción a la celda de la tabla
Tengo una tabla que tiene tres columnas. En una de estas columnas (en la foto está en el medio), me gustaría agregar una pequeña descripción a continuación (por ejemplo, el sistema de funcionamiento del dispositivo). Probé varias opciones con Grid, pero nada funcionó para mí. ¿A lo mejor, puedes ayudarme?
Para una mejor idea, marqué el resultado deseado en la foto en verde.
return ( <TableRow sx={TableRowStyle}> <TableCell size='medium' align='left' sx={TableCellIdStyle}> { (props.id === '-') ? "" : <DeleteHidePacketButtonGroup packetReference={null} isHidden={null} /> } </TableCell> <TableCell size='medium' align='left' sx={TableCellIdStyle}>{props.id}</TableCell> /*This TableCell is responsible for the central column */ <TableCell size='medium' align='right' sx={TableCellIdStyle}> { nextPage !== undefined ? <a className="page-links" onClick={showList}>List of {nextPage}</a> : null } </TableCell> </TableRow> );3 Respuestas
Responde la pregunta0
No sé qué marco de interfaz de usuario está utilizando, pero, en general, un TableCell no debe estar directamente dentro de otro TableCell . Para su problema, puede crear un div dentro de la celda de su mesa central. Configúrelo para display: flex; flex-direction: column . Y pon tu contenido dentro de ese div.
0
Puede probar el atributo de title en el elemento HTML. Básicamente, el atributo de título le brinda el cuadro de descripción predeterminado desde el final del navegador
<tr> <td title="This is discription" onClick={...} styles={{...}}> {...} </td> </tr>en su caso, incluso puede probar esto al apuntar al elemento
cell.setAttribute('title', "This is discription"); Y sí, no puede agregar otro <Tablecell/> dentro <Tablecell/>
0
Aquí hay un fragmento rápido que espero que ayude (basado en un código de muestra de MUI). La columna 2 tiene lo que probablemente necesite:
const addTextInCell = () => ( <div> <div>Device 1</div> <div>Android</div> </div> ); const rows = [ { id: 1, col1: "Hello", col2: "World", col3: "Column 1" }, { id: 2, col1: "MUI X", col2: "is awesome", col3: "Column 2" }, { id: 3, col1: "Material UI", col2: "is amazing", col3: "Column 3" } ]; const columns = [ { field: "id", hide: true }, { field: "col1", headerName: "Column 1", width: 150 }, { field: "col2", headerName: "Column 2", width: 150, renderCell: () => addTextInCell() }, { field: "col3", headerName: "Column 3", width: 150 } ]; const TestTable = () => ( <div style={{ height: 300, width: "100%" }}> <DataGrid rows={rows} columns={columns} /> </div> ); export default TestTable; Estoy usando el método renderCell donde puede especificar qué renderizará su celda. En la función 'addTextInCell' puede tener su HTML, que en este caso es solo un <div> simple que contiene dos <div> más que le darán el resultado deseado (puede reemplazarlo con lo que desee).