Table row color

Wappler General
#1

I have a dynamic table that display numerous columns with horizontal scrolling.
I would like to be able to select a row (record) changing the background color, so I can perform horizontal scrolling by easily identifying the record
Is it possible with Wappler?

#2

There are several ways to do it. For example you could create a variable for the selected record id. On click of a row you set the variable and you use a class toggle on the row to set a selected class.

<style>
.selected { background-color: blue; }
</style>
<dmx-value id="selected"></dmx-value>
<table>
  <tr is="dmx-repeat" repeat="sc.data" dmx-on:click="selected.setValue(id)" dmx-class:selected="id == selected.value">
    <td>{{id}}</td>
    <td>{{name}}</td>
  </tr>
</table>
2 Likes
#3

but my table is different

45

#4

Just adjust what Patrick gave for your table.

<!-- SET A STYLE FOR YOUR SELECTED ROW AS A CLASS -->
<style>
  .css_selected { background-color: blue; }
</style>

<!-- EMPTY VARIABLE TO KEEP TRACK OF WHAT ROW IS SELECTED -->
<dmx-value id="ticket_selected"></dmx-value>

<table>
  <thead>
    <tr>
      <td></td>
    </tr>
  </thead>
<!-- TBODY TAG AS REPEAT -->
  <tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="serverconnect_confermati.data.query_confermati" id="tableRepeat1" dmx-state="query_confermati" dmx-sort="sort" dmx-order="dir">
    <tr dmx-on:click="ticket_selected.setValue(id_ticket)" dmx-class:css_selected="id_ticket == ticket_selected.value">
      <td dmx-text="id_ticket" style="font-size: xx-small;"></td>
#5

or if you are using Data Detail then use it instead of the variable

#6

This works only partially, because it is difficult to select a table row

#7

Can you explain what makes it difficult to select?

#8

Because with Safari or Chrome (MAC) with the mouse there is no real place to click to highlight the line
The ideal would be to insert as a first column a micro button to select the row or to be able to click on id_dicket

#9

Sounds like a good idea to me. So just add another column and add the dmx-on:click as well as the dmx-class commands to the button

#10

This is the new column, but how should the code be added?

26
Schermata 2018-12-12 alle 01.02.26.png809×149 33.8 KB

#11 
<tr dmx-class:css_selected="id_ticket == ticket_selected.value">
  <td>
    <a href="javascript:void(0);" class="btn btn-small" dmx-on:click="ticket_selected.setValue(id_ticket)">CLICK ME</a>
  </td>
  <td dmx-text="id_ticket" style="font-size: xx-small;"></td>
#12

However, it works badly and only in white lines

test.mov (2.2 MB)

#13

Try adding !important to the background-color style command so it can override whatever background color is already in the tr
.css_selected { background-color: blue !important; }

#14

I did not know this thing
Perfect now works perfectly
Thank you very much

#15

You might also want to add more classes to the btn such as btn-info or something like that to get some color into it.
Then if you want you can also add more into the style tag such as
.css_selected:hover { background-color: green !important; }

1 Like
#16

Very interesting