vendredi 27 mai 2022

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

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. enter image description here




Aucun commentaire:

Enregistrer un commentaire