0

I'm having trouble identifying selected rows with a checkbox in prime React. the structure of the table is as follows: (the column with the checkbox most be "Visible?").


                        <div className="col-12">
                            <DataTable value={variableOptions} editMode = "cell" className="editable-cells-table" 
                                       dataKey="_id" paginator rows={10} rowsPerPageOptions={[5, 10, 25]}
                                       paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
                                       currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" header={"Variables"} responsiveLayout="scroll">
                                <Column field="name" header="Nombre" sortable  />
                                <Column field="units" header="Unidad" sortable />
                                <Column field="isPrincipal" header="Gerarquia" sortable />
                                <Column field="isVisible" header="Visible?" sortable onClick={(e) => bodyCheckBoxVisible(e)}/>
                        </div>

and the function where i have return the checkbox


    const bodyCheckBoxVisible = (e) => {
        return ( <Checkbox inputId="binary" checked={checked} onChange={e => setChecked(e.checked)} />)
    }

The problem is that the function does not return the checkbox inside the table row.

  1. How to solve this?

table without checkboxes

  1. once the checkbox is shown I must be able to select more than one row because more than one variable can be visible or not, I don't know how to do this function either.

each row has a name and id that identify them, once identified making the change is not difficult I imagine

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
Motias
  • 89
  • 9

1 Answers1

0

Your "bodyCheckBoxVisible" method is returning a component, but you are doing nothing with it.

Instead you could create a state named "checkboxVisible", update it on click, and displaying or not your data according to it, something like this :

const [bodyVisible, setBodyVisible] = useState(false);

return (
  ......
  <Column field="isVisible" header="Visible?" sortable onClick={(e) => setBodyVisible(!bodyVisible)}/>
  ......
  {bodyVisible && myElementToDisplay}
  ......
  
)

I hope it helped !

A.Vinuela
  • 258
  • 1
  • 2
  • 14