Using Select component in DataGrid MUI-CodePudding

I created a table using DataGrid MUI library and wanted to add a select component to all the cells for a specific column

What I did so far

I created a Select component and pass it to renderCell in colDef

my component used useState since I wanted it to be editable

subsequently, for each cell, there is a useState, and that makes the table heavy, Is there any idea to improve it?

My Code

const Payment = (params) => {
    const [paymentStatus, setPaymentStatus] = useState(params.value);
    const id = params.id;

    return (
      <Select
        value={paymentStatus}
        onChange={(e) => {
          setPaymentStatus(e.target.value);
          return updateSubscription(id, e.target.value); // function to update the payment
        }}
      >
        <MenuItem value={"paid"}>Paid</MenuItem>
        <MenuItem value={"unpaid"}>Un Paid</MenuItem>
      </Select>
    );
  };

  const columns = [
...
    {
      field: "payment_status",
      headerName: "Payment Status",
      renderCell: (params) => <Payment params={params} />,
    }
  ];

CodePudding user response：

I recommend using singleSelect Column type.

const paymentOptions = [
    { value: "paid", label: "Paid" },
    { value: "unpaid", label: "Un Paid" },
];

...
const columns = [
    ...
    {
        field: "payment_status",
        headerName: "Payment Status",
        type: 'singleSelect',
        valueOptions: paymentOptions,
        valueFormatter: ({ id, value, field }) => {
            const option = paymentOptions.find(
                ({ value: optionValue }) => optionValue === value
            );

            return option!.label;
        },
    }
];