I am trying to use React-Tables to make a table of object properties...
Running React 17.0.2, React-Table 7.7.0
I get the following error which I have identified to be a type error but have no idea how to go about fixing
TS2345: Argument of type
'{ tableCols: { Header: string; accessor: string; }[]; tdata: Dataset[]; }'
is not assignable to parameter of type 'TableOptions<{}>'.
Object literal may only specify known properties,
and 'tableCols' does not exist in type 'TableOptions<{}>'
.
The object looks somewhat like this
interface Dataset {
name: string;
time_added: string;
image_width: number;
image_height: number;
minimum_frame: number;
maximum_frame: number;
}
Starting the function component
interface DatasetListProps {}
const DatasetList = (_props: DatasetListProps) => {
I created a dummy data for now and am using that to fill the array
const dummy: Dataset = {
name: '',
time_added: '',
image_width: 0,
image_height: 0,
minimum_frame: 0,
maximum_frame: 0,
}
I am just trying to get the first 2 columns to show up for now.
const tableCols = useMemo(() => [{
Header: 'Name',
accessor: 'name',
},
{
Header: 'Time',
accessor: 'time_added',
},
], []);
Dummy data list creation
const tdata = useMemo(() => [dummy, dummy], []);
Creating the actual dang table
const tableInstance = useTable({ tableCols, tdata })
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = tableinstance
Then the big return statement with the table html (taken directly from docs
return (
<table {...getTableProps()}>
<thead>
{// Loop over the header rows
headerGroups.map(headerGroup => (
// Apply the header row props
<tr {...headerGroup.getHeaderGroupProps()}>
{// Loop over the headers in each row
headerGroup.headers.map(column => (
// Apply the header cell props
<th {...column.getHeaderProps()}>
{// Render the header
column.render('Header')}
</th>
))}
</tr>
))}
</thead>
{/* Apply the table body props */}
<tbody {...getTableBodyProps()}>
{// Loop over the table rows
rows.map(row => {
// Prepare the row for display
prepareRow(row)
return (
// Apply the row props
<tr {...row.getRowProps()}>
{// Loop over the rows cells
row.cells.map(cell => {
// Apply the cell props
return (
<td {...cell.getCellProps()}>
{// Render the cell contents
cell.render('Cell')}
</td>
)
})}
</tr>
)
})}
</tbody>
</table>
)
}
End of function component