reactjs - 材料表 - 嵌套列
解决方案
是的,它可能与material-table
. 您必须使用 Components 属性来实现这一点。
function App() {
const columns = [...];
const data = [...];
return (
<div className="App">
<MaterialTable
columns={columns}
data={data}
components={{
Header: props => {
return (
<TableHead>
<TableRow>
<TableCell colSpan={2} align="center">
Average A
</TableCell>
<TableCell colSpan={2} align="center">
Average B
</TableCell>
</TableRow>
<TableRow>
<TableCell align="center">Lower</TableCell>
<TableCell align="center">Upper</TableCell>
<TableCell align="center">Lower</TableCell>
<TableCell align="center">Upper</TableCell>
</TableRow>
</TableHead>
);
},
Row: ({ data }) => {
return (
<TableRow>
<TableCell align="center">{data.lowerA}</TableCell>
<TableCell align="center">{data.upperA}</TableCell>
<TableCell align="center">{data.lowerB}</TableCell>
<TableCell align="center">{data.upperB}</TableCell>
</TableRow>
);
}
}}
/>
</div>
);
}
演示: Codesandbox 链接
推荐阅读
- python - 绘制 spearmanr 相关性的树状图时出错
- bluetooth - 扫描识别蓝牙设备
- python - OTB 是否足以评估随机森林或装袋分类器,或者交叉验证也适用于此?
- javascript - 访问未知深度的多级字典中的元素
- c# - 使用 Scrutor 自动解析 DI
- ios - 使用 WKWebView 读取本地存储数据
- angular - 将两个参数传递给 ng 模型 - Typescript
- python - 通过 python 的 SharePoint 结帐文件
- javascript - React Native 嵌套箭头函数和普通箭头函数的区别
- python - 如何使用 Selenium (Python) 查找 title="xyz" 元素