Duplicate classes for <td> and <div> in table cells

[cloudcode-hungary]

Hi!

I have upgraded mui-datatables: 2.12.0 -> 3.7.8. I found some breaking changes messing up our layouts in a huge frontend application. The reason is the new inner div element that is now rendered inside the table cell, while also receiving the same classes as the conatining element from setCellProps. This is problematic for styles like padding and border, where paddings double up, and inner borders appear.

Layout after upgrading:

Layout when I remove the inner divs with the duplicate classes (with inspector):

Expected Behavior

When rendering the table,

• there should be no inner div elements, as it was before. I could not find any reason in the history for this change.
• OR the divs should not receive the same classes as the td elements from setCellProps
• OR there should be a way to specify classes for the td and the inner div element

---

EDIT

Current Behavior

I tried to reproduce the issue in the code sandbox. I have found out, that if I set the styles property with setCellProps, than the divs do not receive the styles, but when setting the className, both the div and the td element receive it.

import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";

import makeStyles from '@material-ui/styles/makeStyles';

const myStyles = {
  padding: 8,
  border: '1px solid black'
};

const useStyles = makeStyles(() => ({
  test: myStyles,
}))

function App() {
  const classes = useStyles();
  const columns = [{name: "Name", options: {
    setCellProps: (_, index) => (index % 2 === 0 ? { style: myStyles } : { className: classes.test })
  }}];

  const options = {
    filter: true,
    filterType: "dropdown",
  };

  const data = [
    ["Gabby Georgee", "Business Analyst", "Minneapolis"],
    [
      "Aiden Lloyd",
      "Business Consultant for an International Company and CEO of Tony's Burger Palace",
      "Dallas"
    ],
    ["Jaden Collins", "Attorney", "Santa Ana"],
    ["Franky Rees", "Business Analyst", "St. Petersburg"],
    ["Aaren Rose", null, "Toledo"],
    ["Johnny Jones", "Business Analyst", "St. Petersburg"],
    ["Jimmy Johns", "Business Analyst", "Baltimore"],
    ["Jack Jackson", "Business Analyst", "El Paso"],
    ["Joe Jones", "Computer Programmer", "El Paso"],
    ["Jacky Jackson", "Business Consultant", "Baltimore"],
    ["Jo Jo", "Software Developer", "Washington DC"],
    ["Donna Marie", "Business Manager", "Annapolis"]
  ];

  return (
    <React.Fragment>
      <MUIDataTable
        title={"ACME Employee list"}
        data={data}
        columns={columns}
        options={options}
      />
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Top highlight: setCellProps: (_, index) => (index % 2 === 0 ? { style: myStyles } : { className: classes.test })

EDIT 2 Removing lines https://github.com/gregnb/mui-datatables/blob/master/src/components/TableBodyCell.js#L146 https://github.com/gregnb/mui-datatables/blob/master/src/components/TableBodyCell.js#L167 solves the problem, I have checked in a code sandbox.

Your Environment

Tech	Version
Material-UI	4.11
MUI-datatables	3.7.8
React	16.8
browser	chrome

[Armerila]

Having the same issue. Adding borders to MUIDataTableBodyCell results in there being an inner border around the data in cells.

[niamleeson]

Bumping for the same issue. The override style is applied twice both at the td level and at the div level inside the td. Any padding change is applied twice. I haven't found a way to get around this. setCellProps doesn't work either because that is applied twice as well.

@gregnb could you take a look at this?