How do I set a table column label?

rachrobts · November 23, 2020, 8:41am

This is the code I’m using on a click event:

    $w("#myTable").columns[0].label="myLabel";

I feel like this should work…I’m trying to change the first column’s label each time the user clicks a different button. But nothing changes and there aren’t any errors

CODE-NINJA · November 23, 2020, 4:06pm

Try this way…

    $w("#table1").columns = [
  {
 "id": "col1",
 "dataPath": "field1",
 "label": "Field 1",
 "width": 100,
 "visible": true,
 "type": "string",
 "linkPath": "link-field-or-property"
  },
  {
 "id": "col2",
 "dataPath": "field2",
 "label": "Field 2",
 "width": 100,
 "visible": true,
 "type": "string",
 "linkPath": "link-field-or-property"
  }
];

rachrobts · November 23, 2020, 7:29pm

Ok I just tried this but no luck:

$w("#table1").columns[0] = {"label": "Field 1"};

Again no errors in the log

I tried adding it to the OnReady function to test and that didn’t work either. Also tried doing it for a table that wasn’t connected to data

CODE-NINJA · November 23, 2020, 7:40pm

https://www.wix.com/corvid/reference/$w/table/rows

rachrobts · November 23, 2020, 7:46pm

@russian-dima Sorry, what are you trying to show me in that doc?

CODE-NINJA · November 23, 2020, 7:49pm

@rachrobts

Perhaps what you are trying to do is not exactly possible that way you want (i think).
But for me it works. I tried it out. I could change the label of the table-rows, with exactly this code, i gave you.

rachrobts · November 23, 2020, 7:57pm

@russian-dima Is there a way I can edit just the label field and not those other properties?

CODE-NINJA · November 23, 2020, 7:59pm

@rachrobts
Delete not needed properties one by one, till it do not work. Then you can see, which ones are necessary & which not. (start from the last properties)

rachrobts · November 23, 2020, 8:04pm

@russian-dima Sorry you’re right I just figured that out, I should have tried one by one first before asking. Ok so. I have a new problem.

Now the label changes, but it stopped filtering my data. Nothing shows up in the table now. Here’s my full code:

export function button6_click(event) {

    $w("#table1").columns = [
    {
         "id": "col1",
         "label": "Trailblazers",
    },];

    $w('#button1').enable();
    $w('#button2').enable();
    $w('#button3').enable();
    $w('#button4').enable();
    $w('#button5').enable();
    $w('#button6').disable();
    $w('#button7').enable();

    $w("#dataset1").setFilter(wixData.filter()
    .eq("type", "Trailblazers"));

}

Weirdly the table is still changing to the correct height as if it’s loading the data…

CODE-NINJA · November 23, 2020, 9:16pm

@rachrobts
I experimented once here at this example with tables, perhaps you can learn something from it…

https://russian-dima.wixsite.com/wixworld/blank-2

The coding is very long and not everything will be interesting for you, but this code is from/for the given example. You have to search for the right/interessting sections/parts.

import wixData from 'wix-data';

//--------------------- USER-INTERFACE ---------------------------
var DATABASE    = "studentscores"
var DATASET     = "dataset1"
var TABLE       = "table1"
var REFERENCE1  = "studentname"
var REFERENCE2  = "stulastname"
var REFERENCE3  = "english"
var REFERENCE4  = "french"
var REFERENCE5  = "japanese"
var REFERENCE6  = "mathematics"
var REFERENCE7  = "physics"
var REFERENCE8  = "chemics"
var REFERENCE9  = "politics"
var counter     = 0
var myArray     = []
//--------------------- USER-INTERFACE ---------------------------


$w.onReady(function () {
 var myElement = "#text"
 var targetId

    change_IFbgcolor_standard()

 for (var i = 1; i < 10; i++) {
        $w(myElement+i).onViewportEnter( (event) => {
            targetId = event.target.id; 
            console.log((targetId))
            myArray.push(targetId)
            counter = counter+1 
            console.log(counter)
            $w('#TXTtotaltables').text = counter.toString()
        })
    }
    console.log(myArray)
    console.log(counter)
    $w('#TXTtotaltables').text=counter  
})

