How to set column width?

YannisMarios commented 6 years ago

Hi,

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

AllenFang commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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

Northshoot commented 6 years ago

I think current implementation if great!

Just add to your column description and done.

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

waynebrantley commented 6 years ago

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

nthgol commented 6 years ago

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

AlessandroGambaro commented 6 years ago

pceccato commented 6 years ago

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

waynebrantley commented 6 years ago

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

pceccato commented 6 years ago

Does it need to be an arrow function?

B-R-Bender commented 5 years ago

Does it need to be an arrow function?

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

JenniferMarston commented 5 years ago

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

ehtasham89 commented 5 years ago

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

Its not working...

JenniferMarston commented 5 years ago

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 notifications@github.com 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 commented 5 years ago

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

mhdfaisal commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

Thanks

lovato commented 5 years ago

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

Maneeshachandran commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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

almog-kiki commented 5 years ago

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

AlexPuga commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

Guiw5 commented 5 years ago

@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 commented 5 years ago

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

Nandiniyadavraj commented 4 years ago

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 commented 4 years ago

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

Nandiniyadavraj commented 4 years ago

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

ChaitraK2000 commented 4 years ago

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

yousefshakoury commented 3 years ago

I think current implementation if great!

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

Thanks

Sharmistha24 commented 3 years ago

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

tushar681 commented 3 years ago

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 commented 3 years ago

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!

react-bootstrap-table / react-bootstrap-table2

How to set column width? #226