T
TanStack•2y ago
optimistic-gold

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";
  /* ... */
};
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>
      );
    },
  },
  /* ... */
];
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?
1 Reply
optimistic-gold
optimistic-goldOP•2y ago
Nevermind, I worked it out in the end. I did not know there was an original field on the row object that lets me access the underlying data. 
const columns: ColumnDef<FileStats>[] = [
  {
    accessorKey: "name",
    header: "Name",
    cell: ({ row }) => {
      const name = row.original.name;
      const type = row.original.type;
      return (
        <div className="flex gap-2">
          <div className="flex items-center">
            {type === "file" && <FaFile />}
            {type === "folder" && <FaFolder />}
          </div>
          {name}
        </div>
      );
    },
  },
  /* ... */
];
const columns: ColumnDef<FileStats>[] = [
  {
    accessorKey: "name",
    header: "Name",
    cell: ({ row }) => {
      const name = row.original.name;
      const type = row.original.type;
      return (
        <div className="flex gap-2">
          <div className="flex items-center">
            {type === "file" && <FaFile />}
            {type === "folder" && <FaFolder />}
          </div>
          {name}
        </div>
      );
    },
  },
  /* ... */
];
My apologies!

Did you find this page helpful?