fair-rose

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} />,
  }),
];

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,
  });
};

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 };
};

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.

5 Replies

extended-salmon•2y ago

Try this...

export interface UseFilesTableProps {
  files: File[];
}

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

  const table = useReactTable<File[] >({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return { table };
};

export interface UseFilesTableProps {
  files: File[];
}

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

  const table = useReactTable<File[] >({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return { table };
};

And in columns definition you can use I believe amthe type from react table itself called ColumnDef with the File as the generic type like ColumnDef<File[], any> you can replace the any with what it needs to be on your end. I'm doing this from the top of my head so it could be that the type is File instead of File[]

fair-roseOP•2y ago

Not sure I understand what you are saying The thing is that I want to remove the duplicate state. I don’t want to have “data”

export interface UseFilesTableProps {
  files: File[];
}

export const useFilesTable = ({ files }: UseFilesTableProps) => {
  // TODO: Use the files instead of the data variable
  const data: File[] = [...files];

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

  return { table };
};

export interface UseFilesTableProps {
  files: File[];
}

export const useFilesTable = ({ files }: UseFilesTableProps) => {
  // TODO: Use the files instead of the data variable
  const data: File[] = [...files];

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

  return { table };
};

fair-roseOP•2y ago

I've done this the thing is that when I try to replace the 'files' with the 'data' I get an error

extended-salmon•2y ago

export interface UseFilesTableProps {
  files: File[];
}

export const useFilesTable = ({ files }: UseFilesTableProps) => {
    const table = useReactTable<File>({
    data: files,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return { table };
};

export interface UseFilesTableProps {
  files: File[];
}

export const useFilesTable = ({ files }: UseFilesTableProps) => {
    const table = useReactTable<File>({
    data: files,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return { table };
};

I can't see why this would not work....

fair-roseOP•2y ago

You're so right. How could I not notice? Thank you so much!

Gaming

Programming

Table columns type definition

Did you find this page helpful?