I use reactable for a big table data, which I have to manipulate through displaying, sorting, filtering and pagination. The react component plugin works perfectly and cover all my cases.
For better structuring I divide my table into components and every single row is a separate react component. All the rows build my row-list react component and this list need to be the table body, respectively the big data. Unfortunately here comes the problem, where my list component can not be rendered correctly into the table.
import React from 'react';
import RowList from '../containers/RowList';
var Table = Reactable.Table,
Thead = Reactable.Thead,
Th = Reactable.Th;
class Table extends React.Component {
render() {
return <section>
<Table filterable={['title', 'author', 'category']}
noDataText={<span>No matching records found</span>}
sortable={true}>
<Thead>
<Th column="title">Title</Th>
<Th column="author">Author</Th>
<Th column="category">Category</Th>
</Thead>
<RowList/>
</Table>
</section>
}
}
The error is The only possible children of <Table> are <Thead>, <Tr>, or one <Tfoot>.
The versions are:
- react - 15.5.4
- reactable - 0.14.1
There are several open issues in git hub - here nad here, related to this, but still no solution for this bug. I've tried various of things, but the only working for now is combining all table related code in one file. My table data is very specific and the combined table component become more complex. It would be much better to keep the separated structure from the begining.
I wonder if anyone have found a workaround?