Material UI -Data网格自定义分页
Material UI是一个基于React的开源UI组件库，它提供了丰富的可重用组件和样式，帮助开发者快速构建美观且易于使用的用户界面。
Data网格是Material UI中的一个组件，它提供了一个灵活的表格布局，用于展示和处理大量的数据。Data网格支持自定义分页，可以根据需求进行分页设置，以提高数据的展示效果和用户体验。
Data网格的主要特点和优势包括：
- 灵活的布局：Data网格提供了丰富的布局选项，可以自定义表头、列宽、行高等，以适应不同的数据展示需求。
- 分页功能：Data网格支持自定义分页，可以根据数据量和用户需求进行分页设置，提高数据的展示效果和用户体验。
- 排序和过滤：Data网格提供了排序和过滤功能，可以方便地对数据进行排序和筛选，以便用户快速找到所需的信息。
- 可编辑性：Data网格支持单元格编辑，用户可以直接在表格中编辑数据，并实时反映到后端数据库中。
- 响应式设计：Data网格具有响应式设计，可以自动适应不同的屏幕尺寸和设备类型，提供一致的用户体验。
在腾讯云的产品生态中，可以使用腾讯云的Serverless云函数（SCF）和云数据库（CDB）等服务与Material UI的Data网格结合使用。通过SCF可以实现数据的动态加载和处理，而CDB则提供了可靠的数据存储和管理。
腾讯云Serverless云函数（SCF）：https://cloud.tencent.com/product/scf 腾讯云云数据库（CDB）：https://cloud.tencent.com/product/cdb
相关·内容
3回答
我正在使用material-ui data-grid，我想在每一行上显示Edit material-ui图标。但是在数据网格中，我们没有任何可以用来做同样事情的道具。以下是源码： import React, {useState, useEffect} from "react";
import { DataGrid } from "@material-ui/data-grid";
import { Edit } from "@material-ui/icons";
const MyComponent= () => {
浏览 48提问于2021-02-11得票数 3
1回答
有没有办法在material ui中使用自定义图标进行分页？ Material UI Pagination Documentation，CodeSandbox Demo 我想要更改默认的左和右V形(用于导航) ? 有没有办法使用material ui的现有组件来实现这一点？
浏览 12提问于2020-06-22得票数 2
回答已采纳
对于一些分页UI，我有一个功能良好的Knockout模板，它与基于Knockout的共享数据网格一起工作。此模板为网格中的每个数据“页面”呈现一个HREF。
模板可以工作，但它很酷，因为如果我获取了大量数据，那么我最终会在网格下面得到几十个导航页面链接。下面是当前的模板：
<div class="idTemplate_ko_simpleGrid_pageLinks">
<p>
<span>Go to page:</span>
<!-- ko foreach: ko.utils.rang
浏览 4提问于2012-08-21得票数 7
回答已采纳
1回答
设置角ui网格下拉列表宽度
、、、、
我有一个ui网格，在其中我使用分页。paginationSizes : 25，50，75 ,100在ui-网格下拉列表中选择100,100没有充分发挥。如何使用CSS更改显示的下拉列表的宽度。)这是当前我的网格选项：
`$scope.gridOptions = {
enableFiltering: true,
enablePaging: true,
enableRowSelection: true,
multiSelect: fals
浏览 4提问于2016-08-26得票数 1
回答已采纳
我正试图把分页的内容集中起来。然而，这是行不通的。在控制台上，我需要对ul包装进行验证，我无法在MUI站点上找到与分页道具相关的任何信息，也无法找到关于如何对项目进行中心化的指南。
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Pagination from '@material-ui/lab/Pagination';
const useStyles = makeStyles((theme) => ({
浏览 1提问于2020-07-23得票数 4
回答已采纳
1回答
我想改变所有数字的字体大小(如下面的屏幕快照所示)，在DataGrid组件分页内的每个页面选择元素中的行中。
我检查了每个数字，得到了.MuiMenuItem-root作为每个元素的选择器。
然后，我更改了font-size和color (只是为了证明.MuiMenuItem-root是正确的选择器)，如下面的截图所示。
结果是成功的。当我在代码中应用选择器时，font-size没有工作(没有什么变化)。
这是我的代码：
CustomDataGrid.js：
import { DataGridPro } from '@mui/x-data-grid-pro'
浏览 1提问于2021-10-06得票数 1
回答已采纳
1回答
我们正在Angular 5上使用material框架应用程序，并寻找一个可以帮助我们在表格中进行分组、分页和排序的ui插件。
我们已经用材料框架打开了一个查询，但被击落了。仍在讨论中，但不要认为这会是一个快速的解决方案。
有没有人在angular 4或5中实现了网格分组和分页和排序，可以提供一些帮助？
提前谢谢。
浏览 1提问于2018-04-03得票数 1
1回答
我一直在使用Material网格，我试图在一个卡片网格中显示数据，而不是单列显示。我的网格当前像这样显示在列中(请忽略卡片的大小，这只是屏幕截图的放大)：
我希望网格以这样的方式在行中显示，而不是单个列：
我觉得我错过了一些简单的东西，但我只是不知道为什么它总是堆积在一个单一的列中。守则如下：
import React, { useState, useEffect } from "react"
// components
import Grid from "@material-ui/core/Grid"
import { makeStyles }
浏览 2提问于2020-04-07得票数 2
回答已采纳
我有一个web网格，选择您最喜欢的，因为我真的认为它不会改变这个问题的答案--微软、Telerik、Dev -而且我已经设置它使用分页。
我正在使用Telerik，但我不把它放在标签中，因为我不认为问题在于网格本身，我认为问题在于我如何定位数据库代码。
我有一个继承自WebConrol的类，当我对网格进行页面时，这段代码再次运行，这将重新绑定网格。我的问题是访问数据库(并等待)多次不必要的时间。
对于任何类型的web数据网格，我都会给出答案。如果有必要，我可以把它翻译成我的网格类型。
Imports System.Data
Imports System.Web.UI.WebControls
I
浏览 1提问于2015-01-14得票数 0
回答已采纳
我使用Material UI的网格()进行布局，但是，虽然列和行工作正常，但spacing属性似乎不起作用。
我已经像这样导入了网格：import Grid from '@material-ui/core/Grid'
<Grid container spacing={10}>
<Grid item xs={12} sm={6}>
CONTENT
</Grid>
<Grid item xs={12} sm={6}>
CONTENT
</Grid>
</
浏览 1提问于2020-02-26得票数 3
1回答
我对material-ui很陌生。我在试着构建这个组件。
我能够为下一个按钮和以前的按钮做样式，就像在图片中一样。
通常的样式显示页数作为一个编号组，如下所示：
是否有任何属性可以传递给分页组件，在其中我可以更改样式？
以下是代码：
import Pagination from "@material-ui/lab/Pagination";
import useStyles from "./styles";
const ReviewsPagination = () => {
const classes = useStyles();
浏览 3提问于2021-08-18得票数 1
1回答
我想要覆盖材料表中的默认分页，使其看起来不同，但保留相同的默认元素。我的覆盖允许我在表中的页面之间移动，但不能更改表中显示的行数。我也不能跳到最后一页或第一页。我想保留与默认情况相同的选项，但是要改变它们的外观。
我所有的图标，网格，排版等等，导入都是@material-ui/core/或@material-ui/icons/
function IntakeList() {
const CustomPaginationComponent = (props) => {
const { page, rowsPerPage, count, onC
浏览 2提问于2022-06-15得票数 2
回答已采纳
2回答
我用的是反应+材料表。
如何实现
我希望有一个选项，将设置为“All”，以匹配物质表中的行总数。
我做了什么，
我使用useState创建rowsPerPage，并在handleChangeRowsPerPage函数中设置rowsPerPage。我使用组件重写来自定义分页，并将rowsPerPage和处理程序传递给它的支持。我还将rowsPerPage传递给MaterialTable的pageSize选项。
问题我遇到了
页面不调整大小，state.pageSize也不更新.尽管props.options.pageSize和分页成功地使用onChangeRowsPerPage进行了更新。
链接
浏览 4提问于2020-06-18得票数 11
我已经将网格的工作示例放在一起，并希望为网格的每一行添加一个IconMenu。我看到图标按钮，但当我点击它时，我没有得到菜单。下面是网格的代码。
有人设法让使用吗？
require('fixed-data-table/dist/fixed-data-table.css');
var React = require('react');
var PropTypes = React.PropTypes;
var FixedDataTable = require('fixed-data-table');
var Table = FixedDataTab
浏览 0提问于2015-07-30得票数 14
自从我从serverSideStoreType="partial"将ag-网格更新为v27后，我就有了一个使用serverSide分页&v27的网格。
我想使用suppressRowVirtualisation="true"，因为滚动大大降低了性能，但是，将该选项设置为true似乎可以加载所有页面的数据，而无需等待用户在声明的cacheBlockSize底部滚动。
是否有办法使suppressRowVirtualisation与serverSide分页一起工作？
感谢所有的帮助！
<ag-grid-angular #stopPointsGrid s
浏览 14提问于2022-06-29得票数 2
我有父子剑道ui网格。
子网格的读数如下所示
read: {
url: baseURL + "/GetOrgSchools/OrgID=" + window.SelectedOrg,
// data: { OrgID : window.SelectedOrg }, // pass aditional data
dataType: "json" // <-- The default was "jsonp"
},
我可以使用下面的代码筛选所选父行上的子记录
window.SelectedO
浏览 0提问于2014-01-03得票数 0
1回答
角度材料中的分页
、、
在angular material中有没有支持分页的网格组件？
文档页面上唯一可用的grid指令是md-grid-list ()，但我没有看到分页选项。
浏览 0提问于2016-11-16得票数 0
我已经创建了一个ui网格，并将分页包含到其中。现在，分页div正在重写水平滚动，我无法滚动它。
<div id="grid1" ui-grid="gridOptions" ui-grid-paging class="grid"></div>
请在这里找到柱塞-
从div中删除‘ui-网格分页’，水平滚动就可以正常工作了。
浏览 4提问于2014-12-29得票数 1
回答已采纳
摘要
大家好！在这个问题中，我想问您，当您只从material导入父组件时，如何设计子组件的样式。
问题
我想重写从Material导入的分页项的类。我只是从资料界面导入分页组件。如何从分页组件访问子组件(分页项组件)样式？
例如。我想将此样式应用于分页项组件。
.Mui-selected {
"background-color": "transparent";
"color": "#19D5C6";
}
我有以下的TSX代码。
import React from 'react';
import { mak
浏览 2提问于2020-09-16得票数 5
回答已采纳
我在角度6中使用ag网格社区。我已经设置了suppressPaginationPanel=true并使用材料分页器来处理分页器事件。对于行模型，我使用无限行模型。我的分页下一步和上一个是正确工作的服务器端调用下面的url。
；
但是我的页面大小改变不起作用了。我已经在物料分页器pageChange事件中实现了这一点。在改变pageSize之后，实际上进入无限循环，getRows称为无限时间。
我还尝试过其他一些选项，如paginationPageSizeChange()、paginationGoToFirstPage()等，但没有一种可行。
每次单击pageSize更改或单击下一个/前一个时，
浏览 0提问于2018-10-12得票数 0
当我通过延迟加载导入数据网格时，就会出现错误。
等待import('@material-ui/data-grid'))的异步( () => )
请告诉我是否正确导入，因为当我导入其他材料-ui组件时，该组件可以正常工作，但是对于数据网格导入，它会发生错误。
浏览 0提问于2021-04-29得票数 1
回答已采纳
根据他们的文档“数据网格组件支持v5和v4”，我开始使用新的v5 alpha material-ui构建react应用程序。所以我安装了X网格，当我导入X网格时，我得到了这个错误： ./node_modules/@material-ui/x-grid/dist/index-esm.js 找不到模块:无法解析'C:\Users\remusp\Desktop\React\material\node_modules@material-ui\x-grid\dist‘中的“@material-ui/styles” 有没有人知道如何让这一切一起工作？
浏览 22提问于2021-07-11得票数 0
回答已采纳
我使用angularjs1.5.0和角ui网格3.1.1。当我在控制器主体中分配gridOptions (传递给网格指令)对象时，如下所示：
$scope.gridOptions = {
data: [{"mock2": 1, "mock1": 2}, {"mock2": 10, "mock1": 22} ]
};
HTML：
<div ui-grid="gridOptions"></div>
它按预期显示表。但是，当我试图在$scope.on中更改数据时：
$s
浏览 8提问于2016-05-27得票数 6
回答已采纳
1回答
我想改变material-ui显示表格分页的方式。目前material-ui显示的是这样的
我想改成这样
有没有可能这样设计？
浏览 0提问于2021-05-16得票数 0
由于分页问题，我有一个警告错误。我使用的是资料Ui，我有一个搜索函数，问题是当我转到第2页并试图搜索某些内容时，我会得到以下错误
Failed prop type: Material-UI: the page prop of a TablePagination is out of range (0 to 0, but page is 1)
当前表分页代码是
<TablePagination
onClick = {handleDrawerClose}
rowsPerPageOptions={[5, 20, 50]}
浏览 6提问于2020-05-16得票数 0
回答已采纳
我有一个webform，它使用网格视图控件来显示搜索操作的结果。
我想利用在the表单中使用分页的优势。但是大家都知道，网格视图分页是一种客户端分页，它将所有已选择的记录传送到客户端。我所说的客户端分页是指客户端(页面)逐页显示记录，但每次用户单击页面链接浏览记录时，所有记录都是从Data Source中选择的。
如何将gridView与datapager一起使用，以获得服务器端分页？或者通过配置我们的查询逐页获取记录的任何其他解决方案？
浏览 4提问于2010-02-20得票数 3
回答已采纳
现在我被GWT中的小部件分页问题所困扰。
我正在使用Cell table来显示我的一个UI绑定器类的实例列表(例如: LocationView)。这是CellTable的展示。
现在，我想将我的小部件(UI Binder类)添加到表的每个单元格中。不知何故，它看起来像这样
在此单元格表中，每个单元格都是此小部件(LocationView -一个UI绑定器类)：
那么如何使用单元格表创建此表(我不使用网格视图，因为它不支持分页)
或者，如果我不能使用单元格表创建这个表格，我可以使用支持分页的表格(如果LocationView的数量(你看到的图标)超过6个，它将跳转到第2页)。
谢
浏览 5提问于2011-12-27得票数 2
1回答
我试图使用makeStyles更改分页组件中每个项的背景色。
import { Pagination } from "@material-ui/lab";
import { makeStyles } from "@material-ui/core";
const pagination = makeStyles({
root: {
"& .Mui-selected": {
color: "white",
backgroundColor: "black"
}
}
浏览 9提问于2022-08-18得票数 1
回答已采纳
2回答
我了解到，如果linq查询中有一些函数没有映射到sql查询，那么必须首先调用.AsEnumerable()：
var model = _service.GetQuery
.Where(data => data.SomeFlag == true)
.Select(data => new { Foo = CalculateFoo(data.Bar); });
linq不能在sql中执行，但是通过添加AsEnumerable()，我们可以使.Select()子句由linq执行到对象中：
var model =
浏览 6提问于2012-05-12得票数 1
回答已采纳
2回答
在中，我借用了，有一个很棒的例子说明了如何使用AngularJs创建分页网格。(我的问题与略有不同。)
在我们的一个项目中，我们有一个非常相似的解决方案，但是为了获得一些帮助，我将使用我前面提到的柱塞的代码。
我的目标：我想让屏幕阅读器更容易访问底部的分页网格，这是通过向网格的按钮添加一些咏叹调标签来完成的，例如
aria-label="Go to first page"
aria-label="Go to previous page"
aria-label="Go to page 3"
诸若此类。我该如何做到这一点？
最后，下面是代码：
模板：
浏览 2提问于2016-08-31得票数 6
1回答
使用React的资料界面分页
、、、、
我正在使用API来获取数据并将其呈现到卡片中。我想添加分页，为此我使用了。我每页呈现9张卡片，页面编号和卡片数量由API url决定。问题是，当我单击分页按钮时，它似乎两次调用API，一个用于第一页，另一个用于请求的页面。我不知道我在这里做错了什么。
--这是我获取数据并尝试更新页码的部分：
useEffect(() => {
fetchBeerData(currentPage);
}, [currentPage]);
const fetchBeerData = async pageNumber => {
try {
const { data } = a
浏览 0提问于2021-03-10得票数 0
回答已采纳
我正在为我的客户评估React-Material网格。其中一个关键反馈是缺少行的替代阴影，这会影响用户体验。 https://material-ui.com/components/data-grid/#mit-version 这个是可能的吗？ 实际 ? 所需 ? 谢谢, Sau
浏览 53提问于2020-11-04得票数 2
回答已采纳
2回答
我是asp.net新手。我正在尝试覆盖/扩展Gridview以进行分页，如本主题中所指定：
代码隐藏：
namespace MyCode
{
public partial class _Default : System.Web.UI.Page
{
....
}
}
namespace cly.Web.CustomControls
{
public class clyGridView : GridView
{
...code
}
}
如何在.aspx文件中声明这个新的网格视图
浏览 0提问于2012-05-26得票数 1
我目前使用的是Material-table。它正常显示data，但是，分页和每页行数下拉菜单不起作用。单击、下一步按钮和选定行数时不会发生任何反应。 请参见以下代码： import MaterialTable from 'material-table'
const tableIcons = {
/*table icons*/
}
function Test(){
const [data, setData] = useState([]);
const getDatas = async() => {
await axios.get('/A
浏览 47提问于2021-04-15得票数 1
这是我的代码
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);
app.controller('MainCtrl', [
'$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) {
var paginationOptions = {
page
浏览 0提问于2015-10-05得票数 4
我开发了一个网络应用程序使用react和资料-用户界面和反应。当我使用分页时，我得到了以下错误。
index.js:1452 Warning: Material-UI: You are using the typography variant caption which will be restyled in the next major release.
Please read the migration guide under https://material-ui.com/style/typography#migration-to-typography-v2
我在代码中使用下面的分页方
浏览 0提问于2018-10-11得票数 2
回答已采纳
我正在为我的数据网格创建一个自定义工具栏，其结构如下： return (
<GridToolbarContainer>
<GridToolbarColumnsButton />
<GridToolbarFilterButton />
<GridToolbarDensitySelector />
<GridToolbarExport />
</GridToolbarContainer>
); 所有组件都工作正常，但GridToolbarExport现在
浏览 14提问于2021-06-23得票数 3
在Material UI Data Grid的文档中，它有这样的代码片段(我做了一些小改动，比如导入DataGrid而不是DataGridPro，等等)： import { DataGrid, useGridApiRef } from '@material-ui/data-grid';
import Alert from '@material-ui/lab/Alert';
export default function PageChange() {
const apiRef = useGridApiRef();
const [message, set
浏览 21提问于2021-09-08得票数 0
我想在DevExpress mvc 5 .But中创建一个它没有显示分页的asp.net网格视图，它只包含网格的内容-- .How --我可以将分页添加到网格中吗？
主计长：
public ActionResult Index()
{
ViewBag.Message = "Welcome to DevExpress Extensions for ASP.NET MVC!";
ViewData["Report"] = new Training.UI.Web.Reporting.XtraReport1();
return View();
}
浏览 4提问于2015-06-21得票数 1
回答已采纳
Handsontable分页示例使用了非常简单的6标记样式分页技术。
如何使它看起来更完整，就像ng网格/ui网格分页页脚，其中有左右箭头，选择器中每页的行数等等？
浏览 7提问于2015-10-20得票数 2
回答已采纳
我正在使用AngularJs 来显示动态数据网格，我喜欢它，但是现在我必须使用服务器端过滤和分页将它连接到一个数据库表中，60,000条记录，而且这个插件的分页选项似乎只用于客户端分页。
是否有人能够在服务器端寻呼中使用此功能。你有代码示例吗。
视图代码
<div class="gridContainer">
<div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-auto-resize ui-grid-pagination></d
浏览 3提问于2015-03-17得票数 12
回答已采纳
我正在开发一个使用angularJS和UI的网站。我用ui网格显示从后端接收到的一些数据。因为我有很多数据，所以我使用ui网格分页。我可以过滤和隐藏列。
当我试图“导出所有可见数据”时，只有当前页被导出。
这可能是正常的，因为其他页面是不可见的，但我希望找到一个解决方案来导出我所有的过滤数据，而不仅仅是当前的页面。
我在Ui Grid文档中找不到这样的东西
谢谢
浏览 10提问于2017-03-10得票数 1
回答已采纳
使用AngularJS和MognoDB，是否可以查询数据库，返回结果，然后在角度视图中呈现结果，但在返回数据的特定索引/位置？
注意:对象在数组中返回...
例如：
用户单击从View1通向View2的带有ui-sref的<a>标记。URL触发对MongoDB的查询，返回500个结果。在View2中，我需要以分页格式呈现结果(已经完成)，但分页从<a>标记所在的特定结果开始。
问题:返回结果并呈现View2，但结果从返回列表的开头开始，而不是从从View1单击的特定结果开始。
<div class="col m3" dir-paginate=
浏览 0提问于2016-04-22得票数 0
1回答
我正在尝试将一个小项目从jquery移植到angularjs。我使用DataTables绘制从虚拟机接收的诊断数据，这是一个例子：
DataTables使分页数据变得容易，这样做的好处是在导航时不捕获鼠标滚动，这是页面包含大量表时的最佳解决方案。我现在试图使用从角度ui中的ui网格来做同样的事情，但是ng网格中存在的分页选项已经不存在了(或者至少我无法找到它们)。
是否有一种使用ui网格进行客户端分页的方法？在不需要滚动表的情况下，是否有办法避免捕捉鼠标滚动？如果没有，我只能换回ng网格了。
浏览 2提问于2014-09-17得票数 5
回答已采纳
那里。我想在物质ui数据网格表中添加一个图像。但这不管用。我在这里错过了什么？我试图搜索文档，但没有看到任何使用图像的示例。
我的代码
import { DataGrid } from '@material-ui/data-grid';
const columns = [
{
field: 'image',
headerName: 'Image',
width: 150,
editable: true,
},
{
field: 'name',
headerName:
浏览 2提问于2021-09-08得票数 5
1回答
我是新的材料用户界面，并一直试图弄清楚这一点。
在实质性UI中，是否有一种方法在数据网格中有两列，一列左对齐，一列右对齐？到目前为止，我已经能够左右对齐标题，但我的方式似乎离开了单元格。
import * as React from "react";
import { DataGrid } from '@material-ui/data-grid';
const columns = [
{ field: 'id', headerName: 'Column 1', align: "left", header
浏览 3提问于2021-06-16得票数 4
回答已采纳
我正在创建一个使用资料用户界面的网络应用程序。主页被划分为3个网格，每个网格都有一个height of 500px。我想在中间网格中展示一个抽屉，里面有一些操作选项。这有可能吗？到目前为止，我只能在整个屏幕上显示它。
下面是包含网格元素的主要组件：
import React, { Fragment } from 'react';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
const style = {
P
浏览 0提问于2019-09-01得票数 7
回答已采纳
2回答
我目前正在使用ui网格实现与外部分页显示我的数据。我遇到了一个问题，我只能导出当前查看的数据，但是我也需要能够导出所有数据。
有人知道使用外部分页导出所有数据的工作吗？
浏览 2提问于2015-03-10得票数 2
回答已采纳
即使没有数据或者使用条件切换禁用/启用Pagination Arrows，如何将分页箭头设置为启用 import React from 'react';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import { NavLink } from 'react-router-dom';
import Truncate from 'react-truncate';
// Material-UI
import {
浏览 9提问于2019-05-23得票数 2
1回答
我正在尝试使用移动折叠导航条，在用UI路由器实现CSS 中。但是汉堡呢？(菜单3条)当我点击菜单<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>时不会显示菜单。
有什么方法可以修改这个，这样我就可以把这个导航放在主页上，让ui路由器只加载部分页面吗？
浏览 1提问于2015-07-13得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
