使用Material-UI的DataGrid组件，如何在其中一个单元格中创建多层文本？
ZimZimma
我试图在Material-UI的datagrid组件中的一个单元格中有两行单独的文本，其中一行文本位于另一行的顶部，似乎什么也无法工作。这是我尝试过的：
const columns: ColDef[] = [
{
field: "name",
headerName: "Sector",
width: 300,
renderCell: (params) => {
let name = params.data.name
const flow = params.data as IOFlow;
const title = Currency.format(flow.value)
+ " " + props.direction
+ " per " + Currency.format(1);
return (
<>
<Typography fullWidth display='block'>
{name}
</Typography>
<br/>
<Typography fullWidth display='block'>
{title}
</Typography>
</>
);
}
},
];
请让我知道是否还有我应该提供的信息。
瑞安·科格斯威尔（Ryan Cogswell）
主要问题是您不应<>...</>在单元格内容周围使用片段（）。使用一个<div>代替。单元格的样式display: flex将水平排列直接子级（即您的Typography元素）。如果将单元格内容包装在中<div>，内的内容<div>将按预期运行。
这是一个工作示例：
import * as React from "react";
import { DataGrid } from "@material-ui/data-grid";
import Typography from "@material-ui/core/Typography";
const columns = [
{
field: "name",
headerName: "Sector",
width: 300,
renderCell: (params) => (
<div>
<Typography>{params.value.name}</Typography>
<Typography color="textSecondary">{params.value.title}</Typography>
</div>
)
}
];
const rows = [
{
id: 1,
name: { name: "Name1", title: "Title1" }
},
{
id: 2,
name: { name: "Name2", title: "Title2" }
},
{
id: 3,
name: { name: "Name3", title: "Title3" }
}
];
export default function RenderCellGrid() {
return (
<div style={{ height: 300, width: "300" }}>
<DataGrid rows={rows} columns={columns} />
</div>
);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
使用Material-UI的DataGrid组件，如何在其中一个单元格中创建多层文本？
- 2
在Windows窗体中使用SpellCheck ....是否可以将其中一个绑定到datagridview文本单元格？
- 3
在Windows窗体中使用SpellCheck ....是否可以将其中一个绑定到datagridview文本单元格？
- 4
使用2个UICollectionView实例，但其中一个未显示单元格
- 5
Material-UI网站如何在其AppBar中创建一个下拉选择？
- 6
如何使用JavaScript将另一个文本放入单元格中？
- 7
使用输入框为单元格中的每个单词上色，并在其中一次输入多个单词
- 8
如何在R Studio AND SQL中使用限制器将数据中的一个单元格拆分为2个单元格
- 9
Material UI：我可以在DataGrid单元格中使用React组件而不是预定义的单元格类型（“字符串”，“数字”，“日期”，“ dateTime”）吗？
- 10
如何在其中一个图上使用共享 X 轴和多个 Y 轴的堆叠图？
- 11
使用LINQ，其中一个对象属性的值为x，如何在其他属性中返回该值
- 12
如何在使用CSS保留最后一个单元格的水平线的同时从表格中删除单元格分隔线？
- 13
如何在Excel 2010中使用VBA查找连续的最后一个彩色和空白单元格？
- 14
如何在Excel中使用数据透视表对一个单元格中的多个值进行计数？
- 15
使用脚本将特定文本从一个单元格移动到 Google 表格中的另一个单元格
- 16
将使用CONCATENATE创建的链接从一个单元格包含到另一个单元格的IMPORTHTML公式中
- 17
如何在Material UI中的Avatar组件上使用阴影
- 18
如何在仅使用一个单元格的一个视图上设置与在 objc 中选择段按钮不同的 UITableView 单元格宽度
- 19
如何在vba中使用集合来更新另一个单元格与一个单元格的值进行比较
- 20
如何使用存储在相对于另一个单元格中的值的位置中的信息填充一个单元格？
- 21
如何在Material UI菜单中使用Next.js链接（下一个/链接）组件？
- 22
使用数据验证更改一个单元格后，如何自动更新单元格以匹配另一个工作表中的值？
- 23
使用VBA将Excel中两个单元格中的文本合并为一个
- 24
如何使用JavaScript删除表格中的下一个单元格？
- 25
如何使用Python将字符串写入csv中的一个单元格？
- 26
如何使用函数将一个单元格值插入另一个单元格？
- 27
如何使用由数字和文本串联而成的单元格作为另一个单元格计算的输入？
- 28
如何使用Material UI的阴影？
- 29
如何使用来自同一列中前一个单元格的数据填充CSV中的空白单元格？
我来说两句