Add checkbox as column in react

Hello!

Thank you for reaching out to us.

We recommend you the following approach for this task:
1. Create an additional ID property, which will be a container for a checkbox:

{
    ID: 11, /*ID value for checkbox*/
    City: "Kyiv",
    Sales: 1000,
}

2. Add the customizeCell function to add checkboxes. We recommend creating a separate class for these checkboxes to retrieve data from them easily: 

const customizeCellFunction = (cell, data) => {
     if (data.type !== "header" && data.measure.uniqueName === "ID") {
         cell.style["text-align"] = "center";
         cell.style["z-index"] = 2; /*z-index is needed to make checkboxes clickable*/
         cell.text = `<input type="checkbox" class="myinput" ${data.value > 10 ? 'checked' : ''}>`
     }
}

3. Add this function as a property of React component.

customizeCell={customizeCellFunction}

4. To get the checked property from checkboxes, you can use the getElementsByClassName function. 

Please check the attached archive with a React application to see the working example. To run the project, open the terminal from a root folder and type:

npm install
npm start

This sample also dynamically displays indexes of checked boxes. You can see the implementation of this logic in showIndexesOfChecked and addListeners functions.

We hope that you will find this answer helpful. Feel free to contact us if any other questions arise.

Best Regards,
Maksym

Hello!
 
Thank you for your questions.
 
1. We recommend adding event listeners to handle changes in checkboxes. Kindly note the example below: 

const addListeners = () => {
     var elements = document.getElementsByClassName("myinput");
     for (var i = 0; i < elements.length; i++) {
         elements[i].addEventListener('change', changeEventHandler);
     }
}

To get the data, you can use the similar code, where "myinput" is the class, specified while adding checkboxes in customizeCell function:

let checkboxes = document.getElementsByClassName("myinput");

2. The customizeCell function works with each particular cell separately. If you need to get another column's value, you can directly access data from the report and find the object with the corresponding ID value.
Please refer to this modified function from the sample project we have sent you earlier:

let dataJson = getReport().dataSource.data;

const customizeCellFunction = (cell, data) => {
        if (data.type !== "header" && data.measure.uniqueName === "ID") {
            /* CODE */
            for (var i = 0; i < dataJson.length; i++) {
                if (dataJson[i].ID === data.value) {
                    var checked = data.value > 10 && dataJson[i].Sales > 1000 ? 'checked' : '';
                    break;
                }
            }
            cell.text = `<input type="checkbox" class="myinput" ${checked}>`
        }
}

dataJSON is the data, which is used in your report.
 
Hope you will find this answer helpful.
 
Best Regards,
Maksym