Monday October 04, 2004

Aligning Text in Data Tables and Grid Panels

I've seen a number of users who want to either control the alignment of text in columns, or control the relative widths or text wrapping in the columns -- either for Data Table components, or the Grid Panel. Before I explain how to do that, let me start by explaining the synergy between JSF components and CSS2.

First, drop a Data Table component on the canvas. Notice how you get a "striped" color scheme where alternating rows are lighter and darker? That's not built into the component per se; this is done in Creator through a combination of CSS and JSF. Go ahead and open the stylesheet for your page; it's usually under the "Resources" folder, named "stylesheet.css". You'll notice it has these two rules:

.list-row-even { 
}

.list-row-odd { 
  background-color: #eeeeee;
}

As you might be able to guess from the names, these are the styles applied to even and odd numbered rows. To see how this is wired up, go back to your page, select the data table component, and look at its rowClasses property. In Creator we default this value to list-row-even,list-row-odd. This property is a list of CSS style classes. When the component is rendering the table, it will cycle through the list of classes, assigning the current style class to a given row. There's nothing magical about odd and even here; we could have had three styleclasses, "one", "two" and "three", and if the rowClasses property was set to "one,two,three" then the html table rendered for the Data Table would take three rows to cycle through the styles.

With that out of the way, let's return to the question of how to deal with column widths or column text alignment. Some users have tried to set the CSS "text-align" properties on the cell contents themselves, e.g. Output Text components embedded in the table. That's not what you want; you need the alignment set on the table cells containing the output texts. To solve that problem, we're going to use the same technique as the one used for table striping. Just like the table component cycles through the rowClasses style classes when writing out rows, it has a columnClasses property it will cycle through when writing out columns!

Let's say we want to have a table with three columns. We'd like the first column to be 10% wide, the second column to be 30% wide, and the third column to be 60% wide. Furthermore, we want the first column to be right justified and the third column to be centered. To do that, add a stylesheet section like this:

.firstColumn {
    width: 10%;
    text-align: right; 
}
.secondColumn {
    width: 30%;
    text-align: center;
}
.thirdColumn {
    width: 60%;
}

Then, for the Data Table or Grid Panel's columnClasses property, add this value: firstColumn,secondColumn,thirdColumn Notice how there's a dot/period in front of the style class names in the stylesheet, but not in the class names in the style property. That's all there is to it.

In the above screenshot I've also changed the header style to use a different foreground color, background color and font size. Notice how some columns are right justified, some are centered and some are left justified.

If you try to add pixel specific widths for particular columns, AND you've set a total table width to a particular size, the pixel width may not show up correctly at design time. That bug was fixed recently and the fix will show up in patch 3. For now, use the "Preview In Browser" action to see how the table renders in the browser instead.

(2004-10-04 10:51:21.0) Permalink