Objective:
I am trying to get React-table working with TypeScript on my local computer.
Challenge:
The code is based on this page https://codesandbox.io/s/gkzg3?file=/src/makeData.ts
However, when I attempt to apply the code on my local computer, I encounter some errors.
How can I resolve these errors?
ERROR in src/App.tsx:7:18
TS7031: Binding element 'columns' implicitly has an 'any' type.
5 | import makeData from './makeData';
6 |
> 7 | function Table({ columns, data }) {
| ^^^^^^^
8 | const {
9 | getTableProps,
10 | getTableBodyProps,
ERROR in src/App.tsx:7:27
TS7031: Binding element 'data' implicitly has an 'any' type.
5 | import makeData from './makeData';
6 |
> 7 | function Table({ columns, data }) {
| ^^^^
8 | const {
9 | getTableProps,
10 | getTableBodyProps,
ERROR in src/makeData.ts:26:34
TS7019: Rest parameter 'lens' implicitly has an 'any[]' type.
24 | }
25 |
> 26 | export default function makeData(...lens) {
| ^^^^^^^
27 | const makeDataLevel = (depth: number = 0) => {
28 | const len = lens[depth];
29 | return range(len).map(d => {
TS7023: 'makeDataLevel' implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.
25 |
26 | export default function makeData(...lens) {
> 27 | const makeDataLevel = (depth: number = 0) => {
| ^^^^^^^^^^^^^
28 | const len = lens[depth];
29 | return range(len).map(d => {
30 | return {
https://i.sstatic.net/DBVrb.png
https://i.sstatic.net/gVqMH.png
Additional Information:
*I am new to react-table.
*The code I am using is identical to the one on this page (https://codesandbox.io/s/gkzg3?file=/src/makeData.ts). It runs successfully on sandbox but encounters issues on my local computer while using VS Code.
*TypeScript is being utilized.
Thank you
App.tsk
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { useTable } from 'react-table';
import makeData from './makeData';
function Table({ columns, data }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow
} = useTable({
columns, data
})
// Render the UI for your table
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
</table>
)
}
export default function App() {
const columns = React.useMemo(
() => [
{
Header: 'Name',
columns: [
{
Header: 'First Name',
accessor: 'firstName',
},
{
Header: 'Last Name',
accessor: 'lastName',
},
],
},
{
Header: 'Info',
columns: [
{
Header: 'Age',
accessor: 'age',
},
{
Header: 'Visits',
accessor: 'visits',
},
{
Header: 'Status',
accessor: 'status',
},
{
Header: 'Profile Progress',
accessor: 'progress',
},
],
},
],
[]
)
const data = React.useMemo(() => makeData(20), []);
return (
<Table columns={columns} data={data} />
);
}
makeData.ts
import namor from 'namor';
const range = (len: number) => {
const arr = [];
for (let i = 0; i < len; i++){
arr.push(i);
}
return arr;
}
const newPerson = () => {
const statusChange = Math.random();
return {
firstName: namor.generate({ words: 1, numbers: 0}),
lastName: namor.generate({ words: 1, numbers: 0}),
age: Math.floor(Math.random() * 30),
visits: Math.floor(Math.random() * 100),
progress: Math.floor(Math.random() * 100),
status:
statusChange > 0.66 ?
'relationship' : statusChange > 0.33 ?
'complicated' : 'single'
}
}
export default function makeData(...lens) {
const makeDataLevel = (depth: number = 0) => {
const len = lens[depth];
return range(len).map(d => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
}
return makeDataLevel();
}