asynchronous data fetching in columns of data table component

[sahildkun]

this is my columns.tsx

"use client"

import { ColumnDef } from "@tanstack/react-table"
import { db } from "@/lib/db"
import { Bug } from "@prisma/client"
import { formatTimeToNow } from "@/lib/utils"
import formatDistanceToNow from "date-fns/formatDistanceToNow"
import { parseISO } from "date-fns"

export const columns: ColumnDef[] = [
{
accessorKey: "title",
header: "Title",
},
{
accessorKey: "status",
header: "Status",
},
{
accessorKey: "createdAt",
header: "Created At",
cell:({row}) => {

    const timeAgo = formatTimeToNow(new Date(row.getValue('createdAt')))
    return timeAgo
  }
},

{
  accessorKey: "createdById",
  header: "Created By",
  cell: async ({row}) => {
    const creator = await db.user.findFirst({
      where: {
        id: row.getValue('createdById')
      }
    })

    return creator?.name
  }
}, {
accessorKey: "createdById",
header: "Created By",
cell: async ({row}) => {
  const creator = await db.user.findFirst({
    where: {
      id: row.getValue('createdById')
    }
  })

  return creator?.name
}

},
]

`
it is a client component so it throws a error as i perform a server call inside the cell of last column but is there any way i can solve this such that i can get the creator name from User Table via the creatorId that is provided in data ? .

[limitless-dev]

You may find the information you need in the tanstack documentation for accessorFn, which can be found here.

Example:

accessorKey: 'username',
accessorFn: (row) => {  // here we feed username with the required data
  return  'something';
 },