CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Amar Dev
Amar Dev

Reputation: 1479

material ui table row checkbox not displaying

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?

enter image description here

Upvotes: 1

Views: 4681

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58543

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)

Upvotes: 2

Related Questions