MUI Datatables Column Header Not Tidy

Question

I was using MUI-Datatables in 2020, and I really satisfied with it so I want to use it again with my upcoming project. Lately, Material UI was upgrading and I think MUI-Datatables have styling issue regarding the placement of column headers.

I am using MUI Datatables with this simple ReactJS code:

import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';

import MUIDataTable from "mui-datatables";

function UserList(props){
    const {title} = props;

    const columns = [
        {
            "name": "name",
            "label": "Name",
            "options": {
                "filter": true,
                "sort": true,
            }
        },
        {
            "name": "username",
            "label": "Username",
            "options": {
                "filter": true,
                "sort": true,
            }
        },
        {
            "name": "active",
            "label": "Active",
            "options": {
                "customBodyRender": (value) => {
                    return <FormControlLabel control={<Checkbox checked={value} color="success" />} disabled label="" />;
                },
                "filter": true,
                "sort": false,
            }
        }
    ];

    const dummyData = [
        {
            "name": "Administrator",
            "username": "[email protected]",
            "active": true
        },
        {
            "name": "Jalaluddin AF",
            "username": "[email protected]",
            "active": true
        },
        {
            "name": "Alex",
            "username": "[email protected]",
            "active": false
        }
    ];

    const options = {
        selectableRows: "none",
        viewColumns: false
    };
    
    return(
        <MUIDataTable
            columns={columns}
            data={dummyData}
            options={options}
            title={title}
        />
    );
}
export default UserList;

Basically, it was just showing a table with Name, Username, and Active/Inactive checkbox. But the thing is, when I start npm, the column header aren't in place with its value.

Anyone could help me?

My environment:

• @mui/icons-material: 5.2.0
• @mui/material: 5.2.0
• @mui/styles: ^5.2.0
• mui-datatables: ^4.0.0
• react: 17.0.2

Answer 1

I think there is some clash with the libraries. Can you check if you are not using multiple version. You can also override the existing css using inspect element.