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.

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.

score 5 · Answer 1 · answered Jun 04 '21 at 08:22

5

You can set options in material-table

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

answered Jun 04 '21 at 08:22

Rajath

2,611
8
27
43

Thanks. Added the above code as a property to worked for me. material-table v 2.0.3 – Jefin Mathew Nov 10 '22 at 09:59

Maura Saccà · Answer 2 · 2021-11-09T11:56:01.417

1

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"
    }
}

edited Nov 09 '21 at 11:56

answered Nov 09 '21 at 10:48

Maura Saccà

11
2

score 0 · Answer 3 · answered Oct 22 '20 at 18:58

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

score 0 · Answer 4 · answered Oct 22 '20 at 19:06

0

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

answered Oct 22 '20 at 19:06

Prabhu

688
5
11

score -1 · Answer 5 · answered Oct 22 '20 at 19:01

-1

I think the link below might be helpful for you.

customizing material ui table

answered Oct 22 '20 at 19:01

Saba

376
5
19

React material-table - set row height

5 Answers5