glittershark / reactable

Fast, flexible, and simple data tables in React
glittershark.github.io/reactable
MIT License
1.51k stars 222 forks source link

Error: `The only possible children of <Table> are <Thead>, <Tr>, or one <Tfoot>.` #332

Open paddotk opened 7 years ago

paddotk commented 7 years ago

I get this error from a table that should work correctly. I have a table on another page that is structured the exact same way, which does work just fine.

<Table className="exams-table">
    <Tr>
         <Th column="StudentsNumber" className="students-number"></Th>
         <Th column="ExamName" className="exam-name"></Th>
         <Th column="Creation" className="exam-date creation"></Th>
         <Th column="RecentActivity" className="exam-date most-recent-activity"></Th>
         <Th column="Attendance" className="attendance"></Th>
         <Th column="Reviewed" className="reviewed"></Th>
         <Th column="Suspicions" className="suspicious-exams"></Th>
     </Tr>
     {myNodes}
 </Table>

The only difference with this table is that all <Tr>s besides the first (header) one are in a different class (and different file), not sure if this has anything to do with it. {myNodes} is fine, all I did was changing a regular table to a Reactable one. The column values all match.

If enclose the first <Tr> within a <Thead>, I get the error reactable.js?body=1:672 Uncaught TypeError: column.key.replace is not a function instead.

P.s. I've seen the related (closed) issues but the problem persists for me.

paddotk commented 7 years ago

[Update] It looks like this bug is related to issue 156, so it is the different component that messes it up. Since this is a typical React way of working, it'd be great if such an enhanchement would be added.