React kullanarak MUI DataGrid düzeni sorunları

Question 1

MUİ DataGrid birkaç saatliğine şimdi işe almak için çalışıyordu, ama nedense şekillendirme masanın üstündeki sayfa bilgileri yerleştirerek, sütun başlıkları vardır. Belki de yaptığım aptalca bir şeydir. Sorunlarımı göstermek için gerçekten basit bir versiyon denedim. Umarım biri bana yardım edebilir. BTW, MUI ve Datagrid'in v5+ ' ını kullanıyorum. Tepki v17+

import React, { FC } from "react";
import { DataGrid, GridRowModel } from "@mui/x-data-grid";

import { GridColDef } from "@mui/x-data-grid";
export const DataGridTest: FC = () => {
  const paginationSize = 20;

  const columns: GridColDef[] = [
    { field: "username", headerName: "Username", flex: 1, sortable: false, filterable: false },
    { field: "first_name", headerName: "First Name", flex: 1, sortable: false, filterable: false },
    { field: "last_name", headerName: "Last Name", flex: 1, sortable: false, filterable: false },
    { field: "email", headerName: "Email", flex: 1, sortable: false, filterable: false },
    { field: "phone", headerName: "Phone", flex: 1, sortable: false, filterable: false },
  ];

  const rows: GridRowModel[] = [
    {
      id: 1,
      username: "Tony",
      first_name: "Tony",
      last_name: "Ballony",
      email: "[email protected]",
      phone: "0754512222",
    },
    {
      id: 2,
      username: "Joe",
      first_name: "Joeseph",
      last_name: "Willson",
      email: "[email protected]",
      phone: "0754512333",
    },
  ];

  return (
    <div>
      <DataGrid rows={rows} columns={columns} pageSize={paginationSize} />
    </div>
  );
};

Çıkış bu gibi görünüyor.

Böylece, tablo verilerinin altında gösterilmesi gereken sayfalandırma bölümünün bunun yerine sayfanın en üstüne yerleştirildiğini görebilirsiniz. Aslında, verilerin etrafında olması gereken sınır da en üste taşınır. Umarım biri bana yardım edebilir.

Question 2

Yüksekliğini belirtmeniz gerekir DataGrid, istemek:

//// Your code ////

  return (
    <div>
      <DataGrid
          style={{ height: "700px" }}
          rows={rows}
          columns={columns}
          pageSize={paginationSize} />
    </div>
  );
};

Satır içi ofc stilleri yerine stil sayfalarını kullanabilirsiniz. Bu sadece bir örnek.

Hleb Shypula · Answer 1 · 2021-11-27T13:22:42

Yüksekliğini belirtmeniz gerekir DataGrid, istemek:

//// Your code ////

  return (
    <div>
      <DataGrid
          style={{ height: "700px" }}
          rows={rows}
          columns={columns}
          pageSize={paginationSize} />
    </div>
  );
};

Satır içi ofc stilleri yerine stil sayfalarını kullanabilirsiniz. Bu sadece bir örnek.

Çalışacağım bugün. bırak biliyorum. Yorumlarınız için teşekkürler.
Teşekkürler düzeltme yaptım benim sorunum. Ancak, görüntülenen satır sayısına bağlı olarak yüksekliğin reaktif olmadığını biraz hayal kırıklığına uğratıyor.
@RollingİnTheDeep Sana yardım ettiğim için mutluyum. Cevabımı da kabul eder misin? Arkadaşımla itibar için kavga ediyorum.

React kullanarak MUI DataGrid düzeni sorunları

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride