Did you create a JavaScript snippet and specify it as a custom renderer for the field in question?  Check out this tutorial:

http://help.skuidify.com/m/11720/l/204496-table-component-custom-field-renderers

Yes Irvin,

I followed the same exercise and was able create the results as per the example.

But when I tried to tweak it to my requirement it is not displaying the columns

var $ = skuid.$, field = arguments[0],

value = arguments[1];

var iconElem =

$( ‘

Hi,

Here’s an example of field rendering that I created for another community member. Hope this helps.

<skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true" tabtooverride="Opportunity">   <models>

      <model id="Opportunity" limit="100" query="true" createrowifnonefound="false" sobject="Opportunity">

         <fields>

            <field id="Name"/>

            <field id="CreatedDate"/>

            <field id="Available_Quantity__c"/>

            <field id="Required_Quantity__c"/>

            <field id="StageName"/>

            <field id="Amount"/>

         </fields>

         <conditions/>

         <actions/>

      </model>

   </models>

   <components>

      <pagetitle model="Opportunity">

         <maintitle>

            <template>{{Model.labelPlural}}</template>

         </maintitle>

         <subtitle>

            <template>Home</template>

         </subtitle>

         <actions>

            <action type="savecancel"/>

         </actions>

      </pagetitle>

      <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Opportunity" mode="read">

         <fields>

            <field id="Name" allowordering="true"/>

            <field id="Amount"/>

            <field id="StageName" valuehalign="" type="CUSTOM" snippet="stageRenderer">

               <label>Stage</label>

            </field>

            <field id="Required_Quantity__c" decimalplaces="" valuehalign="" type="CUSTOM" snippet="requiredQuantityRenderer"/>

            <field id="Available_Quantity__c" decimalplaces="" valuehalign="" type=""/>

            <field id="CreatedDate" allowordering="true" valuehalign="" type=""/>

         </fields>

         <rowactions>

            <action type="edit"/>

            <action type="delete"/>

         </rowactions>

         <massactions usefirstitemasdefault="true">

            <action type="massupdate"/>

            <action type="massdelete"/>

         </massactions>

         <views>

            <view type="standard"/>

         </views>

      </skootable>

   </components>

   <resources>

      <labels/>

      <css>

         <cssitem location="inline" name="highlight-row" cachelocation="false"> table.nx-skootable-data tbody tr.highlight-row td {    

   background-color: LightCoral;

}</cssitem>

      </css>

      <javascript>

         <jsitem location="inlinesnippet" name="stageRenderer" cachelocation="false">// stageRenderer.js

var $ = skuid.$;

var field = argumentst0];

var value = argumentst1];

var row = field.row;

switch (field.mode) {

case 'edit':

    skuid.ui.fieldRenderersrfield.metadata.displaytype].edit(field, value);

    break;

case 'read':

case 'readonly':

    var cellElem = field.element;

    cellElem.css('background-color', function () {

        var bgValue = null;

        if (value) {

            if (row.StageName === 'Closed Won') {

                bgValue = '#71EEB8';

            } else if (row.StageName === 'Closed Lost') {

                bgValue = '#FF6347';

            } else {

                bgValue = '#FFF8DC';

            }

        }

        return bgValue;

    });

    skuid.ui.fieldRenderersrfield.metadata.displaytype].read(field, value);

    break;

}</jsitem>

         <jsitem location="inlinesnippet" name="requiredQuantityRenderer" cachelocation="false">// requiredQuantityRenderer.js

var $ = skuid.$;

var field = argumentst0];

var value = argumentst1];

var row = field.row;

if (value &amp;gt; row.Available_Quantity__c) {

    field.item.element.addClass("highlight-row");

}

skuid.ui.fieldRenderersrfield.metadata.displaytype]efield.mode](field, value);

    </jsitem>

      </javascript>

   </resources>

</skuidpage>

Thanks Irvin,

This code helped me get a pretty good perspective on how to apply css in various ways.

Thanks again it helped me do what I’m looking for.

-cheers,
Charles M