react-data-table-component How To Style Checkbox? Large Checkboxes To Small - css

Question

I'm using react-data-table-component in my project to create a datatable.
However, the checkboxes are appearing too large.
After checking the docs, I found this page - Overidding Styling Using css-in-js with customStyles, and this example:
// Internally, customStyles will deep merges your customStyles with the default styling.
const customStyles = {
rows: {
style: {
minHeight: '72px', // override the row height
},
},
headCells: {
style: {
paddingLeft: '8px', // override the cell padding for head cells
paddingRight: '8px',
},
},
cells: {
style: {
paddingLeft: '8px', // override the cell padding for data cells
paddingRight: '8px',
},
},
};
There are no mentions on there about checkbox styling, so I attempt this:
const customStyles = {
checkbox: {
style: {
maxHeight: '18px',
maxWidth: '18px',
},
},
};
Unfortunately, the checkboxes remained large sized.
How do I solve this so it makes the checkboxes like the size shown in their example in the screenshots?
Screenshots.

Answer 1

Here is how I solved it:
Create a Checkbox component, like so:
const Checkbox = React.forwardRef(({ onClick, ...rest }, ref) =>
{
return(
<>
<div className="form-check pb-5" style={{ backgroundColor: '' }}>
<input
type="checkbox"
className="form-check-input"
style={{ height: '20px', width: '20px' }}
ref={ref}
onClick={ onClick }
{...rest}
/>
<label className="form-check-label" id="booty-check" />
</div>
</>
)
})
Add Checkbox component to DataTable, like so:
<DataTable
title="Products"
columns={columns}
data={ data }
subHeader
subHeaderComponent={subHeaderComponentMemo}
onRowClicked={ handleRowClicked }
selectableRows
selectableRowsComponent={Checkbox} // Pass the Checkbox component only
responsive
persistTableHead
/>