How to set column width? #226

YannisMarios · 2018-02-23T03:00:03Z

Hi,

I am trying to set the column width? How do you do It with react-bootstrap-table2?

AllenFang · 2018-02-23T06:51:05Z

This is not implemented yet. I will enhance this feature ASAP, thanks.

waynebrantley · 2018-03-05T19:42:24Z

@AllenFang Trying to convert to your new version. Ran into this same issue - pretty much blocking us at this point. I was able to use headerStyle to set the width for now. Maybe that is the new way?

AllenFang · 2018-03-06T16:19:28Z

@waynebrantley right now, headerStyle is just a way, I'm think other good solution for it. I apologize for this inconvenience

Northshoot · 2018-03-24T18:09:11Z

I think current implementation if great!

Just add to your column description and done.

 headerStyle: (colum, colIndex) => {
          return { width: '80px', textAlign: 'center' };
        }

waynebrantley · 2018-05-31T13:44:04Z

@AllenFang so is headerStyle going to be how this is done? That is fine, might should put a storybook showing?

nthgol · 2018-07-16T21:55:38Z

can anyone suggest a way to 'width - auto' size the columns according to the data?

AlessandroGambaro · 2018-08-01T13:28:18Z

<BootstrapTable....>
<TableHeaderColumn width={'20%'} ....
<TableHeaderColumn width={'80%'} ...

pceccato · 2018-10-03T11:50:45Z

Is there an example of how to set the column widths? This is fundamental functionality...

waynebrantley · 2018-10-03T18:04:03Z

@pceccato See @Northshoot comment above...that is part of the column definition...works good.

pceccato · 2018-10-04T10:28:20Z

Does it need to be an arrow function?

B-R-Bender · 2018-12-20T13:17:04Z

Does it need to be an arrow function?

No, you could use anonymous function declaration. Or any other you may like.

JenniferMarston · 2018-12-20T21:50:18Z

Hi. I'm just starting to use the component, but the proposed does not work if we want the table to be responsive.

ehtasham89 · 2019-01-06T14:19:56Z

how to set width in react-bootstrap-table2
let columns = [ { dataField: 'lastModified', text: 'Last Modified Date', width: "60" }, ]

Its not working...

JenniferMarston · 2019-01-06T14:36:40Z

Try adding 60px instead. That should work, but then the table loses its responsive behavior.

…

On Sun, Jan 6, 2019 at 9:19 AM Ethasham Nasir ***@***.***> wrote: how to set width in react-bootstrap-table2 let columns = [ { dataField: 'lastModified', text: 'Last Modified Date', width: "60" }, ] Its not working... — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#226 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJIgLu9-XTfSVcTzGq7Rqs7tEMTzTwQWks5vAgYNgaJpZM4SQUTB> .

lovato · 2019-03-12T23:51:42Z

Response is above: #226 (comment)
It works.

mhdfaisal · 2019-03-24T15:20:35Z

I think current implementation if great!

Just add to your column description and done.
 headerStyle: (colum, colIndex) => {
          return { width: '80px', textAlign: 'center' };
        }

It works

Maneeshachandran · 2019-04-11T09:35:37Z

Hi,
I am trying to increase the width of some particular columns. Adding style to the column description doesn't help. How to achieve my requirement?

Shannibrst · 2019-04-25T12:55:14Z

Hello, Same problem how to set column width?
above examples, not works for me

Thanks

lovato · 2019-04-26T01:05:33Z

@Maneeshachandran and @Shannibrst ... can you share a few code snippets?

Maneeshachandran · 2019-04-26T06:41:41Z

@lovato I need to increase the width of the first column. So I have used the style. But it is not working.
var Columns = [
{
dataField: "description",
text: "Description",
editable: false,
style:{
width: '10%'
}
},
{
dataField: "deliverableSatus",
text: "Deliverable Status",
editor: {
type: Type.SELECT,
options: [
{
value: "Complete",
label: "Complete"
},
{
value: "Incomplete",
label: "Incomplete"
},
{
value: "N/A",
label: "N/A"
}
]
}
}
]

