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

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:

1. 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>
        </>
    )
   })

2. 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
                />