DataTable - row.getValue() returns undefined for ID

[cehenriques]

When doing column definitions for a DataTable, I can get the values of all attributes of my object, but not the ID.

Using the same example from the docs, if you have a type like:

export type Payment = {
  id: number
  amount: number
  status: "pending" | "processing" | "success" | "failed"
  email: string
}

I could get the value of ID doing:

export const columns: ColumnDef<Payment>[] = [
  {
    cell: ({ row }) => {
      return row.getValue("id")
    },
  },
]

But instead of getting the ID value I get undefined, and the following console message:
"[Table] Column with id 'id' does not exist."

row.getValue() works for all the attributes but not for ID.

I can get the ID if instead I do this:

export const columns: ColumnDef<Payment>[] = [
  {
    cell: ({ row }) => {
      const payment = row.original;
      return payment.id;
    },
  },
]

Although this works, it's odd why can't we just use the row.getValue() function like for all the other columns.

Could this be a bug in the getValue() function?

[askariali]

I have the same issue, not just with the id field but with all of them. So I looked into the code and discovered that it's not the Shadcn/ui table component that caused the bug, but it's the @tanstack/react-table. There was an Open PR that I guess it'd help to fix.

[bigkrp]

Same issue for id column

[Message-Akunna]

that is because DataTable - row.getValue() returns values from ColumnDef with defined accessorKey, except you have a ColumnDef where accessorKey is "id" row.getValue() is going to return undefined for it as it isn't defined, but you can still get your "id" value from row.original method.

[thathurtabit]

Ah, I was getting undefined for Cell values also. As @Message-Akunna mentions, you need to make sure the keys in your data match the accessorKeys in your columns data. This makes sense when it works, but was confusing as in my case they were named slightly differently, resulting in undefined values.

// Make sure the `accessorKey` values match the `key` names in your `data`
<DataTable columns={columns} data={data} />