export function BTNsave1_click(event) {save_TableData(0)}
export function BTNsave2_click(event) {save_TableData(1)}
export function BTNsave3_click(event) {save_TableData(2)}
export function BTNsave4_click(event) {save_TableData(3)}
export function BTNsave5_click(event) {save_TableData(4)}
export function BTNsave6_click(event) {save_TableData(5)}
//-------------------------------------------------------------------
export function BTNload1_click(event) {load_TableData(0)}
export function BTNload2_click(event) {load_TableData(1)}
export function BTNload3_click(event) {load_TableData(2)}
export function BTNload4_click(event) {load_TableData(3)}
export function BTNload5_click(event) {load_TableData(4)}
export function BTNload6_click(event) {load_TableData(5)}
//-------------------------------------------------------------------
export function BTNtest_click(event) {zzz()}

function zzz (parameter) {
    console.log(counter)
    console.log(myArray)
    $w('#TXTtotaltables').text = counter.toString()
}

function load_TableData(parameter) {
 if ($w('#INPUTdatabase').value!=0){DATABASE = $w('#INPUTdatabase').value} else {$w('#INPUTdatabase').value=DATABASE}
 if ($w('#INPUTdataset').value!=0){DATASET = $w('#INPUTdataset').value} else {$w('#INPUTdataset').value=DATASET}
 if ($w('#INPUTdatatable').value!=0){TABLE = $w('#INPUTdatatable').value} else {$w('#INPUTdatatable').value=TABLE}
    $w("#COLreference"+(parameter+1)).value = $w("#"+TABLE).columns[parameter].dataPath
    $w("#COLlabel"+(parameter+1)).value = $w("#"+TABLE).columns[parameter].label
    $w("#COLtype"+(parameter+1)).value = $w("#"+TABLE).columns[parameter].type
    $w("#COLwidth"+(parameter+1)).value = $w("#"+TABLE).columns[parameter].width

    change_IFbgcolor_activated(parameter)
}

/*
function save_TableData(parameter) {
    var ColumnID, ColDataPath, ColLinkPath, ColumnLabel, ColumnWidth, ColumnType
    if ($w("#"+TABLE).columns[parameter].id!=parameter) {ColumnID = $w("#"+TABLE).columns[parameter].id;}
    if ($w("#"+TABLE).columns[parameter].dataPath!=parameter) {ColDataPath = $w("#"+TABLE).columns[parameter].dataPath;}
    if ($w("#"+TABLE).columns[parameter].linkPath!=parameter) {ColLinkPath = $w("#"+TABLE).columns[parameter].linkPath;} 
    if ($w("#"+TABLE).columns[parameter].label!=parameter) {ColumnLabel = $w("#"+TABLE).columns[parameter].label;} 
    if ($w("#"+TABLE).columns[parameter].width!=parameter) {ColumnWidth = $w("#"+TABLE).columns[parameter].width;}
    if ($w("#"+TABLE).columns[parameter].type!=parameter) {ColumnType = $w("#"+TABLE).columns[parameter].type;} 
}
*/

function save_TableData(parameter) {
 var columnWidth
 
 if ($w('#INPUTdatabase').value!=0){DATABASE = $w('#INPUTdatabase').value} else {"DATABASE = " + console.log(DATABASE), $w('#INPUTdatabase').value=DATABASE}
 if ($w("#COLwidth"+parameter).value!=0) {columnWidth=$w("#COLwidth1").value} else{columnWidth=100}

    console.log(parameter)
    console.log("#COLreference"+(parameter+1))
    console.log($w("#COLreference"+(parameter+1)).value)
    console.log(DATABASE)

    $w("#"+TABLE).columns = [{
 "id":       ("col"+parameter),
 "dataPath": $w("#COLreference"+(parameter+1)).value,
 "label":    $w("#COLlabel"+(parameter+1)).value,
 "width":    $w("#COLwidth"+(parameter+1)).value,
 "visible":  true,
 "type":     "string",
    }]

    wixData.query(DATABASE)
        .find()
        .then((res) => {
 
 let DATASETtable = ("#" + $w('#INPUTdataset'))
            console.log(DATASETtable)
 
            console.log(res.items)
            DATASETtable.rows = res.items;
        });
    console.log($w('#table1').columns.values())
}



