master
mahdi andalib 3 years ago
parent 9a9320a22b
commit 069a907c5f
  1. 39
      src/components/ReactTable4/BasicTable.js

@ -40,6 +40,32 @@ const BasicTable = ({
const data = useMemo(() => MOCK_DATA, []); const data = useMemo(() => MOCK_DATA, []);
// console.log(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 [filtering, setFiltering] = useState(false);
const columns = React.useMemo( const columns = React.useMemo(
@ -47,12 +73,15 @@ const BasicTable = ({
[] []
); );
const defaultColumn = {
Cell: EditableCell,
};
// یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم // یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم
const defaultColumn = useMemo(() => { // const defaultColumn = useMemo(() => {
return { // return {
Filter: ColumnSearch, // Filter: ColumnSearch,
}; // };
}, []); // }, []);
// اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند // اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
const isEven = (idx) => idx % 2 === 0; const isEven = (idx) => idx % 2 === 0;

Loading…
Cancel
Save