Material-ui - TableRow wrapped in component wont show checkbox

Question

I'm using Material-ui in my project and I'm facing an issue.

I would like to use Table component to show a dynamic list of items with checkbox on each row.

This is what my render looks like :

<Table multiSelectable={true}>
    <TableHeader>
        <TableRow>
            <TableHeaderColumn>Reference</TableHeaderColumn>
                .... All others columns ...
            <TableHeaderColumn>Actions</TableHeaderColumn>
        </TableRow>
    </TableHeader>
    <TableBody displayRowCheckbox={ true }>
        { this.generateOrderRows() }
    </TableBody>
</Table>

The generateOrderRows() method :

generateOrderRows() {
    var rows = [];
    if (this.state.orders) {
        this.state.orders.map(function(order) {
            rows.push(<OrderListRow key={order._id} order={order} selected={false}/>);
        });
    }
    if (rows.length == 0) {
        rows.push(<tr key="1"><td className="text-center" colSpan="9">It seems there is no results... :'(</td></tr>);
    }
    return rows;
}

My Table rendering well and I'm able to multi-select rows by clicking on it without any problems. But none of my rows display the checkbox for the selection, even by passing parent props to TableRow like this :

render() {
    const { order, ...otherProps } = this.props;
    return(
        <TableRow { ...otherProps }>
            <TableRowColumn>{ order.reference }</TableRowColumn>
                ... All others columns ...
            <TableRowColumn>
                <RaisedButton label="View" primary={true} linkButton={true} href={ '/order/' + order._id }/>
            </TableRowColumn>
        </TableRow>
    );
}

If I inspect my TableRows with the React Dev Tools, I can see that each of them receive the prop displayRowCheckbox=true from TableBody.

So I can't figure out why my checkboxes dont show up. Any Idea ?

Answer 1

I hit the same issue... (using [email protected])

Apparently material-ui TableBody pushes the checkbox component into its children. You need to grab it from your custom TableRow props and render it explicitly in your custom TableRow render() method.

Note: You need to both spread otherProps into the TableRow and explicitly render the checkbox.

// OrderListRow...
render() {
    const { order, ...otherProps } = this.props;
    return(
        <TableRow { ...otherProps }>
            {otherProps.children[0] /* checkbox passed down from Table-Body*/}
            <TableRowColumn>{ order.reference }</TableRowColumn>
                ... All others columns ...
            <TableRowColumn>
                <RaisedButton label="View" primary={true} linkButton={true} href={ '/order/' + order._id }/>
            </TableRowColumn>
        </TableRow>
    );
}

https://github.com/callemall/material-ui/issues/1749#issuecomment-217667754 https://github.com/callemall/material-ui/blob/master/src/Table/TableBody.js#L173