@jetlinks-web/components 2.6.9 → 2.6.11

package/es/style/index.css

@@ -4841,6 +4841,7 @@ span.ant-radio + * {
   flex-shrink: 0;
   background: #fafafa;
   transition: background-color 0.3s ease;
+  overflow: auto hidden;
 }
 .jetlinks-edit-table-wrapper .jetlinks-edit-table .jetlinks-edit-table-header {
   overflow: hidden;
@@ -4855,6 +4856,17 @@ span.ant-radio + * {
   flex: 1 1 auto;
   flex-direction: row;
 }
+.jetlinks-edit-table-wrapper .jetlinks-edit-table .jetlinks-table-horizontal-scroll {
+  width: 100%;
+  height: 10px;
+  min-height: 10px;
+  max-height: 10px;
+  display: flex;
+}
+.jetlinks-edit-table-wrapper .jetlinks-edit-table .jetlinks-table-horizontal-scroll .jetlinks-table-horizontal-scroll-bar {
+  height: 100%;
+  overflow-x: scroll;
+}
 .jetlinks-edit-table-body-viewport {
   max-height: 100%;
   width: 100%;
@@ -4880,7 +4892,6 @@ span.ant-radio + * {
 }
 .jetlinks-edit-table-body-viewport .jetlinks-edit-table-center .jetlinks-edit-table-row {
   width: 100%;
-  display: flex;
   align-items: center;
   transition: top 0.2s, height 0.2s, background-color 0.1s;
   border-bottom: 1px solid #ebebeb;
@@ -4940,6 +4951,10 @@ span.ant-radio + * {
   display: flex;
   align-items: center;
   font-weight: 600;
+  gap: 4px;
+}
+.jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell .jetlinks-edit-table-header-cell-box .table-header-cell-title .cell-title-box {
+  flex: 1 1 auto;
 }
 .jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell .jetlinks-edit-table-header-cell-box .header-cell-required {
   color: #ff4d4f;

package/lib/EditTable/Body.js

@@ -16,8 +16,10 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
 } return value; }
 /* Analyzed bindings: {
   "groupKey": "props",
+  "width": "props",
   "readonly": "props",
   "ContextMenu": "setup-maybe-ref",
+  "useHScroll": "setup-maybe-ref",
   "useRightMenuContext": "setup-maybe-ref",
   "randomString": "setup-maybe-ref",
   "bodyProps": "setup-maybe-ref",
@@ -29,6 +31,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "onBeforeUnmount": "setup-const",
   "nextTick": "setup-const",
   "Empty": "setup-const",
+  "CellRender": "setup-const",
   "props": "setup-reactive-const",
   "emit": "setup-const",
   "viewScrollRef": "setup-ref",
@@ -36,6 +39,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "virtualRang": "setup-reactive-const",
   "containerStyle": "setup-ref",
   "context": "setup-maybe-ref",
+  "hScroll": "setup-maybe-ref",
   "scrollLock": "setup-let",
   "menuInstance": "setup-let",
   "maxLen": "setup-ref",
@@ -47,7 +51,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "rowClick": "setup-const",
   "updateSelectedKeys": "setup-const"
 } */
-import { normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createCommentVNode as _createCommentVNode, withModifiers as _withModifiers, normalizeClass as _normalizeClass, createVNode as _createVNode } from "vue";
+import { normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createCommentVNode as _createCommentVNode, createBlock as _createBlock, withModifiers as _withModifiers, normalizeClass as _normalizeClass, createVNode as _createVNode } from "vue";
 const _hoisted_1 = { style: { position: 'relative' } };
 const _hoisted_2 = ["data-row-key", "onContextmenu", "onClick"];
 const _hoisted_3 = {
@@ -64,11 +68,12 @@ const _hoisted_5 = {
 };
 const _hoisted_6 = { class: "jetlinks-edit-table-body-empty" };
 import ContextMenu from './components/ContextMenu';
-import { useRightMenuContext } from "./hooks";
+import { useHScroll, useRightMenuContext } from "./hooks";
 import { randomString } from "@jetlinks-web/utils";
 import { bodyProps } from "./props";
 import { ref, reactive, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import Empty from '../Empty/Empty.js';
+import CellRender from './CellRender.js';
 const __sfc_main__ = Object.assign({
     name: 'JEditTableBody'
 }, {
@@ -78,6 +83,9 @@ const __sfc_main__ = Object.assign({
             type: [String, Number],
             default: undefined
         },
+        width: {
+            type: Number
+        },
         readonly: {
             type: Boolean,
             default: false
@@ -95,6 +103,7 @@ const __sfc_main__ = Object.assign({
         });
         const containerStyle = ref(0);
         const context = useRightMenuContext();
+        const hScroll = useHScroll();
         let scrollLock = ref(false);
         let menuInstance;
         const maxLen = computed(() => {
@@ -104,7 +113,7 @@ const __sfc_main__ = Object.assign({
         const virtualData = computed(() => {
             const array = props.dataSource.slice(virtualRang.start, virtualRang.end);
             if (tableCenterRef.value) {
-                tableCenterRef.value.style.webkitTransform = `translate3d(0, ${virtualRang.start * props.cellHeight}px, 0)`;
+                // tableCenterRef.value.style.webkitTransform  =  `translateY(${virtualRang.start * props.cellHeight}px)`
             }
             return array;
         });
@@ -215,7 +224,11 @@ const __sfc_main__ = Object.assign({
                         _createElementVNode("div", {
                             class: "jetlinks-edit-table-center",
                             ref_key: "tableCenterRef",
-                            ref: tableCenterRef
+                            ref: tableCenterRef,
+                            style: _normalizeStyle({
+                                transform: `translate3d(-${_unref(hScroll) || 0}px, ${virtualRang.start * _ctx.cellHeight}px, 0)`,
+                                width: __props.width + 'px'
+                            })
                         }, [
                             (virtualData.value.length)
                                 ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(virtualData.value, (item, index) => {
@@ -225,7 +238,11 @@ const __sfc_main__ = Object.assign({
                                             'jetlinks-edit-table-row-selected': _optionalChain([selectedRowKeys, 'access', _12 => _12.value, 'optionalAccess', _13 => _13.includes, 'call', _14 => _14(item[_ctx.rowKey] || virtualRang.start + index + 1)])
                                         }),
                                         key: `record_${item.__key}`,
-                                        style: _normalizeStyle({ height: `${_ctx.cellHeight}px`, }),
+                                        style: _normalizeStyle({
+                                            height: `${_ctx.cellHeight}px`,
+                                            lineHeight: `${_ctx.cellHeight}px`,
+                                            transform: `-${_unref(hScroll) || 0}px`
+                                        }),
                                         "data-row-key": item[_ctx.rowKey] || virtualRang.start + index + 1,
                                         onContextmenu: _withModifiers((e) => showContextMenu(e, item, virtualRang.start + index), ["right"]),
                                         onClick: _withModifiers(() => rowClick(item), ["stop"])
@@ -254,7 +271,17 @@ const __sfc_main__ = Object.assign({
                                                             index: item.__dataIndex,
                                                             column: column
                                                         }, () => [
-                                                            _createTextVNode(_toDisplayString(item[column.dataIndex]), 1 /* TEXT */)
+                                                            (column.customRender)
+                                                                ? (_openBlock(), _createBlock(CellRender, {
+                                                                    key: 0,
+                                                                    record: item,
+                                                                    value: item[column.dataIndex],
+                                                                    index: item.__dataIndex,
+                                                                    "render-fn": column.customRender
+                                                                }, null, 8 /* PROPS */, ["record", "value", "index", "render-fn"]))
+                                                                : (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
+                                                                    _createTextVNode(_toDisplayString(item[column.dataIndex]), 1 /* TEXT */)
+                                                                ], 64 /* STABLE_FRAGMENT */))
                                                         ])
                                                     ]))
                                             ], 4 /* STYLE */));
@@ -265,7 +292,7 @@ const __sfc_main__ = Object.assign({
                             (__props.readonly)
                                 ? (_openBlock(), _createElementBlock("div", _hoisted_5))
                                 : _createCommentVNode("v-if", true)
-                        ], 512 /* NEED_PATCH */)
+                        ], 4 /* STYLE */)
                     ])
                 ], 36 /* STYLE, NEED_HYDRATION */))
                 : _renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [

package/lib/EditTable/CellRender.js

@@ -0,0 +1,12 @@
+/* Analyzed bindings: {} */
+import { defineComponent } from 'vue';
+const __sfc_main__ = defineComponent({
+    name: "CellRender",
+    props: ['renderFn', 'value', 'record', 'index'],
+    setup(props) {
+        return () => {
+            return props.renderFn(props.value, props.record, props.index);
+        };
+    }
+});
+export default __sfc_main__;

package/lib/EditTable/EditTable.js

@@ -26,6 +26,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "TABLE_GROUP_ACTIVE": "setup-maybe-ref",
   "TABLE_GROUP_ERROR": "setup-maybe-ref",
   "TABLE_GROUP_OPTIONS": "setup-maybe-ref",
+  "TABLE_H_SCROLL": "setup-maybe-ref",
   "TABLE_OPEN_GROUP": "setup-maybe-ref",
   "TABLE_TOOL": "setup-maybe-ref",
   "TABLE_WRAPPER": "setup-maybe-ref",
@@ -58,7 +59,11 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "myColumns": "setup-ref",
   "tableWrapper": "setup-ref",
   "tableBody": "setup-ref",
+  "scrollBarRef": "setup-ref",
   "tableStyle": "setup-reactive-const",
+  "showScroll": "setup-ref",
+  "horizontalScrollWidth": "setup-ref",
+  "horizontalScrollLeft": "setup-ref",
   "fields": "setup-const",
   "defaultGroupId": "literal-const",
   "fieldsErrMap": "setup-ref",
@@ -85,6 +90,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "removeFieldError": "setup-const",
   "addFieldError": "setup-const",
   "scrollWidth": "setup-ref",
+  "handleColumns": "setup-const",
   "onResize": "setup-const",
   "onScrollDown": "setup-const",
   "rightMenu": "setup-const",
@@ -93,12 +99,18 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "getTableWrapperRef": "setup-const",
   "groupDelete": "setup-const",
   "groupEdit": "setup-const",
-  "getGroupActive": "setup-const"
+  "getGroupActive": "setup-const",
+  "onHorizontalScroll": "setup-const"
 } */
-import { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, createVNode as _createVNode, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, createElementBlock as _createElementBlock } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, createVNode as _createVNode, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createBlock as _createBlock, normalizeClass as _normalizeClass } from "vue";
 const _hoisted_1 = { class: "jetlinks-edit-table-extra" };
 const _hoisted_2 = { class: "jetlinks-edit-table" };
-import { FULL_SCREEN, RIGHT_MENU, TABLE_DATA_SOURCE, TABLE_ERROR, TABLE_GROUP_ACTIVE, TABLE_GROUP_ERROR, TABLE_GROUP_OPTIONS, TABLE_OPEN_GROUP, TABLE_TOOL, TABLE_WRAPPER } from './consts';
+const _hoisted_3 = {
+    key: 0,
+    class: "jetlinks-table-horizontal-scroll"
+};
+const _hoisted_4 = /*#__PURE__*/ _createElementVNode("div", { style: { "width": "15px", "height": "100%", "overflow-x": "hidden" } }, null, -1 /* HOISTED */);
+import { FULL_SCREEN, RIGHT_MENU, TABLE_DATA_SOURCE, TABLE_ERROR, TABLE_GROUP_ACTIVE, TABLE_GROUP_ERROR, TABLE_GROUP_OPTIONS, TABLE_H_SCROLL, TABLE_OPEN_GROUP, TABLE_TOOL, TABLE_WRAPPER } from './consts';
 import { handleColumnsWidth } from './utils';
 import { useGroup, useResizeObserver, useValidate } from './hooks';
 import { tableProps } from 'ant-design-vue/lib/table';
@@ -147,10 +159,14 @@ const __sfc_main__ = Object.assign({
         const myColumns = ref([]);
         const tableWrapper = ref();
         const tableBody = ref();
+        const scrollBarRef = ref();
         const tableStyle = reactive({
             width: '100%',
             height: props.height
         });
+        const showScroll = ref(false);
+        const horizontalScrollWidth = ref(0);
+        const horizontalScrollLeft = ref(0);
         const fields = {};
         const fieldsErrMap = ref({});
         const fieldsGroupError = ref({});
@@ -287,6 +303,7 @@ const __sfc_main__ = Object.assign({
         });
         provide(TABLE_GROUP_OPTIONS, groupOptions);
         provide(TABLE_GROUP_ACTIVE, groupActive);
+        provide(TABLE_H_SCROLL, horizontalScrollLeft);
         const addField = (key, field) => {
             fields[key] = field;
         };
@@ -309,13 +326,7 @@ const __sfc_main__ = Object.assign({
         const scrollWidth = computed(() => {
             return (props.dataSource.length * props.cellHeight) > props.height ? scrollDefaultWidth.value : 0;
         });
-        function onResize({ width = 0 }) {
-            const _width = width - scrollWidth.value;
-            tableStyle.width = width || '100%';
-            // const viewportDom = document.querySelector('.jetlinks-edit-table-body-viewport')
-            // const viewportDivDom = viewportDom.querySelector('div')
-            //
-            // scrollDefaultWidth.value = viewportDom.offsetWidth - viewportDivDom.offsetWidth
+        const handleColumns = () => {
             let newColumns = [...props.columns];
             if (props.serial) {
                 const serial = {
@@ -327,11 +338,28 @@ const __sfc_main__ = Object.assign({
                         }
                         return customData.index + 1;
                     },
-                    width: _optionalChain([props, 'access', _14 => _14.serial, 'optionalAccess', _15 => _15.width])
+                    width: _optionalChain([props, 'access', _14 => _14.serial, 'optionalAccess', _15 => _15.width]),
+                    fixed: 'left'
                 };
                 newColumns = [serial, ...props.columns];
             }
-            myColumns.value = handleColumnsWidth(newColumns, _width);
+            myColumns.value = handleColumnsWidth(newColumns, tableStyle.width - scrollWidth.value);
+            horizontalScrollWidth.value = myColumns.value.reduce((prev, next) => {
+                prev += next.width;
+                return prev;
+            }, 0);
+            if (horizontalScrollWidth.value > tableStyle.width) {
+                showScroll.value = true;
+            }
+        };
+        function onResize({ width = 0 }) {
+            const _width = width - scrollWidth.value;
+            tableStyle.width = width || '100%';
+            // const viewportDom = document.querySelector('.jetlinks-edit-table-body-viewport')
+            // const viewportDivDom = viewportDom.querySelector('div')
+            //
+            // scrollDefaultWidth.value = viewportDom.offsetWidth - viewportDivDom.offsetWidth
+            handleColumns();
         }
         const onScrollDown = (len) => {
             emit('scrollDown', len);
@@ -368,6 +396,9 @@ const __sfc_main__ = Object.assign({
         const getGroupActive = () => {
             return groupActive.value;
         };
+        const onHorizontalScroll = (e) => {
+            horizontalScrollLeft.value = scrollBarRef.value.scrollLeft;
+        };
         watch(() => fieldsErrMap.value, (errorMap) => {
             fieldsGroupError.value = {};
             if (props.openGroup) {
@@ -398,6 +429,9 @@ const __sfc_main__ = Object.assign({
         watch(() => scrollWidth.value, () => {
             onResize({ width: tableStyle.width });
         });
+        watch(() => [JSON.stringify(props.columns), tableStyle.width], () => {
+            handleColumns();
+        });
         useFormContext({
             dataSource: computed(() => {
                 return props.dataSource;
@@ -441,7 +475,7 @@ const __sfc_main__ = Object.assign({
                         _createVNode(Header, {
                             columns: myColumns.value,
                             searchColumns: __props.searchColumns,
-                            style: _normalizeStyle({ width: tableStyle.width })
+                            style: _normalizeStyle({ width: tableStyle.width, transform: `translateX(-${horizontalScrollLeft.value}px)` })
                         }, null, 8 /* PROPS */, ["columns", "searchColumns", "style"])
                     ], 4 /* STYLE */),
                     _createElementVNode("div", {
@@ -461,6 +495,7 @@ const __sfc_main__ = Object.assign({
                             openGroup: _ctx.openGroup,
                             rowSelection: _ctx.rowSelection,
                             readonly: __props.readonly,
+                            width: horizontalScrollWidth.value,
                             onScrollDown: onScrollDown
                         }, _createSlots({ _: 2 /* DYNAMIC */ }, [
                             _renderList(_unref(slots), (_, name) => {
@@ -471,12 +506,32 @@ const __sfc_main__ = Object.assign({
                                     ])
                                 };
                             })
-                        ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["dataSource", "columns", "cellHeight", "height", "disableMenu", "rowKey", "groupKey", "openGroup", "rowSelection", "readonly"]),
+                        ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["dataSource", "columns", "cellHeight", "height", "disableMenu", "rowKey", "groupKey", "openGroup", "rowSelection", "readonly", "width"]),
                         _renderSlot(_ctx.$slots, "bodyExtra")
                     ], 4 /* STYLE */),
+                    (showScroll.value)
+                        ? (_openBlock(), _createElementBlock("div", _hoisted_3, [
+                            _createElementVNode("div", {
+                                class: "jetlinks-table-horizontal-scroll-bar",
+                                ref_key: "scrollBarRef",
+                                ref: scrollBarRef,
+                                style: _normalizeStyle({
+                                    width: 'calc(100% - 15px)',
+                                    height: '100%',
+                                    overflowX: 'scroll'
+                                }),
+                                onScroll: onHorizontalScroll
+                            }, [
+                                _createElementVNode("div", {
+                                    style: _normalizeStyle({ minWidth: horizontalScrollWidth.value + 'px', maxWidth: horizontalScrollWidth.value + 'px', height: '100%' })
+                                }, null, 4 /* STYLE */)
+                            ], 36 /* STYLE, NEED_HYDRATION */),
+                            _hoisted_4
+                        ]))
+                        : _createCommentVNode("v-if", true),
                     (_ctx.dataSource.length && _ctx.openGroup)
                         ? (_openBlock(), _createBlock(Group, {
-                            key: 0,
+                            key: 1,
                             activeKey: _unref(groupActive).value,
                             "onUpdate:activeKey": _cache[0] || (_cache[0] = $event => ((_unref(groupActive).value) = $event)),
                             options: _unref(groupOptions),

package/lib/EditTable/Header.js

@@ -23,27 +23,33 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "Sort": "setup-maybe-ref",
   "reactive": "setup-const",
   "defineOptions": "setup-const",
+  "useHScroll": "setup-maybe-ref",
   "useTableTool": "setup-maybe-ref",
+  "HeaderItemRender": "setup-const",
   "props": "setup-reactive-const",
   "tableTool": "setup-maybe-ref",
+  "hScroll": "setup-maybe-ref",
   "searchData": "setup-reactive-const",
   "showFilter": "setup-const",
   "sortClick": "setup-const"
 } */
-import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createBlock as _createBlock, unref as _unref, mergeProps as _mergeProps, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, unref as _unref, mergeProps as _mergeProps, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
 const _hoisted_1 = ["id"];
 const _hoisted_2 = { class: "table-header-cell-title" };
-const _hoisted_3 = {
+const _hoisted_3 = { class: "cell-title-box" };
+const _hoisted_4 = { key: 1 };
+const _hoisted_5 = {
     key: 0,
     class: "header-cell-required"
 };
-const _hoisted_4 = {
+const _hoisted_6 = {
     key: 0,
     class: "table-header-cell-trigger"
 };
 import { SearchModal, Sort } from './components/Search';
 import { reactive, } from 'vue';
-import { useTableTool } from "./hooks";
+import { useHScroll, useTableTool } from "./hooks";
+import HeaderItemRender from './HeaderRender.js';
 const __sfc_main__ = Object.assign({
     name: 'JEditTableHeader'
 }, {
@@ -68,6 +74,7 @@ const __sfc_main__ = Object.assign({
     setup(__props) {
         const props = __props;
         const tableTool = useTableTool();
+        const hScroll = useHScroll();
         const searchData = reactive({
             visible: false,
             key: undefined
@@ -95,13 +102,21 @@ const __sfc_main__ = Object.assign({
                             class: _normalizeClass({ 'jetlinks-edit-table-header-cell-box': true, 'header-cell-box-tool': !!(item.sort || item.filter) })
                         }, [
                             _createElementVNode("div", _hoisted_2, [
-                                _createElementVNode("span", null, _toDisplayString(item.title), 1 /* TEXT */),
+                                _createElementVNode("div", _hoisted_3, [
+                                    (item.render)
+                                        ? (_openBlock(), _createBlock(HeaderItemRender, {
+                                            key: 0,
+                                            "render-fn": item.render,
+                                            value: item.title
+                                        }, null, 8 /* PROPS */, ["render-fn", "value"]))
+                                        : (_openBlock(), _createElementBlock("span", _hoisted_4, _toDisplayString(item.title), 1 /* TEXT */))
+                                ]),
                                 (_optionalChain([item, 'access', _ => _.form, 'optionalAccess', _2 => _2.required]))
-                                    ? (_openBlock(), _createElementBlock("span", _hoisted_3, "*"))
+                                    ? (_openBlock(), _createElementBlock("span", _hoisted_5, "*"))
                                     : _createCommentVNode("v-if", true)
                             ]),
                             (!!(item.sort || item.filter))
-                                ? (_openBlock(), _createElementBlock("div", _hoisted_4, [
+                                ? (_openBlock(), _createElementBlock("div", _hoisted_6, [
                                     (item.filter)
                                         ? (_openBlock(), _createBlock(_component_AIcon, {
                                             key: 0,

package/lib/EditTable/HeaderRender.js

@@ -0,0 +1,12 @@
+/* Analyzed bindings: {} */
+import { defineComponent } from 'vue';
+const __sfc_main__ = defineComponent({
+    name: "HeaderItemRender",
+    props: ['renderFn', 'value'],
+    setup(props) {
+        return () => {
+            return props.renderFn(props.value);
+        };
+    }
+});
+export default __sfc_main__;

package/lib/EditTable/components/Search/sort.js

@@ -42,7 +42,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "onDesc": "setup-const"
 } */
 import { unref as _unref, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, normalizeClass as _normalizeClass, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = n => (_pushScopeId("data-v-1744361871288"), n = n(), _popScopeId(), n);
+const _withScopeId = n => (_pushScopeId("data-v-1744796323717"), n = n(), _popScopeId(), n);
 const _hoisted_1 = { class: "jetlinks-table-sort-content" };
 const _hoisted_2 = { class: "jetlinks-table-sort-title" };
 const _hoisted_3 = { class: "table-sort-body" };

package/lib/EditTable/consts.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TABLE_WRAPPER = exports.TABLE_TOOL = exports.TABLE_OPEN_GROUP = exports.TABLE_GROUP_OPTIONS = exports.TABLE_GROUP_ERROR = exports.TABLE_GROUP_ACTIVE = exports.TABLE_FORM_ITEM_ERROR = exports.TABLE_ERROR = exports.TABLE_DATA_SOURCE = exports.RIGHT_MENU = exports.METADATA_GROUP_OPTIONS = exports.FULL_SCREEN = void 0;
+exports.TABLE_WRAPPER = exports.TABLE_TOOL = exports.TABLE_OPEN_GROUP = exports.TABLE_H_SCROLL = exports.TABLE_GROUP_OPTIONS = exports.TABLE_GROUP_ERROR = exports.TABLE_GROUP_ACTIVE = exports.TABLE_FORM_ITEM_ERROR = exports.TABLE_ERROR = exports.TABLE_DATA_SOURCE = exports.RIGHT_MENU = exports.METADATA_GROUP_OPTIONS = exports.FULL_SCREEN = void 0;
 var METADATA_GROUP_OPTIONS = exports.METADATA_GROUP_OPTIONS = Symbol('metadata-group-options');
 var TABLE_WRAPPER = exports.TABLE_WRAPPER = Symbol('table-wrapper');
 var FULL_SCREEN = exports.FULL_SCREEN = Symbol('full');
@@ -15,4 +15,5 @@ var TABLE_DATA_SOURCE = exports.TABLE_DATA_SOURCE = Symbol('table-data-source');
 var TABLE_OPEN_GROUP = exports.TABLE_OPEN_GROUP = Symbol('table-open-group');
 var TABLE_TOOL = exports.TABLE_TOOL = Symbol('table-tool');
 var TABLE_FORM_ITEM_ERROR = exports.TABLE_FORM_ITEM_ERROR = Symbol('table-form-item-error');
-var TABLE_GROUP_ACTIVE = exports.TABLE_GROUP_ACTIVE = Symbol('table-group-active');
+var TABLE_GROUP_ACTIVE = exports.TABLE_GROUP_ACTIVE = Symbol('table-group-active');
+var TABLE_H_SCROLL = exports.TABLE_H_SCROLL = Symbol('table-h-scroll');

package/lib/EditTable/hooks/index.js

@@ -12,9 +12,10 @@ var _exportNames = {
   useTableDataSource: true,
   useTableTool: true,
   useFormItemError: true,
-  useTableFullScreen: true
+  useTableFullScreen: true,
+  useHScroll: true
 };
-exports.useTableWrapper = exports.useTableTool = exports.useTableFullScreen = exports.useTableDataSource = exports.useRightMenuContext = exports.useInjectForm = exports.useInjectError = exports.useFormItemError = exports.useFormContext = void 0;
+exports.useTableWrapper = exports.useTableTool = exports.useTableFullScreen = exports.useTableDataSource = exports.useRightMenuContext = exports.useInjectForm = exports.useInjectError = exports.useHScroll = exports.useFormItemError = exports.useFormContext = void 0;
 var _vue = require("vue");
 var _consts = require("../consts");
 var _useResizeObserver = require("./useResizeObserver");
@@ -88,4 +89,7 @@ var useFormItemError = exports.useFormItemError = function useFormItemError() {
 };
 var useTableFullScreen = exports.useTableFullScreen = function useTableFullScreen() {
   return (0, _vue.inject)(_consts.FULL_SCREEN);
+};
+var useHScroll = exports.useHScroll = function useHScroll() {
+  return (0, _vue.inject)(_consts.TABLE_H_SCROLL);
 };

package/lib/EditTable/props.js

@@ -46,7 +46,7 @@ var bodyProps = exports.bodyProps = function bodyProps() {
     },
     cellHeight: {
       type: Number,
-      default: 50
+      default: 65
     },
     height: {
       type: Number,

package/lib/EditTable/style/body.less

@@ -25,7 +25,6 @@
 
     .jetlinks-edit-table-row {
       width: 100%;
-      display: flex;
       align-items: center;
       transition: top .2s, height .2s, background-color .1s;
       border-bottom: 1px solid #ebebeb;

package/lib/EditTable/style/header.less

@@ -26,6 +26,11 @@
         display: flex;
         align-items: center;
         font-weight: 600;
+        gap: 4px;
+
+        .cell-title-box {
+          flex: 1 1 auto;
+        }
       }
 
       .header-cell-required {

package/lib/EditTable/style/index.css

@@ -17,6 +17,7 @@
   flex-shrink: 0;
   background: #fafafa;
   transition: background-color 0.3s ease;
+  overflow: auto hidden;
 }
 .jetlinks-edit-table-wrapper .jetlinks-edit-table .jetlinks-edit-table-header {
   overflow: hidden;
@@ -31,6 +32,17 @@
   flex: 1 1 auto;
   flex-direction: row;
 }
+.jetlinks-edit-table-wrapper .jetlinks-edit-table .jetlinks-table-horizontal-scroll {
+  width: 100%;
+  height: 10px;
+  min-height: 10px;
+  max-height: 10px;
+  display: flex;
+}
+.jetlinks-edit-table-wrapper .jetlinks-edit-table .jetlinks-table-horizontal-scroll .jetlinks-table-horizontal-scroll-bar {
+  height: 100%;
+  overflow-x: scroll;
+}
 .jetlinks-edit-table-body-viewport {
   max-height: 100%;
   width: 100%;
@@ -56,7 +68,6 @@
 }
 .jetlinks-edit-table-body-viewport .jetlinks-edit-table-center .jetlinks-edit-table-row {
   width: 100%;
-  display: flex;
   align-items: center;
   transition: top 0.2s, height 0.2s, background-color 0.1s;
   border-bottom: 1px solid #ebebeb;
@@ -116,6 +127,10 @@
   display: flex;
   align-items: center;
   font-weight: 600;
+  gap: 4px;
+}
+.jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell .jetlinks-edit-table-header-cell-box .table-header-cell-title .cell-title-box {
+  flex: 1 1 auto;
 }
 .jetlinks-edit-table-header-container .jetlinks-edit-table-header-cell .jetlinks-edit-table-header-cell-box .header-cell-required {
   color: #ff4d4f;

package/lib/EditTable/style/table.less

@@ -14,6 +14,7 @@
     flex-shrink: 0;
     background: #fafafa;
     transition: background-color .3s ease;
+    overflow: auto hidden;
 
     .jetlinks-edit-table-header {
       overflow: hidden;
@@ -29,5 +30,18 @@
       flex: 1 1 auto;
       flex-direction: row;
     }
+
+    .jetlinks-table-horizontal-scroll {
+      width: 100%;
+      height: 10px;
+      min-height: 10px;
+      max-height: 10px;
+      display: flex;
+
+      .jetlinks-table-horizontal-scroll-bar {
+        height: 100%;
+        overflow-x: scroll;
+      }
+    }
   }
 }

package/lib/EditTable/utils.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isFullScreen = exports.handlePureRecord = exports.handleColumnsWidth = exports.collectValidateRules = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _lodashEs = require("lodash");
 /**
  * 规则收集器，收集columns中的rules和watch
@@ -30,7 +28,8 @@ var handlePureRecord = exports.handlePureRecord = function handlePureRecord(reco
   return (0, _lodashEs.omit)(record, ['__serial', '__index', '__top', '__selected', '__key', '__dataIndex']);
 };
 var handleColumnsWidth = exports.handleColumnsWidth = function handleColumnsWidth(columns, warpWidth) {
-  var newColumns = (0, _toConsumableArray2.default)(columns);
+  // let newColumns = [...columns]
+  var newColumns = (0, _lodashEs.cloneDeep)(columns);
   var noWidthLen = 0; // 没有width属性的长度
   var hasWidthCount = 0; // 有width属性的合计
   var average = 0; // 每个column宽度

package/lib/FullPage/FullPage.js

@@ -9,7 +9,7 @@
 } */
 import { defineComponent as _defineComponent } from 'vue';
 import { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = n => (_pushScopeId("data-v-1744361869027"), n = n(), _popScopeId(), n);
+const _withScopeId = n => (_pushScopeId("data-v-1744796320097"), n = n(), _popScopeId(), n);
 const _hoisted_1 = { class: "full-page-warp-content" };
 import { ref, inject } from 'vue';
 import { useElementBounding } from '@vueuse/core';