table-row-class-name attribute not working!

[hanya1986]

HTML: <mdt-table paginated-rows="{isEnabled: true, rowsPerPageValues: [5,10,20,100]}" mdt-row="{ data: filteredItems, 'table-row-class-name': rowClassNameCallback, 'column-keys': ['name', 'calories', 'fat', 'carbs', 'protein', 'sodium', 'calcium', 'iron'] }"> JS: $scope.rowClassNameCallback = function(row){ console.log(row); return 'red' };

CSS: .red { color: red; }

it does not change the row to red. I tried to put a breakpoint in rowClassNameCallback function, but it does not get caught. So the function never get called. I am using Angular 1.6.3. Thanks

[edeoliveira]

I'm also facing this issue Tried using clientScope but without further success

Thx

[tim7004]

any update for this issue? I'm also facing this issue...please help

[vmudimupersonal]

Ran into the same issue. The reason is the table cell styling overrides the background color of the row styling. The workaround in my case was to use the row class name function and using css to override the cell styling. In my case I wanted to disable a row based on a snooze rule in a business process in a support team looking at the same data. My row function is : (row) => (row.isBeingHandledAlready : 'snoozedRow': 'openRow'). In my css I had the following rules :

.openRow td { background-color: #fff !important; }

.snoozedRow td { background-color: #d7d7c1 !important; }

A bit of a hack but gets one moving again

[gitjuba]

FYI: I fixed this issue in https://github.com/IndoorAtlas/mdDataTable/pull/1. Not sure if it's the correct way to do it but it suited our use case.

[chenmocoder]

I'm also facing this issue Tried using clientScope but without further success

Thx

i have this problem now, t try to drop "scoped" from

[chenmocoder]

now, i show my code , you can drop "scoped" from

    <el-table :data="tableData" style="width: 100%" border=true :row-class-name="tableRowClassName">

tableRowClassName(row, rowIndex) { console.log("init row class name"); console.log("row",row); console.log(rowIndex) if (row.rowIndex %2 == 0) { console.log("result"); return 'warning-row'; } else { return 'success-row'; } return 'warning-row'; }

[chenmocoder]