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

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”

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:

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:

3 Likes

Many thanks for the share.

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

1 Like

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,

1 Like