reactjs - DataGrid flickers and lags when resizing columns - How to resolve? - Stack Overflow

admin管理员组

文章数量:1122832

I am using the Material UI DataGrid in my NextJS project, and I'm experiencing issues when resizing columns. The resizing is not smooth, and the grid flickers. I expected the resizing to be seamless. How can I fix this?

Here is my code:

"use client";

import {
  DrawerMenu,
  neutral100,
} from "ownComponents";
import {
  AddCard,
  AppRegistration,
  Description,
  Home,
  Inbox,
  Payment,
  Subject,
} from "@mui/icons-material";
import { Grid } from "@mui/material";
import { DataGridPremium, GridColDef } from "@mui/x-data-grid-premium";
import { useState } from "react";

const columns: GridColDef<(typeof rows)[number]>[] = [
  { field: "id", headerName: "ID", flex: 1 },
  {
    field: "firstName",
    headerName: "First name",
    flex: 1,
  },
  {
    field: "lastName",
    headerName: "Last name",
    flex: 1,
  },
  {
    field: "age",
    headerName: "Age",
    type: "number",
    flex: 1,
  },
  {
    field: "fullName",
    headerName: "Full name",
    description: "This column has a value getter and is not sortable.",
    sortable: false,
    valueGetter: (value, row) => `${row.firstName || ""} ${row.lastName || ""}`,
    flex: 1,
  },
];

const rows = [
  { id: 1, lastName: "Snow", firstName: "Jon", age: 14 },
  { id: 2, lastName: "Lannister", firstName: "Cersei", age: 31 },
  { id: 3, lastName: "Lannister", firstName: "Jaime", age: 31 },
  { id: 4, lastName: "Stark", firstName: "Arya", age: 11 },
  { id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null },
  { id: 6, lastName: "Melisandre", firstName: null, age: 150 },
  { id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
  { id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
  { id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 },
];

export default function Page() {
  const [isOpen, setIsOpen] = useState(true);
  return (
    <Grid container flex={1} bgcolor={neutral100}>
      <DrawerMenu
        width={360}
        open={isOpen}
        toggleDrawer={setIsOpen}
        logoImage="/logo.png"
        favIcon="/favicon.png"
        accountName={"Kevin van Bommel"}
        accountEmail={"[email protected]"}
        listItems={[
          { name: "Home", icon: <Home />, link: "/" },
          { name: "Contracs", icon: <Description />, link: "/contracts" },
          { name: "Applications", icon: <Inbox />, link: "/applications" },
          { name: "Price groups", icon: <AddCard />, link: "/pricegroups" },
          {
            name: "Contract entries",
            icon: <Subject />,
            link: "/contractentries",
          },
          { name: "Customers", icon: <Payment />, link: "/customers" },
          {
            name: "Registrations",
            icon: <AppRegistration />,
            link: "/registrations",
          },
        ]}
      />
      <Grid
        item
        display="flex"
        flexDirection="column"
        flex={1}
        overflow="auto"
        p={2}
      >
        <DataGridPremium
          rows={rows}
          columns={columns}
        />
      </Grid>
    </Grid>
  );
}

What I'm trying to do is give my grid flex 1 so that it is responsive and if i expand my DrawerMenu is that my whole page is responsive, but my DataGrid is not running smooth can anyone help me with this?

本文标签： reactjsDataGrid flickers and lags when resizing columnsHow to resolveStack Overflow