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

IT技术 javascript css reactjs material-ui material-table
2021-04-25 02:10:24

我正在使用react material-table并想要一个像样的滚动条而不是默认的分页。我试过react-custom-scroll但它没有按照我的意图工作。我的应用程序的默认滚动条已激活。还有一件事，我怎么能只在表格主体上应用这种类型的滚动？

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>
1个回答

不使用CustomScroll，您可以通过在如下选项中设置 minimum( minBodyHeight) 和 maximum( 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>
          );
        }
      }}
    />
  )
}

更新：

安装react-custom-scrollbars。

将此代码保存到与test.css文件相同的目录中：

.App {
    height: 800px;
}

然后按照下面的代码：

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

更新 2

这是您可以在表格主体上添加滚动条的另一种方式，为此您必须覆盖表格主体组件，如果您这样做，主体将与标题混淆。这就是为什么您还必须覆盖表格标题并进行一些样式设置。这是代码：

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>
        )
      }}
    />
  )
}
其它你可能感兴趣的问题
上一篇黑色长丝更脆吗？ 下一篇Creality Ender 3 - 在构建板前打印