function info_TableData(parameter) {
 var ColumnID, ColDataPath, ColLinkPath, ColumnLabel, ColumnWidth, ColumnType
    console.log("#"+TABLE)
    console.log($w("#"+TABLE))

 if ($w("#"+TABLE).columns[parameter].id!=parameter) {ColumnID = $w("#"+TABLE).columns[parameter].id;} else {}
 if ($w("#"+TABLE).columns[parameter].dataPath!=parameter) {ColDataPath = $w("#"+TABLE).columns[parameter].dataPath;} else {}
 if ($w("#"+TABLE).columns[parameter].linkPath!=parameter) {ColLinkPath = $w("#"+TABLE).columns[parameter].linkPath;} else {}
 if ($w("#"+TABLE).columns[parameter].label!=parameter) {ColumnLabel = $w("#"+TABLE).columns[parameter].label;} else {}
 if ($w("#"+TABLE).columns[parameter].width!=parameter) {ColumnWidth = $w("#"+TABLE).columns[parameter].width;} else {}
 if ($w("#"+TABLE).columns[parameter].type!=parameter) {ColumnType = $w("#"+TABLE).columns[parameter].type;} else {}

    console.log(ColumnID)
    console.log("-----COLUMN-"+parameter+"-----")
    console.log("Column-Data-Path = " + ColDataPath)
    console.log("Column-Label = " + ColumnLabel)
    console.log("Column-Type = " + ColumnType)
    console.log("Column-Width = " + ColumnWidth)
    console.log("Column-Link-Path = " + ColLinkPath)
}




function populate_table (parameter){
 var columnWidth
    $w.onReady(function () {

 if ($w("#COLwidth1").value!=0) {columnWidth=$w("#COLwidth1").value} else{columnWidth=100}
    DATABASE = $w('#INPUTdatabase').value
    console.log(DATABASE)

    $w("#table1").columns = [{
 "id":       "col"+parameter,
 "dataPath": $w("#COLreference"+parameter).value,
 "label":    $w("#COLlabel"+parameter).value,
 "width":    $w("#COLwidth"+parameter).value,
 "visible":  true,
 "type":     "string",
    }]

    wixData.query("DATABASE")
        .find()
        .then((res) => {
 let DATASETtable = ("#" + $w('#INPUTdataset'))
            console.log(DATASETtable)
            DATASETtable.rows = res.items;
        })
        .catch((err) => {
            console.log(err)
        })
        console.log($w('#table1').columns.values())
        $w('#dataset1').refresh()
    });
}



export function BTNcolor_click(event) {change_IFbgcolor_activated()}

function change_IFbgcolor_activated (parameter) {
 let i = parameter+1
 //for (var i = 1; i < 7; i++) {
        $w('#COLreference'+i).style.backgroundColor ="rgba(255,255,255,1)"
        $w('#COLreference'+i).style.borderColor = "#3D9BE9"
        $w('#COLlabel'+i).style.backgroundColor ="rgba(255,255,255,1)"
        $w('#COLlabel'+i).style.borderColor = "#3D9BE9"
        $w('#COLtype'+i).style.backgroundColor ="rgba(255,255,255,1)"
        $w('#COLtype'+i).style.borderColor = "#3D9BE9"
        $w('#COLwidth'+i).style.backgroundColor ="rgba(255,255,255,1)"
        $w('#COLwidth'+i).style.borderColor = "#3D9BE9" 
 //}
}


function change_IFbgcolor_standard (parameter) {
 for (var i = 1; i < 7; i++) {console.log("Coloring started")
        {$w('#COLreference'+i).style.backgroundColor ="rgba(255,255,255,0.1)";}
 //  $w('#COLreference'+i).style.borderColor = "#3D9BE9"
        $w('#COLlabel'+i).style.backgroundColor ="rgba(255,255,255,0.1)";
 //  $w('#COLlabel'+i).style.borderColor = "#3D9BE9"
        $w('#COLtype'+i).style.backgroundColor ="rgba(255,255,255,0.1)";
 //  $w('#COLtype'+i).style.borderColor = "#3D9BE9"
        $w('#COLwidth'+i).style.backgroundColor ="rgba(255,255,255,0.1)";
 //  $w('#COLwidth'+i).style.borderColor = "#3D9BE9" 
    }
}



