CODEWITHSUNDEEP
cssreactjsmaterial-ui
David Tzoor
David Tzoor

Reputation: 1077

Unable to change Material UI table padding

I am using the Table component from the react library material-ui.
For some reason, each row, including the header, has a 24px padding, top and bottom, which I can't override.
I already tried changing the style on all the underlying components with no success. Here is the code:

<Table>
    <TableHeader adjustForCheckbox={false} displaySelectAll={false} fixedHeader={true}>
        <TableRow>
            <TableHeaderColumn>id</TableHeaderColumn>
            <TableHeaderColumn>name</TableHeaderColumn>
            <TableHeaderColumn>number</TableHeaderColumn>
        </TableRow>
    </TableHeader>
    <TableBody showRowHover={true} displayRowCheckbox={false}>
        {data.map(item => {
            return (
                <TableRow key={item.id}>
                    <TableRowColumn>{item.id}</TableRowColumn>
                    <TableRowColumn>{item.name}</TableRowColumn>
                    <TableRowColumn>{item.number}</TableRowColumn>
                </TableRow>
            );
        })}
    </TableBody>
</Table>

Any idea how which component's style needs to be changed in order to override this styling?

Upvotes: 16

Views: 25577

Answers (4)

Shahnad S
Shahnad S

Reputation: 1167

you can set size and paading props in material ui table  

    import {Table,} from '@material-ui/core';
    
    <Table size="small" aria-label="a dense table"></Table>

refer this for more details : https://material-ui.com/api/table/

and make sure that elements inside the table row has small sizes .

Upvotes: 1

Ashok Jangid
Ashok Jangid

Reputation: 151

This kind of requirements can be handled with overrides in Material UI as per below example:

Step 1: include following dependencies

import { ThemeProvider } from '@material-ui/core'
import { createMuiTheme } from '@material-ui/core/styles';

Step 2: Define custom css related changes as 

const theme = createMuiTheme({
    overrides: {
        MuiTableCell: {
            root: {  //This can be referred from Material UI API documentation. 
                padding: '4px 8px',
                backgroundColor: "#eaeaea",
            },
        },
    },
});

Step 3: Wrap your component or your code block with 

<ThemeProvider theme={theme}>
    <Table>
        <TableRow>
             <TableCell component="td" scope="row">
             </TableCell>
        </TableRow>
    </Table>
</ThemeProvider>

This is how we can override the Material UI style from our custom style. Happy Coding :)

Upvotes: 15

David Tzoor
David Tzoor

Reputation: 1077

The issue was with the height property of both the TableRow and TableHeaderColumn/TableRowColumn. For some reason this property manifested itself as padding-top/bottom.

To make a long story short, set the height property on the row and columns.

Upvotes: 4

Pandaiolo
Pandaiolo

Reputation: 11568

Indeed, there is a padding added in the Table component, as seen here in the code of that component.

It cannot be overridden in material-ui API, and the context Theme variable desktopGutter is used in many places so I suggest not to change it.

What you can do is override that with a custom CSS item, that you will bundle with the rest of your CSS, either classic stylesheets or "react stye" with Radium or similar.

For example:

<Table id="mytable">...your material-ui JSX...</Table>

In the CSS:

#mytable .table {
    padding: 0 !important;
}

Edit: my mistake, this is for the main table component, not the rows, but you can do something similar with the other components by watching in the developper tools which CSS path needs to be overriden.

Upvotes: -2

Related Questions