Get value using forwardref onclick on checkbox in react hook form DataTable

user_8738297 0
Viewed 282

In React hook form I am struggling with checked all on click on single checkbox in DataTable.

Here is checked all function using forwardRef

const BootstrapCheckbox = forwardRef(({ onClick, ...rest }, ref) => ( 
  <div className='custom-control custom-checkbox'>
    <input type='checkbox' className='custom-control-input' ref={ref} {...rest} />
    <label className='custom-control-label' onClick={onClick} />
  </div>
))

Here is DataTable code where BootstrapCheckbox is calling

<DataTable
 noHeader
 selectableRows
 pagination
 paginationServer
 columns={advSearchColumns} 
 className='react-dataTable'
 sortIcon={<ChevronDown size={10} />}
 paginationComponent={CustomPagination}
 data={dataToRender()} 
 selectableRowsComponent={BootstrapCheckbox}
/>

I don't know how to get ref value or set the ref or get something like all rows ids, Here is DataTable Row

const advSearchColumns = [
 
  {
    name: 'status',
    selector: 'status',
    maxWidth: '10px',
    ignoreRowClick: true,
    cell: row => <CustomInput type='switch' onClick={(e) => handleswitchStatus(row.id, +e.target.checked)}  id={row.id}  name='status' inline defaultChecked={row.is_active} />
  },
  {
    name: 'Name',
    selector: 'name',
    sortable: true,
    minWidth: '150px'
  } 
]

Any Help from anyone ? Thanks in Advance

react-hooks reactjs datatable javascript
1 Answers
// This will select the rows and return them as an array
const [selectedRows, setSelectedRows] = useState([])

....

const handleChange = (state) => setSelectedRows(state.selectedRows)

......

<DataTable
    noHeader
    selectableRows
    pagination
    paginationServer
    columns={advSearchColumns} 
    className='react-dataTable'
    sortIcon={<ChevronDown size={10} />}
    paginationComponent={CustomPagination}
    data={dataToRender()} 
    selectableRowsComponent={BootstrapCheckbox}
    onSelectedRowsChange={handleChange} // add this
/>
user_177519890
Related