Sorry about my English but at the moment I have some situation with Spreadsheet pro with 30 days free.
I config this with my React app but I can see my sheet will be clear data to empty when i try to resize the window with and event when i update some value in my stores. Thank for help.
Hello.
Could you please, provide some code snippet with your spreadsheet initialization the config related to it?
import { useEffect, useRef, useState } from "react";
import { DHTMLXSpreadsheetWrapper } from "./style";
const dhx = window.dhx;
export default function DHTMLXSpreadsheet({ data, lastItem }) {
let container = useRef(null);
let [spreadsheet, setSpreadsheet] = useState(null);
useEffect(() => {
const rowLimit = 20; // Set the desired number of rows
const spreadsheet = new dhx.Spreadsheet(container.current, {
rowsCount: rowLimit, // number of rows
colsCount: rowLimit
});
setSpreadsheet(spreadsheet);
return () => spreadsheet.destructor();
}, []);
const renderStyle = () => {
let style = { width: "100%", height: "100%", paddingBottom: "20px", maxHeight: '700px' };
if (lastItem) {
delete style.paddingBottom;
}
return style;
}
useEffect(() => {
if (!spreadsheet || !data) return;
spreadsheet.parse({...data});
const events = [
"beforeValueChange",
"afterValueChange",
"beforeStyleChange",
"afterStyleChange",
"beforeFormatChange",
"afterFormatChange",
"beforeSelectionSet",
"afterSelectionSet",
"beforeRowAdd",
"afterRowAdd",
"beforeRowDelete",
"afterRowDelete",
"beforeColumnAdd",
"afterColumnAdd",
"beforeColumnDelete",
"afterColumnDelete",
"beforeFocusSet",
"afterFocusSet",
"beforeEditStart",
"afterEditStart",
"beforeEditEnd",
"afterEditEnd",
"groupFill",
"beforeSheetAdd",
"afterSheetAdd",
"beforeSheetRemove",
"afterSheetRemove",
"beforeSheetRename",
"afterSheetRename",
"beforeSheetChange",
"afterSheetChange"
];
function eventHandler(event, arg) {
let argsList = "";
let pos = "";
let pos2 = "";
// console.log('arg', toJS(arg));
for (let i = 0; i < arg.length; i++) {
argsList += "<div>" + JSON.stringify(arg[i]) + "</div>";
pos = JSON.stringify(arg[i])
pos2 = (arg[i])
}
if(event ==='afterSelectionSet'){
const cellValue = spreadsheet.getValue(pos2);
console.log('calculation',pos2);
if(pos2){
}
}
};
events.forEach(function (event) {
spreadsheet.events.on(event, function () {
eventHandler(event, arguments);
});
});
return () => {
spreadsheet.events.detach('afterSelectionSet');
};
}, [spreadsheet, data]);
return <DHTMLXSpreadsheetWrapper ref={container} style={renderStyle()} />;
}
Here is my config, then I import in other component and pass data like :
const AddNewColumnForm = () => {
const {operator, setOperator} = calculationStore;
return (
<Form
form={form}
name="add-new-report-form"
layout="vertical">
<Form.Item
label={t('name')}
name="name"
initialValue={''}
rules={[
{
required: true,
message: t('column-name-cannot-be-emptied'),
},
]}>
<Input placeholder={t('please-input-column-name')} />
</Form.Item>
<Form.Item
label={t('Operator')}
name="operator"
initialValue={''}
rules={[
{
required: true,
message: t('cannot-be-emptied', { text: 'Operator' }),
},
]}>
<Select
showSearch
placeholder="Select an operator"
optionFilterProp="children"
filterOption={(input, option) =>
(option?.label ?? '')
.toLowerCase()
.includes(input.toLowerCase())
}
options={[
{
value: 'summary',
label: 'Summary',
},
{
value: 'quantity',
label: 'Quantity',
},
]}
onChange={e => setOperator(e)}
/>
</Form.Item>
{operator === 'summary' && (
<div>
{checkingTableLevel('file') && (
<Form.Item
label={t('Attribute')}
name="attribute"
rules={[
{
required: true,
message: t('cannot-be-emptied', { text: 'Attribute' }),
},
]}>
<Select
showSearch
placeholder="Select an attribute"
optionFilterProp="children"
filterOption={(input, option) =>
(option?.label ?? '')
.toLowerCase()
.includes(input.toLowerCase())
}
options={filteredOptions.map(item => ({
value: item.id,
label: item.name,
}))}
/>
</Form.Item>
)}
{checkingTableLevel('object') && <DebounceObjectInfo />}
</div>
)}
</Form>
)
}
I can see every time operator be changed and my spreadsheet is cleared to empty data, as long as there is a change, all data will be erased