react-table does not show data in rows.
import React, { useEffect, useState, useMemo } from "react";
import "../../custom.css";
import {COLUMNS} from './columns';
import { useTable } from "react-table";
//some code
const columns = useMemo(() => COLUMNS, [])
const data = useMemo(() => {
console.log(childrens);
return childrens;
}, [childrens])
const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
prepareRow
} = useTable({
columns,
data
})
//and more code here
<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)
console.log(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
))}
</tr>
)
})}
</tbody>
</table>
For debugging, I output each row in the console and there is all the data, there is also an initial data array in the console and everything is also correct there