I have base react-bootstrap-table code: 

```js
import React from 'react'
import BootstrapTable from 'react-bootstrap-table-next';
import cellEditFactory from 'react-bootstrap-table2-editor';

const products = [
  {
    id: "0",
    name: "test",
    price: "2100"
  },
  {
    id: "1",
    name: "test",
    price: "2100"
  },
  {
    id: "2",
    name: "test",
    price: "2120"
  }
];

const columns = [
  {
    dataField: "id",
    text: "Product ID"
  },
  {
    dataField: "name",
    text: "Product Name",
  },
  {
    dataField: "price",
    text: "Product Price"
  }
];
export default class App extends React.Component {

    render() {
        return (
            <BootstrapTable
            keyField="id"
            data={ products }
            columns={ columns }
            cellEdit={ cellEditFactory({mode: 'click'})}
            />
        )
    }
}

```

My problem is that column changes width, when I click editable cell. I see on live demo that is way to block this effect. [live demo](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Cell%20Editing&selectedStory=Click%20to%20Edit&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel)

[![screenshoot before click](https://i.stack.imgur.com/PuIYs.png)](https://i.stack.imgur.com/PuIYs.png)
[![screenshoot after click](https://i.stack.imgur.com/txFLA.png)](https://i.stack.imgur.com/txFLA.png)

I try avoid this effect by adding css with max width, but it's not problem cell, but whole column: 

```js
editorStyle: {
    backgroundColor: '#20B2AA',
    maxWidth: '30%',
},

```

[![css changes](https://i.stack.imgur.com/REwtY.png)](https://i.stack.imgur.com/REwtY.png)