How to add checkboxes to your table and add logic to them!

Showcase Tips and Tricks
1

Hello folks!

Here’s a way to add checkboxes to your table and add logic to them:

Step 1: Add action link
First, we will add an action link in our table
image

Step 2: Select CSS Class: “Check”
Click on edit, then we will add a CSS Class name, we will use “check”

image
image884×880 41.1 KB

Step 3: Add custom checkbox code
This piece of code will add a checkbox for each table record:

TB.render('component_3', function(data) {
var elems = document.getElementsByClassName("check");

for(let i = 1; i < elems.length; i++){
    elems[i].innerHTML = "<input type='checkbox'>";
}
});

Now your table should look like this:

image
image884×400 21.3 KB

In case you want to know which record get selected you can add this to code a custom component:

var checkboxes = document.getElementsByClassName("check");
 for (let i = 0; i < checkboxes.length; i++) {
        if(checkboxes[i].checked){
          // Do your logic
          //If you want to get ID of each record you should pass it in the checkbox innerHTML
        }     
}

If you liked this, please leave a comment below , we’d love to read it.
Good luck! :rocket:

5 Likes
2

Many thanks for the share.

I look forward to a use case to try this for myself.

1 Like
3

Hi @Soluntech ,

Many thanks for this snippet. The first bit is simple to implement but could you elaborate on how to get get the recordID’s or any field value from each of the selected records?

I’m not following how you would use this second snippet of code in a custom component, could you expand?

var checkboxes = document.getElementsByClassName(“check”);
for (let i = 0; i < checkboxes.length; i++) {
if(checkboxes[i].checked){
// Do your logic
//If you want to get ID of each record you should pass it in the checkbox innerHTML
}
}

Many thanks,

2 Likes