My data is not visible inside the react-table's cells:
import React, { useMemo } from 'react'
import { useTable } from 'react-table/dist/react-table.development'
import MOCK_DATA from '../mock/components/LandingTableMock.json'
import { COLUMNS } from './LandingTableColumns'
import '../static/styles/globalVar.css'
export const LandingTable = () => {
const columns = useMemo(() => COLUMNS, [])
const data = useMemo(() => MOCK_DATA, [])
const tableInstance = useTable ({
columns: columns, //columns: COLUMNS,
data //data: MOCK_DATA
})
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow
} = tableInstance
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) => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map( (cell) => {
return <td {...cell.getCellProps()}> {cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
</table>
)
}
I put a breakpoint to inspect the cells value and is undefined.

MOCK_DATA and COLUMNS are looking fine, it`s not an include problem. I moved them in the same file and it still does not work.
The result is a table with the right number of rows but empty cells:
I followed this tutorial on youtube.