Help On How To Easily Delete Many Multiple Columns/Fields From A Dynamic Table/Chart

Ask the community
,
1

Hello all. I really would appreciate anyone’s help on this as I cannot find any related discussion at all.

I’m building a website where I have many dynamic tables (different filtering and sorting rules for each) connected to my collections database. My collections database also has many fields, but I only need 4 fields (i.e., columns) to be displayed in the dynamic tables.

The default setting on dynamic tables is to have every field in the database collection first appear, and then you must separately delete each unneeded field/column. So each time I create a new dynamic table I need to delete hundreds of fields/columns, one at a time. This is way too cumbersome and time consuming.

My questions: 1) Is there a way to get around the table display default by just selecting the 4 fields I need to display, rather than deleting the hundreds on fields I don’t need to display. 2) If not, is there an easier way to quickly delete the unneeded fields rather than manually deleting the fields one at a time?

Thank you very much ! Phil

2

Hi Phil,

There isn’t an easy way to do that currently in the editor. I’ve had the same quandary with far fewer fields to delete than you. I decided to populate the table in code after first connecting the table to a dataset with all of the fields in it. This function’s code would be called from within the dataset onReady function within the page onReady.

export function SetColumns(){
 let cName = '';
 // comma-separated lists of field names and widths in the order that you want them displayed
 let columnList = "fullName,address,city,state,zip,email,phone";
 let columnListWidth = "100,200,100,50,100,200,100";
 // put the lists into arrays so they can easily be looped through.
 const columnsToUse = columnList.split(",");
 const columnsToUseWidth = columnListWidth.split(",");
 // get the array of all the columns in the table
 const columnsInTable = $w('#table1').columns;
 let newTable = [], columnToInsert = "";
 for (var c = 0; c < columnsToUse.length; c++) {
    columnToInsert = columnsToUse[c];
    for (var i = 0; i < columnsInTable.length; i++) {
      cName = columnsInTable[i].dataPath;
      if (columnToInsert === cName) {
        // set the field width here from the columnsToUseWidth array
        columnsInTable[i].width = Number(columnsToUseWidth[c]);
        newTable.push(columnsInTable[i]);
      }
    } 
  }
  $w('#table1').columns = newTable;
}
3

Anthony, thank you very much for your response and confirming that I’m not missing something. I’m not a programmer and don’t have experience with adjusting the code, but I’ll look more carefully at the code you provided and spend some time to see if I can figure out what you are suggesting. Even if it takes me a while, in the long run it will save me a ton of time. Thanks again!! Phil