fixed-data-table the width doesn't adjust container

236 Views Asked by At

I have a simple fixed-data-table component, based on this example I render it on storybook

import React, { Component } from 'react';
var FixedDataTable = require('fixed-data-table');
const {Table, Column, Cell} = FixedDataTable;

export default class IndexPage extends Component{
    render() {      
        return (
            <div className='container'>             
                <div className='row'>
                    <div className='col-md-2'></div>
                    <div className='col-md-8'>
                        <Table
                            rowHeight={50}
                            headerHeight={50}
                            rowsCount={3}
                            width={1000}
                            height={500}
                            {...this.props}>
                            <Column
                              header={<Cell>Col 1</Cell>}
                              cell={<Cell>Column 1 static content</Cell>}
                              width={200}
                              flexGrow={1}
                              fixed={true}
                            />
                            <Column
                              header={<Cell>Col 2</Cell>}
                              cell={<Cell>Column 2 static content</Cell>}
                              width={200}
                              flexGrow={1}
                            />
                            <Column
                              header={<Cell>Col 3</Cell>}
                              cell={<Cell>Column 3 static content</Cell>}
                              width={200}
                              flexGrow={1}
                            />
                        </Table>
                    </div>    
                    <div className='col-md-2'></div>
                </div>
            </div>  
        );  
    }
}

The problem is: The horizontal scroll of the table doesn't appear and the table goes out of the container's boundaries.

1

There are 1 best solutions below

1
On

You would need to add overflow rules to the middle div to handle when the children (table) grow bigger than the percentage width. Try adding: overflow-x: scroll; to the middle div.