PrimeReact Data table - 如何在单元格上显示工具提示或标题？

Question

我正在使用 prime react 数据 table 显示数据 table，我想显示工具提示或标题，如下图所示，当鼠标悬停在一个单元格上。

我浏览了 Column 组件，但没有找到任何相关关键字来在单元格上显示工具提示或标题，该单元格用于显示数据中的列 table。

代码：

<DataTable
  value={this.state.products3}
  editMode="row"
  dataKey="id"
  onRowEditInit={this.onRowEditInit}
  onRowEditCancel={this.onRowEditCancel}
>
  <Column field="code" header="Code" editor={(props) => this.codeEditor('products3', props)}></Column>
  <Column rowEditor headerStyle={{ width: '7rem' }} bodyStyle={{ textAlign: 'center' }} title='Edit'></Column>
</DataTable>

来源：https://primefaces.org/primereact/showcase/#/datatable/edit

您的回答将不胜感激！

Answer 1

解决此问题的一种方法是为您的列使用自定义正文。像这样：

<Column body={() => <Button icon="pi pi-pencil" className="p-button-rounded p-button-text" tooltip="Here's the tooltip!" />} headerStyle={{ width: '7rem' }} bodyStyle={{ textAlign: 'center' }} title="Edit"></Column>

不幸的是，我无法在设置 rowEditor 属性的同时使它正常工作，如您的示例所示。

PrimeReact Data table - 如何在单元格上显示工具提示或标题？

PrimeReact Data table - How to show tooltip or title on a cell?

jsx

reactjs

primereact