Vue Tables 2 custom row style

Question

So I'm using vue tables 2 and found little problem. Let's assume Im getting list of items and they have column called status, each status is constant and now I need to get translated values so making here relation status=key(constant). Table with translated values has color which I'd like to use to fill row.

I see in documentation that there is rowClassCallback, but I'd to return inline style like: background-image: $color (for selected status).

Even in this function (rowClassCallback) I can't check value of color because it's in data.

Here in options rowClassCallback is example what I'd to make.

Vue.use(VueTables.ClientTable);

new Vue({
    el: "#app",
    data: {
        columns: ['name', 'code', 'uri'],
        data: getData(),
        options: {
            headings: {
                name: 'Country Name',
                code: 'Country Code',
                uri: 'View Record'
            },
            editableColumns: ['name'],
            sortable: ['name', 'code'],
            filterable: ['name', 'code'],
            rowClassCallback: row => {
                return `background-color: ${this.getProperColor(row.id)}`;
            }
        }
    },
    methods: {
        getProperColor(id) {
            if (id === 245) {
                return "#32CD32"
            }
        }
    },
});

function getData() {
    return [{
        code: "ZW",
        name: "Zimbabwe",
        created_at: "2015-04-24T01:46:50.459583",
        updated_at: "2015-04-24T01:46:50.459593",
        uri: "http://api.lobbyfacts.eu/api/1/country/245",
        id: 245
    }, {
        code: "ZM",
        name: "Zambia",
        created_at: "2015-04-24T01:46:50.457459",
        updated_at: "2015-04-24T01:46:50.457468",
        uri: "http://api.lobbyfacts.eu/api/1/country/244",
        id: 244
    }, {
        code: "YE",
        name: "Yemen",
        created_at: "2015-04-24T01:46:50.454731",
        updated_at: "2015-04-24T01:46:50.454741",
        uri: "http://api.lobbyfacts.eu/api/1/country/243",
        id: 243
    }, {
        code: "EH",
        name: "Western Sahara",
        created_at: "2015-04-24T01:46:50.452002",
        updated_at: "2015-04-24T01:46:50.452011",
        uri: "http://api.lobbyfacts.eu/api/1/country/242",
        id: 242
    }, {
        code: "RS",
        name: "Serbia",
        created_at: "2015-04-24T01:46:50.342496",
        updated_at: "2015-04-24T01:46:50.342501",
        uri: "http://api.lobbyfacts.eu/api/1/country/196",
        id: 196
    }];
}

Welcome to SO. Please see How to Ask for suggestions how to improve your question so other may help. — Andrew Nolan

ElGovanni ElGovanni · Accepted Answer · 2020-03-30T14:53:59

You can use similar method named rowAttributesCallback instead of rowClassCallback to pass your arguments to row.

options: {
    editableColumns: ['name'],
    sortable: ['name', 'code'],
    filterable: ['name', 'code'],
    rowAttributesCallback: row => {
        return {"style": "color: red"};
    }
}

Vue Tables 2 custom row style

1 Answers