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>[]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>'.
