Custom Row Colors for Table

Ask the community
,
1

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.

772×508 71.5 KB

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

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();
}
1 Like