Data table with fixed column with

Question

I have a data table bound to a row set , and I would like the table to have fixed column widths to avoid unpleasant display shifts when paging through it.
The column component does not have too many properties I can work with (maybe this can be fixed in a future release??). Therefore I tried setting the style property of the output text object inside the column. The result looks good in the IDE, but reverts to variable column widths in the browser. I even tried setting the style property at runtime, with no luck.
Unfortunately I can't pad the column header with spaces, because output text has the annoying habit of converting any group of more than one blank space character to one char only (by the way, any remedy to that?). Trying to drop a grid or group panel in place of the column header and pad the column title with invisible (i.e. color: white) output texts did not work either...
Any ideas??
Thanks,
Luca

Answer 1

I took a look at the html encoder for data table and here's a trick you can use:
Go to your stylesheet (by default resources/stylesheet.css: open the Resources node in the project navigator and double click on stylesheet.css).
Let's say you want three columns - so add something like the following to the stylesheet:
.colwidth1 { width: 200px }
.colwidth2 { width: 400px }
.colwidth3 { width: 300px }
Save the stylesheet (ctrl-S).
Now, back in the designer, right click and select "Refresh" to ensure that the new stylesheet edits are discovered.
Then go to the designer surface, and select the data table (make sure it's selected, not one of its children like columns or output texts - if so hit Escape to pop to parent, or just click on it directly in the app outline.)
Go to the "columnClasses" property in the property sheet - and enter "colwidth1, colwidth2, colwidth3". Note - no dots here. If you have more than 3 columns you would obviously add additional columns here.
The table should now use the desired column widths - including the browser.