@visactor/react-vtable 0.19.1 → 0.19.2-alpha.1

package/cjs/components/base-component.d.ts

@@ -4,6 +4,7 @@ export interface BaseComponentProps {
 }
 type ComponentProps = BaseComponentProps & {
     updateId?: number;
+    componentId?: number;
 };
 export declare const createComponent: <T extends ComponentProps>(componentName: string, optionName: string, supportedEvents?: Record<string, string> | null, isSingle?: boolean) => React.FC<T>;
 export {};

package/cjs/components/base-component.js

@@ -33,49 +33,23 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.createComponent = void 0;
 
-const react_1 = __importStar(require("react")), vutils_1 = require("@visactor/vutils"), table_1 = __importDefault(require("../context/table")), eventsUtils_1 = require("../eventsUtils"), util_1 = require("../util"), createComponent = (componentName, optionName, supportedEvents, isSingle) => {
-    const ignoreKeys = [ "id", "updateId" ], notOptionKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys, Comp = props => {
-        const context = (0, react_1.useContext)(table_1.default), id = react_1.default.useRef((0, 
-        vutils_1.isNil)(props.id) ? (0, util_1.uid)(optionName) : props.id), eventsBinded = react_1.default.useRef(null), updateId = react_1.default.useRef(props.updateId), componentOption = react_1.default.useRef();
+const react_1 = __importStar(require("react")), vutils_1 = require("@visactor/vutils"), table_1 = __importDefault(require("../context/table")), eventsUtils_1 = require("../eventsUtils"), createComponent = (componentName, optionName, supportedEvents, isSingle) => {
+    const ignoreKeys = [ "id", "updateId", "componentId" ], notOptionKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys, Comp = props => {
+        const context = (0, react_1.useContext)(table_1.default), eventsBinded = react_1.default.useRef(null), updateId = react_1.default.useRef(props.updateId);
         if (props.updateId !== updateId.current) {
             updateId.current = props.updateId;
             !!supportedEvents && (0, eventsUtils_1.bindEventsToTable)(context.table, props, eventsBinded.current, supportedEvents) && (eventsBinded.current = props);
-        } else {
-            const newComponentOption = (0, vutils_1.pickWithout)(props, notOptionKeys);
-            (0, vutils_1.isEqual)(newComponentOption, componentOption.current) || (componentOption.current = newComponentOption, 
-            updateToContext(context, id.current, optionName, isSingle, newComponentOption));
         }
         return (0, react_1.useEffect)((() => () => {
-            supportedEvents && (0, eventsUtils_1.bindEventsToTable)(context.table, null, eventsBinded.current, supportedEvents), 
-            deleteToContext(context, id.current, optionName, isSingle);
+            supportedEvents && (0, eventsUtils_1.bindEventsToTable)(context.table, null, eventsBinded.current, supportedEvents);
         }), []), null;
     };
-    return Comp.displayName = componentName, Comp;
+    return Comp.displayName = componentName, Comp.parseOption = props => ({
+        option: (0, vutils_1.pickWithout)(props, notOptionKeys),
+        optionName: optionName,
+        isSingle: isSingle
+    }), Comp;
 };
 
 exports.createComponent = createComponent;
-
-const updateToContext = (context, id, optionName, isSingle, props) => {
-    if (context.optionFromChildren) {
-        if (isSingle) context.optionFromChildren[optionName] = Object.assign({}, props); else {
-            context.optionFromChildren[optionName] || (context.optionFromChildren[optionName] = []);
-            const comps = context.optionFromChildren[optionName], index = comps.findIndex((entry => entry.id === id));
-            index >= 0 ? comps[index] = Object.assign({
-                id: id
-            }, props) : context.optionFromChildren[optionName].push(Object.assign({
-                id: id
-            }, props));
-        }
-        context.isChildrenUpdated = !0;
-    }
-}, deleteToContext = (context, id, optionName, isSingle) => {
-    var _a;
-    if (context.optionFromChildren) if (isSingle) context.optionFromChildren[optionName] = null; else {
-        const comps = null !== (_a = context.optionFromChildren[optionName]) && void 0 !== _a ? _a : [], index = comps.findIndex((entry => entry.id === id));
-        if (index >= 0) {
-            const newComps = comps.slice(0, index - 1).concat(comps.slice(index + 1));
-            context.optionFromChildren[optionName] = newComps, context.isChildrenUpdated = !0;
-        }
-    }
-};
 //# sourceMappingURL=base-component.js.map

package/cjs/components/base-component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/base-component.tsx"],"names":[],"mappings":"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","file":"base-component.js","sourcesContent":["import React, { useContext, useEffect } from 'react';\nimport { isEqual, isNil, pickWithout } from '@visactor/vutils';\n\nimport type { TableContextType } from '../context/table';\nimport RootTableContext from '../context/table';\nimport { bindEventsToTable } from '../eventsUtils';\nimport { uid } from '../util';\n\nexport interface BaseComponentProps {\n  id?: string | number;\n}\n\ntype ComponentProps = BaseComponentProps & { updateId?: number };\n\nexport const createComponent = <T extends ComponentProps>(\n  componentName: string,\n  optionName: string,\n  supportedEvents?: Record<string, string> | null,\n  isSingle?: boolean\n) => {\n  const ignoreKeys = ['id', 'updateId'];\n  const notOptionKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys;\n\n  const Comp: React.FC<T> = (props: T) => {\n    const context = useContext(RootTableContext);\n    const id = React.useRef<string | number>(isNil(props.id) ? uid(optionName) : props.id);\n\n    const eventsBinded = React.useRef<T>(null);\n    const updateId = React.useRef<number>(props.updateId);\n    const componentOption = React.useRef<Partial<T>>();\n\n    if (props.updateId !== updateId.current) {\n      // update triggered by table when table is rendered\n      updateId.current = props.updateId;\n\n      // rebind events after table render\n      const hasPrevEventsBinded = supportedEvents\n        ? bindEventsToTable(context.table, props, eventsBinded.current, supportedEvents)\n        : false;\n      if (hasPrevEventsBinded) {\n        eventsBinded.current = props;\n      }\n    } else {\n      const newComponentOption: Partial<T> = pickWithout<T>(props, notOptionKeys);\n\n      if (!isEqual(newComponentOption, componentOption.current)) {\n        componentOption.current = newComponentOption;\n        updateToContext(context, id.current, optionName, isSingle, newComponentOption);\n      }\n    }\n\n    useEffect(() => {\n      return () => {\n        if (supportedEvents) {\n          bindEventsToTable(context.table, null, eventsBinded.current, supportedEvents);\n        }\n        deleteToContext(context, id.current, optionName, isSingle);\n      };\n    }, []);\n\n    return null;\n  };\n\n  Comp.displayName = componentName;\n  return Comp;\n};\n\nconst updateToContext = (\n  context: TableContextType,\n  id: string | number,\n  optionName: string,\n  isSingle: boolean,\n  props: Partial<ComponentProps>\n) => {\n  if (!context.optionFromChildren) {\n    return;\n  }\n\n  if (isSingle) {\n    context.optionFromChildren[optionName] = { ...props };\n  } else {\n    if (!context.optionFromChildren[optionName]) {\n      context.optionFromChildren[optionName] = [];\n    }\n\n    const comps = context.optionFromChildren[optionName];\n    const index = comps.findIndex((entry: any) => entry.id === id);\n\n    if (index >= 0) {\n      comps[index] = {\n        id,\n        ...props\n      };\n    } else {\n      context.optionFromChildren[optionName].push({\n        id,\n        ...props\n      });\n    }\n  }\n  context.isChildrenUpdated = true;\n};\n\nconst deleteToContext = (context: TableContextType, id: string | number, optionName: string, isSingle: boolean) => {\n  if (!context.optionFromChildren) {\n    return;\n  }\n\n  if (isSingle) {\n    context.optionFromChildren[optionName] = null;\n  } else {\n    const comps = context.optionFromChildren[optionName] ?? [];\n    const index = comps.findIndex((entry: any) => entry.id === id);\n\n    if (index >= 0) {\n      const newComps = comps.slice(0, index - 1).concat(comps.slice(index + 1));\n\n      context.optionFromChildren[optionName] = newComps;\n      context.isChildrenUpdated = true;\n    }\n  }\n};\n"]}
+{"version":3,"sources":["components/base-component.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AACrD,6CAA+D;AAG/D,6DAAgD;AAChD,gDAAmD;AAS5C,MAAM,eAAe,GAAG,CAC7B,aAAqB,EACrB,UAAkB,EAClB,eAA+C,EAC/C,QAAkB,EAClB,EAAE;IACF,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;IACrD,MAAM,aAAa,GAAG,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;IAErG,MAAM,IAAI,GAAgB,CAAC,KAAQ,EAAE,EAAE;QACrC,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,eAAgB,CAAC,CAAC;QAG7C,MAAM,YAAY,GAAG,eAAK,CAAC,MAAM,CAAI,IAAI,CAAC,CAAC;QAC3C,MAAM,QAAQ,GAAG,eAAK,CAAC,MAAM,CAAS,KAAK,CAAC,QAAQ,CAAC,CAAC;QAGtD,IAAI,KAAK,CAAC,QAAQ,KAAK,QAAQ,CAAC,OAAO,EAAE;YAEvC,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC;YAGlC,MAAM,mBAAmB,GAAG,eAAe;gBACzC,CAAC,CAAC,IAAA,+BAAiB,EAAC,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,OAAO,EAAE,eAAe,CAAC;gBAChF,CAAC,CAAC,KAAK,CAAC;YACV,IAAI,mBAAmB,EAAE;gBACvB,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;aAC9B;SAQF;QAED,IAAA,iBAAS,EAAC,GAAG,EAAE;YACb,OAAO,GAAG,EAAE;gBACV,IAAI,eAAe,EAAE;oBACnB,IAAA,+BAAiB,EAAC,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,YAAY,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;iBAC/E;YAEH,CAAC,CAAC;QACJ,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC;IAEhC,IAAY,CAAC,WAAW,GAAG,CAAC,KAAsD,EAAE,EAAE;QACrF,MAAM,kBAAkB,GAAe,IAAA,oBAAW,EAAI,KAAK,EAAE,aAAa,CAAC,CAAC;QAE5E,OAAO;YACL,MAAM,EAAE,kBAAkB;YAC1B,UAAU;YACV,QAAQ;SACT,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AA9DW,QAAA,eAAe,mBA8D1B","file":"base-component.js","sourcesContent":["import React, { useContext, useEffect } from 'react';\nimport { isEqual, isNil, pickWithout } from '@visactor/vutils';\n\nimport type { TableContextType } from '../context/table';\nimport RootTableContext from '../context/table';\nimport { bindEventsToTable } from '../eventsUtils';\nimport { uid } from '../util';\n\nexport interface BaseComponentProps {\n  id?: string | number;\n}\n\ntype ComponentProps = BaseComponentProps & { updateId?: number; componentId?: number };\n\nexport const createComponent = <T extends ComponentProps>(\n  componentName: string,\n  optionName: string,\n  supportedEvents?: Record<string, string> | null,\n  isSingle?: boolean\n) => {\n  const ignoreKeys = ['id', 'updateId', 'componentId'];\n  const notOptionKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys;\n\n  const Comp: React.FC<T> = (props: T) => {\n    const context = useContext(RootTableContext);\n    // const id = React.useRef<string | number>(isNil(props.id) ? uid(optionName) : props.id);\n\n    const eventsBinded = React.useRef<T>(null);\n    const updateId = React.useRef<number>(props.updateId);\n    // const componentOption = React.useRef<Partial<T>>();\n\n    if (props.updateId !== updateId.current) {\n      // update triggered by table when table is rendered\n      updateId.current = props.updateId;\n\n      // rebind events after table render\n      const hasPrevEventsBinded = supportedEvents\n        ? bindEventsToTable(context.table, props, eventsBinded.current, supportedEvents)\n        : false;\n      if (hasPrevEventsBinded) {\n        eventsBinded.current = props;\n      }\n      // } else {\n      //   const newComponentOption: Partial<T> = pickWithout<T>(props, notOptionKeys);\n\n      //   if (!isEqual(newComponentOption, componentOption.current)) {\n      //     componentOption.current = newComponentOption;\n      //     updateToContext(context, id.current, optionName, isSingle, newComponentOption);\n      //   }\n    }\n\n    useEffect(() => {\n      return () => {\n        if (supportedEvents) {\n          bindEventsToTable(context.table, null, eventsBinded.current, supportedEvents);\n        }\n        // deleteToContext(context, id.current, optionName, isSingle);\n      };\n    }, []);\n\n    return null;\n  };\n\n  Comp.displayName = componentName;\n\n  (Comp as any).parseOption = (props: T & { updateId?: number; componentId?: string }) => {\n    const newComponentOption: Partial<T> = pickWithout<T>(props, notOptionKeys);\n\n    return {\n      option: newComponentOption,\n      optionName,\n      isSingle\n    };\n  };\n\n  return Comp;\n};\n\n// const updateToContext = (\n//   context: TableContextType,\n//   id: string | number,\n//   optionName: string,\n//   isSingle: boolean,\n//   props: Partial<ComponentProps>\n// ) => {\n//   if (!context.optionFromChildren) {\n//     return;\n//   }\n\n//   if (isSingle) {\n//     context.optionFromChildren[optionName] = { ...props };\n//   } else {\n//     if (!context.optionFromChildren[optionName]) {\n//       context.optionFromChildren[optionName] = [];\n//     }\n\n//     const comps = context.optionFromChildren[optionName];\n//     const index = comps.findIndex((entry: any) => entry.id === id);\n\n//     if (index >= 0) {\n//       comps[index] = {\n//         id,\n//         ...props\n//       };\n//     } else {\n//       context.optionFromChildren[optionName].push({\n//         id,\n//         ...props\n//       });\n//     }\n//   }\n//   context.isChildrenUpdated = true;\n// };\n\n// const deleteToContext = (context: TableContextType, id: string | number, optionName: string, isSingle: boolean) => {\n//   if (!context.optionFromChildren) {\n//     return;\n//   }\n\n//   if (isSingle) {\n//     context.optionFromChildren[optionName] = null;\n//   } else {\n//     const comps = context.optionFromChildren[optionName] ?? [];\n//     const index = comps.findIndex((entry: any) => entry.id === id);\n\n//     if (index >= 0) {\n//       const newComps = comps.slice(0, index - 1).concat(comps.slice(index + 1));\n\n//       context.optionFromChildren[optionName] = newComps;\n//       context.isChildrenUpdated = true;\n//     }\n//   }\n// };\n"]}

package/cjs/context/table.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import type { ListTable, PivotTable, PivotChart } from '@visactor/vtable';
 export interface TableContextType {
     table?: ListTable | PivotTable | PivotChart;
-    optionFromChildren: any;
     isChildrenUpdated?: boolean;
 }
 declare const TableContext: React.Context<TableContextType>;

package/cjs/context/table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["context/table.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAS1B,MAAM,YAAY,GAAG,eAAK,CAAC,aAAa,CAAmB,IAAI,CAAC,CAAC;AACjE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,SAAgB,iBAAiB,CAAI,SAAiC;IACpE,MAAM,GAAG,GAAG,eAAK,CAAC,UAAU,CAAS,CAAC,KAAQ,EAAE,GAAG,EAAE,EAAE;QACrD,OAAO,CACL,8BAAC,YAAY,CAAC,QAAQ,QACnB,CAAC,GAAqB,EAAE,EAAE,CAAC,8BAAC,SAAS,kBAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,IAAM,KAAK,EAAI,CAC1D,CACzB,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC;IACjC,OAAO,GAAG,CAAC;AACb,CAAC;AAVD,8CAUC;AAED,kBAAe,YAAY,CAAC","file":"table.js","sourcesContent":["import React from 'react';\nimport type { ListTable, PivotTable, PivotChart } from '@visactor/vtable';\n\nexport interface TableContextType {\n  table?: ListTable | PivotTable | PivotChart;\n  optionFromChildren: any;\n  isChildrenUpdated?: boolean;\n}\n\nconst TableContext = React.createContext<TableContextType>(null);\nTableContext.displayName = 'TableContext';\n\nexport function withTableInstance<T>(Component: typeof React.Component) {\n  const Com = React.forwardRef<any, T>((props: T, ref) => {\n    return (\n      <TableContext.Consumer>\n        {(ctx: TableContextType) => <Component ref={ref} table={ctx.table} {...props} />}\n      </TableContext.Consumer>\n    );\n  });\n  Com.displayName = Component.name;\n  return Com;\n}\n\nexport default TableContext;\n"]}
+{"version":3,"sources":["context/table.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAS1B,MAAM,YAAY,GAAG,eAAK,CAAC,aAAa,CAAmB,IAAI,CAAC,CAAC;AACjE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,SAAgB,iBAAiB,CAAI,SAAiC;IACpE,MAAM,GAAG,GAAG,eAAK,CAAC,UAAU,CAAS,CAAC,KAAQ,EAAE,GAAG,EAAE,EAAE;QACrD,OAAO,CACL,8BAAC,YAAY,CAAC,QAAQ,QACnB,CAAC,GAAqB,EAAE,EAAE,CAAC,8BAAC,SAAS,kBAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,IAAM,KAAK,EAAI,CAC1D,CACzB,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC;IACjC,OAAO,GAAG,CAAC;AACb,CAAC;AAVD,8CAUC;AAED,kBAAe,YAAY,CAAC","file":"table.js","sourcesContent":["import React from 'react';\nimport type { ListTable, PivotTable, PivotChart } from '@visactor/vtable';\n\nexport interface TableContextType {\n  table?: ListTable | PivotTable | PivotChart;\n  // optionFromChildren: any;\n  isChildrenUpdated?: boolean;\n}\n\nconst TableContext = React.createContext<TableContextType>(null);\nTableContext.displayName = 'TableContext';\n\nexport function withTableInstance<T>(Component: typeof React.Component) {\n  const Com = React.forwardRef<any, T>((props: T, ref) => {\n    return (\n      <TableContext.Consumer>\n        {(ctx: TableContextType) => <Component ref={ref} table={ctx.table} {...props} />}\n      </TableContext.Consumer>\n    );\n  });\n  Com.displayName = Component.name;\n  return Com;\n}\n\nexport default TableContext;\n"]}

package/cjs/tables/base-table.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ContainerProps } from '../containers/withContainer';
 import type { EventsProps } from '../eventsUtils';
 export type IVTable = VTable.ListTable | VTable.PivotTable | VTable.PivotChart;
+export type IOption = VTable.ListTableConstructorOptions | VTable.PivotTableConstructorOptions | VTable.PivotChartConstructorOptions;
 export interface BaseTableProps extends EventsProps {
     type?: string;
     container?: HTMLDivElement;

package/cjs/tables/base-table.js

@@ -33,19 +33,30 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.createTable = void 0;
 
-const VTable = __importStar(require("@visactor/vtable")), react_1 = __importStar(require("react")), withContainer_1 = __importDefault(require("../containers/withContainer")), table_1 = __importDefault(require("../context/table")), vutils_1 = require("@visactor/vutils"), util_1 = require("../util"), constants_1 = require("../constants"), eventsUtils_1 = require("../eventsUtils"), notOptionKeys = [ ...constants_1.REACT_PRIVATE_PROPS, ...eventsUtils_1.TABLE_EVENTS_KEYS, "skipFunctionDiff", "onError", "onReady", "option", "records", "container" ], BaseTable = react_1.default.forwardRef(((props, ref) => {
-    const [updateId, setUpdateId] = (0, react_1.useState)(0), tableContext = (0, react_1.useRef)({
-        optionFromChildren: {}
-    });
-    (0, react_1.useImperativeHandle)(ref, (() => tableContext.current.table));
+const VTable = __importStar(require("@visactor/vtable")), react_1 = __importStar(require("react")), withContainer_1 = __importDefault(require("../containers/withContainer")), table_1 = __importDefault(require("../context/table")), vutils_1 = require("@visactor/vutils"), util_1 = require("../util"), constants_1 = require("../constants"), eventsUtils_1 = require("../eventsUtils"), notOptionKeys = [ ...constants_1.REACT_PRIVATE_PROPS, ...eventsUtils_1.TABLE_EVENTS_KEYS, "skipFunctionDiff", "onError", "onReady", "option", "records", "container" ], parseOptionFromChildren = props => {
+    const optionFromChildren = {};
+    return (0, util_1.toArray)(props.children).map((child => {
+        const parseOption = child && child.type && child.type.parseOption;
+        if (parseOption && child.props) {
+            const optionResult = parseOption(child.props);
+            optionResult.isSingle ? optionFromChildren[optionResult.optionName] = optionResult.option : (optionFromChildren[optionResult.optionName] || (optionFromChildren[optionResult.optionName] = []), 
+            optionFromChildren[optionResult.optionName].push(optionResult.option));
+        }
+    })), optionFromChildren;
+}, BaseTable = react_1.default.forwardRef(((props, ref) => {
+    const [updateId, setUpdateId] = (0, react_1.useState)(0), tableContext = (0, react_1.useRef)({});
+    (0, react_1.useImperativeHandle)(ref, (() => {
+        var _a;
+        return null === (_a = tableContext.current) || void 0 === _a ? void 0 : _a.table;
+    }));
     const hasOption = !!props.option, hasRecords = !!props.records, isUnmount = (0, 
-    react_1.useRef)(!1), prevOption = (0, react_1.useRef)((0, vutils_1.pickWithout)(props, notOptionKeys)), prevRecords = (0, 
-    react_1.useRef)(props.records), eventsBinded = react_1.default.useRef(null), skipFunctionDiff = !!props.skipFunctionDiff, parseOption = (0, 
+    react_1.useRef)(!1), prevOption = (0, react_1.useRef)((0, vutils_1.pickWithout)(props, notOptionKeys)), optionFromChildren = (0, 
+    react_1.useRef)(null), prevRecords = (0, react_1.useRef)(props.records), eventsBinded = react_1.default.useRef(null), skipFunctionDiff = !!props.skipFunctionDiff, parseOption = (0, 
     react_1.useCallback)((props => hasOption && props.option ? hasRecords && props.records ? Object.assign(Object.assign({}, props.option), {
         records: props.records
     }) : props.option : Object.assign(Object.assign({
         records: props.records
-    }, prevOption.current), tableContext.current.optionFromChildren)), [ hasOption, hasRecords ]), createTable = (0, 
+    }, prevOption.current), optionFromChildren.current)), [ hasOption, hasRecords ]), createTable = (0, 
     react_1.useCallback)((props => {
         let vtable;
         vtable = "pivot-table" === props.type ? new VTable.PivotTable(props.container, parseOption(props)) : "pivot-chart" === props.type ? new VTable.PivotChart(props.container, parseOption(props)) : new VTable.ListTable(props.container, parseOption(props)), 
@@ -53,68 +64,50 @@ const VTable = __importStar(require("@visactor/vtable")), react_1 = __importStar
             table: vtable
         });
     }), [ parseOption ]), handleTableRender = (0, react_1.useCallback)((() => {
-        (0, eventsUtils_1.bindEventsToTable)(tableContext.current.table, props, eventsBinded.current, eventsUtils_1.TABLE_EVENTS), 
-        isUnmount.current || (setUpdateId(updateId + 1), props.onReady && props.onReady(tableContext.current.table, 0 === updateId));
-    }), [ updateId, setUpdateId, props ]), renderTable = (0, react_1.useCallback)((() => {
-        if (tableContext.current.table) {
-            const renderPromise = tableContext.current.table.renderAsync().then(handleTableRender);
-            props.onError && renderPromise.catch(props.onError);
+        if (!isUnmount.current) {
+            if (!tableContext.current || !tableContext.current.table) return;
+            (0, eventsUtils_1.bindEventsToTable)(tableContext.current.table, props, eventsBinded.current, eventsUtils_1.TABLE_EVENTS), 
+            setUpdateId(updateId + 1), props.onReady && props.onReady(tableContext.current.table, 0 === updateId);
         }
-    }), [ handleTableRender, props ]);
+    }), [ updateId, setUpdateId, props ]), renderTable = (0, react_1.useCallback)((() => {
+        tableContext.current.table && (tableContext.current.table.render(), handleTableRender());
+    }), [ handleTableRender ]);
     return (0, react_1.useEffect)((() => {
         var _a;
-        if (!(null === (_a = tableContext.current) || void 0 === _a ? void 0 : _a.table)) return createTable(props), 
-        renderTable(), (0, eventsUtils_1.bindEventsToTable)(tableContext.current.table, props, null, eventsUtils_1.TABLE_EVENTS), 
-        tableContext.current = Object.assign(Object.assign({}, tableContext.current), {
-            isChildrenUpdated: !1
-        }), void (eventsBinded.current = props);
-        if (hasOption) {
-            if ((0, vutils_1.isEqual)(eventsBinded.current.option, props.option, {
-                skipFunction: skipFunctionDiff
-            })) {
-                if (hasRecords && !(0, vutils_1.isEqual)(eventsBinded.current.records, props.records, {
-                    skipFunction: skipFunctionDiff
-                })) {
-                    eventsBinded.current = props, tableContext.current.table.setRecords(props.records);
-                    const updatePromise = tableContext.current.table.renderAsync().then(handleTableRender);
-                    props.onError && updatePromise.catch(props.onError);
-                }
-            } else {
-                eventsBinded.current = props, tableContext.current.table.updateOption(parseOption(props));
-                const updatePromise = tableContext.current.table.renderAsync().then(handleTableRender);
-                props.onError && updatePromise.catch(props.onError);
-            }
-            return;
-        }
+        const newOptionFromChildren = hasOption ? null : parseOptionFromChildren(props);
+        if (!(null === (_a = tableContext.current) || void 0 === _a ? void 0 : _a.table)) return hasOption || (optionFromChildren.current = newOptionFromChildren), 
+        createTable(props), renderTable(), (0, eventsUtils_1.bindEventsToTable)(tableContext.current.table, props, null, eventsUtils_1.TABLE_EVENTS), 
+        void (eventsBinded.current = props);
+        if (hasOption) return void ((0, vutils_1.isEqual)(eventsBinded.current.option, props.option, {
+            skipFunction: skipFunctionDiff
+        }) ? hasRecords && !(0, vutils_1.isEqual)(eventsBinded.current.records, props.records, {
+            skipFunction: skipFunctionDiff
+        }) && (eventsBinded.current = props, tableContext.current.table.setRecords(props.records), 
+        handleTableRender()) : (eventsBinded.current = props, tableContext.current.table.updateOption(parseOption(props)), 
+        handleTableRender()));
         const newOption = (0, vutils_1.pickWithout)(props, notOptionKeys);
-        if (!(0, vutils_1.isEqual)(newOption, prevOption.current, {
+        (0, vutils_1.isEqual)(newOption, prevOption.current, {
             skipFunction: skipFunctionDiff
-        }) || tableContext.current.isChildrenUpdated) {
-            prevOption.current = newOption, tableContext.current.table.updateOption(parseOption(props));
-            const updatePromise = tableContext.current.table.renderAsync().then(handleTableRender);
-            props.onError && updatePromise.catch(props.onError);
-        } else if (hasRecords && !(0, vutils_1.isEqual)(props.records, prevRecords.current, {
+        }) && (0, vutils_1.isEqual)(newOptionFromChildren, optionFromChildren.current) ? hasRecords && !(0, 
+        vutils_1.isEqual)(props.records, prevRecords.current, {
             skipFunction: skipFunctionDiff
-        })) {
-            prevRecords.current = props.records, tableContext.current.table.setRecords(props.records);
-            const updatePromise = tableContext.current.table.renderAsync().then(handleTableRender);
-            props.onError && updatePromise.catch(props.onError);
-        }
-        tableContext.current = Object.assign(Object.assign({}, tableContext.current), {
-            isChildrenUpdated: !1
-        });
+        }) && (prevRecords.current = props.records, tableContext.current.table.setRecords(props.records), 
+        handleTableRender()) : (prevOption.current = newOption, optionFromChildren.current = newOptionFromChildren, 
+        tableContext.current.table.updateOption(parseOption(props)), handleTableRender());
     }), [ createTable, hasOption, hasRecords, parseOption, handleTableRender, renderTable, skipFunctionDiff, props ]), 
     (0, react_1.useEffect)((() => () => {
-        tableContext && (tableContext.current.table && tableContext.current.table.release(), 
+        tableContext && tableContext.current && tableContext.current.table && (tableContext.current.table.release(), 
         tableContext.current = null), isUnmount.current = !0;
     }), []), react_1.default.createElement(table_1.default.Provider, {
         value: tableContext.current
     }, (0, util_1.toArray)(props.children).map(((child, index) => {
-        var _a, _b, _c;
+        if ("string" == typeof child) return;
+        const childId = `${child && child.type && (child.type.displayName || child.type.name)}-${index}`;
         return react_1.default.createElement(react_1.default.Fragment, {
-            key: null !== (_c = null !== (_b = null === (_a = null == child ? void 0 : child.props) || void 0 === _a ? void 0 : _a.id) && void 0 !== _b ? _b : null == child ? void 0 : child.id) && void 0 !== _c ? _c : `child-${index}`
+            key: childId
         }, react_1.default.cloneElement(child, {
-            updateId: updateId
+            updateId: updateId,
+            componentId: childId
         }));
     })));
 })), createTable = (componentName, type, callback) => {

package/cjs/tables/base-table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["tables/base-table.tsx"],"names":[],"mappings":"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","file":"base-table.js","sourcesContent":["/* eslint-disable react/display-name */\nimport * as VTable from '@visactor/vtable';\nimport React, { useState, useEffect, useRef, useImperativeHandle, useCallback } from 'react';\nimport type { ContainerProps } from '../containers/withContainer';\nimport withContainer from '../containers/withContainer';\nimport type { TableContextType } from '../context/table';\nimport RootTableContext from '../context/table';\nimport { isEqual, pickWithout } from '@visactor/vutils';\nimport { toArray } from '../util';\nimport { REACT_PRIVATE_PROPS } from '../constants';\nimport type { IMarkElement } from '../components';\nimport type {\n  EventsProps\n  // LegendEventProps,\n  // ScrollBarEventProps,\n  // BrushEventProps,\n  // DataZoomEventProps,\n  // PlayerEventProps,\n  // DimensionEventProps,\n  // HierarchyEventProps,\n  // TableLifeCycleEventProps\n} from '../eventsUtils';\nimport { bindEventsToTable, TABLE_EVENTS_KEYS, TABLE_EVENTS } from '../eventsUtils';\n\nexport type IVTable = VTable.ListTable | VTable.PivotTable | VTable.PivotChart;\n\nexport interface BaseTableProps extends EventsProps {\n  type?: string;\n  /** 上层container */\n  container?: HTMLDivElement;\n  /** option */\n  option?: any;\n  /** 数据 */\n  records?: any;\n  /** 画布宽度 */\n  width?: number;\n  /** 画布高度 */\n  height?: number;\n  skipFunctionDiff?: boolean;\n\n  /** 表格渲染完成事件 */\n  onReady?: (instance: IVTable, isInitial: boolean) => void;\n  /** throw error when chart run into an error */\n  onError?: (err: Error) => void;\n}\n\ntype Props = React.PropsWithChildren<BaseTableProps>;\n\nconst notOptionKeys = [\n  ...REACT_PRIVATE_PROPS,\n  ...TABLE_EVENTS_KEYS,\n  'skipFunctionDiff',\n  'onError',\n  'onReady',\n  'option',\n  'records',\n  'container'\n];\n\nconst BaseTable: React.FC<Props> = React.forwardRef((props, ref) => {\n  const [updateId, setUpdateId] = useState<number>(0);\n  const tableContext = useRef<TableContextType>({\n    optionFromChildren: {}\n  });\n  useImperativeHandle(ref, () => tableContext.current.table);\n  const hasOption = !!props.option;\n  const hasRecords = !!props.records;\n  const isUnmount = useRef<boolean>(false);\n  const prevOption = useRef(pickWithout(props, notOptionKeys));\n  const prevRecords = useRef(props.records);\n  const eventsBinded = React.useRef<BaseTableProps>(null);\n  const skipFunctionDiff = !!props.skipFunctionDiff;\n\n  const parseOption = useCallback(\n    (props: Props) => {\n      if (hasOption && props.option) {\n        if (hasRecords && props.records) {\n          return {\n            ...props.option,\n            records: props.records\n          };\n        }\n        return props.option;\n      }\n\n      return {\n        records: props.records,\n        ...prevOption.current,\n        ...tableContext.current.optionFromChildren\n      };\n    },\n    [hasOption, hasRecords]\n  );\n\n  const createTable = useCallback(\n    (props: Props) => {\n      let vtable;\n      if (props.type === 'pivot-table') {\n        vtable = new VTable.PivotTable(props.container, parseOption(props));\n      } else if (props.type === 'pivot-chart') {\n        vtable = new VTable.PivotChart(props.container, parseOption(props));\n      } else {\n        vtable = new VTable.ListTable(props.container, parseOption(props));\n      }\n      tableContext.current = { ...tableContext.current, table: vtable };\n    },\n    [parseOption]\n  );\n\n  const handleTableRender = useCallback(() => {\n    // rebind events after render\n    bindEventsToTable(tableContext.current.table, props, eventsBinded.current, TABLE_EVENTS);\n\n    if (!isUnmount.current) {\n      // to be fixed\n      // will cause another useEffect\n      setUpdateId(updateId + 1);\n      if (props.onReady) {\n        props.onReady(tableContext.current.table, updateId === 0);\n      }\n    }\n  }, [updateId, setUpdateId, props]);\n\n  const renderTable = useCallback(() => {\n    if (tableContext.current.table) {\n      // eslint-disable-next-line promise/catch-or-return\n      const renderPromise = tableContext.current.table.renderAsync().then(handleTableRender);\n\n      if (props.onError) {\n        renderPromise.catch(props.onError);\n      }\n    }\n  }, [handleTableRender, props]);\n\n  useEffect(() => {\n    if (!tableContext.current?.table) {\n      createTable(props);\n      renderTable();\n      bindEventsToTable(tableContext.current.table, props, null, TABLE_EVENTS);\n      tableContext.current = {\n        ...tableContext.current,\n        isChildrenUpdated: false\n      };\n      eventsBinded.current = props;\n      return;\n    }\n\n    if (hasOption) {\n      if (!isEqual(eventsBinded.current.option, props.option, { skipFunction: skipFunctionDiff })) {\n        eventsBinded.current = props;\n        // eslint-disable-next-line promise/catch-or-return\n        tableContext.current.table.updateOption(parseOption(props));\n        const updatePromise = tableContext.current.table.renderAsync().then(handleTableRender);\n\n        if (props.onError) {\n          updatePromise.catch(props.onError);\n        }\n      } else if (\n        hasRecords &&\n        !isEqual(eventsBinded.current.records, props.records, { skipFunction: skipFunctionDiff })\n      ) {\n        eventsBinded.current = props;\n        tableContext.current.table.setRecords(props.records);\n        const updatePromise = tableContext.current.table.renderAsync().then(handleTableRender);\n\n        if (props.onError) {\n          updatePromise.catch(props.onError);\n        }\n      }\n      return;\n    }\n\n    const newOption = pickWithout(props, notOptionKeys);\n\n    if (\n      !isEqual(newOption, prevOption.current, { skipFunction: skipFunctionDiff }) ||\n      tableContext.current.isChildrenUpdated\n    ) {\n      prevOption.current = newOption;\n      // eslint-disable-next-line promise/catch-or-return\n      tableContext.current.table.updateOption(parseOption(props));\n      const updatePromise = tableContext.current.table.renderAsync().then(handleTableRender);\n\n      if (props.onError) {\n        updatePromise.catch(props.onError);\n      }\n    } else if (hasRecords && !isEqual(props.records, prevRecords.current, { skipFunction: skipFunctionDiff })) {\n      prevRecords.current = props.records;\n      tableContext.current.table.setRecords(props.records);\n      const updatePromise = tableContext.current.table.renderAsync().then(handleTableRender);\n\n      if (props.onError) {\n        updatePromise.catch(props.onError);\n      }\n    }\n    tableContext.current = {\n      ...tableContext.current,\n      isChildrenUpdated: false\n    };\n  }, [createTable, hasOption, hasRecords, parseOption, handleTableRender, renderTable, skipFunctionDiff, props]);\n\n  useEffect(() => {\n    return () => {\n      if (tableContext) {\n        if (tableContext.current.table) {\n          tableContext.current.table.release();\n        }\n        tableContext.current = null;\n      }\n      isUnmount.current = true;\n    };\n  }, []);\n\n  return (\n    <RootTableContext.Provider value={tableContext.current}>\n      {toArray(props.children).map((child: React.ReactNode, index: number) => {\n        return (\n          <React.Fragment key={(child as any)?.props?.id ?? (child as any)?.id ?? `child-${index}`}>\n            {React.cloneElement(child as IMarkElement, {\n              updateId: updateId\n            })}\n          </React.Fragment>\n        );\n      })}\n    </RootTableContext.Provider>\n  );\n});\n\nexport const createTable = <T extends Props>(componentName: string, type?: string, callback?: (props: T) => T) => {\n  const Com = withContainer<ContainerProps, T>(BaseTable as any, componentName, (props: T) => {\n    props.type = type;\n\n    if (callback) {\n      return callback(props);\n    }\n\n    if (type) {\n      return { ...props, type };\n    }\n    return props;\n  });\n  Com.displayName = componentName;\n  return Com;\n};\n"]}
+{"version":3,"sources":["tables/base-table.tsx"],"names":[],"mappings":"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","file":"base-table.js","sourcesContent":["/* eslint-disable react/display-name */\nimport * as VTable from '@visactor/vtable';\nimport React, { useState, useEffect, useRef, useImperativeHandle, useCallback } from 'react';\nimport type { ContainerProps } from '../containers/withContainer';\nimport withContainer from '../containers/withContainer';\nimport type { TableContextType } from '../context/table';\nimport RootTableContext from '../context/table';\nimport { isEqual, pickWithout } from '@visactor/vutils';\nimport { toArray } from '../util';\nimport { REACT_PRIVATE_PROPS } from '../constants';\nimport type { IMarkElement } from '../components';\nimport type {\n  EventsProps\n  // LegendEventProps,\n  // ScrollBarEventProps,\n  // BrushEventProps,\n  // DataZoomEventProps,\n  // PlayerEventProps,\n  // DimensionEventProps,\n  // HierarchyEventProps,\n  // TableLifeCycleEventProps\n} from '../eventsUtils';\nimport { bindEventsToTable, TABLE_EVENTS_KEYS, TABLE_EVENTS } from '../eventsUtils';\n\nexport type IVTable = VTable.ListTable | VTable.PivotTable | VTable.PivotChart;\nexport type IOption =\n  | VTable.ListTableConstructorOptions\n  | VTable.PivotTableConstructorOptions\n  | VTable.PivotChartConstructorOptions;\n\nexport interface BaseTableProps extends EventsProps {\n  type?: string;\n  /** 上层container */\n  container?: HTMLDivElement;\n  /** option */\n  option?: any;\n  /** 数据 */\n  records?: any;\n  /** 画布宽度 */\n  width?: number;\n  /** 画布高度 */\n  height?: number;\n  skipFunctionDiff?: boolean;\n\n  /** 表格渲染完成事件 */\n  onReady?: (instance: IVTable, isInitial: boolean) => void;\n  /** throw error when chart run into an error */\n  onError?: (err: Error) => void;\n}\n\ntype Props = React.PropsWithChildren<BaseTableProps>;\n\nconst notOptionKeys = [\n  ...REACT_PRIVATE_PROPS,\n  ...TABLE_EVENTS_KEYS,\n  'skipFunctionDiff',\n  'onError',\n  'onReady',\n  'option',\n  'records',\n  'container'\n];\n\nconst parseOptionFromChildren = (props: Props) => {\n  const optionFromChildren: Omit<IOption, 'type' | 'data' | 'width' | 'height'> = {};\n\n  toArray(props.children).map(child => {\n    const parseOption = child && (child as any).type && (child as any).type.parseOption;\n\n    if (parseOption && (child as any).props) {\n      const optionResult = parseOption((child as any).props);\n\n      if (optionResult.isSingle) {\n        optionFromChildren[optionResult.optionName] = optionResult.option;\n      } else {\n        if (!optionFromChildren[optionResult.optionName]) {\n          optionFromChildren[optionResult.optionName] = [];\n        }\n\n        optionFromChildren[optionResult.optionName].push(optionResult.option);\n      }\n    }\n  });\n\n  return optionFromChildren;\n};\n\nconst BaseTable: React.FC<Props> = React.forwardRef((props, ref) => {\n  const [updateId, setUpdateId] = useState<number>(0);\n  const tableContext = useRef<TableContextType>({\n    // optionFromChildren: {}\n  });\n  useImperativeHandle(ref, () => tableContext.current?.table);\n  const hasOption = !!props.option;\n  const hasRecords = !!props.records;\n  const isUnmount = useRef<boolean>(false);\n  const prevOption = useRef(pickWithout(props, notOptionKeys));\n  const optionFromChildren = useRef<Omit<IOption, 'records'>>(null);\n  const prevRecords = useRef(props.records);\n  const eventsBinded = React.useRef<BaseTableProps>(null);\n  const skipFunctionDiff = !!props.skipFunctionDiff;\n\n  const parseOption = useCallback(\n    (props: Props) => {\n      if (hasOption && props.option) {\n        if (hasRecords && props.records) {\n          return {\n            ...props.option,\n            records: props.records\n          };\n        }\n        return props.option;\n      }\n      return {\n        records: props.records,\n        ...prevOption.current,\n        ...optionFromChildren.current\n        // ...tableContext.current?.optionFromChildren\n      } as IOption;\n    },\n    [hasOption, hasRecords]\n  );\n\n  const createTable = useCallback(\n    (props: Props) => {\n      let vtable;\n      if (props.type === 'pivot-table') {\n        vtable = new VTable.PivotTable(props.container, parseOption(props));\n      } else if (props.type === 'pivot-chart') {\n        vtable = new VTable.PivotChart(props.container, parseOption(props));\n      } else {\n        vtable = new VTable.ListTable(props.container, parseOption(props));\n      }\n      tableContext.current = { ...tableContext.current, table: vtable };\n    },\n    [parseOption]\n  );\n\n  const handleTableRender = useCallback(() => {\n    if (!isUnmount.current) {\n      if (!tableContext.current || !tableContext.current.table) {\n        return;\n      }\n      // rebind events after render\n      bindEventsToTable(tableContext.current.table, props, eventsBinded.current, TABLE_EVENTS);\n\n      // to be fixed\n      // will cause another useEffect\n      setUpdateId(updateId + 1);\n      if (props.onReady) {\n        props.onReady(tableContext.current.table, updateId === 0);\n      }\n    }\n  }, [updateId, setUpdateId, props]);\n\n  const renderTable = useCallback(() => {\n    if (tableContext.current.table) {\n      // eslint-disable-next-line promise/catch-or-return\n      tableContext.current.table.render();\n      handleTableRender();\n    }\n  }, [handleTableRender]);\n\n  useEffect(() => {\n    const newOptionFromChildren = hasOption ? null : parseOptionFromChildren(props);\n\n    if (!tableContext.current?.table) {\n      if (!hasOption) {\n        optionFromChildren.current = newOptionFromChildren;\n      }\n\n      createTable(props);\n      renderTable();\n      bindEventsToTable(tableContext.current.table, props, null, TABLE_EVENTS);\n      // tableContext.current = {\n      //   ...tableContext.current,\n      //   isChildrenUpdated: false\n      // };\n      eventsBinded.current = props;\n      return;\n    }\n\n    if (hasOption) {\n      if (!isEqual(eventsBinded.current.option, props.option, { skipFunction: skipFunctionDiff })) {\n        eventsBinded.current = props;\n        // eslint-disable-next-line promise/catch-or-return\n        tableContext.current.table.updateOption(parseOption(props));\n        handleTableRender();\n      } else if (\n        hasRecords &&\n        !isEqual(eventsBinded.current.records, props.records, { skipFunction: skipFunctionDiff })\n      ) {\n        eventsBinded.current = props;\n        tableContext.current.table.setRecords(props.records);\n        handleTableRender();\n      }\n      return;\n    }\n\n    const newOption = pickWithout(props, notOptionKeys);\n\n    if (\n      !isEqual(newOption, prevOption.current, { skipFunction: skipFunctionDiff }) ||\n      // tableContext.current.isChildrenUpdated\n      !isEqual(newOptionFromChildren, optionFromChildren.current)\n    ) {\n      prevOption.current = newOption;\n      optionFromChildren.current = newOptionFromChildren;\n\n      // eslint-disable-next-line promise/catch-or-return\n      tableContext.current.table.updateOption(parseOption(props));\n      handleTableRender();\n    } else if (hasRecords && !isEqual(props.records, prevRecords.current, { skipFunction: skipFunctionDiff })) {\n      prevRecords.current = props.records;\n      tableContext.current.table.setRecords(props.records);\n      handleTableRender();\n    }\n    // tableContext.current = {\n    //   ...tableContext.current,\n    //   isChildrenUpdated: false\n    // };\n  }, [createTable, hasOption, hasRecords, parseOption, handleTableRender, renderTable, skipFunctionDiff, props]);\n\n  useEffect(() => {\n    return () => {\n      if (tableContext) {\n        if (tableContext.current && tableContext.current.table) {\n          tableContext.current.table.release();\n          tableContext.current = null;\n        }\n      }\n      isUnmount.current = true;\n    };\n  }, []);\n\n  return (\n    <RootTableContext.Provider value={tableContext.current}>\n      {toArray(props.children).map((child: React.ReactNode, index: number) => {\n        if (typeof child === 'string') {\n          return;\n        }\n\n        const componentName =\n          child && (child as any).type && ((child as any).type.displayName || (child as any).type.name);\n        const childId = `${componentName}-${index}`;\n\n        return (\n          // <React.Fragment key={(child as any)?.props?.id ?? (child as any)?.id ?? `child-${index}`}>\n          //   {React.cloneElement(child as IMarkElement, {\n          //     updateId: updateId\n          //   })}\n          // </React.Fragment>\n          <React.Fragment key={childId}>\n            {React.cloneElement(child as React.ReactElement<any, React.JSXElementConstructor<any>>, {\n              updateId: updateId,\n              componentId: childId\n            })}\n          </React.Fragment>\n        );\n      })}\n    </RootTableContext.Provider>\n  );\n});\n\nexport const createTable = <T extends Props>(componentName: string, type?: string, callback?: (props: T) => T) => {\n  const Com = withContainer<ContainerProps, T>(BaseTable as any, componentName, (props: T) => {\n    props.type = type;\n\n    if (callback) {\n      return callback(props);\n    }\n\n    if (type) {\n      return { ...props, type };\n    }\n    return props;\n  });\n  Com.displayName = componentName;\n  return Com;\n};\n"]}

package/dist/react-vtable.js

@@ -3242,13 +3242,6 @@
 	}
 	var reactIsExports = reactIs.exports;
 
-	let id = 0;
-	const uid = (prefix) => {
-	    if (prefix) {
-	        return `${prefix}-${id++}`;
-	    }
-	    return `${id++}`;
-	};
 	const toArray = (children) => {
 	    let result = [];
 	    React.Children.forEach(children, child => {
@@ -3356,16 +3349,34 @@
 	    'records',
 	    'container'
 	];
+	const parseOptionFromChildren = (props) => {
+	    const optionFromChildren = {};
+	    toArray(props.children).map(child => {
+	        const parseOption = child && child.type && child.type.parseOption;
+	        if (parseOption && child.props) {
+	            const optionResult = parseOption(child.props);
+	            if (optionResult.isSingle) {
+	                optionFromChildren[optionResult.optionName] = optionResult.option;
+	            }
+	            else {
+	                if (!optionFromChildren[optionResult.optionName]) {
+	                    optionFromChildren[optionResult.optionName] = [];
+	                }
+	                optionFromChildren[optionResult.optionName].push(optionResult.option);
+	            }
+	        }
+	    });
+	    return optionFromChildren;
+	};
 	const BaseTable = React.forwardRef((props, ref) => {
 	    const [updateId, setUpdateId] = reactExports.useState(0);
-	    const tableContext = reactExports.useRef({
-	        optionFromChildren: {}
-	    });
-	    reactExports.useImperativeHandle(ref, () => tableContext.current.table);
+	    const tableContext = reactExports.useRef({});
+	    reactExports.useImperativeHandle(ref, () => tableContext.current?.table);
 	    const hasOption = !!props.option;
 	    const hasRecords = !!props.records;
 	    const isUnmount = reactExports.useRef(false);
 	    const prevOption = reactExports.useRef(pickWithout(props, notOptionKeys));
+	    const optionFromChildren = reactExports.useRef(null);
 	    const prevRecords = reactExports.useRef(props.records);
 	    const eventsBinded = React.useRef(null);
 	    const skipFunctionDiff = !!props.skipFunctionDiff;
@@ -3382,7 +3393,7 @@
 	        return {
 	            records: props.records,
 	            ...prevOption.current,
-	            ...tableContext.current.optionFromChildren
+	            ...optionFromChildren.current
 	        };
 	    }, [hasOption, hasRecords]);
 	    const createTable = reactExports.useCallback((props) => {
@@ -3399,8 +3410,11 @@
 	        tableContext.current = { ...tableContext.current, table: vtable };
 	    }, [parseOption]);
 	    const handleTableRender = reactExports.useCallback(() => {
-	        bindEventsToTable(tableContext.current.table, props, eventsBinded.current, TABLE_EVENTS);
 	        if (!isUnmount.current) {
+	            if (!tableContext.current || !tableContext.current.table) {
+	                return;
+	            }
+	            bindEventsToTable(tableContext.current.table, props, eventsBinded.current, TABLE_EVENTS);
 	            setUpdateId(updateId + 1);
 	            if (props.onReady) {
 	                props.onReady(tableContext.current.table, updateId === 0);
@@ -3409,21 +3423,19 @@
 	    }, [updateId, setUpdateId, props]);
 	    const renderTable = reactExports.useCallback(() => {
 	        if (tableContext.current.table) {
-	            const renderPromise = tableContext.current.table.renderAsync().then(handleTableRender);
-	            if (props.onError) {
-	                renderPromise.catch(props.onError);
-	            }
+	            tableContext.current.table.render();
+	            handleTableRender();
 	        }
-	    }, [handleTableRender, props]);
+	    }, [handleTableRender]);
 	    reactExports.useEffect(() => {
+	        const newOptionFromChildren = hasOption ? null : parseOptionFromChildren(props);
 	        if (!tableContext.current?.table) {
+	            if (!hasOption) {
+	                optionFromChildren.current = newOptionFromChildren;
+	            }
 	            createTable(props);
 	            renderTable();
 	            bindEventsToTable(tableContext.current.table, props, null, TABLE_EVENTS);
-	            tableContext.current = {
-	                ...tableContext.current,
-	                isChildrenUpdated: false
-	            };
 	            eventsBinded.current = props;
 	            return;
 	        }
@@ -3431,59 +3443,50 @@
 	            if (!isEqual(eventsBinded.current.option, props.option, { skipFunction: skipFunctionDiff })) {
 	                eventsBinded.current = props;
 	                tableContext.current.table.updateOption(parseOption(props));
-	                const updatePromise = tableContext.current.table.renderAsync().then(handleTableRender);
-	                if (props.onError) {
-	                    updatePromise.catch(props.onError);
-	                }
+	                handleTableRender();
 	            }
 	            else if (hasRecords &&
 	                !isEqual(eventsBinded.current.records, props.records, { skipFunction: skipFunctionDiff })) {
 	                eventsBinded.current = props;
 	                tableContext.current.table.setRecords(props.records);
-	                const updatePromise = tableContext.current.table.renderAsync().then(handleTableRender);
-	                if (props.onError) {
-	                    updatePromise.catch(props.onError);
-	                }
+	                handleTableRender();
 	            }
 	            return;
 	        }
 	        const newOption = pickWithout(props, notOptionKeys);
 	        if (!isEqual(newOption, prevOption.current, { skipFunction: skipFunctionDiff }) ||
-	            tableContext.current.isChildrenUpdated) {
+	            !isEqual(newOptionFromChildren, optionFromChildren.current)) {
 	            prevOption.current = newOption;
+	            optionFromChildren.current = newOptionFromChildren;
 	            tableContext.current.table.updateOption(parseOption(props));
-	            const updatePromise = tableContext.current.table.renderAsync().then(handleTableRender);
-	            if (props.onError) {
-	                updatePromise.catch(props.onError);
-	            }
+	            handleTableRender();
 	        }
 	        else if (hasRecords && !isEqual(props.records, prevRecords.current, { skipFunction: skipFunctionDiff })) {
 	            prevRecords.current = props.records;
 	            tableContext.current.table.setRecords(props.records);
-	            const updatePromise = tableContext.current.table.renderAsync().then(handleTableRender);
-	            if (props.onError) {
-	                updatePromise.catch(props.onError);
-	            }
+	            handleTableRender();
 	        }
-	        tableContext.current = {
-	            ...tableContext.current,
-	            isChildrenUpdated: false
-	        };
 	    }, [createTable, hasOption, hasRecords, parseOption, handleTableRender, renderTable, skipFunctionDiff, props]);
 	    reactExports.useEffect(() => {
 	        return () => {
 	            if (tableContext) {
-	                if (tableContext.current.table) {
+	                if (tableContext.current && tableContext.current.table) {
 	                    tableContext.current.table.release();
+	                    tableContext.current = null;
 	                }
-	                tableContext.current = null;
 	            }
 	            isUnmount.current = true;
 	        };
 	    }, []);
 	    return (React.createElement(TableContext.Provider, { value: tableContext.current }, toArray(props.children).map((child, index) => {
-	        return (React.createElement(React.Fragment, { key: child?.props?.id ?? child?.id ?? `child-${index}` }, React.cloneElement(child, {
-	            updateId: updateId
+	        if (typeof child === 'string') {
+	            return;
+	        }
+	        const componentName = child && child.type && (child.type.displayName || child.type.name);
+	        const childId = `${componentName}-${index}`;
+	        return (React.createElement(React.Fragment, { key: childId }, React.cloneElement(child, {
+	            updateId: updateId,
+	            componentId: childId
 	        })));
 	    })));
 	});
@@ -3512,14 +3515,12 @@
 	}
 
 	const createComponent = (componentName, optionName, supportedEvents, isSingle) => {
-	    const ignoreKeys = ['id', 'updateId'];
+	    const ignoreKeys = ['id', 'updateId', 'componentId'];
 	    const notOptionKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys;
 	    const Comp = (props) => {
 	        const context = reactExports.useContext(TableContext);
-	        const id = React.useRef(isNil$1(props.id) ? uid(optionName) : props.id);
 	        const eventsBinded = React.useRef(null);
 	        const updateId = React.useRef(props.updateId);
-	        const componentOption = React.useRef();
 	        if (props.updateId !== updateId.current) {
 	            updateId.current = props.updateId;
 	            const hasPrevEventsBinded = supportedEvents
@@ -3529,71 +3530,26 @@
 	                eventsBinded.current = props;
 	            }
 	        }
-	        else {
-	            const newComponentOption = pickWithout(props, notOptionKeys);
-	            if (!isEqual(newComponentOption, componentOption.current)) {
-	                componentOption.current = newComponentOption;
-	                updateToContext(context, id.current, optionName, isSingle, newComponentOption);
-	            }
-	        }
 	        reactExports.useEffect(() => {
 	            return () => {
 	                if (supportedEvents) {
 	                    bindEventsToTable(context.table, null, eventsBinded.current, supportedEvents);
 	                }
-	                deleteToContext(context, id.current, optionName, isSingle);
 	            };
 	        }, []);
 	        return null;
 	    };
 	    Comp.displayName = componentName;
+	    Comp.parseOption = (props) => {
+	        const newComponentOption = pickWithout(props, notOptionKeys);
+	        return {
+	            option: newComponentOption,
+	            optionName,
+	            isSingle
+	        };
+	    };
 	    return Comp;
 	};
-	const updateToContext = (context, id, optionName, isSingle, props) => {
-	    if (!context.optionFromChildren) {
-	        return;
-	    }
-	    if (isSingle) {
-	        context.optionFromChildren[optionName] = { ...props };
-	    }
-	    else {
-	        if (!context.optionFromChildren[optionName]) {
-	            context.optionFromChildren[optionName] = [];
-	        }
-	        const comps = context.optionFromChildren[optionName];
-	        const index = comps.findIndex((entry) => entry.id === id);
-	        if (index >= 0) {
-	            comps[index] = {
-	                id,
-	                ...props
-	            };
-	        }
-	        else {
-	            context.optionFromChildren[optionName].push({
-	                id,
-	                ...props
-	            });
-	        }
-	    }
-	    context.isChildrenUpdated = true;
-	};
-	const deleteToContext = (context, id, optionName, isSingle) => {
-	    if (!context.optionFromChildren) {
-	        return;
-	    }
-	    if (isSingle) {
-	        context.optionFromChildren[optionName] = null;
-	    }
-	    else {
-	        const comps = context.optionFromChildren[optionName] ?? [];
-	        const index = comps.findIndex((entry) => entry.id === id);
-	        if (index >= 0) {
-	            const newComps = comps.slice(0, index - 1).concat(comps.slice(index + 1));
-	            context.optionFromChildren[optionName] = newComps;
-	            context.isChildrenUpdated = true;
-	        }
-	    }
-	};
 
 	const ListColumn = createComponent('ListColumn', 'columns');