How To Add A Fancy Scroll-bar On React Material-table?

I'm using react material-table and want a decent scroll-bar instead of default Pagination. I have tried react-custom-scroll but it's not working as per my intention. The default sc

Solution 1:

Without using CustomScroll, you can do this by setting minimum(minBodyHeight) and maximum(maxBodyHeight) viewport height in the options like this:

importReactfrom'react';

importMaterialTable, { MTableToolbar } from'material-table';

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

exportdefaultfunctionApp() {

  return (
    <MaterialTableoptions={{search:true,
        paging:false,
        toolbarButtonAlignment: "left",
        searchAutoFocus:true,
        minBodyHeight: "85vh",
        maxBodyHeight: "85vh"
      }}
      title="Toolbar Overriding Preview"columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'BirthYear', field: 'birthYear', type: 'numeric' },
        { title: 'BirthCity', field: 'birthCity', type: 'numeric' }
      ]}
      data={[
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
      ]}
      components={{Toolbar:props => {
          // This will let you use your own Title while keeping the search
          const propsCopy = { ...props };
          // Hide default title
          propsCopy.showTitle = false;
          return (
            <Gridcontainerdirection="row"><Griditemxs={6}><h2>Your Own Title</h2></Grid><Griditemxs={6}><MTableToolbar {...propsCopy} /></Grid></Grid>
          );
        }
      }}
    />
  )
}

Update:

Install react-custom-scrollbars.

Save this code into the same directory as test.css file:

.App {
    height: 800px;
}

Then follow the code below:

importReactfrom'react';

importMaterialTable, { MTableToolbar } from'material-table';

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

import { Scrollbars } from'react-custom-scrollbars';

import'./test.css';

constrenderThumb = ({ style, ...props }) => {
  const thumbStyle = {
    borderRadius: 6,
    backgroundColor: 'rgba(35, 49, 86, 0.8)'
  };
  return<divstyle={{...style, ...thumbStyle }} {...props} />;
};

constCustomScrollbars = props => (
  <ScrollbarsrenderThumbHorizontal={renderThumb}renderThumbVertical={renderThumb}
    {...props}
  />
);

exportdefaultfunctionApp() {

  return (
    <divclassName="App"><CustomScrollbars><MaterialTableoptions={{search:true,
            paging:false,
            toolbarButtonAlignment: "left",
            searchAutoFocus:true,
          }}
          title="Toolbar Overriding Preview"columns={[
            { title: 'Name', field: 'name' },
            { title: 'Surname', field: 'surname' },
            { title: 'BirthYear', field: 'birthYear', type: 'numeric' },
            { title: 'BirthCity', field: 'birthCity', type: 'numeric' }
          ]}
          data={[
            { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
            { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
            { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
            { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
            { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
            { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
            { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
            { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
            { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
            { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
            { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
            { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
            { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
            { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
            { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
            { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
            { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
            { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
            { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
            { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
          ]}
          components={{Toolbar:props => {
              // This will let you use your own Title while keeping the search
              const propsCopy = { ...props };
              // Hide default title
              propsCopy.showTitle = false;
              return (
                <Gridcontainerdirection="row"><Griditemxs={6}><h2>Your Own Title</h2></Grid><Griditemxs={6}><MTableToolbar {...propsCopy} /></Grid></Grid>
              );
            }
          }}
        />
      </CustomScrollbars></div>
  )
}

Update 2

This is another way you can add a scrollbar on the table body, for that you've to override the table body component, if you do that body will be messed up with the header. That's why you've to override the table header as well and do some styling. Here is the code:

importReactfrom'react';

importMaterialTable, { MTableToolbar, MTableBody, MTableHeader } from'material-table';

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

import { Scrollbars } from'react-custom-scrollbars';

constrenderThumb = ({ style, ...props }) => {
  const thumbStyle = {
    borderRadius: 6,
    backgroundColor: 'rgba(35, 49, 86, 0.8)'
  };
  return<divstyle={{...style, ...thumbStyle }} {...props} />;
};

constCustomScrollbars = props => (
  <ScrollbarsrenderThumbHorizontal={renderThumb}renderThumbVertical={renderThumb}
    {...props}
  />
);

exportdefaultfunctionApp() {

  return (

    <MaterialTableoptions={{search:true,
        paging:false,
        toolbarButtonAlignment: "left",
        searchAutoFocus:true,
        cellStyle: { minWidth: '100px', maxWidth: '100px' },
      }}
      title="Toolbar Overriding Preview"columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'BirthYear', field: 'birthYear', type: 'numeric' },
        { title: 'BirthCity', field: 'birthCity', type: 'numeric' }
      ]}
      data={[
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'Mehmet', surname: 'Baran', birthYear:1987, birthCity:63 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
        { name: 'ZeryaBetül', surname: 'Baran', birthYear:2017, birthCity:34 },
      ]}
      components={{Toolbar:props => {
          // This will let you use your own Title while keeping the search
          const propsCopy = { ...props };
          // Hide default title
          propsCopy.showTitle = false;
          return (
            <Gridcontainerdirection="row"><Griditemxs={6}><h2>Your Own Title</h2></Grid><Griditemxs={6}><MTableToolbar {...propsCopy} /></Grid></Grid>
          );
        },
        Body: props => {

          return (
            <CustomScrollbarsstyle={{height: '650px' }}><MTableBody {...props} /></CustomScrollbars>

          )
        },
        Header: props => (
          <div><MTableHeader {...props} /></div>
        )
      }}
    />
  )
}