T
TanStack•3y ago
xenial-black

Integrate Tanstack table with array of array

Hi everyone. I got a type error when I tried to implement a table with an array of array data. The typescript error message is as follows: 
Type 'Bids' is not assignable to type 'Bids[]'.
  Type 'number[]' is not assignable to type 'Bids'.
    Type 'number' is not assignable to type 'number[]'.ts(2322)
Type 'Bids' is not assignable to type 'Bids[]'.
  Type 'number[]' is not assignable to type 'Bids'.
    Type 'number' is not assignable to type 'number[]'.ts(2322)
And here is my implementation, Does anyone knows how to resolve this? 
type Bids = Array<number[]>;

const defaultData: Bids = [
  [100, 2],
  [120, 4]
];

const columnHelper = createColumnHelper<Bids>();

const columns = [
  columnHelper.accessor((row) => `${row[0]}`, { id: "price" }),
  columnHelper.accessor((row) => `${row[1]}`, { id: "vol" })
];

.
.
.

const table = useReactTable({
    data: defaultData, // error show on this line
    columns,
    getCoreRowModel: getCoreRowModel()
  });
type Bids = Array<number[]>;

const defaultData: Bids = [
  [100, 2],
  [120, 4]
];

const columnHelper = createColumnHelper<Bids>();

const columns = [
  columnHelper.accessor((row) => `${row[0]}`, { id: "price" }),
  columnHelper.accessor((row) => `${row[1]}`, { id: "vol" })
];

.
.
.

const table = useReactTable({
    data: defaultData, // error show on this line
    columns,
    getCoreRowModel: getCoreRowModel()
  });
Sandbox link: https://codesandbox.io/s/compassionate-cherry-sn1u92?file=/src/main.tsx
hypong
CodeSandbox
compassionate-cherry-sn1u92 - CodeSandbox
compassionate-cherry-sn1u92 by hypong using @tanstack/react-table, react, react-dom
1 Reply
xenial-black
xenial-blackOP•3y ago
I have resolved this problem. Thanks all

Did you find this page helpful?