update

src/components/ReactTable4/BasicTable.js

@@ -40,6 +40,32 @@ const BasicTable = ({
   const data = useMemo(() => MOCK_DATA, []);
   // console.log(data);
 
+  const EditableCell = ({
+    value: initialValue,
+    row: { index },
+    column: { id },
+    updateMyData, // This is a custom function that we supplied to our table instance
+  }) => {
+    // We need to keep and update the state of the cell normally
+    const [value, setValue] = React.useState(initialValue);
+
+    const onChange = (e) => {
+      setValue(e.target.value);
+    };
+
+    // We'll only update the external data when the input is blurred
+    const onBlur = () => {
+      updateMyData(index, id, value);
+    };
+
+    // If the initialValue is changed external, sync it up with our state
+    React.useEffect(() => {
+      setValue(initialValue);
+    }, [initialValue]);
+
+    return <input value={value} onChange={onChange} onBlur={onBlur} />;
+  };
+
   const [filtering, setFiltering] = useState(false);
 
   const columns = React.useMemo(
@@ -47,12 +73,15 @@ const BasicTable = ({
     []
   );
 
-  // یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم
-  const defaultColumn = useMemo(() => {
-    return {
-      Filter: ColumnSearch,
+  const defaultColumn = {
+    Cell: EditableCell,
   };
-  }, []);
+  // یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم
+  // const defaultColumn = useMemo(() => {
+  //   return {
+  //     Filter: ColumnSearch,
+  //   };
+  // }, []);
 
   //   اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
   const isEven = (idx) => idx % 2 === 0;