Material-ui: [Table] Dynamic TableRow do not show checkbox

[suhail-ansari-apconic]

I have created a component which generates Table and another one which generates TableRows. The problem is that the checkbox on the rows are not showing.

Any ideas?

Thanks

[alitaheri]

@suhail-ansari-apconic Any chance TableRows aren't directly nested inside TableHead? Table needs to pass down some props in order for it to function properly.

[marc-rutkowski]

Same problem for me. Rows rendering looks like this:

<TableBody>
    {this.rows.map(row => <MyTableRow key={row.id} data={row} />)}
</TableBody>

and MyTableRow render() looks like:

let {data, ...others} = this.props
return (
    <TableRow {...others}>
        <TableRowColumn>{data.id}</TableRowColumn>
        <TableRowColumn>{data.name}</TableRowColumn>
    </TableRow>
)

So yes, TableRow are not direct children of TableBody, but are wrapped into MyTableRow.
The spread notation ...others should pass down required properties, isn't it?

[Antonhansel]

I think I have the same issue, although the row has all the right properties (selectable=true, displayRowCheckBox=true)

My rows are nested inside the TableBody element, but the children containing the checkBox is missing.

[suhail-ansari-apconic]

Actually I have resolved the issue. The thing is that when you are wrapping the TableRow inside another component than all the props are not passed to it. The best thing to do is to pass all the props from your wrapping component to TableRow.

class WrappingRow extends React.Component {
  render() {
   const { yourProps, ...other } = this.props;
   return (
    <TableRow {...other}>
    ......
    </TableRow>
    );
  }
}

Basically {...other} will be props that are passed down from TableBody to the rows.

[Kosta-Github]

@suhail-ansari-apconic how is that different from what @marc-rutkowski wrote above?

[mbrookes]

@Kosta-Github ...other rather than ...others

[Kosta-Github]

<lol />

[kcgunn]

This solution didn't work for me....I was able to get the check boxes to display, but now when I click on a single Row's check box, it selects all Rows. Need to have individual selection, as well as the option to select all from the header check box. Anybody able to fully resolve this issue??

[NeXTs]

@kcgunn

This solution didn't work for me....I was able to get the check boxes to display

how you get checkboxes to display?

[NeXTs]

Why this issue was closed?
Checkboxes are not working if TableRow is moved to separate component, even if do this trick with passing ...props down to component

[NeXTs]

@oliviertassinari bump

[oliviertassinari]

@NeXTs I don't have much thought on this <Table /> component. I have never really looked at it. Btw, it was rewritten by @nathanmarks on the next branch.

Still, passing the props down the tree sounds like a good solution. Why is this not working?

I can only think about two other approaches:

• remove the need of passing props to the child <TableRow />. I'm not sure that it can be done.
• using the context instead of the props. But that sounds overkill.

[marijnhurkens]

I was having the same problem and I fixed it according to this piece of code: http://stackoverflow.com/questions/37479568/material-ui-tablerow-wrapped-in-component-wont-show-checkbox

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>
    );
}

Quote from the answer: "You need to both spread otherProps into the TableRow and explicitly render the checkbox."

Is this the desired pattern to use?

[kutsan]

Could you please re-open this issue? There are some tricks but isn't solved yet.

[JustinBeckwith]

I just got bit by this as well.

[ZhangVic]

Thanks @marijnhurkens for the answer.
But I still have an problem that: now the checkboxes in the tablebody appear but I their style is enable but I
can't check them neither select all. Only the 'check all' checkbox in the tableheader works but it can't make other checkboxs checked.