lovato · 2019-04-26T18:19:33Z

@Maneeshachandran have you tried previous responses? That worked for me, and it is different from your approach.
Try:

var Columns = [
  {
    dataField: "description",
    text: "Description",
    editable: false,
    headerStyle: () => {
      return { width: "10%" };
    }
  },
  {
    dataField: "deliverableSatus",
    text: "Deliverable Status",
    editor: {
      type: Type.SELECT,
      options: [
        {
          value: "Complete",
          label: "Complete"
        },
        {
          value: "Incomplete",
          label: "Incomplete"
        },
        {
          value: "N/A",
          label: "N/A"
        }
      ]
    }
  }
];

Maneeshachandran · 2019-04-29T05:37:36Z

@lovato Hi Lovato.. It is working for a simple table. Whereas in my case, I need to implement it for a large table. I have vertical and horizontal scroll bars for the table. For this table, I cannot able to fix the column width.

lovato · 2019-04-29T14:06:18Z

@Maneeshachandran Sorry, but w/o code for this "large table", I can't understand the problem. I am using it across two projects, different table sizes, several tables, and everything is running smooth.

davidsonsns · 2019-07-17T12:14:51Z

I just followed this reference and it worked for me react-bootstrap-table2 storybook Work on Header Columns - Customize Column Style

almog-kiki · 2019-07-29T11:52:32Z

.react-bootstrap-table th[data-row-selection] {
width: 40px !important;
}

AlexPuga · 2019-09-11T06:04:58Z

css

.react-bootstrap-table {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch
}
.react-bootstrap-table table {
table-layout: auto !important
}
.table th,
.table td {
white-space: nowrap
}

Table Rows Options:
headerStyle:{minWidth: '200px'}

ddouglas · 2019-10-26T20:20:47Z

I have no doubt that all of these solutions work flawlessly, however I am hiding the header row:

        {
            headerStyle: () => {
                return { width: "70%" };
            },
            dataField: "name",
            text: "Name",
            headerAttrs: {
                hidden: true
            },
            formatter: (_, row) => {
                return (
                    <div>
                        <Image
                            src={IMAGE_URL + `/alliance/` + row.id + `_32.png`}
                            rounded
                            fluid
                            className="mr-3"
                        ></Image>
                        <LinkContainer to={`/alliances/` + row.id}>
                            <a>{row.name}</a>
                        </LinkContainer>
                    </div>
                );
            }
        },

and due to this none of the proposed solutions are working. I can even see the classes being applied using Chrome Dev Tools. The issue, for me, is the default style applied to the wrapper class:

.react-bootstrap-table table {
    table-layout: fixed;
}

Using dev tools, if I remove that class, the table width adopts the values of the width parameters passes via to BS Tables. I need away to remove this class via the library. I have tried passing in null and a blank string to no avail.
I also apologize because I am not that savy with CSS and I am just learning React, so please excuse any ignorance. I have also read the documentation and could not find a solution.

Thank You.

awitherow · 2019-10-30T22:01:30Z

is this going to be done (been about a year now) or just hacked?

Guiw5 · 2019-11-12T15:47:29Z

@AllenFang @YannisMarios
I think it should be closed as it's solved by an alternative way to do it.
...as we said "it's not an issue is a feature"

ddouglas · 2019-11-12T15:52:52Z

Add the bootstrap4 property and the header overrides I meantion above take effect.

Nandiniyadavraj · 2020-05-04T10:12:00Z

hello there,
I checked on all possible way to increase column width as mentioned above but none of it work for me.

          headerStyle: (colum, colIndex) => {
                return { 'white-space': 'nowrap', width: '100px' };
            }

with the help of this code I'm able to manage table header column size but not table cells size.
Even I applied css also on table ... help me out if any of you had solved this issue.

Thanks.

AlexPuga · 2020-05-04T10:35:07Z

