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.
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.