Material-ui: [Table] Not able to compose component with HOCs

[Foxhoundn]

Problem description

I am trying to build a table component on top of the Material table but nothing is being rendered because table expects to be rendered, but I am wrapping them in multiple HOCs etc. Is there a workaround to this or do I have to use the basic Table only (which is not useful on it's own).

The error that is displayed is:

Material-UI: Children of the Table component must be TableBody or TableHeader or TableFooter.
Nothing is rendered.

Link to minimally-working code that reproduces the issue

Gist https://gist.github.com/Foxhoundn/f43adfd777a9c40161355964d8fbe9d4

Versions

• Material-UI: 0.16.7
• React: 15.3.2
• Browser: Latest Chrome

[mbrookes]

Did you look at Table to see where the error might originate? As a programmer, the source code is your friend. Go open-source! :tada:

YourHOC.muiName = 'TableHeader';

[oliviertassinari]

People have been facing the same issue with the <AppBar /> component: #5053.
That's the same story.
You need to interoperate in a transparent way.

1. Add muiName properties to the prototype of your wrapping component.
2. Forward properties from the wrapper component to the wrapped component.

With those two steps, that should work. Feel free to submit the solution once you have it.
Hopefully, that can help others.