How to Display Images and links in Tanstack Table?

Question

I am attempting to display both images and links within a table using the Tanstack library, but not getting on UI. At name column I want to add link and want to display images. Images are properly displaying in react datatable. want to move to tanstack table.

Also on clicking icon in actions not opening dropdown. same logic working in react datatable but not working here. I have attached images of name and Dps UI. how to resolve this issue and successfully display images and links within the Tanstack table?

Here is my code

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>

I have tried method mentioned in documentation usisng cell or accessorFn but not working.

Answer 1

You need to create a column helper where you have the "url" in my case is the 'background_image', this works for me

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="" />
        })