Блог

Я пытаюсь отобразить все результаты в этой таблице данных из MUI, но вместо всех отображается только 1 результат, и я не вижу, что я делаю неправильно.

Если у вас есть хорошие идеи и лучшие практики о том, как сделать таблицу, я был бы очень признателен.

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

interface Props {
  processes: any;
}

const DataTable: FC<Props> = ({ processes }) => {
  const inCourse = processes.filter(function (process: any) {
    return process.isActive === 0;
  });
  const columns: GridColDef[] = [
    { field: "id", headerName: "Id", hide: true },
    { field: "NProc", headerName: "N/Proc" },
    { field: "VRef", headerName: "V/Proc" },
  ];
  const rows: GridRowsProp = [
    {
      id: inCourse.map((process: any) => {
        return process.id;
      }),
      VRef: inCourse.map((process: any) => {
        return process.houseType;
      }),
      NProc: inCourse.map((process: any) => {
        return process.processNumber;
      }),
    },
  ];

  return (
    <div className="gridboard">
      <DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
    </div>
  );
};

export default DataTable;


 

rows Массив содержит только одно значение, поэтому DataGrid отобразите одну строку, вы, вероятно, хотите что-то подобное. Смотрите Array.map() для получения более подробной информации:

 const rows: GridRowsProp = inCourse.map(c => ({
  id: c.id,
  VRef: c.houseType,
  NProc: c.processNumber,
}));