@ant-design/pro-components 2.8.10 → 3.0.0-beta.2

package/es/table/components/ColumnSetting/style.js

@@ -0,0 +1,82 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { useStyle as useAntdStyle } from "../../../provider";
+var genProStyle = function genProStyle(token) {
+  return _defineProperty(_defineProperty(_defineProperty({}, token.componentCls, {
+    width: 'auto',
+    '&-title': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      height: '32px'
+    },
+    '&-overlay': _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(token.antCls, "-popover-inner-content"), {
+      width: '200px',
+      paddingBlock: 0,
+      paddingInline: 0,
+      paddingBlockEnd: 8
+    }), "".concat(token.antCls, "-tree-node-content-wrapper:hover"), {
+      backgroundColor: 'transparent'
+    }), "".concat(token.antCls, "-tree-draggable-icon"), {
+      cursor: 'grab'
+    }), "".concat(token.antCls, "-tree-treenode"), _defineProperty(_defineProperty({
+      alignItems: 'center',
+      '&:hover': _defineProperty({}, "".concat(token.componentCls, "-list-item-option"), {
+        display: 'block'
+      })
+    }, "".concat(token.antCls, "-tree-checkbox"), {
+      marginInlineEnd: '4px'
+    }), "".concat(token.antCls, "-tree-title"), {
+      width: '100%'
+    }))
+  }), "".concat(token.componentCls, "-action-rest-button"), {
+    color: token.colorPrimary
+  }), "".concat(token.componentCls, "-list"), _defineProperty(_defineProperty(_defineProperty({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    paddingBlockStart: 8
+  }, "&".concat(token.componentCls, "-list-group"), {
+    paddingBlockStart: 0
+  }), '&-title', {
+    marginBlockStart: '6px',
+    marginBlockEnd: '6px',
+    paddingInlineStart: '24px',
+    color: token.colorTextSecondary,
+    fontSize: '12px'
+  }), '&-item', {
+    display: 'flex',
+    alignItems: 'center',
+    maxHeight: 24,
+    justifyContent: 'space-between',
+    '&-title': {
+      flex: 1,
+      maxWidth: 80,
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      wordBreak: 'break-all',
+      whiteSpace: 'nowrap'
+    },
+    '&-option': {
+      display: 'none',
+      float: 'right',
+      cursor: 'pointer',
+      '> span': {
+        '> span.anticon': {
+          color: token.colorPrimary
+        }
+      },
+      '> span + span': {
+        marginInlineStart: 4
+      }
+    }
+  }));
+};
+export function useStyle(prefixCls) {
+  return useAntdStyle('ColumnSetting', function (token) {
+    var proToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
+    });
+    return [genProStyle(proToken)];
+  });
+}

package/es/table/components/DragSortTable/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ParamsType } from '../../../provider';
+import type { ProTableProps } from '../../typing';
+export type DragTableProps<T, U> = {
+    /** @name 拖动排序列key值 如配置此参数，则会在该 key 对应的行显示拖拽排序把手，允许拖拽排序 */
+    dragSortKey?: string;
+    /** @name 渲染自定义拖动排序把手的函数 如配置了 dragSortKey 但未配置此参数，则使用默认把手图标 */
+    dragSortHandlerRender?: (rowData: T, idx: number) => React.ReactNode;
+    /** @name 拖动排序完成回调 */
+    onDragSortEnd?: (beforeIndex: number, afterIndex: number, newDataSource: T[]) => Promise<void> | void;
+} & ProTableProps<T, U>;
+declare function DragSortTable<T extends Record<string, any>, U extends ParamsType = ParamsType, ValueType = 'text'>(props: DragTableProps<T, U>): React.JSX.Element;
+export default DragSortTable;

package/es/table/components/DragSortTable/index.js

@@ -0,0 +1,110 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["rowKey", "dragSortKey", "dragSortHandlerRender", "onDragSortEnd", "onDataSourceChange", "defaultData", "dataSource", "onLoad"],
+  _excluded2 = ["rowData", "index", "className"];
+import { HolderOutlined } from '@ant-design/icons';
+import { ConfigProvider } from 'antd';
+import { useMergedState } from 'rc-util';
+import React, { useContext, useMemo } from 'react';
+import ProTable from "../../Table";
+import { useDragSort } from "../../utils/useDragSort";
+import { useStyle } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+function DragSortTable(props) {
+  var _otherProps$columns;
+  var rowKey = props.rowKey,
+    dragSortKey = props.dragSortKey,
+    dragSortHandlerRender = props.dragSortHandlerRender,
+    onDragSortEnd = props.onDragSortEnd,
+    onDataSourceChange = props.onDataSourceChange,
+    defaultData = props.defaultData,
+    originDataSource = props.dataSource,
+    onLoad = props.onLoad,
+    otherProps = _objectWithoutProperties(props, _excluded);
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var _useMergedState = useMergedState(function () {
+      return defaultData || [];
+    }, {
+      value: originDataSource,
+      onChange: onDataSourceChange
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    dataSource = _useMergedState2[0],
+    setDataSource = _useMergedState2[1];
+  var _useStyle = useStyle(getPrefixCls('pro-table-drag')),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+
+  // 默认拖拽把手
+  var DragHandle = useMemo(function () {
+    return function (dragHandleProps) {
+      var rowData = dragHandleProps.rowData,
+        index = dragHandleProps.index,
+        className = dragHandleProps.className,
+        rest = _objectWithoutProperties(dragHandleProps, _excluded2);
+      var defaultDom = /*#__PURE__*/_jsx(HolderOutlined, _objectSpread(_objectSpread({}, rest), {}, {
+        className: "".concat(getPrefixCls('pro-table-drag-icon'), " ").concat(className || '', " ").concat(hashId || '').trim()
+      }));
+      var handel = dragSortHandlerRender ? dragSortHandlerRender(dragHandleProps === null || dragHandleProps === void 0 ? void 0 : dragHandleProps.rowData, dragHandleProps === null || dragHandleProps === void 0 ? void 0 : dragHandleProps.index) : defaultDom;
+      return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, rest), {}, {
+        children: handel
+      }));
+    };
+  }, [getPrefixCls]);
+
+  // 使用自定义hooks获取拖拽相关组件的components集合
+  var _useDragSort = useDragSort({
+      dataSource: dataSource === null || dataSource === void 0 ? void 0 : dataSource.slice(),
+      dragSortKey: dragSortKey,
+      onDragSortEnd: onDragSortEnd,
+      components: props.components,
+      rowKey: rowKey,
+      DragHandle: DragHandle
+    }),
+    components = _useDragSort.components,
+    DndContext = _useDragSort.DndContext;
+  var wrapOnload = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(ds) {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setDataSource(ds);
+            return _context.abrupt("return", onLoad === null || onLoad === void 0 ? void 0 : onLoad(ds));
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function wrapOnload(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  return wrapSSR( /*#__PURE__*/_jsx(ProTable, _objectSpread(_objectSpread({}, otherProps), {}, {
+    columns: (_otherProps$columns = otherProps.columns) === null || _otherProps$columns === void 0 ? void 0 : _otherProps$columns.map(function (item) {
+      if (item.dataIndex == dragSortKey || item.key === dragSortKey) {
+        if (!item.render) {
+          item.render = function () {
+            return null;
+          };
+        }
+      }
+      return item;
+    }),
+    onLoad: wrapOnload,
+    rowKey: rowKey,
+    tableViewRender: function tableViewRender(_, defaultDom) {
+      return /*#__PURE__*/_jsx(DndContext, {
+        children: defaultDom
+      });
+    },
+    dataSource: dataSource,
+    components: components,
+    onDataSourceChange: onDataSourceChange
+  })));
+}
+export default DragSortTable;

package/es/table/components/DragSortTable/style.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '../../../provider';
+export interface ProListToken extends ProAliasToken {
+    componentCls: string;
+}
+export declare function useStyle(prefixCls: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

package/es/table/components/DragSortTable/style.js

@@ -0,0 +1,27 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { useStyle as useAntdStyle } from "../../../provider";
+var genProListStyle = function genProListStyle(token) {
+  return _defineProperty({}, token.componentCls, {
+    '&-icon': {
+      marginInlineEnd: 8,
+      color: token.colorTextSecondary,
+      cursor: 'grab !important',
+      padding: 4,
+      fontSize: 12,
+      borderRadius: token.borderRadius,
+      '&:hover': {
+        color: token.colorText,
+        backgroundColor: token.colorInfoBg
+      }
+    }
+  });
+};
+export function useStyle(prefixCls) {
+  return useAntdStyle('DragSortTable', function (token) {
+    var proListToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
+    });
+    return [genProListStyle(proListToken)];
+  });
+}

package/es/table/components/Dropdown/index.d.ts

@@ -0,0 +1,24 @@
+import type { MenuItemProps } from 'antd';
+import React from 'react';
+interface MenuItems extends MenuItemProps {
+    name: React.ReactNode;
+    key: string;
+    title?: string;
+}
+export type DropdownProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    menus?: MenuItems[];
+    onSelect?: (key: string) => void;
+    children?: React.ReactNode;
+};
+/**
+ * 一个简单的下拉菜单
+ *
+ * @param param0
+ */
+declare const DropdownButton: React.FC<DropdownProps>;
+declare const TableDropdown: React.FC<DropdownProps> & {
+    Button: typeof DropdownButton;
+};
+export default TableDropdown;

package/es/table/components/Dropdown/index.js

@@ -0,0 +1,78 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["key", "name"];
+import { DownOutlined, EllipsisOutlined } from '@ant-design/icons';
+import { Button, ConfigProvider, Dropdown } from 'antd';
+import classnames from 'classnames';
+import React, { useContext } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 一个简单的下拉菜单
+ *
+ * @param param0
+ */
+var DropdownButton = function DropdownButton(_ref) {
+  var children = _ref.children,
+    menus = _ref.menus,
+    onSelect = _ref.onSelect,
+    className = _ref.className,
+    style = _ref.style;
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var tempClassName = getPrefixCls('pro-table-dropdown');
+  return /*#__PURE__*/_jsx(Dropdown, {
+    menu: {
+      onClick: function onClick(params) {
+        return onSelect && onSelect(params.key);
+      },
+      items: menus === null || menus === void 0 ? void 0 : menus.map(function (item) {
+        return {
+          label: item.name,
+          key: item.key
+        };
+      })
+    },
+    className: classnames(tempClassName, className),
+    children: /*#__PURE__*/_jsxs(Button, {
+      style: style,
+      children: [children, " ", /*#__PURE__*/_jsx(DownOutlined, {})]
+    })
+  });
+};
+var TableDropdown = function TableDropdown(_ref2) {
+  var propsClassName = _ref2.className,
+    style = _ref2.style,
+    onSelect = _ref2.onSelect,
+    _ref2$menus = _ref2.menus,
+    menus = _ref2$menus === void 0 ? [] : _ref2$menus,
+    children = _ref2.children;
+  var _useContext2 = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext2.getPrefixCls;
+  var className = getPrefixCls('pro-table-dropdown');
+  return /*#__PURE__*/_jsx(Dropdown, {
+    menu: {
+      onClick: function onClick(params) {
+        onSelect === null || onSelect === void 0 || onSelect(params.key);
+      },
+      items: menus.map(function (_ref3) {
+        var key = _ref3.key,
+          name = _ref3.name,
+          rest = _objectWithoutProperties(_ref3, _excluded);
+        return _objectSpread(_objectSpread({
+          key: key
+        }, rest), {}, {
+          title: rest.title,
+          label: name
+        });
+      })
+    },
+    className: classnames(className, propsClassName),
+    children: /*#__PURE__*/_jsx("a", {
+      style: style,
+      children: children || /*#__PURE__*/_jsx(EllipsisOutlined, {})
+    })
+  });
+};
+TableDropdown.Button = DropdownButton;
+export default TableDropdown;

package/es/table/components/EditableTable/CellEditorTable.d.ts

@@ -0,0 +1,3 @@
+import { ParamsType } from '../../../provider';
+import { EditableProTableProps } from './index';
+export declare function CellEditorTable<DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType = 'text'>(props: EditableProTableProps<DataType, Params, ValueType>): import("react/jsx-runtime").JSX.Element;

package/es/table/components/EditableTable/CellEditorTable.js

