Is it possible to add Row Action on right hand side of each row?

I have a page to show List of all available open events in a table. I am trying to display a button against each row. On click of the button it should open up popup page where user can book for the event.

I could manage to achieve this by adding ‘Row Action’ (that display as a button ‘Book Event’ using css) where it shows button against each row and on click it opens up a popup allowing user to enter their details.

But we want these buttons ‘Book Event’ (Row Action) to show on right hand side of the page against each row, instead of left side of the table row. Is it possible to show on right hand side or is there any other way I can display button against each row?

You can move the td element using javascript. I think that’s probably the easiest way.

How do I move the td element. Do you have any examples please?

Honestly don’t know yet. Just know it’s possible. Google teaches everytime that it’s possible.

I got it thank you.

Below code for reference:

$('td:first',this).remove().insertAfter($('td:last',this)); });

It moves the td, but the popup doesn’t work. :frowning:

Hello Pavithra -

I haven’t tried this and not 100% sure it would work but given the code you have above, the problem that you are using remove() where you would want to use detach().

remove() will completely remove the element from the DOM along with any data and event listeners associated to that element.  Skuid uses element data and event listeners to trigger and support the beahvior on the action (e.g. onClick, popup definition, etc.)

If you want to relocate the element, try using detach() instead.  

Hope this helps!

Awesome! It worked really well… Thank a heaps…

Now that you’ve done this, I can being able to create row actions and place pretty anywhere in the table as well.

Very cool and useful.