plain-design 1.0.0-beta.145 → 1.0.0-beta.147

package/src/packages/components/Table/table/Table.tsx

@@ -1,382 +1,382 @@
-import {computed, designComponent, getComponentCls, nextTick, onMounted, reactive, toRaw, useClasses, useRefs, useStyles} from "@peryl/react-compose";
-import {iTableNode, TableEmitsOptions, TablePropsOptions, TableSizeVariables, TableSlotsOptions} from "./utils/table.utils";
-import {createTableHooks} from "./utils/createTableHooks";
-import {useTablePlc} from "../plc/useTablePlc";
-import {useTableNode} from "./node/useTableNode";
-import {VirtualTable} from "../../VirtualTable";
-import {unit} from "@peryl/utils/unit";
-import {PltHeadCell} from "./head/head-cell";
-import {removeUnit} from "@peryl/utils/removeUnit";
-import './table.scss';
-import {PlainObject} from "@peryl/utils/event";
-import {useFixedShadow} from "./use/useFixedShadow";
-import {useTableScroll} from "./use/useTableScroll";
-import {Validation} from "../../Form/validate/createValidation";
-import {useStyle} from "../../../uses/useStyle";
-import {PltRow} from "./body/row";
-import {useTableMethods} from "./use/useTableMethods";
-import {useTableFormEditor} from "./use/useTableFormEditor";
-import {useTableModifyEditor} from "./use/useTableModifyEditor";
-import {Empty} from "../../Empty";
-import {useTableLoading} from "./use/useTableLoading";
-import {useTableDraggier} from "./use/useTableDraggier";
-
-export const Table = designComponent({
-  name: '-table',
-  props: TablePropsOptions,
-  slots: TableSlotsOptions,
-  provideRefer: true,
-  emits: TableEmitsOptions,
-  setup({ props, slots, event }) {
-
-    const { styleComputed } = useStyle();
-
-    /**
-     * 引用
-     * @author  韦胜健
-     * @date    2022.11.6 15:50
-     */
-    const { refs, onRef } = useRefs({ el: HTMLDivElement, virtual: VirtualTable });
-
-    const onRefVirtual = (refer: any) => {
-      onRef.virtual(refer);
-      hooks.onRefVirtual.exec({ virtual: refer });
-    };
-
-    /**
-     * 获取滚动容器组件的引用
-     * @author  韦胜健
-     * @date    2022/11/7 19:24
-     */
-    const scrollRefer = useTableScroll({ refs });
-
-    /**
-     * 校验器
-     * @author  韦胜健
-     * @date    2022/11/7 20:07
-     */
-    const formValidator = Validation.useValidationParent(props);
-
-    /**
-     * 内部钩子
-     * @author  韦胜健
-     * @date    2022.11.6 15:50
-     */
-    const hooks = createTableHooks();
-
-    /**
-     * 控制加载状态
-     * @author  韦胜健
-     * @date    2023.1.25 23:26
-     */
-    const tableLoading = useTableLoading({ hooks, props });
-
-    /**
-     * 表格数据
-     * @author  韦胜健
-     * @date    2022/11/17 10:45
-     */
-    const dataRef = computed(() => hooks.onData.exec({ data: props.data }));
-
-    /**
-     * 列信息
-     * @author  韦胜健
-     * @date    2022.11.6 15:50
-     */
-    const { plcData, bodyPlcList, plcDataState } = useTablePlc({ props, hooks, slots, onCollectPlcData: event.emit.onCollectPlcData });
-
-    /**
-     * 数字属性
-     * @author  韦胜健
-     * @date    2022.11.6 16:00
-     */
-    const numberState = reactive({
-      headRowHeight: computed((): number => {
-        const height = props.headRowHeight || TableSizeVariables.headRowHeight[styleComputed.value.size];
-        return Number(removeUnit(height));
-      }),
-      bodyRowHeight: computed((): number => {
-        const height = props.bodyRowHeight || TableSizeVariables.bodyRowHeight[styleComputed.value.size];
-        return Number(removeUnit(height));
-      }),
-    });
-
-    /**
-     * 数据
-     * @author  韦胜健
-     * @date    2022.11.6 15:50
-     */
-    const { bodyNodes, summaryNodes } = useTableNode({ props, formValidator, dataRef });
-
-    const tableBodyNodes = computed(() => hooks.onTableMessyData.exec({ data: [...bodyNodes.value] }).data);
-
-    const showRows = computed((): number => {
-      const bodyRows = bodyNodes.value.length;
-      if (props.showRows === 'auto') {
-        return !bodyRows ? props.minShowRows : bodyRows;
-      } else {
-        return props.showRows;
-      }
-    });
-
-    /**
-     * 表格高度
-     * @author  韦胜健
-     * @date    2022.11.6 15:59
-     */
-    const tableHeight = computed(() => {
-      if (!plcData.value) {
-        return null;
-      }
-      const bodyRows = showRows.value;
-      const summaryRows = !!summaryNodes.value ? summaryNodes.value.length : 0;
-      const headRows = plcData.value.headPlcListArray.length;
-      return headRows * numberState.headRowHeight! + (bodyRows + summaryRows) * numberState.bodyRowHeight! + 12;
-    });
-
-    /**
-     * 固定列阴影
-     * @author  韦胜健
-     * @date    2022/11/10 20:55
-     */
-    const fixedShadow = useFixedShadow({ scrollRefer });
-
-    /**
-     * 样式
-     * @author  韦胜健
-     * @date    2022.11.6 15:50
-     */
-    const classes = useClasses(() => [
-      getComponentCls('table'),
-      `table-size-${styleComputed.value.size}`,
-      ...fixedShadow.fixedShadowClass.value,
-      {
-        'table-border': props.border,
-      },
-    ]);
-
-    /**
-     * 是否开启虚拟滚动
-     * @author  韦胜健
-     * @date    2022.11.7 1:19
-     */
-    const isEnableVirtual = computed(() => hooks.onEnableVirtual.exec(props.virtual));
-
-    /**
-     * 表头行样式
-     * @author  韦胜健
-     * @date    2022.11.7 1:23
-     */
-    const headRowStyles = useStyles((styles) => {
-      styles.height = unit(numberState.headRowHeight);
-      styles.lineHeight = unit(numberState.headRowHeight);
-    });
-
-    /**
-     * 当前高亮行
-     * @author  韦胜健
-     * @date    2022/11/7 14:41
-     */
-    const current = (() => {
-      const state = reactive({
-        data: null as null | PlainObject
-      });
-      const update = async (data: PlainObject | null) => {
-        await nextTick();
-        if (!data && !!dataRef.value.data?.length) {
-          data = dataRef.value.data[0];
-        }
-        state.data = data;
-        event.emit.onCurrentChange(data);
-      };
-      hooks.onClickRow.use(({ node }) => {update(node.data);});
-      const getNode = () => bodyNodes.value.find(i => toRaw(i.data) == toRaw(state.data));
-      const isCurrent = (node: iTableNode) => toRaw(node.data) == toRaw(state.data);
-      return { update, getNode, isCurrent };
-    })();
-
-    /**
-     * 暴露方法
-     * @author  韦胜健
-     * @date    2022.12.4 12:10
-     */
-    const methods = useTableMethods({ bodyNodes, getFlatPlcList: () => plcData.value?.flatPlcList, formValidator });
-
-    /**
-     * 表单编辑
-     * @author  韦胜健
-     * @date    2022/12/5 20:47
-     */
-    const formEditor = useTableFormEditor({ hooks, props, getFlatPlcList: () => plcData.value?.flatPlcList, methods });
-
-    /**
-     * 批量修改弹窗
-     * @author  韦胜健
-     * @date    2023.1.2 19:07
-     */
-    const modifyEditor = useTableModifyEditor({ props, hooks, getFlatPlcList: () => plcData.value?.flatPlcList, methods });
-
-    /**
-     * 拖拽列排序
-     * @author  韦胜健
-     * @date    2023/5/8 10:39
-     */
-    const tableDraggier = useTableDraggier({
-      props,
-      hooks,
-      bodyNodes,
-      numberState,
-      refs,
-      event,
-      getHeadPlcListArray: () => plcData.value?.headPlcListArray || [],
-      getBodyPlcListArray: () => bodyPlcList.value || [],
-      getPlcListArray: () => plcData.value?.plcList || [],
-    });
-
-    /*---------------------------------------内置hooks-------------------------------------------*/
-
-    hooks.onRender.use({
-      separate: false,
-      processor: ({ list, render }) => {!bodyNodes.value.length && list.push({ render, key: 'empty', seq: 4 });},
-      render: () => (
-        <div className="table-empty">
-          {slots.noData(<Empty noData/>)}
-        </div>
-      ),
-    });
-
-    hooks.onClickCell.use((val) => {
-      event.emit.onClickCell(val.node, val.e, val.plc);
-      hooks.onClickRow.exec({ e: val.e, node: val.node });
-    });
-
-    hooks.onDblclickCell.use((val) => {
-      event.emit.onDblclickCell(val.node, val.e, val.plc);
-      hooks.onDblclickRow.exec({ e: val.e, node: val.node });
-    });
-
-    hooks.onContextmenuCell.use((val) => {
-      event.emit.onContextmenuCell(val.node, val.e, val.plc);
-    });
-
-    hooks.onClickHeadCell.use(({ e, plc }) => {!plc.props.disableAutoEmitClickTitle && event.emit.onClickHead(plc, e);});
-
-    hooks.onClickRow.use(({ e, node }) => {event.emit.onClickRow(node, e);});
-
-    hooks.onDblclickRow.use(({ e, node }) => {event.emit.onDblclickRow(node, e);});
-
-    onMounted(() => {hooks.onTableMounted.exec(refs.el!);});
-
-    const refer = {
-      refs,
-      plcData,
-      numberState,
-      props,
-      event,
-      hooks,
-      bodyPlcList,
-      current,
-      formValidator,
-      styleComputed,
-      bodyNodes,
-      slots,
-      methods,
-      formEditor,
-      modifyEditor,
-      dataRef,
-      tableLoading,
-      tableDraggier,
-    };
-
-    event.emit.onSetup(refer);
-
-    const innerDebugger = (() => {
-      let count = 0;
-      let prevProps = { ...props };
-      const render = () => {
-        console.log('render', count++);
-        let hasChangeFlag = false;
-        let changeProps = Object.keys(prevProps).reduce((prev, key) => {
-          const val = {
-            new: (props as any)[key],
-            old: (prevProps as any)[key],
-          };
-          if (val.new !== val.old) {
-            prev[key] = val;
-            hasChangeFlag = true;
-          }
-          return prev;
-        }, {} as any);
-        console.log('change props', hasChangeFlag ? changeProps : null);
-        prevProps = { ...props };
-        return null;
-      };
-      return { render };
-    })();
-
-    return {
-      refer,
-      render: () => (
-        <div className={classes.value} ref={onRef.el}>
-          {hooks.onRender.exec()}
-          {
-            !!plcData.value &&
-            !!plcDataState.tableWidth &&
-            /*(() => {
-              innerDebugger.render();
-              return true;
-            })() &&*/
-            (
-              <VirtualTable
-                ref={onRefVirtual}
-                height={tableHeight.value || undefined}
-                data={tableBodyNodes.value}
-                headData={plcData.value?.headPlcListArray}
-                size={numberState.bodyRowHeight}
-                dynamicSize={props.dynamicSize}
-                headSize={numberState.headRowHeight}
-                width={plcData.value!.targetTableWidth!}
-                summaryData={summaryNodes.value}
-                disabled={!isEnableVirtual.value}
-                showRows={showRows.value}
-                onScroll={hooks.onScroll.exec}
-                onPageIndexChange={hooks.onVirtualPageIndexChange.exec}
-                v-slots={{
-                  headColgroup: () => (
-                    <colgroup>
-                      {plcData.value!.flatPlcList!.map((plc, index) => <col key={index} width={plc.props.width || ''}/>)}
-                    </colgroup>
-                  ),
-                  colgroup: () => (
-                    <colgroup>
-                      {(bodyPlcList.value?.map((plc, index) => <col key={index} width={plc.props.width || ''}/>))}
-                    </colgroup>
-                  ),
-                  head: () => (
-                    plcData.value!.headPlcListArray.map((headRows, index) => (
-                      <tr key={index} style={headRowStyles.value}>
-                        {headRows.map((plc) => (<PltHeadCell key={plc.plcKey} table={refer} tablePlc={plc} scroll={scrollRefer.getScroll}/>))}
-                      </tr>
-                    ))
-                  ),
-                  default: ({ item, vid, vIndex, index }) => (
-                    typeof item !== "function" ? (
-                      <PltRow table={refer} node={item} vid={vid} key={props.virtualRowType === 'virtualIndex' ? vIndex : index}/>
-                    ) : (
-                      item({ vid, vIndex, index })
-                    )
-                  ),
-                }}
-              />
-            )}
-        </div>
-      )
-    };
-  },
-});
-
-export function injectPlainTable() {return Table.use.inject();}
-
-export type iTableRefer = ReturnType<typeof injectPlainTable>
-
-export default Table;
+import {computed, designComponent, getComponentCls, nextTick, onMounted, reactive, toRaw, useClasses, useRefs, useStyles} from "@peryl/react-compose";
+import {iTableNode, TableEmitsOptions, TablePropsOptions, TableSizeVariables, TableSlotsOptions} from "./utils/table.utils";
+import {createTableHooks} from "./utils/createTableHooks";
+import {useTablePlc} from "../plc/useTablePlc";
+import {useTableNode} from "./node/useTableNode";
+import {VirtualTable} from "../../VirtualTable";
+import {unit} from "@peryl/utils/unit";
+import {PltHeadCell} from "./head/head-cell";
+import {removeUnit} from "@peryl/utils/removeUnit";
+import './table.scss';
+import {PlainObject} from "@peryl/utils/event";
+import {useFixedShadow} from "./use/useFixedShadow";
+import {useTableScroll} from "./use/useTableScroll";
+import {Validation} from "../../Form/validate/createValidation";
+import {useStyle} from "../../../uses/useStyle";
+import {PltRow} from "./body/row";
+import {useTableMethods} from "./use/useTableMethods";
+import {useTableFormEditor} from "./use/useTableFormEditor";
+import {useTableModifyEditor} from "./use/useTableModifyEditor";
+import {Empty} from "../../Empty";
+import {useTableLoading} from "./use/useTableLoading";
+import {useTableDraggier} from "./use/useTableDraggier";
+
+export const Table = designComponent({
+  name: '-table',
+  props: TablePropsOptions,
+  slots: TableSlotsOptions,
+  provideRefer: true,
+  emits: TableEmitsOptions,
+  setup({ props, slots, event }) {
+
+    const { styleComputed } = useStyle();
+
+    /**
+     * 引用
+     * @author  韦胜健
+     * @date    2022.11.6 15:50
+     */
+    const { refs, onRef } = useRefs({ el: HTMLDivElement, virtual: VirtualTable });
+
+    const onRefVirtual = (refer: any) => {
+      onRef.virtual(refer);
+      hooks.onRefVirtual.exec({ virtual: refer });
+    };
+
+    /**
+     * 获取滚动容器组件的引用
+     * @author  韦胜健
+     * @date    2022/11/7 19:24
+     */
+    const scrollRefer = useTableScroll({ refs });
+
+    /**
+     * 校验器
+     * @author  韦胜健
+     * @date    2022/11/7 20:07
+     */
+    const formValidator = Validation.useValidationParent(props);
+
+    /**
+     * 内部钩子
+     * @author  韦胜健
+     * @date    2022.11.6 15:50
+     */
+    const hooks = createTableHooks();
+
+    /**
+     * 控制加载状态
+     * @author  韦胜健
+     * @date    2023.1.25 23:26
+     */
+    const tableLoading = useTableLoading({ hooks, props });
+
+    /**
+     * 表格数据
+     * @author  韦胜健
+     * @date    2022/11/17 10:45
+     */
+    const dataRef = computed(() => hooks.onData.exec({ data: props.data }));
+
+    /**
+     * 列信息
+     * @author  韦胜健
+     * @date    2022.11.6 15:50
+     */
+    const { plcData, bodyPlcList, plcDataState } = useTablePlc({ props, hooks, slots, onCollectPlcData: event.emit.onCollectPlcData });
+
+    /**
+     * 数字属性
+     * @author  韦胜健
+     * @date    2022.11.6 16:00
+     */
+    const numberState = reactive({
+      headRowHeight: computed((): number => {
+        const height = props.headRowHeight || TableSizeVariables.headRowHeight[styleComputed.value.size];
+        return Number(removeUnit(height));
+      }),
+      bodyRowHeight: computed((): number => {
+        const height = props.bodyRowHeight || TableSizeVariables.bodyRowHeight[styleComputed.value.size];
+        return Number(removeUnit(height));
+      }),
+    });
+
+    /**
+     * 数据
+     * @author  韦胜健
+     * @date    2022.11.6 15:50
+     */
+    const { bodyNodes, summaryNodes } = useTableNode({ props, formValidator, dataRef });
+
+    const tableBodyNodes = computed(() => hooks.onTableMessyData.exec({ data: [...bodyNodes.value] }).data);
+
+    const showRows = computed((): number => {
+      const bodyRows = bodyNodes.value.length;
+      if (props.showRows === 'auto') {
+        return !bodyRows ? props.minShowRows : bodyRows;
+      } else {
+        return props.showRows;
+      }
+    });
+
+    /**
+     * 表格高度
+     * @author  韦胜健
+     * @date    2022.11.6 15:59
+     */
+    const tableHeight = computed(() => {
+      if (!plcData.value) {
+        return null;
+      }
+      const bodyRows = showRows.value;
+      const summaryRows = !!summaryNodes.value ? summaryNodes.value.length : 0;
+      const headRows = plcData.value.headPlcListArray.length;
+      return headRows * numberState.headRowHeight! + (bodyRows + summaryRows) * numberState.bodyRowHeight! + 12;
+    });
+
+    /**
+     * 固定列阴影
+     * @author  韦胜健
+     * @date    2022/11/10 20:55
+     */
+    const fixedShadow = useFixedShadow({ scrollRefer });
+
+    /**
+     * 样式
+     * @author  韦胜健
+     * @date    2022.11.6 15:50
+     */
+    const classes = useClasses(() => [
+      getComponentCls('table'),
+      `table-size-${styleComputed.value.size}`,
+      ...fixedShadow.fixedShadowClass.value,
+      {
+        'table-border': props.border,
+      },
+    ]);
+
+    /**
+     * 是否开启虚拟滚动
+     * @author  韦胜健
+     * @date    2022.11.7 1:19
+     */
+    const isEnableVirtual = computed(() => hooks.onEnableVirtual.exec(props.virtual));
+
+    /**
+     * 表头行样式
+     * @author  韦胜健
+     * @date    2022.11.7 1:23
+     */
+    const headRowStyles = useStyles((styles) => {
+      styles.height = unit(numberState.headRowHeight);
+      styles.lineHeight = unit(numberState.headRowHeight);
+    });
+
+    /**
+     * 当前高亮行
+     * @author  韦胜健
+     * @date    2022/11/7 14:41
+     */
+    const current = (() => {
+      const state = reactive({
+        data: null as null | PlainObject
+      });
+      const update = async (data: PlainObject | null) => {
+        await nextTick();
+        if (!data && !!dataRef.value.data?.length) {
+          data = dataRef.value.data[0];
+        }
+        state.data = data;
+        event.emit.onCurrentChange(data);
+      };
+      hooks.onClickRow.use(({ node }) => {update(node.data);});
+      const getNode = () => bodyNodes.value.find(i => toRaw(i.data) == toRaw(state.data));
+      const isCurrent = (node: iTableNode) => toRaw(node.data) == toRaw(state.data);
+      return { update, getNode, isCurrent };
+    })();
+
+    /**
+     * 暴露方法
+     * @author  韦胜健
+     * @date    2022.12.4 12:10
+     */
+    const methods = useTableMethods({ bodyNodes, getFlatPlcList: () => plcData.value?.flatPlcList, formValidator });
+
+    /**
+     * 表单编辑
+     * @author  韦胜健
+     * @date    2022/12/5 20:47
+     */
+    const formEditor = useTableFormEditor({ hooks, props, getFlatPlcList: () => plcData.value?.flatPlcList, methods });
+
+    /**
+     * 批量修改弹窗
+     * @author  韦胜健
+     * @date    2023.1.2 19:07
+     */
+    const modifyEditor = useTableModifyEditor({ props, hooks, getFlatPlcList: () => plcData.value?.flatPlcList, methods });
+
+    /**
+     * 拖拽列排序
+     * @author  韦胜健
+     * @date    2023/5/8 10:39
+     */
+    const tableDraggier = useTableDraggier({
+      props,
+      hooks,
+      bodyNodes,
+      numberState,
+      refs,
+      event,
+      getHeadPlcListArray: () => plcData.value?.headPlcListArray || [],
+      getBodyPlcListArray: () => bodyPlcList.value || [],
+      getPlcListArray: () => plcData.value?.plcList || [],
+    });
+
+    /*---------------------------------------内置hooks-------------------------------------------*/
+
+    hooks.onRender.use({
+      separate: false,
+      processor: ({ list, render }) => {!bodyNodes.value.length && list.push({ render, key: 'empty', seq: 4 });},
+      render: () => (
+        <div className="table-empty">
+          {slots.noData(<Empty noData/>)}
+        </div>
+      ),
+    });
+
+    hooks.onClickCell.use((val) => {
+      event.emit.onClickCell(val.node, val.e, val.plc);
+      hooks.onClickRow.exec({ e: val.e, node: val.node });
+    });
+
+    hooks.onDblclickCell.use((val) => {
+      event.emit.onDblclickCell(val.node, val.e, val.plc);
+      hooks.onDblclickRow.exec({ e: val.e, node: val.node });
+    });
+
+    hooks.onContextmenuCell.use((val) => {
+      event.emit.onContextmenuCell(val.node, val.e, val.plc);
+    });
+
+    hooks.onClickHeadCell.use(({ e, plc }) => {!plc.props.disableAutoEmitClickTitle && event.emit.onClickHead(plc, e);});
+
+    hooks.onClickRow.use(({ e, node }) => {event.emit.onClickRow(node, e);});
+
+    hooks.onDblclickRow.use(({ e, node }) => {event.emit.onDblclickRow(node, e);});
+
+    onMounted(() => {hooks.onTableMounted.exec(refs.el!);});
+
+    const refer = {
+      refs,
+      plcData,
+      numberState,
+      props,
+      event,
+      hooks,
+      bodyPlcList,
+      current,
+      formValidator,
+      styleComputed,
+      bodyNodes,
+      slots,
+      methods,
+      formEditor,
+      modifyEditor,
+      dataRef,
+      tableLoading,
+      tableDraggier,
+    };
+
+    event.emit.onSetup(refer);
+
+    const innerDebugger = (() => {
+      let count = 0;
+      let prevProps = { ...props };
+      const render = () => {
+        console.log('render', count++);
+        let hasChangeFlag = false;
+        let changeProps = Object.keys(prevProps).reduce((prev, key) => {
+          const val = {
+            new: (props as any)[key],
+            old: (prevProps as any)[key],
+          };
+          if (val.new !== val.old) {
+            prev[key] = val;
+            hasChangeFlag = true;
+          }
+          return prev;
+        }, {} as any);
+        console.log('change props', hasChangeFlag ? changeProps : null);
+        prevProps = { ...props };
+        return null;
+      };
+      return { render };
+    })();
+
+    return {
+      refer,
+      render: () => (
+        <div className={classes.value} ref={onRef.el}>
+          {hooks.onRender.exec()}
+          {
+            !!plcData.value &&
+            !!plcDataState.tableWidth &&
+            /*(() => {
+              innerDebugger.render();
+              return true;
+            })() &&*/
+            (
+              <VirtualTable
+                ref={onRefVirtual}
+                height={tableHeight.value || undefined}
+                data={tableBodyNodes.value}
+                headData={plcData.value?.headPlcListArray}
+                size={numberState.bodyRowHeight}
+                dynamicSize={props.dynamicSize}
+                headSize={numberState.headRowHeight}
+                width={plcData.value!.targetTableWidth!}
+                summaryData={summaryNodes.value}
+                disabled={!isEnableVirtual.value}
+                showRows={showRows.value}
+                onScroll={hooks.onScroll.exec}
+                onPageIndexChange={hooks.onVirtualPageIndexChange.exec}
+                v-slots={{
+                  headColgroup: () => (
+                    <colgroup>
+                      {plcData.value!.flatPlcList!.map((plc, index) => <col key={index} width={plc.props.width || ''}/>)}
+                    </colgroup>
+                  ),
+                  colgroup: () => (
+                    <colgroup>
+                      {(bodyPlcList.value?.map((plc, index) => <col key={index} width={plc.props.width || ''}/>))}
+                    </colgroup>
+                  ),
+                  head: () => (
+                    plcData.value!.headPlcListArray.map((headRows, index) => (
+                      <tr key={index} style={headRowStyles.value}>
+                        {headRows.map((plc) => (<PltHeadCell key={plc.plcKey} table={refer} tablePlc={plc} scroll={scrollRefer.getScroll}/>))}
+                      </tr>
+                    ))
+                  ),
+                  default: ({ item, vid, vIndex, index }) => (
+                    typeof item !== "function" ? (
+                      <PltRow table={refer} node={item} vid={vid} key={props.virtualRowType === 'virtualIndex' ? vIndex : index}/>
+                    ) : (
+                      item({ vid, vIndex, index })
+                    )
+                  ),
+                }}
+              />
+            )}
+        </div>
+      )
+    };
+  },
+});
+
+export function injectPlainTable() {return Table.use.inject();}
+
+export type iTableRefer = ReturnType<typeof injectPlainTable>
+
+export default Table;