0
100
ViewsAdd description to table cell
I have a table that has three columns. In one of these columns (in the photo it is in the middle), I would like to add a small description below (for example, the operation system of the device). I tried several options with Grid, but nothing worked for me. Perhaps you can help me?
For a better idea, I marked the desired result in the photo in green
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 answers
Answer question0
I don't know what UI framework you are using, but generally, a TableCell should not be inside another TableCell directly. For your issue, you can create a div inside your center table cell. Set it to display: flex; flex-direction: column. And put your content inside that div.
0
You can try title attribute in HTML element,
Basically, the title attribute gives you the default description box from the browser's end
<tr>
<td title="This is discription" onClick={...} styles={{...}}>
{...}
</td>
</tr>
in your case,you can even try this by targeting element
cell.setAttribute('title', "This is discription");
And yes,
you can not add another <Tablecell/> inside <Tablecell/>
0
Here is a quick snippet that hope it helps (based on some sample code from MUI). Column 2 has what you probably need:
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;
I am using the renderCell method where you can specify what your cell will render. In the 'addTextInCell' function you can have you HTML which in this case is just a simple <div> containing two more <div> which will give you the desired result (you can replace it with anything you want).