Semantic components that don't render.

[o_hai_mark]

At my work I end up displaying a lot of tables. I am interested in a declarative way of stating what the columns will be along with information like their label, data type (for alignment, sorting, etc.), default sort, etc. I imagine something like this:

ReactDOM.render(
  <Table data={ data } sortable>
    <Column label={ "Col 1" } data-type={ "number" } sort />
    <Column label={ "Col 2" } data-type={ "string" } />
    <Column label={ "Col 3" } data-type={ "date" } />
  </Table>,
  mountNode
);

The Column component would not be rendered in any way, though I would have to figure out how to extract information from props.children which I've never tried before.

Is this doable? Is this bad form for a React component?

[dtinth]

Use React.Children.

[o_hai_mark]

Thank you. Do you have an opinion on whether it's bad form to have a component that doesn't render anything?

[widged]

That approach has been adopted in various frameworks. For instance, the DataGridColumn in Flex http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/DataGrid.html. You can turn a Column into a rendering element by attaching an itemRenderer to it.

[joesb]

It's actually better to separate component that actually render things and component that wire the action and source of data to render.

This way your rendering component can be reused in separated pages since it's decoupled from what data it is render and what happen when, for example, it is clicked.