如何在Tanstack表格中显示图像和链接？

问：

我正在尝试使用 Tanstack 库在表格中显示图像和链接，但没有进入 UI。在名称列中，我想添加链接并显示图像。图像在 react 数据表中正确显示。想要移动到 tanstack 表。

同时单击操作中的图标，无法打开下拉列表。相同的逻辑在 React DataTable 中工作，但在这里不起作用。我附上了名称和 Dps UI 的图像。如何解决此问题并成功在Tanstack表中显示图像和链接？

这是我的代码

const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const [selectedRow, setSelectedRow] = useState<UserProfile | null>(null);

const columns: any = [
{
  header: "Name",
  accessorFn: (row: UserProfile) => `${row.name ?? ""}`,
},
{
  header: "DPs",
  cell: (row: UserProfile) => (
    <div className="flex">
      {row.displayImages?.map((image: ImageData) => {
        return (
          <div
            className="aspect-square overflow-hidden rounded-full"
            key={image.id}
          >
            <img
              src={
                image.baseUrl ? `${image.baseUrl}${image.path}` : image.path
              }
              alt={`Image ${image.id}`}
              className="w-10 h-10 object-cover cursor-pointer"
              // onClick={() => openImageModal(row)}
            />
          </div>
        );
      })}
    </div>
  ),
},
 {
  header: "Actions",
  cell: (row: UserProfile) => {
    return (
      <div className="relative w-[200px] ">
        <button
          className="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded-full inline-flex items-center bg-lightBlue"
          onClick={() => {
            setSelectedRow(row);
            setIsDropdownOpen(!isDropdownOpen);
          }}
        >
          <FontAwesomeIcon icon={faEllipsisV} />
        </button>
        {selectedRow === row && isDropdownOpen && (
          <ul className="z-10 bg-white text-gray-700 absolute">
            <li>
              <a
                className="rounded-t bg-gray-200 cursor-pointer py-2 px-4 block whitespace-no-wrap hover:bg-lightBlue"
                onClick={() => openSendEmailOpen(row)}
              >
                Send Email
              </a>
            </li>
            <li>
              <a
                className="rounded-t bg-gray-200 cursor-pointer py-2 px-4 block whitespace-no-wrap hover:bg-lightBlue"
                onClick={() => openSendNotficationOpen(row)}
              >
                Send Notification
              </a>
            </li>
            <li>
              <a
                className="rounded-t bg-gray-200 cursor-pointer py-2 px-4 block whitespace-no-wrap hover:bg-lightBlue"
                onClick={() => openUpdateUserStatusOpen(row)}
              >
                Update User Status
              </a>
            </li>
          </ul>
        )}
      </div>
    );
  },
  width: "200px",
},
enter code here
`const table = useReactTable({
columns,
data: users,
state: {
  pagination,
},
manualPagination: true,
onPaginationChange: setPagination,
getCoreRowModel: getCoreRowModel(),
 });`];
 <div className="table-container flex flex-grow overflow-x-auto custom-scrollbar">
    <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
      <thead className="text-xs text-gray-700 bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id} className="text-left">
            {headerGroup.headers.map((header) => (
              <th key={header.id} className="px-3 py-3">
                {flexRender(header.column.columnDef.header, header.getContext())}
              </th>
            ))}
          </tr>
        ))}
      </thead>

      <tbody className="space-y-6 text-center divide-y divide-gray">
        {table.getRowModel().rows.map((row) => (
          <tr
            key={row.id}
            className="text-left hover:bg-lightGray cursor-pointer"
            onClick={() => {
              void openUserProfileModal(row.original.id!);
            }}
          >
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id} className="px-3 py-3">
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  </div>

我尝试过文档usisng cell或accessorFn中提到的方法，但不起作用。