How to set width for YUI-data table dynamically based on max size of Column

I have a YUI datatable and I am putting the following data in the table:

 {key:"name", label:"name", editor: nameChoiceEditor},
 {key:"group", label:"group", editor: groupChoiceEditor},
 {key:"colony", label:"colony", width: 210, editor: colonyChoiceEditor},
 ...

Here the name column's width is set to the maximum length of characters entered for that name, and the same with group. colony's column width is set to 210 irrespective of the length of the data.

My problem is when the name column, having multiple words like "odaiah chitukuri", is showing in two lines like so:

  odaiah
  chitukuri

But when it is one word like "odaiahchitukuri" it is showing in a sin开发者_运维百科gle line, meaning the column is adjusting to fit the word.

I should have the different words in sigle line. How to do that?

Have the 'breaking' spaces replace with non-breaking spaces.

Try the following:

Change:

{key:"colony", label:"colony", width: 210, editor: colonyChoiceEditor},

To:

{key:"colony", label:"colony", width: 210, editor: colonyChoiceEditor
  formatter: function (el, oRecord, oColumn, oData) {
    el.innerHTML = oData.replace(/ /g, ' ');
  }
},

I'm not sure if your looking for a solution that will always keep the words on a single line.. but generally speaking the datatable does a good job of spacing out the columns correctly based on the content inside. In certain cases though I've definitely had to set the width of a column manually. Here is an example for a column with class appicon:

.yui-skin-sam .yui-dt tbody td.appicon {
    width: 40px;
}

Bare in mind once the number of words in the column stretches past it's defined size, it will always move to the next line.

In datatable column define :

• will be width:100
• not width:"100px"
• or width:"100"
• or width:"100em"

Use width: 100

like that then its working fine for me