在 table 个单元格内使用 tippyjs-react

Question

我正在尝试在 table 个单元格中使用 tippyjs-react，但没有出现工具提示。

我将工具提示添加到 Cell option in React Table:

Cell: ({ value }) => {
    return (
      <div>
        <Tippy content="Tooltip content">
          <span>{value}</span>
        </Tippy>
      </div>
    );
  }

codesandbox

Answer 1

问题是在您的 Table 组件中您更改 columns 以呈现工具提示，但是您在 useTable 调用之后执行此操作。

所以一个简单的解决方法是将此逻辑放在 useTable 调用之前：

function Table({ columns, data }) {
  for (let i = 0; i < columns.length; i++) {
    columns[i].columns = columns[i].columns.map((column) => ({
      ...column,
      Cell: ({ value }) => {
        return (
          <div>
            <Tippy content="Tooltip content">
              <span>{value}</span>
            </Tippy>
          </div>
        );
      },
    }));
  }

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    columns,
    data,
  });

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

sandbox example

在 table 个单元格内使用 tippyjs-react

Use tippyjs-react inside table cells

reactjs

react-table

tippyjs