T
TanStack•3y ago
genetic-orange

Passing columns as props to a React component

What is the correct type for columns definitions when passing them as props? I am using ColumnDef<unknown>[] but I cannot pass column definitions I have defined in other component. 
export type PlainTableProps = {
  columns: ColumnDef<unknown>[]; // <<<<<<<<<<<<<< I want to pass columns as props
  data: unknown[];
  emptyMessage: string;
};

export const PlainTable = ({
  columns,
  data,
  emptyMessage,
}: PlainTableProps) => {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });
export type PlainTableProps = {
  columns: ColumnDef<unknown>[]; // <<<<<<<<<<<<<< I want to pass columns as props
  data: unknown[];
  emptyMessage: string;
};

export const PlainTable = ({
  columns,
  data,
  emptyMessage,
}: PlainTableProps) => {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });
export const CertificatesTable = ({ certificates }: CertificateTableProps) => {
  const columns = useMemo(
    () => [
      certificateColumnHelper.accessor("subject", {
        header: "Subject",
        cell: (info) => <span>{info.getValue()}</span>,
      }),
      // ...
    ],
    []
  );

  return (
    <PlainTable
      data={certificates}
      columns={columns} // <<<<<<<<<<<<< This does not work
      emptyMessage="There are no certificates"
    />
  );
};
export const CertificatesTable = ({ certificates }: CertificateTableProps) => {
  const columns = useMemo(
    () => [
      certificateColumnHelper.accessor("subject", {
        header: "Subject",
        cell: (info) => <span>{info.getValue()}</span>,
      }),
      // ...
    ],
    []
  );

  return (
    <PlainTable
      data={certificates}
      columns={columns} // <<<<<<<<<<<<< This does not work
      emptyMessage="There are no certificates"
    />
  );
};
Type 'ColumnDefBase<Certificate, string> & StringHeaderIdentifier' is not assignable to type 'ColumnDef<unknown>'.
      Type 'ColumnDefBase<Certificate, string> & StringHeaderIdentifier' is not assignable to type 'AccessorFnColumnDefBase<unknown, unknown> & IdIdentifier<unknown, unknown>'.
Type 'ColumnDefBase<Certificate, string> & StringHeaderIdentifier' is not assignable to type 'ColumnDef<unknown>'.
      Type 'ColumnDefBase<Certificate, string> & StringHeaderIdentifier' is not assignable to type 'AccessorFnColumnDefBase<unknown, unknown> & IdIdentifier<unknown, unknown>'.
2 Replies
genetic-orange
genetic-orangeOP•3y ago
It works when I add generic parameter 
export type PlainTableProps<TValue> = {
  columns: ColumnDef<TValue, any>[];
  data: TValue[];
  emptyMessage: string;
};
export type PlainTableProps<TValue> = {
  columns: ColumnDef<TValue, any>[];
  data: TValue[];
  emptyMessage: string;
};
But I need to have any here, it does not work when I put unknown here
fair-rose
fair-rose•3y ago
I think you can achieve this by creating column defs separately as a component and then passing it to your "PlainTableComponent" . Actually I think its better explained in the codebase for this table which is using ShadCN Ui with tanstack but I guess the same aproach can be applied here. https://ui.shadcn.com/examples/tasks Follow the component structure here. Hope this helps
shadcn/ui
shadcn/ui
Beautifully designed components built with Radix UI and Tailwind CSS.

Did you find this page helpful?