CODEWITHSUNDEEP
reactjsreact-bootstrap
noblerare
noblerare

Reputation: 11863

Reactjs - Different columns layouts on table row affects other table rows

I'm having this issue where if I apply different column layouts to different rows in React, it messes up the column layout of other rows. For example, SpecialRows are rows in a table that I want to display. SpecialBar is bar that exists above the table which contains other stuff like filtering, searching, and whatever. SpecialBar has a different column layout than SpecialRow and yet when I do this, the columns of SpecialRows are now mimic the columns of SpecialBar and squish all the data to the right.

Any idea what may be happening? 

class Table1 extends React.Component {
    <Table>
        <tbody>
            <SpecialBar {...this.props}/>
            {this.props.moreRows.map((row) => 
                <SpecialRow {...this.props} />
            )}
         </tbody>
    </Table>
}

class SpecialBar extends React.Component {
    render() {
        return (
            <tr>
                <td className='col-md-1'>Text A</td>
                <td className='col-md-10>Text B</td>
                <td className='col-md-1>Text C</td>
            </tr>
        );
    }
}

class SpecialRow extends React.Component {
    render() {
        return (
            <td className='col-md-2'>Stuff</td>
            <td className='col-md-2'>Stuff</td>
            <td className='col-md-2'>Stuff</td>
            <td className='col-md-2'>Stuff</td>
            <td className='col-md-1'>Stuff</td>
            <td className='col-md-1'>Stuff</td>
            <td className='col-md-1'>Stuff</td>
            <td className='col-md-1'>Stuff</td>
        );
    }
}

Upvotes: 0

Views: 1274

Answers (1)

zwippie
zwippie

Reputation: 15515

Any idea what may be happening?

What's happening is that the width of the second cell of the first row (col-md-10) is setting the width for all second cells in the following rows. That's how tables work.

You can work around it by giving that col-md-10 cell a colspan="10". Do the same for cells that have col-md-2, give them colspan="2".

Upvotes: 1

Related Questions