CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
Marco Ávila
Marco Ávila

Reputation: 53

DataGrid returns only 1 result instead of more

I'm trying to display all the results on this data table from MUI but it is only displaying 1 result instead of all and I don't see what I'm doing wrong.

If you have good ideas and best practices on how to do the table would I would be very appreciated.


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;

Upvotes: 1

Views: 1009

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81390

The rows array contains only one value so DataGrid display one row, you probably want something like this. See Array.map() for more detail:

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

Upvotes: 1

Related Questions