After filter hook is not implementing the cell properties to the column issue

#1

hot.addHook(‘afterFilter’, function () {
console.log(‘afterFilter hook triggered’);

hot.updateSettings({
    cells: function (row, col, prop) {
        var cellProperties = {};
        var data = this.instance.getDataAtRow(row);

        console.log('Row:', row, 'Col:', col, 'Data:', data);

        if (col === 4) {
            if (data.FirstName === data.OtherOwner) {
                console.log('Setting dropdown for row:', row, 'col:', col);
                cellProperties.type = 'dropdown';
                cellProperties.source = teamMembers;
            } else {
                console.log('Setting text editor for row:', row, 'col:', col);
                cellProperties.editor = 'text';
            }
        }

        if (col === 5) { // Set the class names for column 5
            var cellValue = this.instance.getDataAtCell(row, col);
            console.log('Cell value at row:', row, 'col:', col, 'is:', cellValue);
            switch (cellValue) {
                case 'TO_BE_DONE':
                    cellProperties.className = 'bg-gray-600';
                    break;
                case 'IN_PROGRESS':
                    cellProperties.className = 'bg-blue-600';
                    break;
                case 'SKIPPED':
                    cellProperties.className = 'bg-yellow-300';
                    break;
                case 'PASS':
                    cellProperties.className = 'bg-green-600';
                    break;
                case 'WAIVED':
                    cellProperties.className = 'bg-green-600';
                    break;
                case 'FAIL':
                    cellProperties.className = 'bg-red-600';
                    break;
                default:
                    cellProperties.className = 'default-class';
            }
            console.log('Class name set for row:', row, 'col:', col, 'is:', cellProperties.className);
        }

        return cellProperties;
    }
});

hot.render(); // Ensure the table is re-rendered to apply the changes

});

trying to add class to column values yet no reflection in the hook. bug

#2

Hi @maruthivignesh.madha

I am not sure what is in the teamMembers array but the code itself looks good. Updated demo: https://jsfiddle.net/5m26egpd/

11

I only changed this.instance to hot and added CSS and the mentioned array of members as it was not mentioned.

1 Like
#3

Ah yes, there is one more issue. You need to pass the visualRow cause now classes are mixed. Here’s an updated demo https://jsfiddle.net/5m26egpd/1/

Change var cellValue = hot.getDataAtCell(hot.toVisualRow(row), col);

Output

12

1 Like
#4

@aleksandra_budnik Thanks for the help ! now it works perfectly.

1 Like
#5

You’re more than welcome, @maruthivignesh.madha

If you need anything, please feel free to open a new thread.

#6