This post explains how to create or at least begin to create a custom formatted DataGrid in Flex. I used the spark DataGrid for this sample. Two format settings are applied here; first is formatting the numbers as comma separated groups and format the color based on the value and second formatting the DataGrid column headers.

We have to write ItemRenderers for the above purposes. Flash Builder provides ItemRenderer template for Spark DataGrid. Just right click on your project folder and in the ‘New’ items list you will get an option for ItemRenderer and when you select it you will be asked for the option for which control you need to create the ItemRenderer for, Spark DataGrid is there on the top of the list.In the template you can add and edit required styling elements.

The Grid has a two columns Name and Score respectively. Name column is simple and displays the data and the Score column’s header is formatted in red color. Writing a HeaderRenderer for the Spark DataGrid is tricky; we’ve to write the HeaderRenderer and the correct Skin file to make it work properly. And also this column displays the positive values in black (default color) and the negative values in red color.

Download the source code here