Table only accepts nested <Td> elements

[okcoker]

Currently it seems as the Table only accepts <Reactable.Td> elements.

I am trying to customize the <Reactable.Th> columns to have the labels, along with some "unsafe" html. Something like this:

         <Table
                sortable={true}>
                <Thead>
                    <Tr>
                        <Th><span>header1</span></Th>
                        <Th><span>header2</span></Th>
                        <Th><span>header3</span></Th>
                        <Th><span>header4</span></Th>
                        <Th><span>header5</span></Th>
                    </Tr>
                </Thead>
                { body_rows }
            </Table>

This renders my table with the appropriate data, but under an empty row. Seems as though adding my own Thead and Th elements causes an empty row and is completely ignored by Reactable. body_rows is an array of Tr elements but as soon as I try to be semantically correct and add a Tbody around it, no table is rendered. If the only children are Tr's things are fine but I want to be able to customize cell content. Some of my problems I think revolve around this.

I'll see if I can fix some things because I really like this library so far, but I at least wanted to document this as a ticket first.

Thanks for listening.

[glittershark]

Yeah, there's a fair amount of (admittedly hackish) checking of types of child components - that line you linked is almost definitely the place to start.

If you work at it and get stuck, I always like pull requests with failing tests 😄

[glittershark]

So it looks like React.addons.TestUtils has a function to determine the type of a React component. Might be good to just directly copy+paste the source of that function (since we don't want to require people include the entire testutils into their page)

[quatrix]

I'm trying to customize <Th> to have a checkbox, a 'select all' type of thing and having the same problem.