How to set column width?

Hi,

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

@YannisMarios

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

@AllenFang

@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?

@waynebrantley

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

I think current implementation if great!

Just add to your column description and done.

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

@AllenFang

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

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

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

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

@pceccato

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

Does it need to be an arrow function?

Does it need to be an arrow function?

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

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

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

Its not working...

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

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

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

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

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'}

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.

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

@AllenFang

@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"

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

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.

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

@AlexPuga

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

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

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

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

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!

Navigation Menu

Repository navigation

How to set column width? #226

8 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

How to set column width? #226

Description

Activity

AllenFang commented on Feb 23, 2018

waynebrantley commented on Mar 5, 2018

AllenFang commented on Mar 6, 2018

Northshoot commented on Mar 24, 2018

waynebrantley commented on May 31, 2018

nthgol commented on Jul 16, 2018

AlessandroGambaro commented on Aug 1, 2018

pceccato commented on Oct 3, 2018

waynebrantley commented on Oct 3, 2018

pceccato commented on Oct 4, 2018

B-R-Bender commented on Dec 20, 2018

JenniferMarston commented on Dec 20, 2018

ehtasham89 commented on Jan 6, 2019

JenniferMarston commented on Jan 6, 2019

lovato commented on Mar 12, 2019

8 remaining items

davidsonsns commented on Jul 17, 2019

almog-kiki commented on Jul 29, 2019

AlexPuga commented on Sep 11, 2019

ddouglas commented on Oct 26, 2019

awitherow commented on Oct 30, 2019

Guiw5 commented on Nov 12, 2019

ddouglas commented on Nov 12, 2019

Nandiniyadavraj commented on May 4, 2020

AlexPuga commented on May 4, 2020

Nandiniyadavraj commented on May 4, 2020

ChaitraK2000 commented on Sep 5, 2020

Sharmistha24 commented on Mar 23, 2021

tushar681 commented on Jun 8, 2021

istiak227 commented on Jul 8, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions