javascript - 有没有办法添加一个使用 Material Table React 到每个列标题
问题描述
嗨,我正在尝试向<label></label>
表格的每个单元格添加一个。我在这里使用材料表:https ://material-table.com/#/docs/features/component-overriding
我试过这样:
<Table
onChangePage={handleChangePage}
page={props.currentPage}
totalCount={props.totalCount}
options={{
paging:true,
pageSizeOptions:[10, 15, 25, 50],
pageSize: props.rowsPerPage,
padding: "dense",
search: false,
toolbar:false,
headerStyle: TableHeaderRow, <--- cssproperties
rowStyle:TableRow <--- cssproperties
}}
columns={columns} <--- variable columns:TableColumn[]
data={dataAct} <---- data generated from API
/>
实际上,我定义了headerStyle
in 选项,但我真正想要的是添加一个
<label>
headerValueHere}
</label>
对于每个标题。
我在单元格中添加了标签标记,例如在定义列中使用渲染:
const getDocumentTypeForRow = rowData => {
return (
<Tooltip title={rowData}>
<label style={OpenVulnerabilityDuePatchingCardDetailsElementLabel}>
{rowData}
</label>
</Tooltip>
)
};
const columns: TableColumn<>[] = [
{
title: 'Due Date',
field: 'remediation_due_date',
render: data => getDocumentTypeForRow(data.remediation_due_date)
},
]
但是如何为标题执行此操作???
解决方案
您可以将 JSX 或 HTML 传递给标题
const columns: TableColumn<>[] = [
{
title: <label>Due Date</label>,
field: 'remediation_due_date',
render: data => getDocumentTypeForRow(data.remediation_due_date)
},
]
您可以在此处进行实时编辑并查看结果
https://material-table.com/#/docs/features/styling
columns={[
{
title: <h1>Heading 1</h1>, field: 'name',
cellStyle: {
backgroundColor: '#039be5',
color: '#FFF'
},
headerStyle: {
backgroundColor: '#039be5',
}
},
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
},
]}
推荐阅读
- android - 为什么我们可以通过广播接收器与BLE设备配对,而不显示系统对话框?
- go - Pact-Go 找不到服务器正在运行
- mysql - Sequelize:迁移后无法设置对两个不同表的引用
- javascript - Autodesk Forge:加载 PDF 不会触发 onItemLoadSuccess
- laravel - Laravel:传递的函数 0 的参数太少,而预期的正是 1”
- angular - 是否可以在另一个内部放置一个角材料表?
- windows - Windows 10 在 90 分钟后断开互联网连接
- java - 减少加载 gmail 标头所需的时间
- php - 在同一控制器中将变量从一种方法传递到另一种方法
- node.js - Vue.js 和 Nodejs 的 CORS 问题