material ui table row checkbox not displaying

Question

I have created a table using material UI for my react app in a separate file.

TradesTable.js

const DummyTableRow = (props) => {
    let myRows = props.trades.map((trade, index) => {
        return <TableRow>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[0]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[1]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[2]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[3]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[4]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[5]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[6]}</TableRowColumn>
        </TableRow>
        });
    return myRows;
}

const TradesTable = (props) => {
    return(
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHeaderColumn>Trade date</TableHeaderColumn>
                    <TableHeaderColumn>Commodity</TableHeaderColumn>
                    <TableHeaderColumn>Side</TableHeaderColumn>
                    <TableHeaderColumn>Qty</TableHeaderColumn>
                    <TableHeaderColumn>Price</TableHeaderColumn>
                    <TableHeaderColumn>CounterParty</TableHeaderColumn>
                    <TableHeaderColumn>Location</TableHeaderColumn>
                </TableRow>
            </TableHeader>
        <TableBody>
            <DummyTableRow trades={props.trades}/>
        </TableBody>
    </Table>
    );
}

module.exports = TradesTable

The rows of this table are being populated from the props of the component.

This table is being used in some other component as part of a material UI <AppBar> component.

<AppBar style={{backgroundColor: 'White'}} 
                    iconElementLeft={<TradesTable trades={this.props.trade}/>} 
                    ....
                    ....

The value for this.props.trade is coming from the store.

The problem here is that the table header shows the checkbox, but the rows dont show the checkbox I have read the documentation and the default behavior is that the checkboxes show up.

Wham I am doing here that the checkbox for the rows don't show up?

checkboxes should be there by default. Are there any errors in the console ? Can you try to add selectable={true} to the <Table> element ? — klugjo
– klugjo, Commented Nov 23, 2017 at 7:14
There are no errors in the console, I tried manually setting all the attributes related to checkboxes as true, still it did not work. — Amar Dev
– Amar Dev, Commented Nov 23, 2017 at 7:19
Can you try removing DummyTableRow and inserting the rows directly ? or instead of <DummyTableRow trades={props.trades}/>, use {DummyTableRow(props.trades)} ? — klugjo
– klugjo, Commented Nov 23, 2017 at 7:28
did you set the 'displayRowCheckbox' to true at the TableBody?. — Deee
– Deee, Commented Nov 23, 2017 at 7:41

Vivek Doshi · Accepted Answer · 2017-11-23 07:28:21Z

2

Here issue is with DummyTableRow :

What happens When you try to do :

<TableBody>
   <DummyTableRow trades={props.trades}/>
</TableBody>

What it does is

<TableBody>
   <DummyTableRow>
        <TableRow>
            <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[0]}</TableRowColumn>
            ...
        </TableRow>
        ...
   <DummyTableRow>
</TableBody>

That is not quite correct structure , it should be like

<TableBody>
    <TableRow>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[0]}</TableRowColumn>
        ...
    </TableRow>
    ...
</TableBody>

Solution for this :

Creat a simple function instead of stateless Component that

const getRow = (data) => {
    let myRows = data.trades.map((trade, index) => {
        return <TableRow>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[0]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[1]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[2]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[3]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[4]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[5]}</TableRowColumn>
        <TableRowColumn key={index} style={{fontSize:'10px'}}>{trade[6]}</TableRowColumn>
        </TableRow>
        });
    return myRows;
}

And use it like

<TableBody>
   { getRow(props.trades) }
</TableBody>

WORKING DEMO (With issue and solution both)

answered Nov 23, 2017 at 7:28

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amar Dev Over a year ago

This works!!! got another issue, which I will try to resolve. Thanks!!!

Vivek Doshi Over a year ago

@AmarDev, Glad to here that :)

Collectives™ on Stack Overflow

material ui table row checkbox not displaying

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related