More Samples
Download Wijmo

Column Styling

FlexGrid columns have a few properties that affect styling:

  • cssClass: Specifies a class name to be added to cells in this column. The class name can be used in CSS rules to modify the style of cells in this column.
  • *align:* Specifies the horizontal alignment of text in the cells. This property is set to null by default, which causes the grid to select the alignment based on the column's dataType (numbers are right-aligned, Boolean values are centered, and other types are left-aligned). If you want to override the default alignment, set this property to 'left' 'right', or 'center'.
  • wordWrap: Specifies whether text in the cells should be allowed to wrap within the cell. Note that the grid will not adjust the row heights to fit the cell content unless you call the autoSizeRows method.

The cssClass is the most powerful and flexible of the three properties, but align and wordWrap are simple and convenient. Also, align and wordWrap apply to all cells, including headers, while cssClass applies only to scrollable cells.

Formatting cells

The cssClass property is useful for formatting entire columns. If you have to format specific cells, perhaps based on their content or on other criteria, use the formatItem event instead.