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 can set options in material-table

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

Answer 2

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);