I'm using react material-table and want to override default styles of toolbar to pass the prop disableGutters={true} as we can do in material-ui toolbar . Here is my code

<MaterialTable
    // other props
ponents={{
          Toolbar: (props) => {
            return (
              <div>
                <MTableToolbar {...props} style={{paddingLeft:"0px"}}/>
              </div>
            );
          },
        }}
      />

But it's not working to remove gutter padding. I also tried <MTableToolbar {...props} disableGutters={true}/> but nothing works.

I'm using react material-table and want to override default styles of toolbar to pass the prop disableGutters={true} as we can do in material-ui toolbar . Here is my code

<MaterialTable
    // other props
ponents={{
          Toolbar: (props) => {
            return (
              <div>
                <MTableToolbar {...props} style={{paddingLeft:"0px"}}/>
              </div>
            );
          },
        }}
      />

But it's not working to remove gutter padding. I also tried <MTableToolbar {...props} disableGutters={true}/> but nothing works.

• javascript
• reactjs
• material-ui
• material-table

Share Improve this question Follow edited Jan 23, 2022 at 14:52 Shahnawaz Hossan 2,72022 gold badges1515 silver badges2424 bronze badges asked Nov 9, 2020 at 6:24 DevLoverUmarDevLoverUmar 14.1k1515 gold badges7878 silver badges111111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

MTableToolbar has these classes MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters. You can override these in this way by using @material-ui/styles. Install it first, npm install @material-ui/style. Then follow the code below:

import React from 'react';

import MaterialTable, { MTableToolbar } from 'material-table';

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

const useStyles = makeStyles({
  toolbarWrapper: {
    '& .MuiToolbar-gutters': {
      paddingLeft: 0,
      paddingRight: 0,
    }
  },
});

export default function App() {

  const classes = useStyles();

  return (
    <MaterialTable
      title="Toolbar Overriding Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ]}
      data={[
        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
      ]}
      ponents={{
        Toolbar: props => (
          <div className={classes.toolbarWrapper}><MTableToolbar {...props} /></div>
        ),
      }}
    />
  )
}

Alternative Solution:

There is another way you can use your own title rather than overriding the original one.

You have to copy props to hide the default title and show your own.

Use Grid with the MTableToolbar so they still appear next to each other.

Here is the code:

import React from 'react';

import MaterialTable, { MTableToolbar } from 'material-table';

import { Grid } from '@material-ui/core';

export default function App() {

  return (
    <MaterialTable
      title="Toolbar Overriding Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ]}
      data={[
        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
      ]}
      ponents={{
        Toolbar: props => {
          // This will let you use your own Title while keeping the search
          const propsCopy = { ...props };
          // Hide default title
          propsCopy.showTitle = false;
          return (
            <Grid container direction="row">
              <Grid item xs={6}>
                <h2>Your Own Title</h2>
              </Grid>
              <Grid item xs={6}>
                <MTableToolbar {...propsCopy} />
              </Grid>
            </Grid>
          );
        }
      }}
    />
  )
}