maxHeight property makes columns irresponsive to resize

[tuucan]

When the table is given a maxHeight, and columns doesn't have any width set; columns are responsive to resize up, but irresponsive to resize down. Also happens when columns have width but they don't force a horizontal scroll bar.

(resize up -> increasing width of window, resize down -> decreasing width of window)

This simplified code piece recreates the issue for me.

import React from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import '../../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css';

const products = [
  {id:'0', name:'name0', price:'price0'},
  {id:'1', name:'name1', price:'price1'},
  {id:'2', name:'name2', price:'price2'},
  {id:'3', name:'name3', price:'price3'},
  {id:'4', name:'name4', price:'price4'},
  {id:'5', name:'name5', price:'price5'},
  {id:'6', name:'name6', price:'price6'},
  {id:'7', name:'name7', price:'price7'},
  {id:'8', name:'name8', price:'price8'}
];

export default class BTable extends React.Component {
  render() {
    return (
      <BootstrapTable
        data={ products }
        maxHeight={'250px'}
      >
        <TableHeaderColumn dataField='id'isKey={true}> ID </TableHeaderColumn>
        <TableHeaderColumn dataField={'name'}> Name </TableHeaderColumn>
        <TableHeaderColumn dataField={'price'}> Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }
}

1. Start with a half size window
2. First resize up
3. Then resize down too see the effect better. I have v3.0.0

[AllenFang]

yap, it's a known issue and it's a long long story I need to introduce it.. so I'll spend some time to fix it but I'm not sure that I can fix this issue completely

[AllenFang]

Actually, if you configure height and maxHeight are also cause this issue

[tuucan]

I also recenly realised that putting in some big data like 50 columns and 100 rows causes serious freezes to the traveling between cells for editing. Upon consecutive clicks on different rows, the editable cell falls behind and application freezes for up to 3 seconds. Is this known or could it be my fault?

[AllenFang]

Is this known or could it be my fault

it's also a known issue and actually need some time to handle it. and it may not be fixed quickly, pretty busy for my work.

[manikanta-kotha]

check this source code once ...it might helps to resolve this problem

[AllenFang]

@iiitmanikanta, I hope so

[fengshuo]

I removed maxHeight and added percentage to each column, then it is responsive horizontally, but it is not responsive vertically, so I add this tableStyle={{ overflowY: 'scroll'}} to the BootstrapTable, not the perfect fix but it only works when the content is not overflow the table, anyone has better solutions?

[iratxeMoya]

Hi Allen, is this issue solved? I still have the same problem.