diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js index 0c742e2..7248b5d 100644 --- a/src/components/ReactTable4/BasicTable.js +++ b/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 ; + }; + const [filtering, setFiltering] = useState(false); const columns = React.useMemo( @@ -47,12 +73,15 @@ const BasicTable = ({ [] ); + const defaultColumn = { + Cell: EditableCell, + }; // یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم - const defaultColumn = useMemo(() => { - return { - Filter: ColumnSearch, - }; - }, []); + // const defaultColumn = useMemo(() => { + // return { + // Filter: ColumnSearch, + // }; + // }, []); // اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند const isEven = (idx) => idx % 2 === 0;