How to access a single cell value by ID

[askides]

Hello There!

I'm using this library to build a "similar" table, but rendered with flex divs, here's the chunk of the code:

<div data-role="tbody">
  {table.getRowModel().rows?.length ? (
    table.getRowModel().rows.map((row) => (
      <div
        key={row.id}
        className="border-t border-l border-r last:border-b border-zinc-100 p-4"
      >
        <div className="space-y-4 lg:space-y-0 lg:flex lg:items-center">
          <div className="space-y-1 lg:flex w-full lg:items-center lg:gap-5 lg:space-y-0">
            <div className="font-bold w-24">
              {row.original.propertyCode}
            </div>
            <div className="italic w-56">
              {row.original.customerEmail}
            </div>
            <div className="shrink-0 w-44">
              {row.original.startedAt.toLocaleString()}
            </div>
            <div>{row.original.agent.name}</div>
            <div className="pt-3 lg:pt-0 ml-auto">
              <Button size="small">Send Feedback</Button>
            </div>
          </div>
        </div>
      </div>
    ))
  ) : (
    <div className="border border-zinc-100 p-4">No Rows Found.</div>
  )}
</div>

As you can see, due to the fact that there are not lists of i cannot rely on getAllVisibleCells, which returns an array of cell, so i used the original value of the rows.

Everything's working fine. What i would like to know is if there's a possibility to have a something like getCellById of a specific row, in order to access the cell property and all the JSX configuration put there.

[ruckyTheWebDesigner]

Hi yes, you can use getColumn("columnId") by passing the column id as a parameter, you can read more about it in the documentation https://tanstack.com/table/v8/docs/api/core/table#getcolumn, hope it helps.

[askides]

Thanks for the help!

[ruckyTheWebDesigner]

my pleasure, glad it helped.

[mshahzebraza]

Is there any way than using the columnId here. I'm taking about the accessorKey, why can't we use that?