jnpf-web-vue3/node_modules/ant-design-vue/lib/vc-table/Table.js

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.INTERNAL_HOOKS = void 0;
var _vue = require("vue");
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _Header = _interopRequireDefault(require("./Header/Header"));
var _Body = _interopRequireDefault(require("./Body"));
var _useColumns = _interopRequireDefault(require("./hooks/useColumns"));
var _useFrame = require("./hooks/useFrame");
var _valueUtil = require("./utils/valueUtil");
var _useStickyOffsets = _interopRequireDefault(require("./hooks/useStickyOffsets"));
var _ColGroup = _interopRequireDefault(require("./ColGroup"));
var _Panel = _interopRequireDefault(require("./Panel"));
var _Footer = _interopRequireDefault(require("./Footer"));
var _expandUtil = require("./utils/expandUtil");
var _fixUtil = require("./utils/fixUtil");
var _stickyScrollBar = _interopRequireDefault(require("./stickyScrollBar"));
var _useSticky = _interopRequireDefault(require("./hooks/useSticky"));
var _FixedHolder = _interopRequireDefault(require("./FixedHolder"));
var _warning = require("../vc-util/warning");
var _reactivePick = require("../_util/reactivePick");
var _useState = _interopRequireDefault(require("../_util/hooks/useState"));
var _util = require("../_util/util");
var _isVisible = _interopRequireDefault(require("../vc-util/Dom/isVisible"));
var _getScrollBarSize = require("../_util/getScrollBarSize");
var _classNames = _interopRequireDefault(require("../_util/classNames"));
var _vcResizeObserver = _interopRequireDefault(require("../vc-resize-observer"));
var _TableContext = require("./context/TableContext");
var _BodyContext = require("./context/BodyContext");
var _ResizeContext = require("./context/ResizeContext");
var _StickyContext = require("./context/StickyContext");
var _pickAttrs = _interopRequireDefault(require("../_util/pickAttrs"));
var _ExpandedRowContext = require("./context/ExpandedRowContext");
// Used for conditions cache
const EMPTY_DATA = [];
// Used for customize scroll
const EMPTY_SCROLL_TARGET = {};
const INTERNAL_HOOKS = exports.INTERNAL_HOOKS = 'rc-table-internal-hook';
var _default = exports.default = (0, _vue.defineComponent)({
  name: 'VcTable',
  inheritAttrs: false,
  props: ['prefixCls', 'data', 'columns', 'rowKey', 'tableLayout', 'scroll', 'rowClassName', 'title', 'footer', 'id', 'showHeader', 'components', 'customRow', 'customHeaderRow', 'direction', 'expandFixed', 'expandColumnWidth', 'expandedRowKeys', 'defaultExpandedRowKeys', 'expandedRowRender', 'expandRowByClick', 'expandIcon', 'onExpand', 'onExpandedRowsChange', 'onUpdate:expandedRowKeys', 'defaultExpandAllRows', 'indentSize', 'expandIconColumnIndex', 'expandedRowClassName', 'childrenColumnName', 'rowExpandable', 'sticky', 'transformColumns', 'internalHooks', 'internalRefs', 'canExpandable', 'onUpdateInternalRefs', 'transformCellText'],
  emits: ['expand', 'expandedRowsChange', 'updateInternalRefs', 'update:expandedRowKeys'],
  setup(props, _ref) {
    let {
      attrs,
      slots,
      emit
    } = _ref;
    const mergedData = (0, _vue.computed)(() => props.data || EMPTY_DATA);
    const hasData = (0, _vue.computed)(() => !!mergedData.value.length);
    // ==================== Customize =====================
    const mergedComponents = (0, _vue.computed)(() => (0, _valueUtil.mergeObject)(props.components, {}));
    const getComponent = (path, defaultComponent) => (0, _valueUtil.getPathValue)(mergedComponents.value, path) || defaultComponent;
    const getRowKey = (0, _vue.computed)(() => {
      const rowKey = props.rowKey;
      if (typeof rowKey === 'function') {
        return rowKey;
      }
      return record => {
        const key = record && record[rowKey];
        if (process.env.NODE_ENV !== 'production') {
          (0, _warning.warning)(key !== undefined, 'Each record in table should have a unique `key` prop, or set `rowKey` to an unique primary key.');
        }
        return key;
      };
    });
    // ====================== Expand ======================
    const mergedExpandIcon = (0, _vue.computed)(() => props.expandIcon || _expandUtil.renderExpandIcon);
    const mergedChildrenColumnName = (0, _vue.computed)(() => props.childrenColumnName || 'children');
    const expandableType = (0, _vue.computed)(() => {
      if (props.expandedRowRender) {
        return 'row';
      }
      /* eslint-disable no-underscore-dangle */
      /**
       * Fix https://github.com/ant-design/ant-design/issues/21154
       * This is a workaround to not to break current behavior.
       * We can remove follow code after final release.
       *
       * To other developer:
       *  Do not use `__PARENT_RENDER_ICON__` in prod since we will remove this when refactor
       */
      if (props.canExpandable || mergedData.value.some(record => record && typeof record === 'object' && record[mergedChildrenColumnName.value])) {
        return 'nest';
      }
      /* eslint-enable */
      return false;
    });
    const innerExpandedKeys = (0, _vue.shallowRef)([]);
    const stop = (0, _vue.watchEffect)(() => {
      if (props.defaultExpandedRowKeys) {
        innerExpandedKeys.value = props.defaultExpandedRowKeys;
      }
      if (props.defaultExpandAllRows) {
        innerExpandedKeys.value = (0, _expandUtil.findAllChildrenKeys)(mergedData.value, getRowKey.value, mergedChildrenColumnName.value);
      }
    });
    // defalutXxxx 仅仅第一次生效
    stop();
    const mergedExpandedKeys = (0, _vue.computed)(() => new Set(props.expandedRowKeys || innerExpandedKeys.value || []));
    const onTriggerExpand = record => {
      const key = getRowKey.value(record, mergedData.value.indexOf(record));
      let newExpandedKeys;
      const hasKey = mergedExpandedKeys.value.has(key);
      if (hasKey) {
        mergedExpandedKeys.value.delete(key);
        newExpandedKeys = [...mergedExpandedKeys.value];
      } else {
        newExpandedKeys = [...mergedExpandedKeys.value, key];
      }
      innerExpandedKeys.value = newExpandedKeys;
      emit('expand', !hasKey, record);
      emit('update:expandedRowKeys', newExpandedKeys);
      emit('expandedRowsChange', newExpandedKeys);
    };
    // Warning if use `expandedRowRender` and nest children in the same time
    if (process.env.NODE_ENV !== 'production' && props.expandedRowRender && mergedData.value.some(record => {
      return Array.isArray(record === null || record === void 0 ? void 0 : record[mergedChildrenColumnName.value]);
    })) {
      (0, _warning.warning)(false, '`expandedRowRender` should not use with nested Table');
    }
    const componentWidth = (0, _vue.ref)(0);
    const [columns, flattenColumns] = (0, _useColumns.default)((0, _extends2.default)((0, _extends2.default)({}, (0, _vue.toRefs)(props)), {
      // children,
      expandable: (0, _vue.computed)(() => !!props.expandedRowRender),
      expandedKeys: mergedExpandedKeys,
      getRowKey,
      onTriggerExpand,
      expandIcon: mergedExpandIcon
    }), (0, _vue.computed)(() => props.internalHooks === INTERNAL_HOOKS ? props.transformColumns : null));
    const columnContext = (0, _vue.computed)(() => ({
      columns: columns.value,
      flattenColumns: flattenColumns.value
    }));
    // ====================== Scroll ======================
    const fullTableRef = (0, _vue.ref)();
    const scrollHeaderRef = (0, _vue.ref)();
    const scrollBodyRef = (0, _vue.ref)();
    const scrollBodySizeInfo = (0, _vue.ref)({
      scrollWidth: 0,
      clientWidth: 0
    });
    const scrollSummaryRef = (0, _vue.ref)();
    const [pingedLeft, setPingedLeft] = (0, _useState.default)(false);
    const [pingedRight, setPingedRight] = (0, _useState.default)(false);
    const [colsWidths, updateColsWidths] = (0, _useFrame.useLayoutState)(new Map());
    // Convert map to number width
    const colsKeys = (0, _vue.computed)(() => (0, _valueUtil.getColumnsKey)(flattenColumns.value));
    const colWidths = (0, _vue.computed)(() => colsKeys.value.map(columnKey => colsWidths.value.get(columnKey)));
    const columnCount = (0, _vue.computed)(() => flattenColumns.value.length);
    const stickyOffsets = (0, _useStickyOffsets.default)(colWidths, columnCount, (0, _vue.toRef)(props, 'direction'));
    const fixHeader = (0, _vue.computed)(() => props.scroll && (0, _valueUtil.validateValue)(props.scroll.y));
    const horizonScroll = (0, _vue.computed)(() => props.scroll && (0, _valueUtil.validateValue)(props.scroll.x) || Boolean(props.expandFixed));
    const fixColumn = (0, _vue.computed)(() => horizonScroll.value && flattenColumns.value.some(_ref2 => {
      let {
        fixed
      } = _ref2;
      return fixed;
    }));
    // Sticky
    const stickyRef = (0, _vue.ref)();
    const stickyState = (0, _useSticky.default)((0, _vue.toRef)(props, 'sticky'), (0, _vue.toRef)(props, 'prefixCls'));
    const summaryFixedInfos = (0, _vue.reactive)({});
    const fixFooter = (0, _vue.computed)(() => {
      const info = Object.values(summaryFixedInfos)[0];
      return (fixHeader.value || stickyState.value.isSticky) && info;
    });
    const summaryCollect = (uniKey, fixed) => {
      if (fixed) {
        summaryFixedInfos[uniKey] = fixed;
      } else {
        delete summaryFixedInfos[uniKey];
      }
    };
    // Scroll
    const scrollXStyle = (0, _vue.ref)({});
    const scrollYStyle = (0, _vue.ref)({});
    const scrollTableStyle = (0, _vue.ref)({});
    (0, _vue.watchEffect)(() => {
      if (fixHeader.value) {
        scrollYStyle.value = {
          overflowY: 'scroll',
          maxHeight: (0, _util.toPx)(props.scroll.y)
        };
      }
      if (horizonScroll.value) {
        scrollXStyle.value = {
          overflowX: 'auto'
        };
        // When no vertical scrollbar, should hide it
        // https://github.com/ant-design/ant-design/pull/20705
        // https://github.com/ant-design/ant-design/issues/21879
        if (!fixHeader.value) {
          scrollYStyle.value = {
            overflowY: 'hidden'
          };
        }
        scrollTableStyle.value = {
          width: props.scroll.x === true ? 'auto' : (0, _util.toPx)(props.scroll.x),
          minWidth: '100%'
        };
      }
    });
    const onColumnResize = (columnKey, width) => {
      if ((0, _isVisible.default)(fullTableRef.value)) {
        updateColsWidths(widths => {
          if (widths.get(columnKey) !== width) {
            const newWidths = new Map(widths);
            newWidths.set(columnKey, width);
            return newWidths;
          }
          return widths;
        });
      }
    };
    const [setScrollTarget, getScrollTarget] = (0, _useFrame.useTimeoutLock)(null);
    function forceScroll(scrollLeft, target) {
      if (!target) {
        return;
      }
      if (typeof target === 'function') {
        target(scrollLeft);
        return;
      }
      const domTarget = target.$el || target;
      if (domTarget.scrollLeft !== scrollLeft) {
        // eslint-disable-next-line no-param-reassign
        domTarget.scrollLeft = scrollLeft;
      }
    }
    const onScroll = _ref3 => {
      let {
        currentTarget,
        scrollLeft
      } = _ref3;
      var _a;
      const isRTL = props.direction === 'rtl';
      const mergedScrollLeft = typeof scrollLeft === 'number' ? scrollLeft : currentTarget.scrollLeft;
      const compareTarget = currentTarget || EMPTY_SCROLL_TARGET;
      if (!getScrollTarget() || getScrollTarget() === compareTarget) {
        setScrollTarget(compareTarget);
        forceScroll(mergedScrollLeft, scrollHeaderRef.value);
        forceScroll(mergedScrollLeft, scrollBodyRef.value);
        forceScroll(mergedScrollLeft, scrollSummaryRef.value);
        forceScroll(mergedScrollLeft, (_a = stickyRef.value) === null || _a === void 0 ? void 0 : _a.setScrollLeft);
      }
      if (currentTarget) {
        const {
          scrollWidth,
          clientWidth
        } = currentTarget;
        if (isRTL) {
          setPingedLeft(-mergedScrollLeft < scrollWidth - clientWidth);
          setPingedRight(-mergedScrollLeft > 0);
        } else {
          setPingedLeft(mergedScrollLeft > 0);
          setPingedRight(mergedScrollLeft < scrollWidth - clientWidth);
        }
      }
    };
    const triggerOnScroll = () => {
      if (horizonScroll.value && scrollBodyRef.value) {
        onScroll({
          currentTarget: scrollBodyRef.value
        });
      } else {
        setPingedLeft(false);
        setPingedRight(false);
      }
    };
    let timtout;
    const updateWidth = width => {
      if (width !== componentWidth.value) {
        triggerOnScroll();
        componentWidth.value = fullTableRef.value ? fullTableRef.value.offsetWidth : width;
      }
    };
    const onFullTableResize = _ref4 => {
      let {
        width
      } = _ref4;
      clearTimeout(timtout);
      if (componentWidth.value === 0) {
        updateWidth(width);
        return;
      }
      timtout = setTimeout(() => {
        updateWidth(width);
      }, 100);
    };
    (0, _vue.watch)([horizonScroll, () => props.data, () => props.columns], () => {
      if (horizonScroll.value) {
        triggerOnScroll();
      }
    }, {
      flush: 'post'
    });
    const [scrollbarSize, setScrollbarSize] = (0, _useState.default)(0);
    (0, _StickyContext.useProvideSticky)();
    (0, _vue.onMounted)(() => {
      (0, _vue.nextTick)(() => {
        var _a, _b;
        triggerOnScroll();
        setScrollbarSize((0, _getScrollBarSize.getTargetScrollBarSize)(scrollBodyRef.value).width);
        scrollBodySizeInfo.value = {
          scrollWidth: ((_a = scrollBodyRef.value) === null || _a === void 0 ? void 0 : _a.scrollWidth) || 0,
          clientWidth: ((_b = scrollBodyRef.value) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0
        };
      });
    });
    (0, _vue.onUpdated)(() => {
      (0, _vue.nextTick)(() => {
        var _a, _b;
        const scrollWidth = ((_a = scrollBodyRef.value) === null || _a === void 0 ? void 0 : _a.scrollWidth) || 0;
        const clientWidth = ((_b = scrollBodyRef.value) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0;
        if (scrollBodySizeInfo.value.scrollWidth !== scrollWidth || scrollBodySizeInfo.value.clientWidth !== clientWidth) {
          scrollBodySizeInfo.value = {
            scrollWidth,
            clientWidth
          };
        }
      });
    });
    (0, _vue.watchEffect)(() => {
      if (props.internalHooks === INTERNAL_HOOKS && props.internalRefs) {
        props.onUpdateInternalRefs({
          body: scrollBodyRef.value ? scrollBodyRef.value.$el || scrollBodyRef.value : null
        });
      }
    }, {
      flush: 'post'
    });
    // Table layout
    const mergedTableLayout = (0, _vue.computed)(() => {
      if (props.tableLayout) {
        return props.tableLayout;
      }
      // https://github.com/ant-design/ant-design/issues/25227
      // When scroll.x is max-content, no need to fix table layout
      // it's width should stretch out to fit content
      if (fixColumn.value) {
        return props.scroll.x === 'max-content' ? 'auto' : 'fixed';
      }
      if (fixHeader.value || stickyState.value.isSticky || flattenColumns.value.some(_ref5 => {
        let {
          ellipsis
        } = _ref5;
        return ellipsis;
      })) {
        return 'fixed';
      }
      return 'auto';
    });
    const emptyNode = () => {
      var _a;
      return hasData.value ? null : ((_a = slots.emptyText) === null || _a === void 0 ? void 0 : _a.call(slots)) || 'No Data';
    };
    (0, _TableContext.useProvideTable)((0, _vue.reactive)((0, _extends2.default)((0, _extends2.default)({}, (0, _vue.toRefs)((0, _reactivePick.reactivePick)(props, 'prefixCls', 'direction', 'transformCellText'))), {
      getComponent,
      scrollbarSize,
      fixedInfoList: (0, _vue.computed)(() => flattenColumns.value.map((_, colIndex) => (0, _fixUtil.getCellFixedInfo)(colIndex, colIndex, flattenColumns.value, stickyOffsets.value, props.direction))),
      isSticky: (0, _vue.computed)(() => stickyState.value.isSticky),
      summaryCollect
    })));
    (0, _BodyContext.useProvideBody)((0, _vue.reactive)((0, _extends2.default)((0, _extends2.default)({}, (0, _vue.toRefs)((0, _reactivePick.reactivePick)(props, 'rowClassName', 'expandedRowClassName', 'expandRowByClick', 'expandedRowRender', 'expandIconColumnIndex', 'indentSize'))), {
      columns,
      flattenColumns,
      tableLayout: mergedTableLayout,
      expandIcon: mergedExpandIcon,
      expandableType,
      onTriggerExpand
    })));
    (0, _ResizeContext.useProvideResize)({
      onColumnResize
    });
    (0, _ExpandedRowContext.useProvideExpandedRow)({
      componentWidth,
      fixHeader,
      fixColumn,
      horizonScroll
    });
    // Body
    const bodyTable = () => (0, _vue.createVNode)(_Body.default, {
      "data": mergedData.value,
      "measureColumnWidth": fixHeader.value || horizonScroll.value || stickyState.value.isSticky,
      "expandedKeys": mergedExpandedKeys.value,
      "rowExpandable": props.rowExpandable,
      "getRowKey": getRowKey.value,
      "customRow": props.customRow,
      "childrenColumnName": mergedChildrenColumnName.value
    }, {
      emptyNode
    });
    const bodyColGroup = () => (0, _vue.createVNode)(_ColGroup.default, {
      "colWidths": flattenColumns.value.map(_ref6 => {
        let {
          width
        } = _ref6;
        return width;
      }),
      "columns": flattenColumns.value
    }, null);
    return () => {
      var _a;
      const {
        prefixCls,
        scroll,
        tableLayout,
        direction,
        // Additional Part
        title = slots.title,
        footer = slots.footer,
        // Customize
        id,
        showHeader,
        customHeaderRow
      } = props;
      const {
        isSticky,
        offsetHeader,
        offsetSummary,
        offsetScroll,
        stickyClassName,
        container
      } = stickyState.value;
      const TableComponent = getComponent(['table'], 'table');
      const customizeScrollBody = getComponent(['body']);
      const summaryNode = (_a = slots.summary) === null || _a === void 0 ? void 0 : _a.call(slots, {
        pageData: mergedData.value
      });
      let groupTableNode = () => null;
      // Header props
      const headerProps = {
        colWidths: colWidths.value,
        columCount: flattenColumns.value.length,
        stickyOffsets: stickyOffsets.value,
        customHeaderRow,
        fixHeader: fixHeader.value,
        scroll
      };
      if (process.env.NODE_ENV !== 'production' && typeof customizeScrollBody === 'function' && hasData.value && !fixHeader.value) {
        (0, _warning.warning)(false, '`components.body` with render props is only work on `scroll.y`.');
      }
      if (fixHeader.value || isSticky) {
        // >>>>>> Fixed Header
        let bodyContent = () => null;
        if (typeof customizeScrollBody === 'function') {
          bodyContent = () => customizeScrollBody(mergedData.value, {
            scrollbarSize: scrollbarSize.value,
            ref: scrollBodyRef,
            onScroll
          });
          headerProps.colWidths = flattenColumns.value.map((_ref7, index) => {
            let {
              width
            } = _ref7;
            const colWidth = index === columns.value.length - 1 ? width - scrollbarSize.value : width;
            if (typeof colWidth === 'number' && !Number.isNaN(colWidth)) {
              return colWidth;
            }
            (0, _warning.warning)(false, 'When use `components.body` with render props. Each column should have a fixed `width` value.');
            return 0;
          });
        } else {
          bodyContent = () => (0, _vue.createVNode)("div", {
            "style": (0, _extends2.default)((0, _extends2.default)({}, scrollXStyle.value), scrollYStyle.value),
            "onScroll": onScroll,
            "ref": scrollBodyRef,
            "class": (0, _classNames.default)(`${prefixCls}-body`)
          }, [(0, _vue.createVNode)(TableComponent, {
            "style": (0, _extends2.default)((0, _extends2.default)({}, scrollTableStyle.value), {
              tableLayout: mergedTableLayout.value
            })
          }, {
            default: () => [bodyColGroup(), bodyTable(), !fixFooter.value && summaryNode && (0, _vue.createVNode)(_Footer.default, {
              "stickyOffsets": stickyOffsets.value,
              "flattenColumns": flattenColumns.value
            }, {
              default: () => [summaryNode]
            })]
          })]);
        }
        // Fixed holder share the props
        const fixedHolderProps = (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
          noData: !mergedData.value.length,
          maxContentScroll: horizonScroll.value && scroll.x === 'max-content'
        }, headerProps), columnContext.value), {
          direction,
          stickyClassName,
          onScroll
        });
        groupTableNode = () => (0, _vue.createVNode)(_vue.Fragment, null, [showHeader !== false && (0, _vue.createVNode)(_FixedHolder.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, fixedHolderProps), {}, {
          "stickyTopOffset": offsetHeader,
          "class": `${prefixCls}-header`,
          "ref": scrollHeaderRef
        }), {
          default: fixedHolderPassProps => (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)(_Header.default, fixedHolderPassProps, null), fixFooter.value === 'top' && (0, _vue.createVNode)(_Footer.default, fixedHolderPassProps, {
            default: () => [summaryNode]
          })])
        }), bodyContent(), fixFooter.value && fixFooter.value !== 'top' && (0, _vue.createVNode)(_FixedHolder.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, fixedHolderProps), {}, {
          "stickyBottomOffset": offsetSummary,
          "class": `${prefixCls}-summary`,
          "ref": scrollSummaryRef
        }), {
          default: fixedHolderPassProps => (0, _vue.createVNode)(_Footer.default, fixedHolderPassProps, {
            default: () => [summaryNode]
          })
        }), isSticky && scrollBodyRef.value && (0, _vue.createVNode)(_stickyScrollBar.default, {
          "ref": stickyRef,
          "offsetScroll": offsetScroll,
          "scrollBodyRef": scrollBodyRef,
          "onScroll": onScroll,
          "container": container,
          "scrollBodySizeInfo": scrollBodySizeInfo.value
        }, null)]);
      } else {
        // >>>>>> Unique table
        groupTableNode = () => (0, _vue.createVNode)("div", {
          "style": (0, _extends2.default)((0, _extends2.default)({}, scrollXStyle.value), scrollYStyle.value),
          "class": (0, _classNames.default)(`${prefixCls}-content`),
          "onScroll": onScroll,
          "ref": scrollBodyRef
        }, [(0, _vue.createVNode)(TableComponent, {
          "style": (0, _extends2.default)((0, _extends2.default)({}, scrollTableStyle.value), {
            tableLayout: mergedTableLayout.value
          })
        }, {
          default: () => [bodyColGroup(), showHeader !== false && (0, _vue.createVNode)(_Header.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, headerProps), columnContext.value), null), bodyTable(), summaryNode && (0, _vue.createVNode)(_Footer.default, {
            "stickyOffsets": stickyOffsets.value,
            "flattenColumns": flattenColumns.value
          }, {
            default: () => [summaryNode]
          })]
        })]);
      }
      const ariaProps = (0, _pickAttrs.default)(attrs, {
        aria: true,
        data: true
      });
      const fullTable = () => (0, _vue.createVNode)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, ariaProps), {}, {
        "class": (0, _classNames.default)(prefixCls, {
          [`${prefixCls}-rtl`]: direction === 'rtl',
          [`${prefixCls}-ping-left`]: pingedLeft.value,
          [`${prefixCls}-ping-right`]: pingedRight.value,
          [`${prefixCls}-layout-fixed`]: tableLayout === 'fixed',
          [`${prefixCls}-fixed-header`]: fixHeader.value,
          /** No used but for compatible */
          [`${prefixCls}-fixed-column`]: fixColumn.value,
          [`${prefixCls}-scroll-horizontal`]: horizonScroll.value,
          [`${prefixCls}-has-fix-left`]: flattenColumns.value[0] && flattenColumns.value[0].fixed,
          [`${prefixCls}-has-fix-right`]: flattenColumns.value[columnCount.value - 1] && flattenColumns.value[columnCount.value - 1].fixed === 'right',
          [attrs.class]: attrs.class
        }),
        "style": attrs.style,
        "id": id,
        "ref": fullTableRef
      }), [title && (0, _vue.createVNode)(_Panel.default, {
        "class": `${prefixCls}-title`
      }, {
        default: () => [title(mergedData.value)]
      }), (0, _vue.createVNode)("div", {
        "class": `${prefixCls}-container`
      }, [groupTableNode()]), footer && (0, _vue.createVNode)(_Panel.default, {
        "class": `${prefixCls}-footer`
      }, {
        default: () => [footer(mergedData.value)]
      })]);
      if (horizonScroll.value) {
        return (0, _vue.createVNode)(_vcResizeObserver.default, {
          "onResize": onFullTableResize
        }, {
          default: fullTable
        });
      }
      return fullTable();
    };
  }
});