How to Exchange Data with a Custom Element Handling Tabular Data？

[Taiyangqihuo]

I would like to add a custom element in Taipy to handle tables, using the third-party JS library Handsontable. I referred to the implementation of GameTable in the "Using tabular data" section of the Taipy documentation and replaced the HTML-based table with Handsontable. The data from the Taipy backend can be successfully displayed in Handsontable, but I don't know how to send the updated data from Handsontable back to the Taipy backend after modifying the table data on the front-end page. Could someone help me?Here's my code:

import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';
import {
  createRequestDataUpdateAction,
  useDispatch,
  useDispatchRequestUpdateOnFirstRender,
  useModule,
  TaipyDynamicProps,
  TableValueType,
  RowType,
  RowValue,
} from "taipy-gui";

registerAllModules();

interface ExampleComponentProps extends TaipyDynamicProps {
  data: TableValueType;
}

const pageKey = "no-page-key";

const ExampleComponent: FC<ExampleComponentProps> = (props) => {
  const { data, updateVarName = "", updateVars = "", id } = props;
  const [value, setValue] = useState<Record<string, Array<RowValue>>>({});
  const dispatch = useDispatch();
  const module = useModule();
  const refresh = data?.__taipy_refresh !== undefined;
  useDispatchRequestUpdateOnFirstRender(dispatch, id, module, updateVars);

  const colsOrder = useMemo(() => {
    return Object.keys(value);
  }, [value]);

  const rows = useMemo(() => {
    const rows: RowType[] = [];
    if (value) {
      Object.entries(value).forEach(([col, colValues]) => {
        colValues.forEach((val, idx) => {
          rows[idx] = rows[idx] || {};
          rows[idx][col] = val;
        });
      });
    }
    return rows;
  }, [value]);

  useEffect(() => {
    if (refresh || !data || data[pageKey] === undefined) {
      dispatch(
        createRequestDataUpdateAction(
          updateVarName,
          id,
          module,
          colsOrder,
          pageKey,
          {},
          true,
          "ExampleLibrary",
        ),
      );
    } else {
      setValue(data[pageKey]);
    }
  }, [refresh, data, colsOrder, updateVarName, id, dispatch, module]);

  const table_data = rows.map((row) => {
    return colsOrder.map((col) => row[col]);
  });

  return (
    <HotTable
      data={table_data}
      rowHeaders={true}
      colHeaders={true}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

export default ExampleComponent;