Changing font color on a datagrid

Hi, I am trying to change the font color or the row color on a datagrid component on Flash MX 2004, the data comes from an array.

I tried with a cell render putting the text on a text field and setting the color using html, I was able to chage the color, but now I can't order the columns when clicking the column header.

I would prefer to do it without cellRendering any way here is how I tried to do it:

The HtmlCellRender I am using is this:

import mx.core.UIComponent;
import mx.controls.TextArea;
import TextField.StyleSheet;

class HtmlCellRenderer extends UIComponent
{

      static public var CssUrl : String;
      public var style_sheet : StyleSheet = null;
      var htmlComponent : TextField;
      var listOwner : MovieClip;  
      var getCellIndex : Function;
      var getDataLabel : Function;      
      var previousLabel:String = null;

      function HtmlCellRenderer()
      {
            if (CssUrl != undefined && style_sheet == null) {
                  style_sheet = new TextField.StyleSheet();
                  style_sheet.load(CssUrl);      
              }
      }

      function createChildren(Void) : Void
      {
            if (htmlComponent == undefined)
            {
                  createLabel("htmlComponent", 1);
            }
            htmlComponent.html = true;
            htmlComponent.multiline = false;
            htmlComponent.wordWrap = false;
            htmlComponent.selectable = false;
            size();
      }

      function size(Void) : Void
      {
            var h = __height;
            var w = __width;
            htmlComponent.setSize(w-4, Math.max(h, listOwner.rowHeight-4));
            htmlComponent._x = 1;
            htmlComponent._y = 1;
      }

      function setValue(str:String, item:Object, sel:Boolean) : Void
      {
                        if (item == undefined) {
                  if (htmlComponent != undefined) {
                        htmlComponent.text = "";
                        htmlComponent._visible = false;
                        previousLabel = null;
                  }
                  return;
            }
            
            htmlComponent._visible = true;
            var columnIndex = this["columnIndex"];
                                var columnName = listOwner.getColumnAt(columnIndex).columnName;
            var htmlFunction : Function = listOwner.getColumnAt(columnIndex).htmlFunction;
            if (htmlFunction != undefined) {
                  var label = htmlFunction(item, columnName);
                  if (label != undefined) {
                        if (label != previousLabel) {
                              var oldStyleSheet = htmlComponent.styleSheet
                              if (oldStyleSheet != style_sheet && style_sheet != null) {
                                    htmlComponent.styleSheet = style_sheet;
                              }
                              htmlComponent.text = label;
                              previousLabel = label;
                        }
                  } else {
                        htmlComponent.text = "";                        
                  }
            }
      }

      function getPreferredHeight(Void) : Number
      {
            return 16;
      }

      function getPreferredWidth(Void) : Number
      {
            return 20;
      }
}



And then in the movie I have this function:

HtmlFunction = function (itemObj:Object, columnName:String) {
      if (itemObj == undefined ) {
            trace("A bug !!!");
            return;
      }
      var objData = itemObj.Cliente.datos;
      var objStyle = itemObj.Cliente.estile;
      var html:String;
      switch (columnName) {
            case "Cliente":
                  var objData = itemObj.Cliente.datos;
                  var objStyle = itemObj.Cliente.estilo;
                  break;
            case "Razon":
                  var objData = itemObj.Razon.datos;
                  var objStyle = itemObj.Razon.estilo;
                  break;
            case "RFC":
                  var objData = itemObj.RFC.datos;
                  var objStyle = itemObj.RFC.estilo;
                  break;
            case "Clase":
                  var objData = itemObj.Clase.datos;
                  var objStyle = itemObj.Clase.estilo;
                  break;
            case "Usuario":
                  var objData = itemObj.Usuario.datos;
                  var objStyle = itemObj.Usuario.estilo;
                  break;
      }
      html="<p class='" + objStyle +  "'>" + objData + "</p>"
      return html;
}

And this is the way I set up the columns:

var column = new DataGridColumn("Cliente");
column.headerText = "Cliente";
column.width = 50;
column.cellRenderer = "HtmlCellRenderer";
column["htmlFunction"] = HtmlFunction;
resultados.addColumn(column);