CODEWITHSUNDEEP
reactjsmaterial-table
Marco Silva
Marco Silva

Reputation: 101

React material-table - set row height

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.

Upvotes: 4

Views: 12059

Answers (6)

Asomba Chinoso
Asomba Chinoso

Reputation: 51

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

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

My solution

Upvotes: 0

Maura Saccà
Maura Saccà

Reputation: 11

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

Upvotes: 1

Rajath
Rajath

Reputation: 2981

You can set options in material-table

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

Upvotes: 7

Prabhu
Prabhu

Reputation: 758

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

Upvotes: 0

Saba
Saba

Reputation: 373

I think the link below might be helpful for you.

customizing material ui table

Upvotes: -1

Raj Kumar
Raj Kumar

Reputation: 854

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

Upvotes: 1

Related Questions