# Custom Row Colors for Table

**URL:** <https://forum.wixstudio.com/t/custom-row-colors-for-table/37184>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [September 14, 2020, 2:36pm UTC](https://forum.wixstudio.com/t/custom-row-colors-for-table/37184 "2020-09-14T14:36:53Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![nekkcebdurfee](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/nekkcebdurfee/32/23415_2.png) [@nekkcebdurfee](https://forum.wixstudio.com/u/nekkcebdurfee)\
**Post date:** [September 14, 2020, 2:36pm UTC](https://forum.wixstudio.com/t/custom-row-colors-for-table/37184/1 "2020-09-14T14:36:53Z")

</div>

This is just an informational posting. I have discovered/developed a way to present a table with customized row colors. It is display only, user cannot edit (that I can figure anyway, maybe someone can add to this). I gather you can use repeaters to do this, but if you only need a table, particularly if it is for display only, this is a pretty nice solution. Displays OK on mobile devices as well.  
The trick is to use the text paragraph element and set the html property. Here is s screen shot of the table with row colors based on the last column: \<33=green, 33-66=yellow and \>66=red. The table data could easily come from a query into a data table.

 ![](https://us1.discourse-cdn.com/wix/original/3X/6/b/6b1e00c695330f2ba8d354e39942507d996c80b3.jpeg)

Here is some code, I hope you can figure this out.

```javascript
let tableData = []
let tableHeadings = ["Name","Role","Number"]
let colorRed = "rgb(250,0,0)"
let colorGreen = "rgb(0,250,0)"
let colorYellow = "rgb(200,200,0)"
let useNumbers=false

$w.onReady(function () {
  tableData=[]
  tableData.push([{rwdata:"Sammy"},{rwdata:"Dummer"},{rwdata:"rgb(180,180,180)"},
    {rwdata:Number(Math.random()*100).toFixed(3)}]);
  tableData.push([{rwdata:"Suzy"},{rwdata:"Admin"},{rwdata:"rgb(200,1500,180)"},
    {rwdata:Number(Math.random()*100).toFixed(3)}]);
  tableData.push([{rwdata:"Shorty"},{rwdata:"Shorter"},{rwdata:"rgb(220,250,180)"},
    {rwdata:Number(Math.random()*100).toFixed(3)}]);
  tableData.push([{rwdata:"Tommy"},{rwdata:"TomTom"},{rwdata:"rgb(150,250,150)"},
    {rwdata:Number(Math.random()*100).toFixed(3)}]);
  tableData.push([{rwdata:"Adam"},{rwdata:"Ancestor"},{rwdata:"rgb(200,200,0)"},
    {rwdata:Number(Math.random()*100).toFixed(3)}]);
  tableData.push([{rwdata:"Eve"},{rwdata:"Ancestress"},{rwdata:"rgb(200,200,200)"},
    {rwdata:Number(Math.random()*100).toFixed(3)}]);
  tableData.push([{rwdata:"Xavier"},{rwdata:"X-dude"},{rwdata:"rgb(100,100,100)"},
    {rwdata:Number(Math.random()*100).toFixed(3)}]);
  tableData.push([{rwdata:"Zanadu"},{rwdata:"Mystic"},{rwdata:"rgb(250,250,100)"},
    {rwdata:Number(Math.random()*100).toFixed(3)}]);
  buildTable();
  })

function buildTable() {
 for (var i = 0; i < tableData.length; i++) {
    tableData[i][3].rwdata = Number(Math.random() * 100).toFixed(3);
  }
 let tblsrc = "";
 let fntszfull = "width:80%;font-size:24px";
  tblsrc = '<table style="' + fntszfull;
  tblsrc = tblsrc.concat(';overflow-y:auto;background-color:rgb(250,250,250);\
  border: 1px solid black;border-collapse: collapse;">\
    <tr style="background-color:rgb(250,250,250);border: 1px solid black;border-collapse: collapse;">\
    <th style="text-align: left">' + tableHeadings[0] + '</th> \
    <th style="text-align: left">' + tableHeadings[1] + '</th> \
    <th style="text-align: left">' + tableHeadings[2] + '</th> \
    </tr>');
 let rwHtml = '';
 for (i = 0; i < tableData.length; i++) {
 if (useNumbers){
 if (tableData[i][3].rwdata<33){
        rwHtml = '<tr style="background-color:' + colorGreen + ';border: 1px solid black;border-collapse: collapse;">'
      } else if (tableData[i][3].rwdata<66){
        rwHtml = '<tr style="background-color:' + colorYellow + ';border: 1px solid black;border-collapse: collapse;">'
      } else {
        rwHtml = '<tr style="background-color:' + colorRed + ';border: 1px solid black;border-collapse: collapse;">'
      }
    }
 else {
    rwHtml = '<tr style="background-color:' + tableData[i][2].rwdata + ';border: 1px solid black;border-collapse: collapse;">'
    }
    console.log("rwHtml: "+rwHtml)
    rwHtml = rwHtml.concat('<td>' + tableData[i][0].rwdata + '</td>')
    rwHtml = rwHtml.concat('<td>' + tableData[i][1].rwdata + '</td>')
    rwHtml = rwHtml.concat('<td>' + tableData[i][3].rwdata + '</td>')
    tblsrc = tblsrc.concat(rwHtml + '</tr>');
  }
  tblsrc = tblsrc.concat('</table>');
  $w('#coloredRowTable').html = tblsrc;
}

export function refreshBtn_click(event) {
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here: 
  useNumbers=false;
  buildTable();
}

export function numberBtn_click(event) {
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here: 
  useNumbers=true;
  buildTable();
}

```