在 DataGrid MUI 中使用 Select 組件

Question

我使用 DataGrid MUI 庫創建了一個表，並想為特定列的所有單元格添加一個選擇組件

到目前為止我做了什么

我創建了一個 Select 組件並將其傳遞給renderCell中的 renderCell

我的組件使用useState因為我希望它是可編輯的

隨后，對於每個單元格，都有一個useState ，這使得表格很重，有什么改進的想法嗎？

我的代碼

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} />,
    }
  ];

Answer 1

我推薦使用singleSelect Column 類型。

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;
        },
    }
];