@@ -0,0 +1,59 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+import EditableProTable from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CellEditorTable(props) {
+  var _props$columns;
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    editableKeys = _React$useState2[0],
+    setEditableRowKeys = _React$useState2[1];
+  var _React$useState3 = React.useState([]),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    dataIndex = _React$useState4[0],
+    setDataIndex = _React$useState4[1];
+  var rowKey = props.rowKey || 'id';
+
+  // ============================ RowKey ============================
+  var getRowKey = React.useMemo(function () {
+    if (typeof rowKey === 'function') {
+      return rowKey;
+    }
+    return function (record, index) {
+      var _ref;
+      if (index === -1) {
+        return record === null || record === void 0 ? void 0 : record[rowKey];
+      }
+      // 如果 props 中有name 的话，用index 来做行号，这样方便转化为 index
+      if (props.name) {
+        return index === null || index === void 0 ? void 0 : index.toString();
+      }
+      return (_ref = record === null || record === void 0 ? void 0 : record[rowKey]) !== null && _ref !== void 0 ? _ref : index === null || index === void 0 ? void 0 : index.toString();
+    };
+  }, [props.name, rowKey]);
+  return /*#__PURE__*/_jsx(EditableProTable, _objectSpread(_objectSpread({
+    bordered: true,
+    pagination: false
+  }, props), {}, {
+    editable: _objectSpread({
+      editableKeys: editableKeys
+    }, props.editable),
+    columns: (props === null || props === void 0 || (_props$columns = props.columns) === null || _props$columns === void 0 ? void 0 : _props$columns.map(function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        editable: dataIndex.flat(1).join('.') === [item.dataIndex || item.key].flat(1).join('.') ? undefined : false,
+        onCell: function onCell(record, rowIndex) {
+          return {
+            onDoubleClick: function onDoubleClick() {
+              setEditableRowKeys([getRowKey(record, rowIndex)]);
+              setDataIndex([item.dataIndex || item.key]);
+            },
+            onBlur: function onBlur() {
+              setEditableRowKeys([]);
+            }
+          };
+        }
+      });
+    })) || []
+  }));
+}

package/es/table/components/EditableTable/RowEditorTable.d.ts

@@ -0,0 +1,3 @@
+import { ParamsType } from '../../../provider';
+import { EditableProTableProps } from './index';
+export declare function RowEditorTable<DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType = 'text'>(props: EditableProTableProps<DataType, Params, ValueType>): import("react/jsx-runtime").JSX.Element;

package/es/table/components/EditableTable/RowEditorTable.js

@@ -0,0 +1,53 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+import EditableProTable from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function RowEditorTable(props) {
+  var _props$columns;
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    editableKeys = _React$useState2[0],
+    setEditableRowKeys = _React$useState2[1];
+  var rowKey = props.rowKey || 'id';
+
+  // ============================ RowKey ============================
+  var getRowKey = React.useMemo(function () {
+    if (typeof rowKey === 'function') {
+      return rowKey;
+    }
+    return function (record, index) {
+      var _ref;
+      if (index === -1) {
+        return record === null || record === void 0 ? void 0 : record[rowKey];
+      }
+      // 如果 props 中有name 的话，用index 来做行号，这样方便转化为 index
+      if (props.name) {
+        return index === null || index === void 0 ? void 0 : index.toString();
+      }
+      return (_ref = record === null || record === void 0 ? void 0 : record[rowKey]) !== null && _ref !== void 0 ? _ref : index === null || index === void 0 ? void 0 : index.toString();
+    };
+  }, [props.name, rowKey]);
+  return /*#__PURE__*/_jsx(EditableProTable, _objectSpread(_objectSpread({
+    bordered: true,
+    pagination: false
+  }, props), {}, {
+    editable: _objectSpread({
+      editableKeys: editableKeys
+    }, props.editable),
+    columns: (props === null || props === void 0 || (_props$columns = props.columns) === null || _props$columns === void 0 ? void 0 : _props$columns.map(function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        onCell: function onCell(record, rowIndex) {
+          return {
+            onDoubleClick: function onDoubleClick() {
+              setEditableRowKeys([getRowKey(record, rowIndex)]);
+            },
+            onBlur: function onBlur() {
+              setEditableRowKeys([]);
+            }
+          };
+        }
+      });
+    })) || []
+  }));
+}

package/es/table/components/EditableTable/index.d.ts

