React material-table - set row height

Question

First of all, I have tested all possible solutions I have founded and I still didn't solve my problem.

I want to put a shorter height in my material-table rows. This is what it looks like right now.

Table

I would like my rows to have a height similar to the headers in that image. I have tried many things, one of them was the following:

    options={{
         headerStyle: {
             whiteSpace: "nowrap",
             height: 20,
             maxHeight: 20,
             padding: 0
         },
         rowStyle: {
             height: 20,
             maxHeight: 20,
             padding: 0
         },
    }}

I would really appreciate it if someone can help me.

Answer 1

you need to use withStyles and update the specific element class style, so it will reflect to all the elements. Check the working example as you expected here : codesandbox

import MuiTableCell from '@material-ui/core/TableCell';

const TableCell = withStyles(theme => ({
  root: {
    height: 10,
    padding:0
  }
}))(MuiTableCell);

Answer 2

I think the link below might be helpful for you.

customizing material ui table

Answer 3

Much more simplified, overwrite padding of 16px to smaller size...<TableCell style={{padding:5px}} ...>.

Answer 4

You can set options in material-table

options={{
  padding: "dense",
}}

Answer 5

I had the same problem with React Material-Table. I fixed adding this in the global index.css of the project:

.MuiTableCell-root  {
  padding: 0 14px !important;
}

and then i could modify the height in the rowStyle in the options of the Material-Table component:

options = {
    rowStyle: {
        height: "20px"
    }
}

Answer 6

I fixed this by including padding: "dense", property to options

options={{ padding: "dense", }}