gpt4 book ai didi

javascript - 有没有办法使用 Material Table React 向每个列标题添加

转载 作者:行者123 更新时间:2023-12-05 05:57:37 32 4
gpt4 key购买 nike

您好,我正在尝试添加 <label></label>到表格的每个单元格。我在这里使用 Material 表: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在选项中,但我真正想要的是添加一个

<label>
headerValueHere}
</label>

对于每个标题。

我在单元格中添加了 label 标签,就像在定义列中使用 render 一样:

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' },
},
]}

关于javascript - 有没有办法使用 Material Table React 向每个列标题添加 <label></label>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68774639/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com