0

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.

kurumkan
  • 2,635
  • 3
  • 31
  • 55

1 Answers1

1

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.

Chase DeAnda
  • 15,963
  • 3
  • 30
  • 41
  • sorry for long delay. It solves the problem partially - but I found that the example https://facebook.github.io/fixed-data-table/example-flexgrow.html uses additional libraries - and they somehow measure wrapper's div! – kurumkan May 31 '17 at 17:54