标签: mui-x-data-grid

我知道我必须使用 getRowId，但是我该如何使用它statId呢id？它是独一无二的。id或者为它们每个人生成一个属性？

错误：MUI：数据网格组件要求所有行都具有唯一的id属性。或者，您可以使用getRowIdprop 为每行指定一个自定义 id。rows 属性中提供了没有 id 的行：{"statId":813183,"teamId":3,"season":2021,"name":"Atlanta Hawks","team":"ATL","wins" ：41，“损失”：31，“fieldGoalsMade”：3492.1，“fieldGoalsAttempted”：7468.1，“fieldGoalsPercentage”：55.6，“twoPointersMade”：2427.9，“twoPointersAttempted”：4612.1，“twoPointersPercentage”：62.5，“ ThreePointersMade”：1064.2 ，“ ThreePointersAttempted”：2856，“ ThreePointersPercentage”：44.3，“ freeThrowsMade”：1684.8，“ freeThrowsAttempted”：2074.8，“ freeThrowsPercentage”：96.5，“进攻篮板”：903.6，“防守篮板”：3002.2，“篮板”：3905.9，“助攻”:2065.3、“抢断”:598.1、“封堵投篮”:405.4、“失误”:1086.7、“个人犯规”:1655.1、“得分”:9733.2、“双打”:120.1、“三双”:1.4}

import { useState, useEffect } from 'react';
import type { NextPage } from 'next';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';
import { DataGrid, GridColDef, GridRowIdGetter } from '@mui/x-data-grid';
import { Grid, Paper, Typography } from '@mui/material';
import Skeleton from '@mui/material/Skeleton';
import { blue } from '@mui/material/colors';

import FormOne from './../src/FormOne';
import …

我不想显示我的表的 id 字段。我使用 "@mui/x-data-grid": "^5.6.1" 版本。这是我的代码：

import * as React from 'react';\nimport { DataGrid } from '@mui/x-data-grid';\n\n\nconst columns = [\n    { field: 'id', headerName: 'ID', width: 50},\n    { field: 'testName', headerName: 'Test Name', width: 120,},\n    { field: 'testDate', headerName: 'Test Date', width: 160 },\n];\n\nexport default function DataTable(props) {\n\n    const rows = [id:1, testName:"test", testDate:"23/03/2022"];\n\n    return (\n        <div id="resultTable" >\n            <DataGrid\n                rows={rows}\n                columns={columns}\n                pageSize={5}\n                rowsPerPageOptions={[5]}\n\n            />\n        </div>\n    );\n}\n

Id 列可以隐藏或显示：none。我尝试使用

display: false\n

或者： …

在此输入图像描述

我正在做版本 "@material-ui/core": "^4.12.3"，现在版本已经改变了。我正在寻找方法：

import { GridOverlay, DataGrid } from '@mui/x-data-grid';

但它不起作用。任何人都可以帮助我设置旧版本的版本和文档，以便我在应用程序中使用这两个版本。

我试图在一个单元格内有两行单独的文本，其中一行文本位于另一行之上，在 Material-UI 的数据网格组件中，似乎无法实现任何工作。这是我尝试过的：

 const columns: ColDef[] = [
        {
            field: "name",
            headerName: "Sector",
            width: 300,
            renderCell: (params) => {
                let name = params.data.name
                const flow = params.data as IOFlow;
                const title = Currency.format(flow.value)
                    + " " + props.direction
                    + " per " + Currency.format(1);
                return (
                    <>
                         <Typography fullWidth display='block'>
                              {name}
                         </Typography>
                         <br/>
                         <Typography fullWidth display='block'>
                              {title}
                         </Typography>
                    </>
                );
            }
        },
    ];

如果我还需要提供更多信息，请告诉我。

我在我的 React 项目中使用 MUI。当我将列的类型设置为type: "number"列标题并且数据向右对齐时。我在 MUI 文档中的简单示例中重现了该问题：codesandbox

第三列age有type: "number"并且所有内容都向右对齐。但其他具有默认类型的列 - 位于左侧。

如何将列的标题和数据向左对齐type: "number"？

我想编辑 MUI XData 网格单元格，但不是通过双击。如果单元格始终显示为编辑模式或通过悬停显示，那就更好了。是否可以？

此代码与 Material UI Datagrid 有关，我需要在加载 API 时禁用“转到下一页”按钮

    <DataGrid
      autoHeight
      getRowHeight={getRowHeight}
      rows={rows}
      columns={columns}
      page={page - 1}
      rowCount={total}
      rowsPerPageOptions={rowsPerPage}
      pagination
      paginationMode='server'
      pageSize={pageSize}
      getRowClassName={(params) => getRowClassName(params)}
      onPageChange={(newPage) => handelPageChange(newPage)}
      loading={isLoading}
      // disableNextPage={isLoading}
      onPageSizeChange={(newPageSize) =>
        setAssetList((prveState) => ({
          ...prveState,
          pageSize: newPageSize,
        }))
      }
    />

我正在使用 MUI X Data Grid v5 和 Tanstack React Query v4 我尝试在 Datagrid 组件上使用分页，当页面最初加载时，它会按预期正常获取并加载网格。当我点击进入网格的下一页时，问题就出现了，我尝试通过向我的 api 发送跳转来重新获取数据。api 没有问题，它可以正确获取下一组数据。然而，在Datagrid中，它只渲染结果集的最后一条记录。在我的控制台和网络响应中，我看到一个包含正确数量记录的数组。如果我向后导航，它将立即呈现所有“丢失”的行，但然后继续获取 onPageChange 并正确呈现所有记录。

代码沙箱链接：

这是我尝试过的：

const ApprovalGrid = () => {
  const authorization= useContext(AuthorizationContext);
  const [skip, setSkip] = useState(0);
  const [page, setPage] = useState(0);
  const pageSize = 10;
  const fetchData = async () => {
    return await doFetch(
      '/get/approvals', {
        query: {pageSize: pageSize, skip: skip },
      }),
      authorization,
    );
  };

  const { data, isLoading, isFetching, isRefetching, refetch } = useQuery(
    ['Approvals-viewAll', page],
    async () …