Advanced Material React Table: Passing ref of TextField Component to a Cell

46 views Asked by At

I am using Material react table to calculate the price of items based on their quantity. As you can see in the picture, there is a quantity column where users can specify the quantity value but the problem is how to retrieve that value from the textField component from the MRT.

I thought about passing the ref of each cell but I couldnt figure it how to do it. So do you know how to achieve that or do is there another way to do this ? Thank you

 const columns = useMemo<MRT_ColumnDef<IOrderItem>[]>(
    () => [
//...
      {
        accessorFn(row: any) {
          return (
            <TextField
              name={`qty_${row?.id}`}
              type="number"
              InputProps={{ inputProps: { min: 1, max: row?.maxQuantity } }}
              defaultValue={row?.maxQuantity}
            />
          );
        },
        id: "qty",
        header: t("request_refund_page.order_item_qty"),
      },

    //...
    ],
    []
  );

enter image description here

0

There are 0 answers