How to set column width?

[YannisMarios]

Hi,

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

[AllenFang]

@YannisMarios https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/221

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

[waynebrantley]

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

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

[Northshoot]

I think current implementation if great!

Just add to your column description and done.

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

[waynebrantley]

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

[nthgol]

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

[AlessandroGambaro]

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

[pceccato]

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

[waynebrantley]

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

[pceccato]

Does it need to be an arrow function?

[B-R-Bender]

Does it need to be an arrow function?

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

[JenniferMarston]

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

[ehtasham89]

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

Its not working...

[JenniferMarston]

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 [email protected] 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 https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/226#issuecomment-451745172, or mute the thread https://github.com/notifications/unsubscribe-auth/AJIgLu9-XTfSVcTzGq7Rqs7tEMTzTwQWks5vAgYNgaJpZM4SQUTB .

[lovato]

Response is above: https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/226#issuecomment-375913180 It works.

[mhdfaisal]

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]

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]

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

Thanks

[lovato]

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

[Maneeshachandran]

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

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

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

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

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

[almog-kiki]

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

[AlexPuga]

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]

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]

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

[Guiw5]

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

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