@@ -0,0 +1,92 @@
+import type { ButtonProps, FormItemProps } from 'antd';
+import React from 'react';
+import { ProFormInstance } from '../../../form';
+import type { ParamsType } from '../../../provider';
+import type { ProTableProps } from '../../typing';
+export type EditableFormInstance<T = any> = ProFormInstance<T> & {
+    /**
+     * 获取一行数据的
+     * @param rowIndex
+     * @returns T | undefined
+     *
+     * @example getRowData(1)  可以传入第几行的数据
+     * @example getRowData("id")  也可以传入 rowKey，根据你列的唯一key 来获得。
+     */
+    getRowData?: (rowIndex: string | number) => T | undefined;
+    /**
+     * 获取整个 table 的数据
+     * @returns T[] | undefined
+     */
+    getRowsData?: () => T[] | undefined;
+    /**
+     * 设置一行的数据，会将数据进行简单的 merge
+     *
+     * {title:"old", decs:"old",id:"old"} -> set {title:"new"} -> {title:"new", decs:"old",id:"old"}
+     *
+     * @description 只会做最第一层对象的 merge 哦。
+     * {title:"old", decs:{name:"old",key:"old"},id:"old"} -> set {decs:{name:"new"}} -> {title:"old", decs:{name:"new"},id:"old"} -> set {decs:{name:"old"}}
+     *
+     * @param rowIndex
+     * @param data
+     * @returns void
+     *
+     * 根据行号设置
+     * @example setRowData(1, { title:"new" })  可以传入修改第几行
+     *
+     * 根据行 id 设置
+     * @example setRowData("id", { title:"new" })  也可以传入 rowKey，根据你列的唯一 key 来设置。
+     *
+     * 清空原有数据
+     * @example setRowData(1, { title:undefined })
+     *
+     */
+    setRowData?: (rowIndex: string | number, data: Partial<T>) => void;
+};
+export type RecordCreatorProps<DataSourceType> = {
+    record: DataSourceType | ((index: number, dataSource: DataSourceType[]) => DataSourceType);
+    position?: 'top' | 'bottom';
+    /**
+     * 新增一行的类型
+     *
+     * @augments dataSource 将会新增一行数据到 dataSource 中，不支持取消，只能删除
+     * @augments cache 将会把数据放到缓存中，取消后消失
+     */
+    newRecordType?: 'dataSource' | 'cache';
+    /** 要增加到哪个节点下，一般用于多重嵌套表格 */
+    parentKey?: React.Key | ((index: number, dataSource: DataSourceType[]) => React.Key);
+};
+export type EditableProTableProps<T, U extends ParamsType, ValueType = 'text'> = Omit<ProTableProps<T, U, ValueType>, 'onChange'> & {
+    defaultValue?: readonly T[];
+    value?: readonly T[];
+    onChange?: (value: readonly T[]) => void;
+    /** @name 原先的 table OnChange */
+    onTableChange?: ProTableProps<T, U>['onChange'];
+    /**
+     *@name 可编辑表格，列配置的form，可以操作表格里面的数据
+     */
+    editableFormRef?: React.Ref<EditableFormInstance<T> | undefined>;
+    /** @name 新建按钮的设置 */
+    recordCreatorProps?: (RecordCreatorProps<T> & ButtonProps & {
+        creatorButtonText?: React.ReactNode;
+    }) | false;
+    /** 最大行数 */
+    maxLength?: number;
+    /** Table 的值发生改变，为了适应 Form 调整了顺序 */
+    onValuesChange?: (values: T[], record: T) => void;
+    /** 是否受控，如果为 true，每次 value 更新都会重置表单 */
+    controlled?: boolean;
+    /** FormItem 的设置 */
+    formItemProps?: Omit<FormItemProps, 'children' | 'name'>;
+};
+/**
+ * 可以直接放到 Form 中的可编辑表格
+ * A React component that is used to create a table.
+ * @param props
+ */
+declare function FieldEditableTable<DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType = 'text'>(props: EditableProTableProps<DataType, Params, ValueType>): import("react/jsx-runtime").JSX.Element;
+declare namespace FieldEditableTable {
+    var RecordCreator: <T = Record<string, any>>(props: RecordCreatorProps<T> & {
+        children: JSX.Element;
+    }) => React.FunctionComponentElement<any>;
+}
+export default FieldEditableTable;