updateData partial update and drillThrough edit

Hello, thanks for your reply.
I think I have a rough understanding by now of how things work.
However, I'd like to point out some inconsistent behaviours, as illustrated in the following http://jsfiddle.net/soso/ewunc4pf:

1. Basic editing in the drillThrough is reflected in the main pivot table, but not in the report's dataSource. Let's say I change the colour from red to pink, I see pink displayed in the main pivot, but getReport().dataSource.data remains unchanged. As a result, if I click on the main "Save" button, the entry is not modified and I still get "red".
2. If editing through updateData() API upon receiving the datachanged event, it seems that:
   1. calling updateData() API results in a new entry being added to getReport().dataSource.data. So again if save the report, I will get a json containing several entries with the same RowId. 
   2. I need to provide the full record and not only the changeset (unless I'm mistaken?). Given that getReport().dataSource.data may not be a reliable source of information, how can I retrieve the **up to date** report information? (I tried flexmonster.getData(), but it seems it's disabled in jsfiddle "trial" version, and besides, getData() returns the pivot information in a format that is not super friendly.

So right now, the solution I came up with is:

1. disable drillThrough and set editable to false
2. implement my own popup, with my own (non flexmonster) editable table solution
3. call updateData with changeset from my custom popup/table
   • before updating data, search for the last version of RowId in my "source of truth" (getReport().dataSource.data) to retrieve current up to date record, update that record with the changeset, then call updateData([{ ...record, [field]: value, version: record.version+1 }], { partial: true}) - The version may not be necessary but I couldn't be certain that most up to date version would be the last entry in dataSource.data

That doesn't seem like the most efficient approach. So my follow-up questions would be:

1. How can I retrieve my source of truth for the data (getReport().dataSource.data is simple, but hacky)
2. Could updateData() and editable: true behave consistently?
3. Is there an easy way to use a flexmonster table in my custom popup instead of another "table" solution?

To answer your question, with my current workaround, I don't need an immediate fix, but definitely any help or fix will be appreciated.

Hello Vera,
I was able to verify (in one of my submitted fiddles http://jsfiddle.net/soso/ewunc4pf) that datachanged event now seems to trigger correctly.
I didn't test things too thoroughly though, as in the final implementation (React) I went with an alternate editing table, and I am managing the reference data in a React state (outside of Flexmonster, as you suggested).
Still, I think the fact that editable: true and partial update (which I didn't use in the end) could deserve some precisions in the documentation, since, for instance, we don't know what the "Save report" button will actually save (unless we keep track of changes externally and call a full updateData before saving the report to disk)
 

Hello again, I wasn't sure if I should open another ticket or stay in the new one, but I decided to post another problem I found, as it's related.
I implemented the logic discussed above in our real application which uses React.
Upon changing the reference data in a parent component, the data is updated in Flexmonster.
But whenever the data is changed, we're getting the following error from Flexmonster in the developer console: 

Uncaught TypeError: Cannot read properties of null (reading 'element')
at new k (flexmonster.full.js:99:1)
at h.Fe (flexmonster.full.js:1572:1)
at flexmonster.full.js:1561:1
k @ flexmonster.full.js:99
Fe @ flexmonster.full.js:1572
(anonyme) @ flexmonster.full.js:1561
requestAnimationFrame (asynchrone)
requestAnimationFrame @ flexmonster.full.js:149
u.$n.load.ON @ flexmonster.full.js:1559
load @ flexmonster.full.js:86
h @ flexmonster.full.js:1559
k @ flexmonster.full.js:2365
PivotApi @ flexmonster.full.js:2383
(anonyme) @ flexmonster.full.js:2393
(anonyme) @ index.js:1
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonyme) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157

The implementation of the component looks roughly as below (the actual code is more complex).
The code is actually more complex, and may contain errors, but my first question here would be more to know how to debug the problem on my side. And to find out if this 

import React, { useEffect, useRef, useState } from 'react';
import { FlexmonsterReference, Pivot } from 'react-flexmonster/hooks';

// Illustration - Actual code may differ
const MyComponent: React.FC<any> = ({
  licenseKey,
  data,
  config,
  localization,
}) => {
  const flexmonsterRef = useRef<FlexmonsterReference>(null);
  const [report, setReport] = useState<any>([]);

  useEffect(() => {
    const x = {
      ...config,
      localization,
      dataSource: { data },
    }
    setReport(x);
  }, [data, config, localization]);

  // none of these are triggered
  const handleDataError = (params: any) => console.log('dataerror', params);
  const handleLocalizationError = () => console.log('localizationerror');
  const handleQueryError = () => console.log('queryerror');
  
  return (
    <Pivot
      ref={flexmonsterRef}
      licenseKey={licenseKey}
      report={report}
      dataerror={handleDataError}
      localizationerror={handleLocalizationError}
      queryerror={handleQueryError}
   />
  );
};