Try it:
formatter: (col, row) => { return <span style={{display: 'block', width: 100, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis'}}>{col}</span> }

Nandiniyadavraj · 2020-05-04T10:48:04Z

It's really working. Thank you so much @AlexPuga

ChaitraK2000 · 2020-09-05T12:03:10Z

Hi I am trying React-bootstrap-table. But i wanted to increase the width of header row. How can i do that?

yousefshakoury · 2020-11-17T16:25:47Z

I think current implementation if great!

Just add to your column description and done.
 headerStyle: (colum, colIndex) => {
          return { width: '80px', textAlign: 'center' };
        }

Thanks

Sharmistha24 · 2021-03-23T09:56:00Z

Try this.
{
dataField: 'about',
text: 'About',
headerStyle: () => {
return { minWidth: '200px' };
}
}

tushar681 · 2021-06-08T21:23:55Z

Hi there,
I am facing issue because I am using a table without header, it is hidden as below:
headerAttrs: {
hidden: true
}
As it is hidden, so my headerStyle is not working on it.
Is there any way, I can set width of table column without headerStyle and only using style :{} attribute or any other way.

Thanks in advance

istiak227 · 2021-07-08T06:37:12Z

Try it:
formatter: (col, row) => { return <span style={{display: 'block', width: 100, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis'}}>{col}</span> }

if nothing works, try this one. Worked for me. Cheers!

dotjrt mentioned this issue Nov 14, 2019

Column width #1160

Closed

vanessa-hu mentioned this issue Nov 20, 2020

Table Text and Spacing Styling (found under general guidelines) keepid/keepid_client#134

Closed

How to set column width? #226

How to set column width? #226

Comments

YannisMarios commented Feb 23, 2018

AllenFang commented Feb 23, 2018

waynebrantley commented Mar 5, 2018 • edited Loading

AllenFang commented Mar 6, 2018

Northshoot commented Mar 24, 2018

waynebrantley commented May 31, 2018

nthgol commented Jul 16, 2018

AlessandroGambaro commented Aug 1, 2018

pceccato commented Oct 3, 2018

waynebrantley commented Oct 3, 2018

pceccato commented Oct 4, 2018

B-R-Bender commented Dec 20, 2018 • edited Loading

JenniferMarston commented Dec 20, 2018

ehtasham89 commented Jan 6, 2019

JenniferMarston commented Jan 6, 2019 via email

lovato commented Mar 12, 2019

mhdfaisal commented Mar 24, 2019

Maneeshachandran commented Apr 11, 2019

Shannibrst commented Apr 25, 2019 • edited Loading

lovato commented Apr 26, 2019 • edited Loading

Maneeshachandran commented Apr 26, 2019

lovato commented Apr 26, 2019

Maneeshachandran commented Apr 29, 2019

lovato commented Apr 29, 2019

davidsonsns commented Jul 17, 2019

almog-kiki commented Jul 29, 2019

AlexPuga commented Sep 11, 2019 • edited Loading

ddouglas commented Oct 26, 2019

awitherow commented Oct 30, 2019

Guiw5 commented Nov 12, 2019

ddouglas commented Nov 12, 2019 • edited Loading

Nandiniyadavraj commented May 4, 2020

AlexPuga commented May 4, 2020 • edited Loading

Nandiniyadavraj commented May 4, 2020

ChaitraK2000 commented Sep 5, 2020

yousefshakoury commented Nov 17, 2020

Sharmistha24 commented Mar 23, 2021

tushar681 commented Jun 8, 2021

istiak227 commented Jul 8, 2021

waynebrantley commented Mar 5, 2018 •

edited

Loading

B-R-Bender commented Dec 20, 2018 •

edited

Loading

Shannibrst commented Apr 25, 2019 •

edited

Loading

lovato commented Apr 26, 2019 •

edited

Loading

AlexPuga commented Sep 11, 2019 •

edited

Loading

ddouglas commented Nov 12, 2019 •

edited

Loading

AlexPuga commented May 4, 2020 •

edited

Loading