Hi I am trying to add a <label></label> to every cell of table. I am using Material table here: https://material-table.com/#/docs/features/component-overriding
I tried like this:
<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
/>
Actually, I defined the headerStyle in options, but what I really want is adding a
<label>
headerValueHere}
</label>
for every header.
I added label tag to cells like using render in defining columns:
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)
},
]
But how to do this for headers???
You may pass JSX or HTML to title
const columns: TableColumn<>[] = [
{
title: <label>Due Date</label>,
field: 'remediation_due_date',
render: data => getDocumentTypeForRow(data.remediation_due_date)
},
]
You may do live editing here and see the results
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' },
},
]}