有没有办法使用 Material Table React 将 <label></label> 添加到每个列标题答案

【问题标题】：is there a way to add a <label></label> to every column header using Material Table React有没有办法使用 Material Table React 将 <label></label> 添加到每个列标题
【发布时间】：2021-10-16 20:11:07
【问题描述】：

您好，我正在尝试将<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
/>

其实我在 options 中定义了headerStyle，但我真正想要的是添加一个

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

但是如何对标头执行此操作？？？

【问题讨论】：

标签： javascript reactjs material-ui material-table

【解决方案1】：

您可以将 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' },
        },
      ]}

【讨论】：