Column labels are being converted into upper case

[sujeet-agrahari]

Column labels are being converted to upper case. It is very random, though. Some label are not being converted.

const columns = [
  {
    name: 'id',
    label: 'Id',
    options: {
      display: false,
      filter: true,
      sort: true,
    },
  },

  {
    name: 'photo',
    label: 'Photo',
    options: {
      filter: false,
      sort: true,
      customBodyRender: (value) => <Avatar src={value} sx={{ height: '60px', width: '60px' }} />,
    },
  },
  {
    name: 'studentName',
    label: 'Student',
    options: {
      filter: true,
      sort: true,
    },
  },
  {
    name: 'phone',
    label: 'Phone',
    options: {
      filter: true,
      sort: true,
    },
  },

  {
    name: 'course',
    label: 'COURSE',
    options: {
      filter: false,
      sort: false,
    },
  },
  {
    name: 'enrolledOn',
    label: 'Admission Date',
    options: {
      filter: false,
      sort: true,
    },
  },
  {
    name: 'paidFees',
    label: 'Paid Fees',
    options: {
      filter: true,
      sort: true,
    },
  },
  {
    name: 'dueFees',
    label: 'Due Fees',
    options: {
      filter: true,
      sort: false,
    },
  },
];

 <MuiDataTable
          data={getEnrolledStudents(enrollments)}
          columns={columns}
          options={{
            filterType: 'checkbox',
            rowsPerPage: 5,
            selectableRows: 'none',
            rowsPerPageOptions: [5, 10, 15, 20],
          }}
        />

Image

Your Environment

Tech	Version
Material-UI	5.5.3
MUI-datatables	4.2.2
React	^18.0.0

[ShedrackGodson]

I am facing the same issue

[patthem]

We are also getting this bug using;

"mui-datatables": "^4.3.0", "react": "^16.13.1", "react-content-loader": "^6.2.0", "react-dom": "^16.13.1",

it seems randomly appearing.

[leiyang]

same issue

[dariopb]

I'm reproing this in 4.3.0 as well. When I set the column option sort to false, the case is preserved, if I set it to true, then the label is converted to upper case. The behavior is consistent for me:

     name: "target",
     label: "Target",
     options: {
      filter: true,
      sort: false,
     }
    }

[aronreman]

I am also seeing this issue. Is there any workaround at the moment?

[brequete]

I'm facing the same issue, even ussing the customHeadLabelRender prop the label gets rendered in full uppercase.

[giorgioGunawan]

I've found a workaround for this but it's hacky. By using inline HTML and styling, I was able to capitalize the text in the column label:

columns = [
.... { name: 'check_in_datetime', label: <p style={{ textTransform: 'capitalize' }}>Checkin</p> }
]

[TheoDny]

It seems to be due to the use of the MUI button (when sorting is enabled) that capitalize the header.

.mui-theme-1w1rijm-MuiButtonBase-root-MuiButton-root {
    ...
    text-transform: uppercase;
    ...
}

I was able to resolve this with a bit of CSS :

th.MuiTableCell-root.MuiTableCell-head button {
    text-transform: none;
}

Some more class may be usefull to avoid unwanted change but that's enought for me.