MUI údajová mriežka rozloženie otázky, pomocou Reagovať

Question 1

Sa snažil dostať MUI údajová mriežka do práce na pár hodín už teraz, ale z nejakého dôvodu styling je uvedenie stránkovania informácie v hornej časti tabuľky, v hornej časti hlavičky stĺpcov. Možno jej niečo hlúpe robím. Snažil som sa naozaj jednoduchá verzia pre ilustráciu moje otázky. Dúfam, že niekto prosím, pomôžte mi. BTW ja používam v5+ z MUI a údajová mriežka. Reagovať je 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>
  );
};

Výstup vyzerá takto.

Takže môžete vidieť, že celkové počty strán časti, ktoré by mali byť uvedené pod tabuľkou údajov je namiesto umiestnený v hornej časti stránky. V skutočnosti hranice, ktoré by mali byť okolo údaje je posunutý až na vrchol. Dúfam, že niekto mi môže pomôcť sa tu.

Question 2

Musíte určiť výšku DataGridako:

//// Your code ////

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

Môžete použiť štýly namiesto inline štýly ofc. To je len príklad.

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

Musíte určiť výšku DataGridako:

//// Your code ////

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

Môžete použiť štýly namiesto inline štýly ofc. To je len príklad.

Budem sa snažiť, aby dnes a dáme vám vedieť. Ďakujeme za váš komentár.
Vďaka tomu bolo vyriešiť môj problém. Ale jej trochu dissapointing, že výška nie je reaktívny, založené na počet riadkov, ktoré sa zobrazia.
@RollingInTheDeep som rád, že som pomohol. Mohli by ste prijať moju odpoveď, ako dobre, ja som boj s kamarátom pre povesť.

MUI údajová mriežka rozloženie otázky, pomocou Reagovať

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii