I want to add a column "id" to my mui data grid table which counts from 0 to number of rows in reactjs

Question

In the datagrid table component which renders data from api having multiple columns. Its required to show a column ID which has data from 0 to number of rows. Currently , my Object_id in this cell data is been shown.

This is my component:

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

const MainTable = ({ news }) => {
  const columns = [
    {
      field: "id",
      headerName: "ID",
      width: 70,
      valueGetter: (params) => `${params.row._id}`,
    },
    { field: "title", headerName: "Title name", width: 200 },
    { field: "source", headerName: "Source", width: 130 },
    { field: "topic", headerName: "Topic", width: 80 },
    { field: "insight", headerName: "Insight", width: 130 },
    { field: "region", headerName: "Region", width: 200 },
    { field: "country", headerName: "Country", width: 200 },
    { field: "pestle", headerName: "Pestle", width: 130 },
    {
      field: "intensity",
      headerName: "Intensity",
      type: "number",
      width: 90,
    },
    {
      field: "relevance",
      headerName: "Relevance",
      type: "number",
      width: 90,
    },
    {
      field: "likelihood",
      headerName: "Likelihood",
      type: "number",
      width: 90,
    },
    {
      field: "end_year",
      headerName: "End Year",
      type: "number",
      width: 90,
    },
    {
      field: "start_year",
      headerName: "Start Year",
      type: "number",
      width: 90,
    },
    {
      field: "added",
      headerName: "Added",
      type: "date",
      width: 150,
    },
    {
      field: "published",
      headerName: "Published",
      type: "date",
      width: 150,
    },
    {
      field: "url",
      headerName: "URL",
      renderCell: (params) => {
        return <a href={`${params.row.url}`}>View</a>;
      },
      cellClassName: "text-gray-500 hover:underline",
      width: 130,
    },
  ];

  console.log(news);
  return (
    <div style={{ height: 650, width: "100%" }}>
      <DataGrid
        rows={news}
        columns={columns}
        pageSize={10}
        rowsPerPageOptions={[10]}
        getRowId={(row) => row._id}
      />
    </div>
  );
};

export default MainTable;

Below is the screenshot which shows what is happening right now:

And below is the screenshot which should look like this:

Answer 1

see the solution below:

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

const MainTable = ({ news }) => {
  const columns = [
    {
      field: "id",
      headerName: "ID",
      width: 70
    },
    { field: "title", headerName: "Title name", width: 200 },
    { field: "source", headerName: "Source", width: 130 },
    { field: "topic", headerName: "Topic", width: 80 },
    { field: "insight", headerName: "Insight", width: 130 },
    { field: "region", headerName: "Region", width: 200 },
    { field: "country", headerName: "Country", width: 200 },
    { field: "pestle", headerName: "Pestle", width: 130 },
    {
      field: "intensity",
      headerName: "Intensity",
      type: "number",
      width: 90,
    },
    {
      field: "relevance",
      headerName: "Relevance",
      type: "number",
      width: 90,
    },
    {
      field: "likelihood",
      headerName: "Likelihood",
      type: "number",
      width: 90,
    },
    {
      field: "end_year",
      headerName: "End Year",
      type: "number",
      width: 90,
    },
    {
      field: "start_year",
      headerName: "Start Year",
      type: "number",
      width: 90,
    },
    {
      field: "added",
      headerName: "Added",
      type: "date",
      width: 150,
    },
    {
      field: "published",
      headerName: "Published",
      type: "date",
      width: 150,
    },
    {
      field: "url",
      headerName: "URL",
      renderCell: (params) => {
        return <a href={`${params.row.url}`}>View</a>;
      },
      cellClassName: "text-gray-500 hover:underline",
      width: 130,
    },
  ];

  console.log(news);
  return (
    <div style={{ height: 650, width: "100%" }}>
      <DataGrid
        rows={news.map((item,index)=>{return {id:index+1,...item}})}
        columns={columns}
        pageSize={10}
        rowsPerPageOptions={[10]}
        getRowId={(row) => row._id}
      />
    </div>
  );
};

export default MainTable;