Selected row color

I know how can I change selected table row with jquery or pure javascript but How can I do this with wappler ?

Maybe this doc will help point you in the right direction?

thanks @brad I know this doc but I need change only selected row colour.

What does:

this mean?

Please explain this a little more detailed.

1 Like

Hello @Teodor,

maybe this image can help .

1 Like

ok solved :slight_smile:

dmx-class:text-success="$index == varSelectedRowIndex.value"


That’s indeed the way to style a row which you click - using a variable and storing the selected index there.

1 Like

Just leaving the full row code here as it took me a while to figure out the whole thing.

<tr dmx-on:click="sc_tripbits_paged.load({trip_id: trip_id});selected_index.setValue($index)" dmx-class:bg-success="$index == selected_index.value">

selected_index is the variable. this sets the background color, instead of the text color as per the original request. This also loads a server connect with the clicked row value.


If your table is paged using $index doesn’t work properly as when you change pages the same row number stays highlighted, even though it’s not the one that was selected. A better way is to use the unique id of the record, in my case trip_id like this…

<tr dmx-on:click="sc_tripbits_paged.load({trip_id: trip_id, offset: query.tripbits_offset, sort: query.tripbits_sort, dir: query.tripbits_dir});selected_index.setValue(trip_id);"
 dmx-class:bg-success="trip_id == selected_index.value">