gwt 2.4 DataGrid - auto set column width?

Question

I have a problem with DataGrid in gwt 2.4. I made table with CellTable, and everything worked fine. But I needed fixed header, and then just replaced CellTable with DataGrid. I had problem with .css file, but than has been resolved.

Now, the problem is that every column have fixed width, and table put every row just in visible part of screen.

This is new and old screen shots, to make things more clear :)

http://img832.imageshack.us/img832/5026/oldscreenshot.jpg

http://img834.imageshack.us/img834/1489/newscreenshot.jpg

Can someone help to make old looking, but with fixed header.

Answer 1

You can set a fixed width for each column of the data grid:

dataGrid.setColumnWidth(sampleColumn, 40, Unit.PX);

and expand the total data grid width:

dataGrid.setWidth("100%"); // choose the most useful in your app
dataGrid.setWidth("1400px");

Answer 2

I'm not sure what the right answer is, but I don't think the previous responders understood the question. Basically, you want dataGrid to use "table-layout: auto" instead of "fixed". This is what cellTable does. Table columns are auto-sized based on content. This is easy for the content table, but to get the header-freeze, dataGrid is using a separate div/table for the header. Therefore, the header table's columns need to be explicitly sized based on the data table. They also need to be resized anytime the table changes (browser resizes, etc.). I plan on adding resizeable cols on a dataGrid, so I'll be hitting this same challenge soon I expect and will update when I have something more explicit if anyone is still tracking this thread...

Answer 3

need to wrap your content in your td with an inner div. and make sure the overflow-x is set to hidden.

table {
     overflow: hidden;
     white-space: nowrap;
     table-layout: fixed;
}

td div{
   overflow-x:hidden;
}