tanstack table rendering image along name

Question

I am using TanStack table in nextJS (react). I want to have this behavior:

but in the tutorial it says

  const columns = React.useMemo(() => [
    {
      Header: "Name",
      accessor: "name",
      Cell: AvatarCell,
      imgAccessor: "imgUrl",
      emailAccessor: "email",
    },

Which gives me an error when I try to access imgAccessor or emailAccessor. the error I am getting is

Type '{ header: ({ column }: HeaderContext<Trainee, unknown>) => Element; accessorKey: "name"; imgAccessoor: string; cell: (info: CellContext<Trainee, unknown>) => unknown; }' is not assignable to type 'ColumnDef<Trainee, unknown>'. Object literal may only specify known properties, and 'imgAccessoor' does not exist in type 'ColumnDef<Trainee, unknown>'.

score 0 · Answer 1 · answered Sep 01 '23 at 14:38

I have found a solution if anyone needs

   accessorKey: 'name',
cell: ({row}) => {
    return (
        <div className="flex items-center">
        <div className="flex-shrink-0 h-10 w-10">
          <Image
            className="h-10 w-10 rounded-full"
            src={row.original.imgUrl ? row.original.imgUrl : defaultprofileimage} // imported a default image in case no image
            alt=""
            width={40}
          />
        </div>
        <div className="mr-4"> // use ml-4 for LTR, i use mr-4 for RTL
          <div className="text-sm font-medium text-gray-900">{row.getValue("name")}</div>
          <div className="text-sm text-gray-500">
            {row.original.email}
          </div>
        </div>
      </div>

tanstack table rendering image along name

1 Answers1