How do I hide table columns?

Ask the community
,
1

I have a table linked to product codes collection as below
Some of the columns are not relevant to all products as you can see some are blank.
I would like to first test if the entire column is black and if it is hide it.

I found the Wix API here https://www.wix.com/velo/reference/$w/table/columns but I will admit to being a bit of a noob and cant get it to work.

Any help would be greatly appreciated.

1017×492 52.6 KB

2

This could be the way how to do it by code…(check it out [attention not tested] !!!)

var myTable = "#table1" //<--- put in here the ID of your table....

$w.onReady(function () {defineTable();});

function defineTable() {
    let myCols = []
    $w(myTable).columns = myCols;

 //creating first COLUMN in the TABLE...
    myCols.push({
       "id": "Col0",                //setting the ID of this column
       "dataPath": "firstColumn",   //setting the column-path(FIELD-ID in DB)
       "label": "First-Column",     //setting the column header/title
       "width": 50,                 //setting the column-width
       "visible": true,             //setting the visibility of this column <-----
       "type": "image"              //defining the type of used column
    });

 //creating second COLUMN in the TABLE...
 
    myCols.push({
       "id": "Col1",                //setting the ID of this column
       "dataPath": "secondColumn",  //setting the column-path(FIELD-ID in DB)
       "label": "Second-Column",    //setting the column header/title
       "width": 50,                 //setting the column-width
       "visible": false,            //setting the visibility of this column <-----
       "type": "number"             //defining the type of used column
    });
    $w(myTable).columns = myCols
}

Creating multiple table-entries…

for (var i = 0; i < DropDowns.length; i++) {
   cols.push({
      "id": "Col" + (i + 1),
      "dataPath": DropDowns[i],
      "label": DropDowns[i],
      "width": 100,
      "visible": true,
      "type": "string"
   });
}
3

@jwal485 Below is some button click code that will give you an idea of how to proceed. Substitute your actual field names obviously. There are other ways of getting the totals for columns, but I’m assuming that you are using a dataset to populate the table. The syntax with braces, brackets, and commas in the column assignment code needs to be adhered to. The key to remember is that the comma serves as the separator from one column to the next. The editor will draw your attention to any errors. The field key is what goes in the dataPath property, and the id property just needs a unique value.

export function button1_click(event) {
 // you would run this after the table data is refreshed with a new filter
 // this will give you an array of the table data
 let rows = $w("#table1").rows;
 console.log("ROWS: ",rows);
 // initiate variables to sum the amounts in the fields that potentially may have no values
 let total2 = 0, total3 = 0;
 // loop through the array and total the values in the columns you want to check.
  rows.forEach((row) => {
      if (row.test2){
          // requires number function because numbers are strings in table array
          total2 = total2 + Number(row.test2)
      }
      if (row.test3){
          total3 = total3 + Number(row.test3)
      }
  })
  console.log(total2);
  console.log(total3);
 // derive a boolean value to apply to the columns visible property below 
 let visible2 = (total2 > 0) ? true:false;
 let visible3 = (total3 > 0) ? true:false;

$w("#table1").columns = [
  {
 "id": "col1",
 "dataPath": "firstName",
 "label": "First Name",
 "width": 125,
 "visible": true,
 "type": "string",
 "linkPath": "link-field-or-property"
  },
  {
 "id": "col2",
 "dataPath": "lastName",
 "label": "Last Name",
 "width": 150,
 "visible": true,
 "type": "string",
 "linkPath": "link-field-or-property"
  },
  {
 "id": "col3",
 "dataPath": "test2",
 "label": "Test 2",
 "width": 100,
 "visible": visible2,
 "type": "number",
 "linkPath": "link-field-or-property"
    },
  {
 "id": "col4",
 "dataPath": "test3",
 "label": "Test 3",
 "width": 100,
 "visible": visible3,
 "type": "number",
 "linkPath": "link-field-or-property"
  }
];
}
4

Thank you both for your prompt replies @anthonyb I think your solution is nearer to what I need. one question what if the field has actual text eg beam angle would be something like 30deg,

5

@jwal485 It could have been done this other way where you’re simply checking for the existence of the property (of any type) in the array row. The fields test2 and test3 can be a number, text, or other types. If there hasn’t been a value entered in the collection for a given field (property in the array) for any record (the array row), it will fail this visible test and the column will be hidden.

let visible2 = false;
let visible3 = false;
rows.forEach((row) => {
   if (row.test2){
      visible2 = true;
    }
   if (row.test3){
      visible3 = true;
    }
})
console.log(visible2);
console.log(visible3);
6 
$w('#dataset1').onReady(() => {
 var newColumns = []
 var firstRow = $w('#table').rows[0]
 var columns = $w('#table').columns
        console.log(firstRow, columns)
 for (var i = 0; i < columns.length; i++) {
            console.log(columns[i].dataPath, firstRow[columns[i].dataPath])
 if (firstRow[columns[i].dataPath]) {
                newColumns.push(columns[i])
                console.log(newColumns)
            }
        }

        $w('#table').columns = newColumns

    })

My way⬆️

7

You can change the onReady to others, maybe trigger every time after filter

8

@certified-code

2313×828 455 KB

Well your solution clearly work (on the right you can see it’s selecting the rights columns) but it doesn’t display anything ! Is that normal ?

9

No my bad, got it ! (It was trigerring befor my filter function)