TanStackT
TanStack•2y ago•
9 replies
systematic-tan

Table columns type definition

I have a simple table in my app.
All it does is show file metadata.
Beside the data is self I have few button actions.

export const columns = [
  columnHelper.accessor("displayName", {
    header: "Displlay Name",
    cell: (info) => info.getValue(),
    size: 100,
  }),
  columnHelper.accessor("uploadedAt", {
    header: "Uploaded At",
    cell: (info) => info.getValue().toISOString(),
    size: 100,
  }),
  columnHelper.accessor("status", {
    header: "Status",
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor("size", {
    header: "Size",
    cell: (info) => <span className={classes.fileSize}>{formatBytes(info.getValue())}</span>,
  }),
  columnHelper.display({
    id: "actions",
    cell: (info) => <FileTableActions info={info} />,
  }),
];


I use @tanstack/query to fetch all the data from the server.

export const useGetUserFiles = () => {
  return useQuery({
    queryKey: filesKeys.getFilesKey(),
    queryFn: fileService.getFiles,
  });
};


My problem starts when I want to create the table.

export interface UseFilesTableProps {
  files: File[];
}

export const useFilesTable = ({ files }: UseFilesTableProps) => {
  const data = [...files];

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return { table };
};


This is the code I use, the problem is when I try to use the 'files' directly, then I shows an error on the columns types. While the 'data' and the 'files' have the same type.
Now, I've tried to decorate the column with type but it does not seem to work. I would love any help from you guys.
image.png
image.png
Was this page helpful?