React-bootstrap-table2: Automatically set column width based on max cell text width?

[mkwenzel]

Has anybody found a way to auto set the column widths?

I would love to see functionality for setting the column widths based on the size of whatever is inside the columns. Setting each column width by pixel is so inefficient to what I need to do, especially since the table size changes based on browser window size.

[AllenFang]

@mkwenzel I think you can set the white-space:nowrap on column.

Do let me know if it not work. thanks

[knowbody]

I'm also looking for the same feature, I tried setting the style on column to what you suggested but it doesn't seem to work.

[mkwenzel]

Hi @AllenFang sorry it's taken me a long time to come back to this, I finally got the chance to try implementing this and was not able to get it to work. I tried all three variations below with no luck in getting this to work, and in my table, the longest content in the column is running over into the next column. I guess I'm not sure where I should be putting the 'white-space':'nowrap'?

const columns = [
            {
                dataField: '_id',
                text: 'ID',
                headerStyle: (colum, colIndex) => {
                            return { 'white-space' : 'nowrap' };
                        }
            }

const columns = [
            {
                dataField: '_id',
                text: 'ID',
                headerStyle:  { 'white-space' : 'nowrap' }
            }



md5-a85c7c759ee8e06b1381fbe9dba4811e



const columns = [
            {
                dataField: '_id',
                text: 'ID',
                        style: {
                            'white-space' : 'nowrap'
                        }
            }

[anhthang]

@mkwenzel this one work for me

{ dataField: 'id', text: 'Id', style: {'white-space': 'nowrap'} }

[mkwenzel]

Hi @AllenFang I have still not been able to get this to work!

It occurred to me that maybe I'm wording this incorrectly and that's why people are suggesting that I use "nowrap" when it does not achieve what I want.

When I use
{ dataField: 'id', text: 'Id', style: {'white-space': 'nowrap'} }

It renders and looks like this where the text of the column that I am using "nowrap" on runs over the text in the adjacent column.

What I am looking for is the ability to have the text not wrap or bleed into the next column, but also not have to set the width of the column manually via headerstyle.

[pmogilev]

Thats not an ideal solution but it worked for me ....

{
dataField: 'email',
text: 'Email',
sort: true,
headerStyle: (colum, colIndex) => {
return { width: '30%', textAlign: 'left' };
}
},

[borihan-p]

Removing "table-layout: fixed" in react-bootstrap-table2.scss can stop the bleed. It worked for me.

[mkwenzel]

Tried @borihan-p 's recommendation and it did not work for me. Still no solution, I've just been working around it.

[TheShadow8]

My solution is I created an css file for BootstrapTable and imported css file to js file. Then you can customize css file to fit your needs. I can customize a lot by using this method. See my example images below.

[fabriciopirini]

Removing "table-layout: fixed" in react-bootstrap-table2.scss can stop the bleed. It worked for me.

This solution worked for me but I found it easier to create the rule on my css file:

.react-bootstrap-table table { table-layout: auto !important; }

[shubham-prasad]

You can also add class table-responsive to _BootstrapTable_ element. This will result in the table becoming scrollable horizontally but there will be no overlap between the columns.

[rgonca]

@shubham-prasad Thank you, that is exactly what I was looking for