Is it possible to make cell data async

[mikiyasET]

Here is what I was trying to do

const columns = useMemo(
      () => [
      {
          header: 'Name',
          accessorKey: 'name',
      },
      {
          header: 'Description',
          accessorKey: 'description',
      },
      {
          header: 'image',
          accessorKey: 'image',
          Cell: async ({cell}: any) => <img
              src={await Service.Run().VendorsCategoryService.getVendorsCategoryImage(cell.getValue())} alt="Image"/>,
      }
  ],[]);

The error occurred after I add the following code

Cell: async ({cell}: any) => <img src={await Service.Run().VendorsCategoryService.getVendorsCategoryImage(cell.getValue())} alt="Image"/>,

I'm facing error

I'm trying to load image to the table and to get the image I need have a token that's why I'm not specifying the url directly. can someone help...

[KevinVandy]

Not async like that, but just do a normal cell render with no async function with and access data from a useState hook or something. Add that state to the columns useMemo dependency array.

[mikiyasET]

It would be great if it was handled in the cell don't you think?

[KevinVandy]

As far as I understand, the syntax you are proposing is pretty much impossible in react. You can't have async components like that. That is until Next.js allows it in the future for server components, but that kind of think isn't possible here

[mikiyasET]

As far as I understand, the syntax you are proposing is pretty much impossible in react. You can't have async components like that. That is until Next.js allows it in the future for server components, but that kind of think isn't possible here

thanks.