How to add conditional inline CSS to a cell in a table based on value in the cell ?

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 = arguments[0];
var value = arguments[1];
var row = field.row;
switch (field.mode) {
case 'edit':
    skuid.ui.fieldRenderers[field.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.fieldRenderers[field.metadata.displaytype].read(field, value);
    break;
}</jsitem>
         <jsitem location="inlinesnippet" name="requiredQuantityRenderer" cachelocation="false">// requiredQuantityRenderer.js
var $ = skuid.$;
var field = arguments[0];
var value = arguments[1];
var row = field.row;
if (value &amp;gt; row.Available_Quantity__c) {
    field.item.element.addClass("highlight-row");
}
skuid.ui.fieldRenderers[field.metadata.displaytype][field.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