Hi I have a problem with set Button state in afterValidate function then when we fill first value in handsontable then it consider that value as null and unable to calculate formula or dragToFill functionality.
My code : -
/* eslint-disable consistent-return /
/ eslint-disable array-callback-return */
// Note: R&D work on HandsonTable
const SpreadSheet = (props) => {
const hotRef = useRef(null);
const [sheetIsValid, setSheetIsValid] = useState(false);
const [invalidCells, setInValidCell] = useState(new Set());
const colHeaders = updatedColumnHeaders.map(column => column.displayText.toUpperCase());
const afterValidate = (isValid, value, row, prop) => {
const hot = hotRef.current.hotInstance;
const cellMeta = hot.getCellMeta(row, hot.propToCol(prop));
const data = { col: cellMeta.visualCol, row: cellMeta.visualRow };
const updatedInvalidCells = invalidCells;
if (isValid) {
updatedInvalidCells.forEach((cell) => {
if (cell.col === data.col && cell.row === data.row) {
updatedInvalidCells.delete(cell);
}
});
} else {
updatedInvalidCells.add(data);
}
console.log(‘value–>’, value);
setInValidCell(invalidCells);
setSheetIsValid(invalidCells.size === 0);
};
const highlightInvalidCells = () => {
const hot = hotRef.current.hotInstance;
invalidCells.forEach((data) => {
const cell = hot.getCell(data.row, data.col);
// eslint-disable-next-line no-unused-expressions
!cell.classList.contains(‘htInvalid’) && cell.classList.add(‘htInvalid’);
});
};
const afterChange = (changes) => {
if (changes && changes.length) {
console.log(‘changes–>’, changes);
highlightInvalidCells();
}
};
return (
<>
<Spreadsheet
ref={hotRef}
validateCells
colHeaders={colHeaders}
data={tableDataRender}
rowHeaders
minRows={100}
manualColumnResize
manualRowResize
width=“100%”
height=“400”
stretchH=“all”
filters
fixedColumnsLeft={2}
contextMenu
viewportColumnRenderingOffset={101}
viewportRowRenderingOffset={101}
dropdownMenu={false}
columns={columnHeaders}
formulas={{
engine: HyperFormula,
}}
afterValidate={afterValidate}
afterChange={afterChange}
/>
button disabled={!sheetIsValid} onClick={bulkInsertTableData} >Save change button
</>
);
};
SpreadSheet.propTypes = {
resourceTypes: PropTypes.objectOf(String),
channelGroupId: PropTypes.string,
planId: PropTypes.string,
invalidCells: PropTypes.objectOf(String),
setInValidCell: PropTypes.func,
costData: PropTypes.arrayOf(Object),
};
SpreadSheet.defaultProps = {
resourceTypes: {},
channelGroupId: ‘’,
planId: ‘’,
invalidCells: {},
setInValidCell: PropTypes.func,
costData: {},
};
export default SpreadSheet;
export { SpreadSheet as PureSpredSheet };
I have removed some of the code due to Company Policy
Consider button as
