程序员经验分享-hwhale

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

2023-12-02

我在用着反应材料表并想要一个像样的滚动条而不是默认的分页。我努力了反应自定义滚动但它没有按照我的意图工作。我的应用程序的默认滚动条已激活。还有一件事，我怎样才能将这种类型的滚动应用到桌体上？

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>

不使用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 反应自定义滚动条.

将此代码保存到与以下内容相同的目录中test.css file:

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

Update 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>
        )
      }}
    />
  )
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

css

ReactJS

materialui

materialtable

如何在反应材料表上添加精美的滚动条？ 的相关文章

随机推荐

  • ChartJS v.2 上的圆角 - 条形图（带有负值）

    我正在设计一些 Chartjs 条形图 这些图表需要在条形值 而不是其底部 处进行圆角 在大多数情况下 这意味着条形图顶部的圆角 但是也存在条形图具有负值的情况 我在这里使用了答案 如何为 Bar Chart js v2 创建圆角条 由乔丹

  • 使用 jquery 从 url 获取 url 变量以形成表单

    我有一个 html 表单 只显示价格 但不向服务器提交任何内容 现在效果很好 如何添加仅从 url 变量运行此表单的功能 这样如果您使用 url 变量进入此页面 则不必单击提交按钮 像这样的东西 www my domain com form

  • 如何在 Windows 上的 AppServ 上启用 PDO？

    我第一次尝试使用 PDO 创建一个应用程序 当我 try db new PDO mysql host localhost dbname DBname user pass catch PDOException e echo div class

  • 如何将图像/数组分成块？

    我想知道是否可以将图像分成块 例如 8x8 块 64 pixels per block 并对每个块执行直方图函数并将结果保存到新图像中而不是单独的图像中 def apply histogram block h b np histogram

  • Azure SSL 证书

    我在将 SSL 证书上传到 Azure 时遇到问题 我有一份来自 GoDaddy 的高级证书 该证书去年一直在 IIS 中运行 当我们迁移到 Azure 时 我将其导出到 PFX 转到 Azure 将其添加到我的 Web 应用程序 并收到以

  • 从自己的网络服务器下载 apk

    我在从我自己的网络服务器下载 Android 应用程序时遇到问题 首先 我使用 javascript 发送 html 内容 要求 Android 手机打开我的下载链接 Android 手机收到此 javascript 将打开下载 URL 在

  • 如何在 Bootstrap 3 中使用固定标题（导航栏）向下滚动表格行时将表格标题（thead）固定在顶部？

    引导布局fixed navbar 表格中有很多行 Issue 当我滚动页面导航栏时 它会在那里 因为它是固定的 当我滚动更多时 我希望表头固定在导航栏下 并且表 表体 的内容在没有滚动条的情况下滚动 像这样的东西 Codepen 小提琴 引

  • 禁用 Word 2010 中的“另存为”按钮

    我有以下代码 应该禁用 Word 2010 中的 另存为 按钮 下面的方法正在Document Startup event private void DisableSaveAsButton Object MenuBar 40 Object

  • tkinter 如何将小部件向右对齐，而与左侧小部件的长度无关？

    我想将条目小部件向右对齐 而与左侧标签的宽度无关 ID 标题的宽度应该不重要 无论标题的宽度是多少 条目小部件都应该对齐 这是我的代码 import tkinter as tk from tkinter import ttk root tk

  • 如何在Android中将两个音频文件合并为一个[关闭]

    Closed 这个问题是基于意见的 目前不接受答案 我想合并两个音频文件 A音频文件 B音频文件 AB音频文件 经过一番搜索后 我认为以下步骤会起作用 使用 AudioTrack 从音频文件中解码 PCM 结合PCM 上述步骤是否正确 如果

  • Facebook 嵌入视频与 iframe 无法正常工作

    我们使用 iframe 在我们的网站中嵌入 Facebook 视频 之前工作正常 但从最近几天开始 网站无法加载视频 我们也尝试过使用简单的网页 但没有成功 下面是我们正在使用的代码 如果有人可以提供快速帮助 请告诉我 只需使用此链接 这对

  • 有效地替换字符串中的所有重音字符？

    为了一个穷人的实施near 客户端的排序规则正确排序我需要一个 JavaScript 函数来实现高效的字符串中的单个字符替换 这就是我的意思 请注意 这适用于德语文本 其他语言的排序不同 native sorting gets it wro

  • Jstree：dblclick 绑定参数数据未定义

    我尝试使用好的库jstree但我有一些奇怪的问题dblclick捆绑 这是我的代码 basic html jstree themes url http mywork shinframework shinfw themes redmond c

  • 嵌套 INotifyPropertyChanged 类不起作用

    得到了一些代码 得到了意想不到的结果 如果我用 Myclass 替换嵌套类 那就没有问题了 我想念什么 我是否绑定文本 到其他控件 或绑定图像并不重要 xaml代码

  • Android：是否可以在屏幕上同时创建底部和顶部选项卡？

    我想知道是否可以在顶部和底部设置不同的选项卡 单击时会导致不同的活动 谷歌搜索但没有找到任何相关内容 Thanks Android 的好处是几乎所有你想做的事情都可以实现 如果我们要更改您的 XML 我们会将其更改为以下内容

  • 用于淡入和淡出视图的 Angular 4 动画

    我只是希望视图在路线更改时淡入和淡出 我似乎已经正确设置了组件 但我认为需要使动画语法正确 这是我目前的动画尝试 我将此动画导入到我的组件中 import trigger state animate style transition fro

  • 使用 PHP API 进行 FB.login

    我已经设置了一个 Canvas 页面 单击表单提交按钮即可实现 FB login 在以下请求期间 它尝试通过 facebook gt api me 来自 Github 的最新 API 版本 访问用户数据 它可以在 Firefox 和 Chr

  • 检测序列参数的正确方法？

    我想编写一个接受参数的函数 该参数可以是序列或单个值 value的类型有str int等 但是我don t希望将其限制为硬编码列表 换句话说 我想知道参数 X 是一个序列还是我必须转换为序列以避免以后出现特殊情况的东西 我可以 type X

  • 错误：格式“%s”需要“char *”类型的参数，但参数 2 的类型为“int”[-Wformat=]

    我目前正在尝试做自己的 shell 它必须是多语言的 所以我尝试实现一个读取 txt 文件中的行的函数 include

  • 如何在反应材料表上添加精美的滚动条？

    我在用着反应材料表并想要一个像样的滚动条而不是默认的分页 我努力了反应自定义滚动但它没有按照我的意图工作 我的应用程序的默认滚动条已激活 还有一件事 我怎样才能将这种类型的滚动应用到桌体上 import CustomScroll from

热门标签