如何在Tanstack Table中显示图片和链接？

Question

我正在尝试使用 Tanstack 库在表格中显示图像和链接，但无法进入 UI。在名称列中，我想添加链接并希望显示图像。图像在反应数据表中正确显示。想移至 tanstack 表。

还有在操作中单击图标时未打开下拉菜单。相同的逻辑在反应数据表中工作但在这里不起作用。我已附上姓名和 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>

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

Answer 1

您需要创建一个列助手，其中“url”在我的例子中是“background_image”，这对我有用

import { flexRender, getCoreRowModel, useReactTable, getPaginationRowModel, createColumnHelper } from '@tanstack/react-table'
import classnames from 'classnames'
export const TableGames = ({ games }) => {
    const columnHelper = createColumnHelper()
    const columns = [
        {
            header: 'Nombre',
            accessorKey: 'name'
        },
        {
            header: 'Tienda',
            accessorKey: 'store.name'
        },
        columnHelper.accessor('background_image', {
            cell: url => <img src={url.getValue()} alt="" className="" />
        })