TanStackT
TanStack•4y ago•
2 replies
uncertain-scarlet

How to use with a HOC

I am trying to create a HOC for the following Table:

interface DataGridProps<TData> {
  columns: ColumnDef<TData>[];
  data: TData[];
}

const table = useReactTable<TData>({
  columns,
  data,
  ... // rest of props
})


export function withHOC<TData>(
  WrappedComponent: ComponentType<DataGridProps<TData>>,
) {
  const ComponentWithHOC = (props: DataGridProps<TData>) => {
    return <WrappedComponent {...(props as DataGridProps<TData>)} />;
  };

  ComponentWithHOC.displayName = "ComponentWithHOC";
  return ComponentWithHOC;
}

export default withHOC(DataGrid);


When I pass columns with ColumnDef<Entity>[] to the DataGrid directly, it correctly passes the Entity type:
 (property) DataGridProps<Entity>.columns: ColumnDef<Entity, unknown>[]


But when I pass the same columns to the HOC, the TData type is unknown.
Was this page helpful?