export function button6_click(event) {LOOPING()}

function LOOPING (parameter) {
 var typeElements = $w("Button");
 var Button
 
 for (var i = 1; i < 15; i++) {
 
        Button = typeElements[i]
        myArray=myArray.push(Button)
 
    }
    console.log(myArray)
 
 let Button1 = typeElements[1]
 let Button2 = typeElements[2]
 let Button3 = typeElements[3]
 let Button4 = typeElements[4]
 let Button5 = typeElements[5]
}



// find max poppulation
function findMaxPopulation (parameter) {

    wixData.aggregate("Poppulation")
    .max("population")
    .run()
    .then( (results) => {
 let populationMax = results.items[0].populationMax;
    console.log(typeof  populationMax)
    console.log("Population-Max: = " + populationMax.toString())    
    $w('#TXTmaxpopulation').text=populationMax.toString()})
}

function groupMax (parameter) {
    wixData.aggregate("Poppulation")
    .group("state")
    .max("population")
    .run()
    .then( (results) => {
 let items = results.items;
        console.log(items)
    } );
}


function ttt (parameter) {
    wixData.aggregate("Poppulation")
    .group("state")
    .count()
    .run()
    .then( (results) => {
 let items = results.items;
        console.log(items)
        console.log(items[0])
    } );
}




function trt (parameter) {
    console.log($w('#table1').id)
    console.log("ITEM = " + $w('#table1').columns[0])
    console.log("Link-Path = ")
    console.log($w('#table1').columns[0].linkPath)
    console.log("ID = " + $w('#table1').columns[0].id)
    console.log("Data-Path = " + $w('#table1').columns[0].dataPath)
    console.log("Label = " + $w('#table1').columns[0].label)
    console.log("Type = " + $w('#table1').columns[0].type)
    console.log("Width = " + $w('#table1').columns[0].width)
}


function xxx (parameter) {
 const filter = wixData.filter().eq("year", 2010);
 const having = wixData.filter().gt("maxPopulation", 1000000);

    wixData.aggregate(DATABASE)
    .filter(filter)
    .group("english", "french", "japanese")
    .sum("english", "french", "japanese")
    .having(having)
    .descending()
 //.skip(5)
 //.limit(3)
    .run()
    .then( (results) => {
 if (results.items.length > 0) {
 let items = results.items;
 let numItems = results.length;
 let hasNext = results.hasNext();

        console.log(results)
        console.log(items)
        console.log(items[0])
        } else {
 // handle case where no matching items found
        }
    } )
    .catch( (error) => {
 let errorMsg = error.message;
 let code = error.code;
    } );
}


export function button1_click(event) {console.log("Funktion gestartet!"), xxx()}
export function button2_click(event) {findMaxPopulation()}
export function button3_click(event) {groupMax()}
export function button4_click(event) {ttt()

export function button12_click(event) {load_TableData(4)}
export function BTNinfo6_click(event) {load_TableData(5)}

I can not remember anymore, what i wanted to do with that example, but you can switch between the two tables to show data. Just type in “Table2” instead of “Table1” after LOADING DATA into table. Then press SAVE or something like this.

rachrobts · November 24, 2020, 12:26am

@russian-dima Oh man I’m pretty new to this and don’t really know what to look for in there. I did try adding " $w( ‘#dataset1’ ).refresh();" tho from there but to no avail

rachrobts · November 24, 2020, 12:37am

@russian-dima Nevermind I got it! I needed to set the “dataPath” property to the correct value

CODE-NINJA · November 24, 2020, 12:40am

@rachrobts
Nice to hear, that you could find your solution. Good luck and happy coding!

rachrobts · November 24, 2020, 12:41am

@russian-dima Thank you so much!

Topic		Replies	Views
How do I hide table columns? Ask the community code , question	8	1019	April 23, 2021
Making table columns invisible Ask the community code , question	6	1113	March 16, 2018
change table column header by code, possible ? Ask the community code , question	3	453	September 10, 2019
Change label on button when dropdown selected Ask the community code , question	2	120	November 22, 2020
Table CellEvent API not Correct? Ask the community code , question	12	202	June 9, 2021

How do I set a table column label?

Related topics