Reactable: How to expand table rows in separate React components?

I am using reactable for large tabular data that I have to manipulate with display, sort, filter and pagination. The react components plugin works great and covers all my cases.

For better structuring, I split the table into components, and each individual row is a separate react component. All rows build their own component of the reaction of the list of rows, and this list must be the body of the table, respectively, big data. Unfortunately there is a problem here where my list component cannot be mapped to the table correctly.

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>
    }
}

      

        
        
        
      

    

Mistake The only possible children of <Table> are <Thead>, <Tr>, or one <Tfoot>.

Versions:

• reaction - 15.5.4
• reactable - 0.14.1

There are several open issues in git hub - here's a nad here related to this, but there is still no solution for this error. I've tried different things, but the only work at the moment is combining all the table related code in one file. My table data is very specific and the combined table component gets more complex. It would be much better to keep the structure separate from the start.

I wonder if anyone has found a workaround?