TanStackT
TanStack•3y ago•
1 reply
correct-teal

Access row data not defined by column

I am very new to TanStack Table -- sorry if this is a noob question...

I have row data that contains stats about files:

type FileStats = {
  name: string;
  type: "file" | "folder";
  /* ... */
};


I would like to display a little icon next to the filename based on its type:

const columns: ColumnDef<FileStats>[] = [
  {
    accessorKey: "name",
    header: "Name",
    cell: ({ row }) => {
      const name = row.getValue("name") as FileStats["name"];
      const type = row.getValue("type") as FileStats["type"];
      return (
        <div className="flex gap-2">
          <div className="flex items-center">
            {type === "file" && <FaFile />}
            {type === "folder" && <FaFolder />}
          </div>
          {name}
        </div>
      );
    },
  },
  /* ... */
];


However, this does not work because it cannot find a row with columnId = "type". Adding a new column with accessorKey: "type" solves the issue. However, I do not want to create a column for just 
type
, because I only want to use this value to add an icon near my filename. I have tried to create a column that is always hidden, but there does not seem to be an option to do this with 
ColumnDef
.

How do I access data that exists in the row data, but that is not used by a 
ColumnDef
?
Was this page helpful?