T
TanStack•3y ago
conscious-sapphire

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
})
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);
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>[]
 (property) DataGridProps<Entity>.columns: ColumnDef<Entity, unknown>[]
But when I pass the same columns to the HOC, the TData type is unknown.
2 Replies
conscious-sapphire
conscious-sapphireOP•3y ago
(property) DataGridProps<unknown>.columns: ColumnDef<unknown, unknown>[]
Type 'ColumnDef<Entity, unknown>[]' is not assignable to type 'ColumnDef<unknown, unknown>[]'.
  Type 'ColumnDef<Entity, unknown>' is not assignable to type 'ColumnDef<unknown, unknown>'.
    Type 'ColumnDefBase<Entity, unknown> & StringHeaderIdentifier' is not assignable to type 'ColumnDef<unknown, unknown>'.
      Type 'ColumnDefBase<Entity, unknown> & StringHeaderIdentifier' is not assignable to type 'AccessorFnColumnDefBase<unknown, unknown> & IdIdentifier<unknown, unknown>'.
        Property 'accessorFn' is missing in type 'ColumnDefBase<Entity, unknown> & StringHeaderIdentifier' but required in type 'AccessorFnColumnDefBase<unknown, unknown>'.ts(2322)
index.d.ts(697, 5): 'accessorFn' is declared here.
DataGrid.tsx(30, 3): The expected type comes from property 'columns' which is declared here on type 'IntrinsicAttributes & DataGridProps<unknown>'
(property) DataGridProps<unknown>.columns: ColumnDef<unknown, unknown>[]
Type 'ColumnDef<Entity, unknown>[]' is not assignable to type 'ColumnDef<unknown, unknown>[]'.
  Type 'ColumnDef<Entity, unknown>' is not assignable to type 'ColumnDef<unknown, unknown>'.
    Type 'ColumnDefBase<Entity, unknown> & StringHeaderIdentifier' is not assignable to type 'ColumnDef<unknown, unknown>'.
      Type 'ColumnDefBase<Entity, unknown> & StringHeaderIdentifier' is not assignable to type 'AccessorFnColumnDefBase<unknown, unknown> & IdIdentifier<unknown, unknown>'.
        Property 'accessorFn' is missing in type 'ColumnDefBase<Entity, unknown> & StringHeaderIdentifier' but required in type 'AccessorFnColumnDefBase<unknown, unknown>'.ts(2322)
index.d.ts(697, 5): 'accessorFn' is declared here.
DataGrid.tsx(30, 3): The expected type comes from property 'columns' which is declared here on type 'IntrinsicAttributes & DataGridProps<unknown>'
conscious-sapphire
conscious-sapphireOP•3y ago
Here is a reproduction: https://codesandbox.io/s/purple-silence-8oy5tm?file=/src/main.tsx
dimbslmh
CodeSandbox
purple-silence-8oy5tm - CodeSandbox
purple-silence-8oy5tm by dimbslmh using @tanstack/react-table, react, react-dom

Did you find this page helpful?