glittershark/reactable

Unable to encapsulate <Td> in another component

Opened this issue · 0 comments

cklab commented

I have a scenario where I'd like to monitor the behavior of a Td, through use of componentDidUpdate, componentWillReceiveProps, etc.

I've created a class such as:

export default class MonitoredTd extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidUpdate(prevProps, prevState) {
        // ...
    }

    render() {
        return React.createElement(Td, this.props);
    }
}

If I use this component in the table of my <Table>, MonitoredTd does not get rendered as a MonitoredTd but rather a Td, presumably cause of: https://github.com/glittershark/reactable/blob/master/src/reactable/tr.jsx#L30.

So, all the props translate and my value renders, but not the component.

@glittershark Would you be in support of transferring the component type of a Td through the props of Tr? The type I imagine would reside in Tr.props.data[columnKey].component. So we can render the component with something like:

(in tr.jsx)

var componentType = value.component || Td;
...
props.column = column;
props.key = column.key;
props.children = value;
React.createElement(componentType, props)