如何在反应材料表上添加花哨的滚动条？

Question

I'm using react material-table and want a decent scroll-bar instead of default Pagination.我正在使用react material-table并想要一个像样的滚动条而不是默认的分页。 I have tried react-custom-scroll but it's not working as per my intention.我试过react-custom-scroll但它没有按照我的意图工作。 The default scroll-bar of my App is activated.我的应用程序的默认滚动条已激活。 One more thing, how can I just apply this type of scroll on just the table body?还有一件事，我怎么能只在表格主体上应用这种类型的滚动？

import CustomScroll from 'react-custom-scroll';
.
.
.

<div style={{height:"50vh"}}>
  <CustomScroll heightRelativeToParent="100%">

    <MaterialTable
    .
    .
    options={{
          search: true,
          paging: false,
          toolbarButtonAlignment: "left",
          searchAutoFocus: true,
        }}
    .
    />
  </CustomScroll>  
</div>

Answer 1

Without using CustomScroll , you can do this by setting minimum( minBodyHeight ) and maximum( maxBodyHeight ) viewport height in the options like this:在不使用CustomScroll ，您可以通过在如下选项中设置最小（ minBodyHeight ）和最大（ maxBodyHeight ）视口高度来做到这一点：

import React from 'react';

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

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

export default function App() {

  return (
    <MaterialTable
      options={{
        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: 'Birth Year', field: 'birthYear', type: 'numeric' },
        { title: 'Birth City', 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: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        { name: 'Zerya Betü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 (
            <Grid container direction="row">
              <Grid item xs={6}>
                <h2>Your Own Title</h2>
              </Grid>
              <Grid item xs={6}>
                <MTableToolbar {...propsCopy} />
              </Grid>
            </Grid>
          );
        }
      }}
    />
  )
}

Update:更新：

Install react-custom-scrollbars .安装react-custom-scrollbars 。

Save this code into the same directory as test.css file:将此代码保存到与test.css文件相同的目录中：

.App {
    height: 800px;
}

Then follow the code below:然后按照下面的代码：

import React from 'react';

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

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

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

import './test.css';

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

const CustomScrollbars = props => (
  <Scrollbars
    renderThumbHorizontal={renderThumb}
    renderThumbVertical={renderThumb}
    {...props}
  />
);

export default function App() {

  return (
    <div className="App">

      <CustomScrollbars>

        <MaterialTable
          options={{
            search: true,
            paging: false,
            toolbarButtonAlignment: "left",
            searchAutoFocus: true,
          }}
          title="Toolbar Overriding Preview"
          columns={[
            { title: 'Name', field: 'name' },
            { title: 'Surname', field: 'surname' },
            { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
            { title: 'Birth City', 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: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
            { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
            { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
            { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
            { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
            { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
            { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
            { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
            { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
            { name: 'Zerya Betü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 (
                <Grid container direction="row">
                  <Grid item xs={6}>
                    <h2>Your Own Title</h2>
                  </Grid>
                  <Grid item xs={6}>
                    <MTableToolbar {...propsCopy} />
                  </Grid>
                </Grid>
              );
            }
          }}
        />
      </CustomScrollbars>
    </div>
  )
}

Update 2更新 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:这是代码：

import React from 'react';

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

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

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

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

const CustomScrollbars = props => (
  <Scrollbars
    renderThumbHorizontal={renderThumb}
    renderThumbVertical={renderThumb}
    {...props}
  />
);

export default function App() {

  return (

    <MaterialTable

      options={{
        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: 'Birth Year', field: 'birthYear', type: 'numeric' },
        { title: 'Birth City', 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: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        { name: 'Zerya Betü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 (
            <Grid container direction="row">
              <Grid item xs={6}>
                <h2>Your Own Title</h2>
              </Grid>
              <Grid item xs={6}>
                <MTableToolbar {...propsCopy} />
              </Grid>
            </Grid>
          );
        },
        Body: props => {

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

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

如何在反应材料表上添加花哨的滚动条？

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-11-09 14:15:42

如何在反应材料表上添加花哨的滚动条？

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-11-09 14:15:42

解决方案1
1 已采纳 2020-11-09 14:15:42