How to add an auto increment for every row in Material UI table

Question

I am building a Next.js project by creating a table from Material UI and fetching data from MongoDB. How to manipulate the data from the table?

I want the "#" column with an auto-increment value starting from 1, 2, 3, 4, 5, etc. in every row.

This is my code:

Data models:

{
    appointment: [
      {
        _id: '6609339e8891194adf3beb60',
        name: 'tuyi',
        date: '2024-03-31',
        phone: '45454',
        terapist: 'fdgdf',
        statust: 'done'
      },
    ]
}

page.jsx

async function getAppointment() {
  const res = await fetch("http://localhost:3000/api/appointment", {
    method: "GET",
    cache: "no-store",
  });
  // const data = await res.json();
  return res.json();
}

async function Appointment() {
  const { appointment } = await getAppointment();

  const columns = [
    { id: "_id", name: "#" },
    { id: "name", name: "Nama" },
    { id: "date", name: "Tanggal" },
    { id: "phone", name: "No Telp." },
    { id: "terapist", name: "Terapis" },
    { id: "statust", name: "Status" },
  ];

  return (

      <TableContainer>
        <Table>
          <TableHead>
            <TableRow>
              {columns.map((column) => (
                <TableCell key={column.id}>{column.name}</TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {appointment &&
              appointment.map((row, i) => {
                return (
                  <TableRow key={i}>
                    {columns &&
                      columns.map((column, i) => {
                        let value = row[column.id];
                        return <TableCell key={value}>{value}</TableCell>;
                      })}
                  </TableRow>
                );
              })}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}

export default Appointment;

It turns out like this:

Answer 1

In MongoDB the _id will mostly be a hex string that's monotonically increasing. However, since you only want the items to be shown with numeric ID, you can pre-process the data once you completed fetching from the API.

In your case, you can do so after you gotten the JSON from the API:

async function getAppointment() {
  const res = await fetch("http://localhost:3000/api/appointment", {
    method: "GET",
    cache: "no-store",
  });
  const data = await res.json();
  // Here, you can add a numerically increasing index/ID to all the items
  return { ...data, appointment: data.appointment.map((row, index) => ({ ...row, index: index + 1 }) };
}

// After that, change the following to read from `index` key instead
const columns = [
  { id: "index", name: "#" },
  { id: "name", name: "Nama" },
  { id: "date", name: "Tanggal" },
  { id: "phone", name: "No Telp." },
  { id: "terapist", name: "Terapis" },
  { id: "statust", name: "Status" },
];