Vue-tables-2: Have table columns name differents from column data key

[deryckoe]

this.columns = ['ID', 'Lote', 'Manzana', 'Tipo'];
this.tableData = [];

data.forEach((row) => {
    this.tableData.push(
        {
            'ID': row.id,
            'Lote': row.meta_fields.lot,
            'Manzana': row.meta_fields.block,
            'Tipo': row.meta_fields.type,
        }
    );

});

I want to use something like:

this.columns = ['ID', 'Lote', 'Manzana', 'Tipo'];
this.tableData = [];

data.forEach((row) => {
    this.tableData.push(
        {
            'property_id': row.id,
            'property_lot': row.meta_fields.lot,
            'property_block': row.meta_fields.block,
            'property_type': row.meta_fields.type,
        }
    );

});

that way I keep the relation between column title and column data but I can change the column title without breaking data relationship. For translation purposes, or if I use a tilde or special character in the title.

I try this approach before ask and fails:

this.columns = {
    property_id: 'ID',
    property_lot: 'Lote',
    property_block: 'Manzana',
    property_type: 'Tipo'
};

I get a "non-object supported by columns" error, only arrays. I can't find related documentation either.

Regards,
D.

[gergo2007]

@deryckoe in options you can do it.

Example:
https://jsfiddle.net/nzd591oe/

[deryckoe]

Thanks @gergo2007 works perfectly! I was looking in the wrong setting :)

Regards.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.