custom checkbox - bootstrap4

[blacksmoke26]

Hello Devs.

I just found this awesome library and started learning it.

I have a question. I am using Bootstrap 4 (https://react-bootstrap.github.io/)

When I try to use Form.Check component, I get the following error:

Warning: Failed prop type: Invalid prop `selectableRowsComponent` supplied to `<<anonymous>>`.
    in Unknown (created by GridView)
    in GridView

I saw MaterialUI examples but I was looking for Bootstrap 4 but found none.

If not possible then how can I override checkbox classes to make inputs nice?

Any solution, please...

[jbetancur]

Need a bit more detail. Can you paste your component code? Also, make sure when you pass the checkbox that it's not as a react component. e.g. selectableRowsComponent={InputGroup.Checkbox}

If you need to set props then you can use selectableRowsComponent={{ ....your props }}

[blacksmoke26]

I am trying to use this one: https://react-bootstrap.github.io/components/forms/#forms-custom-checkboxes-and-radios;

React Bootstrap:

<Form.Check custom type="checkbox" />

Got a warning when trying to passed:

selectableRowsComponent={Form.Check}

Please let me know if you need more details.

Thanks

[blacksmoke26]

If you need to set props then you can use selectableRowsComponent={{ ....your props }}

Bootstrap requires some divs wrapped around the checkbox in order to change its native look. I simply added a few classes but checkbox disappeared. (due to bootstrap 4)

https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios-1

[jbetancur]

I've not yet tried bootstrap4 but I would recommend creating a custom component based off of bootstrap and then pass through ...props. Finally, pass that component into RDT selectableRowsComponent instead:

const BootyCheckbox = props => (
  <div className="custom-control custom-checkbox">
    <input type="checkbox" className="custom-control-input" id="customCheck1" {...props}>  // for id=I would key your id so it is unique or just leave this off
  </div>
)

<DataTable 
  ....
  selectableRows
  selectableRowsComponent={BootyCheckbox}
/>

RDT also allows you to pass any additional props to your Bootycheckbox component props via selectableRowsComponentProps.

If I have some time today perhaps I can create an example of this in codesandbox (it's piqued my curiosity)

[jbetancur]

Ok, here you go!

RDT takes care of dealing with checkbox nuances for you (i.e. indeterminate) In your custom component, you just need to know where to "pass" the props to and you'll also need to forward the refs:

https://codesandbox.io/s/react-data-table-sandbox-z6gtg

For reference, this is how RDT internally handles custom checkbox components and composing in helpers for things like indeterminate state https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/Checkbox.js

I'll add this to the README

[jbetancur]

Added examples here: https://github.com/jbetancur/react-data-table-component/blob/master/README.md#ui-library-integration

[blacksmoke26]

Lovely :tada: