@antsoo-lib/components 0.1.11 → 0.1.13

package/src/vc-table/Table.tsx

@@ -1,865 +0,0 @@
-import type { CSSProperties } from 'vue'
-import {
-  computed,
-  defineComponent,
-  nextTick,
-  onMounted,
-  onUpdated,
-  reactive,
-  ref,
-  shallowRef,
-  toRef,
-  toRefs,
-  watch,
-  watchEffect,
-} from 'vue'
-
-import type { EventHandler } from '../_util/EventInterface'
-import classNames from '../_util/classNames'
-import { getTargetScrollBarSize } from '../_util/getScrollBarSize'
-import useState from '../_util/hooks/useState'
-import pickAttrs from '../_util/pickAttrs'
-import { reactivePick } from '../_util/reactivePick'
-import { toPx } from '../_util/util'
-import VCResizeObserver from '../vc-resize-observer'
-import isVisible from '../vc-util/Dom/isVisible'
-import { warning } from '../vc-util/warning'
-import Body from './Body'
-import ColGroup from './ColGroup'
-import FixedHolder from './FixedHolder'
-import Footer from './Footer'
-import Header from './Header/Header'
-import Panel from './Panel'
-import { useProvideBody } from './context/BodyContext'
-import { useProvideExpandedRow } from './context/ExpandedRowContext'
-import { useProvideResize } from './context/ResizeContext'
-import { useProvideSticky } from './context/StickyContext'
-import { useProvideTable } from './context/TableContext'
-import useColumns from './hooks/useColumns'
-import { useLayoutState, useTimeoutLock } from './hooks/useFrame'
-import useSticky from './hooks/useSticky'
-import useStickyOffsets from './hooks/useStickyOffsets'
-import type {
-  ColumnType,
-  ColumnsType,
-  CustomizeComponent,
-  CustomizeScrollBody,
-  DefaultRecordType,
-  ExpandedRowRender,
-  GetComponentProps,
-  GetRowKey,
-  Key,
-  PanelRender,
-  RenderExpandIcon,
-  RowClassName,
-  TableComponents,
-  TableLayout,
-  TableSticky,
-  TransformCellText,
-  TriggerEventHandler,
-} from './interface'
-import StickyScrollBar from './stickyScrollBar'
-import { findAllChildrenKeys, renderExpandIcon } from './utils/expandUtil'
-import { getCellFixedInfo } from './utils/fixUtil'
-import { getColumnsKey, getPathValue, mergeObject, validateValue } from './utils/valueUtil'
-
-// Used for conditions cache
-const EMPTY_DATA = []
-
-// Used for customize scroll
-const EMPTY_SCROLL_TARGET = {}
-
-export const INTERNAL_HOOKS = 'rc-table-internal-hook'
-
-export interface TableProps<RecordType = DefaultRecordType> {
-  prefixCls?: string
-  data?: RecordType[]
-  columns?: ColumnsType<RecordType>
-  rowKey?: string | GetRowKey<RecordType>
-  tableLayout?: TableLayout
-
-  // Fixed Columns
-  scroll?: { x?: number | true | string; y?: number | string }
-
-  rowClassName?: string | RowClassName<RecordType>
-
-  // Additional Part
-  title?: PanelRender<RecordType>
-  footer?: PanelRender<RecordType>
-  // summary?: (data: readonly RecordType[]) => any;
-
-  // Customize
-  id?: string
-  showHeader?: boolean
-  components?: TableComponents<RecordType>
-  customRow?: GetComponentProps<RecordType>
-  customHeaderRow?: GetComponentProps<ColumnType<RecordType>[]>
-  // emptyText?: any;
-
-  direction?: 'ltr' | 'rtl'
-
-  // Expandable
-  expandFixed?: 'left' | 'right' | boolean
-  expandColumnWidth?: number
-  expandedRowKeys?: Key[]
-  defaultExpandedRowKeys?: Key[]
-  expandedRowRender?: ExpandedRowRender<RecordType>
-  expandRowByClick?: boolean
-  expandIcon?: RenderExpandIcon<RecordType>
-  onExpand?: (expanded: boolean, record: RecordType) => void
-  onExpandedRowsChange?: (expandedKeys: Key[]) => void
-  defaultExpandAllRows?: boolean
-  indentSize?: number
-  expandIconColumnIndex?: number
-  showExpandColumn?: boolean
-  expandedRowClassName?: RowClassName<RecordType>
-  childrenColumnName?: string
-  rowExpandable?: (record: RecordType) => boolean
-
-  // =================================== Internal ===================================
-  /**
-   * @private
-   *
-   * !!! DO NOT USE IN PRODUCTION ENVIRONMENT !!!
-   */
-  internalHooks?: string
-
-  /**
-   * @private
-   *
-   * !!! DO NOT USE IN PRODUCTION ENVIRONMENT !!!
-   */
-  // Used for antd table transform column with additional column
-  transformColumns?: (columns: ColumnsType<RecordType>) => ColumnsType<RecordType>
-
-  /**
-   * @private
-   *
-   * !!! DO NOT USE IN PRODUCTION ENVIRONMENT !!!
-   */
-  internalRefs?: {
-    body: HTMLDivElement
-  }
-
-  sticky?: boolean | TableSticky
-
-  canExpandable?: boolean
-
-  onUpdateInternalRefs?: (refs: Record<string, any>) => void
-
-  transformCellText?: TransformCellText<RecordType>
-}
-
-export default 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, { attrs, slots, emit }) {
-    const mergedData = computed(() => props.data || EMPTY_DATA)
-    const hasData = computed(() => !!mergedData.value.length)
-    // ==================== Customize =====================
-    const mergedComponents = computed(() => mergeObject<TableComponents<any>>(props.components, {}))
-
-    const getComponent = (path, defaultComponent?: string) =>
-      getPathValue<CustomizeComponent, TableComponents<any>>(mergedComponents.value, path) ||
-      defaultComponent
-
-    const getRowKey = computed(() => {
-      const rowKey = props.rowKey
-      if (typeof rowKey === 'function') {
-        return rowKey
-      }
-      return (record) => {
-        const key = record && record[rowKey]
-
-        if (process.env.NODE_ENV !== 'production') {
-          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 = computed(() => props.expandIcon || renderExpandIcon)
-
-    const mergedChildrenColumnName = computed(() => props.childrenColumnName || 'children')
-
-    const expandableType = computed(() => {
-      if (props.expandedRowRender) {
-        return 'row'
-      }
-
-      /**
-       * 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'
-      }
-
-      return false
-    })
-
-    const innerExpandedKeys = shallowRef([])
-    const stop = watchEffect(() => {
-      if (props.defaultExpandedRowKeys) {
-        innerExpandedKeys.value = props.defaultExpandedRowKeys
-      }
-      if (props.defaultExpandAllRows) {
-        innerExpandedKeys.value = findAllChildrenKeys(
-          mergedData.value,
-          getRowKey.value,
-          mergedChildrenColumnName.value,
-        )
-      }
-    })
-    // defalutXxxx 仅仅第一次生效
-    stop()
-
-    const mergedExpandedKeys = computed<Set<Key>>(
-      () => new Set(props.expandedRowKeys || innerExpandedKeys.value || []),
-    )
-
-    const onTriggerExpand: TriggerEventHandler<any> = (record) => {
-      const key = getRowKey.value(record, mergedData.value.indexOf(record))
-
-      let newExpandedKeys: Key[]
-      const hasKey = mergedExpandedKeys.value.has(key)
-      if (hasKey) {
-        mergedExpandedKeys.value.delete(key)
-        newExpandedKeys = [...(mergedExpandedKeys.value as any)]
-      } else {
-        newExpandedKeys = [...(mergedExpandedKeys.value as any), 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?.[mergedChildrenColumnName.value])
-      })
-    ) {
-      warning(false, '`expandedRowRender` should not use with nested Table')
-    }
-
-    const componentWidth = ref(0)
-
-    const [columns, flattenColumns] = useColumns(
-      {
-        ...toRefs(props),
-
-        // children,
-        expandable: computed(() => !!props.expandedRowRender),
-        expandedKeys: mergedExpandedKeys,
-        getRowKey,
-        onTriggerExpand,
-        expandIcon: mergedExpandIcon,
-      },
-      computed(() => (props.internalHooks === INTERNAL_HOOKS ? props.transformColumns : null)),
-    )
-
-    const columnContext = computed(() => ({
-      columns: columns.value,
-      flattenColumns: flattenColumns.value,
-    }))
-
-    // ====================== Scroll ======================
-    const fullTableRef = ref<HTMLDivElement>()
-    const scrollHeaderRef = ref<HTMLDivElement>()
-    const scrollBodyRef = ref<HTMLDivElement>()
-    const scrollBodySizeInfo = ref<{ scrollWidth: number; clientWidth: number }>({
-      scrollWidth: 0,
-      clientWidth: 0,
-    })
-    const scrollSummaryRef = ref<HTMLDivElement>()
-    const [pingedLeft, setPingedLeft] = useState(false)
-    const [pingedRight, setPingedRight] = useState(false)
-    const [colsWidths, updateColsWidths] = useLayoutState(new Map<Key, number>())
-
-    // Convert map to number width
-    const colsKeys = computed(() => getColumnsKey(flattenColumns.value))
-    const colWidths = computed(() =>
-      colsKeys.value.map((columnKey) => colsWidths.value.get(columnKey)),
-    )
-    const columnCount = computed(() => flattenColumns.value.length)
-    const stickyOffsets = useStickyOffsets(colWidths, columnCount, toRef(props, 'direction'))
-    const fixHeader = computed(() => props.scroll && validateValue(props.scroll.y))
-    const horizonScroll = computed(
-      () => (props.scroll && validateValue(props.scroll.x)) || Boolean(props.expandFixed),
-    )
-    const fixColumn = computed(
-      () => horizonScroll.value && flattenColumns.value.some(({ fixed }) => fixed),
-    )
-
-    // Sticky
-    const stickyRef = ref<{ setScrollLeft: (left: number) => void }>()
-    const stickyState = useSticky(toRef(props, 'sticky'), toRef(props, 'prefixCls'))
-
-    const summaryFixedInfos = reactive<Record<string, boolean | string>>({})
-    const fixFooter = computed(() => {
-      const info = Object.values(summaryFixedInfos)[0]
-      return (fixHeader.value || stickyState.value.isSticky) && info
-    })
-
-    const summaryCollect = (uniKey: string, fixed: boolean | string) => {
-      if (fixed) {
-        summaryFixedInfos[uniKey] = fixed
-      } else {
-        delete summaryFixedInfos[uniKey]
-      }
-    }
-
-    // Scroll
-    const scrollXStyle = ref<CSSProperties>({})
-    const scrollYStyle = ref<CSSProperties>({})
-    const scrollTableStyle = ref<CSSProperties>({})
-
-    watchEffect(() => {
-      if (fixHeader.value) {
-        scrollYStyle.value = {
-          overflowY: 'scroll',
-          maxHeight: 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' : toPx(props.scroll.x),
-          minWidth: '100%',
-        }
-      }
-    })
-
-    const onColumnResize = (columnKey: Key, width: number) => {
-      if (isVisible(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] = useTimeoutLock(null)
-
-    function forceScroll(scrollLeft: number, target: HTMLDivElement | ((left: number) => void)) {
-      if (!target) {
-        return
-      }
-
-      if (typeof target === 'function') {
-        target(scrollLeft)
-        return
-      }
-      const domTarget = (target as any).$el || target
-      if (domTarget.scrollLeft !== scrollLeft) {
-        domTarget.scrollLeft = scrollLeft
-      }
-    }
-
-    const onScroll: EventHandler = ({
-      currentTarget,
-      scrollLeft,
-    }: {
-      currentTarget: HTMLElement
-      scrollLeft?: number
-    }) => {
-      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, stickyRef.value?.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: number) => {
-      if (width !== componentWidth.value) {
-        triggerOnScroll()
-        componentWidth.value = fullTableRef.value ? fullTableRef.value.offsetWidth : width
-      }
-    }
-    const onFullTableResize = ({ width }) => {
-      clearTimeout(timtout)
-      if (componentWidth.value === 0) {
-        updateWidth(width)
-        return
-      }
-      timtout = setTimeout(() => {
-        updateWidth(width)
-      }, 100)
-    }
-
-    watch(
-      [horizonScroll, () => props.data, () => props.columns],
-      () => {
-        if (horizonScroll.value) {
-          triggerOnScroll()
-        }
-      },
-      { flush: 'post' },
-    )
-
-    const [scrollbarSize, setScrollbarSize] = useState(0)
-    useProvideSticky()
-    onMounted(() => {
-      nextTick(() => {
-        triggerOnScroll()
-        setScrollbarSize(getTargetScrollBarSize(scrollBodyRef.value).width)
-        scrollBodySizeInfo.value = {
-          scrollWidth: scrollBodyRef.value?.scrollWidth || 0,
-          clientWidth: scrollBodyRef.value?.clientWidth || 0,
-        }
-      })
-    })
-    onUpdated(() => {
-      nextTick(() => {
-        const scrollWidth = scrollBodyRef.value?.scrollWidth || 0
-        const clientWidth = scrollBodyRef.value?.clientWidth || 0
-        if (
-          scrollBodySizeInfo.value.scrollWidth !== scrollWidth ||
-          scrollBodySizeInfo.value.clientWidth !== clientWidth
-        ) {
-          scrollBodySizeInfo.value = {
-            scrollWidth,
-            clientWidth,
-          }
-        }
-      })
-    })
-
-    watchEffect(
-      () => {
-        if (props.internalHooks === INTERNAL_HOOKS && props.internalRefs) {
-          props.onUpdateInternalRefs({
-            body: scrollBodyRef.value
-              ? (scrollBodyRef.value as any).$el || scrollBodyRef.value
-              : null,
-          })
-        }
-      },
-      { flush: 'post' },
-    )
-
-    // Table layout
-    const mergedTableLayout = 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(({ ellipsis }) => ellipsis)
-      ) {
-        return 'fixed'
-      }
-      return 'auto'
-    })
-
-    const emptyNode = () => {
-      return hasData.value ? null : slots.emptyText?.() || 'No Data'
-    }
-    useProvideTable(
-      reactive({
-        ...toRefs(reactivePick(props, 'prefixCls', 'direction', 'transformCellText')),
-        getComponent,
-        scrollbarSize,
-        fixedInfoList: computed(() =>
-          flattenColumns.value.map((_, colIndex) =>
-            getCellFixedInfo(
-              colIndex,
-              colIndex,
-              flattenColumns.value,
-              stickyOffsets.value,
-              props.direction,
-            ),
-          ),
-        ),
-        isSticky: computed(() => stickyState.value.isSticky),
-        summaryCollect,
-      }),
-    )
-    useProvideBody(
-      reactive({
-        ...toRefs(
-          reactivePick(
-            props,
-            'rowClassName',
-            'expandedRowClassName',
-            'expandRowByClick',
-            'expandedRowRender',
-            'expandIconColumnIndex',
-            'indentSize',
-          ),
-        ),
-        columns,
-        flattenColumns,
-        tableLayout: mergedTableLayout,
-        expandIcon: mergedExpandIcon,
-        expandableType,
-        onTriggerExpand,
-      }),
-    )
-
-    useProvideResize({
-      onColumnResize,
-    })
-
-    useProvideExpandedRow({
-      componentWidth,
-      fixHeader,
-      fixColumn,
-      horizonScroll,
-    })
-
-    // Body
-    const bodyTable = () => (
-      <Body
-        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}
-        v-slots={{ emptyNode }}
-      />
-    )
-
-    const bodyColGroup = () => (
-      <ColGroup
-        colWidths={flattenColumns.value.map(({ width }) => width)}
-        columns={flattenColumns.value}
-      />
-    )
-    return () => {
-      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']) as unknown as CustomizeScrollBody<any>
-      const summaryNode = slots.summary?.({ 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
-      ) {
-        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(({ width }, index) => {
-            const colWidth =
-              index === columns.value.length - 1 ? (width as number) - scrollbarSize.value : width
-            if (typeof colWidth === 'number' && !Number.isNaN(colWidth)) {
-              return colWidth
-            }
-            warning(
-              false,
-              'When use `components.body` with render props. Each column should have a fixed `width` value.',
-            )
-
-            return 0
-          }) as number[]
-        } else {
-          bodyContent = () => (
-            <div
-              style={{
-                ...scrollXStyle.value,
-                ...scrollYStyle.value,
-              }}
-              onScroll={onScroll}
-              ref={scrollBodyRef}
-              class={classNames(`${prefixCls}-body`)}
-            >
-              <TableComponent
-                style={{
-                  ...scrollTableStyle.value,
-                  tableLayout: mergedTableLayout.value,
-                }}
-              >
-                {bodyColGroup()}
-                {bodyTable()}
-                {!fixFooter.value && summaryNode && (
-                  <Footer stickyOffsets={stickyOffsets.value} flattenColumns={flattenColumns.value}>
-                    {summaryNode}
-                  </Footer>
-                )}
-              </TableComponent>
-            </div>
-          )
-        }
-
-        // Fixed holder share the props
-        const fixedHolderProps = {
-          noData: !mergedData.value.length,
-          maxContentScroll: horizonScroll.value && scroll.x === 'max-content',
-          ...headerProps,
-          ...columnContext.value,
-          direction,
-          stickyClassName,
-          onScroll,
-        }
-
-        groupTableNode = () => (
-          <>
-            {/* Header Table */}
-            {showHeader !== false && (
-              <FixedHolder
-                {...fixedHolderProps}
-                stickyTopOffset={offsetHeader}
-                class={`${prefixCls}-header`}
-                ref={scrollHeaderRef}
-                v-slots={{
-                  default: (fixedHolderPassProps) => (
-                    <>
-                      <Header {...fixedHolderPassProps} />
-                      {fixFooter.value === 'top' && (
-                        <Footer {...fixedHolderPassProps}>{summaryNode}</Footer>
-                      )}
-                    </>
-                  ),
-                }}
-              ></FixedHolder>
-            )}
-
-            {/* Body Table */}
-            {bodyContent()}
-
-            {/* Summary Table */}
-            {fixFooter.value && fixFooter.value !== 'top' && (
-              <FixedHolder
-                {...fixedHolderProps}
-                stickyBottomOffset={offsetSummary}
-                class={`${prefixCls}-summary`}
-                ref={scrollSummaryRef}
-                v-slots={{
-                  default: (fixedHolderPassProps) => (
-                    <Footer {...fixedHolderPassProps}>{summaryNode}</Footer>
-                  ),
-                }}
-              ></FixedHolder>
-            )}
-
-            {isSticky && scrollBodyRef.value && (
-              <StickyScrollBar
-                ref={stickyRef}
-                offsetScroll={offsetScroll}
-                scrollBodyRef={scrollBodyRef}
-                onScroll={onScroll}
-                container={container}
-                scrollBodySizeInfo={scrollBodySizeInfo.value}
-              />
-            )}
-          </>
-        )
-      } else {
-        // >>>>>> Unique table
-        groupTableNode = () => (
-          <div
-            style={{
-              ...scrollXStyle.value,
-              ...scrollYStyle.value,
-            }}
-            class={classNames(`${prefixCls}-content`)}
-            onScroll={onScroll}
-            ref={scrollBodyRef}
-          >
-            <TableComponent
-              style={{ ...scrollTableStyle.value, tableLayout: mergedTableLayout.value }}
-            >
-              {bodyColGroup()}
-              {showHeader !== false && <Header {...headerProps} {...columnContext.value} />}
-              {bodyTable()}
-              {summaryNode && (
-                <Footer stickyOffsets={stickyOffsets.value} flattenColumns={flattenColumns.value}>
-                  {summaryNode}
-                </Footer>
-              )}
-            </TableComponent>
-          </div>
-        )
-      }
-      const ariaProps = pickAttrs(attrs, { aria: true, data: true })
-      const fullTable = () => (
-        <div
-          {...ariaProps}
-          class={classNames(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 as string]: attrs.class,
-          })}
-          style={attrs.style as CSSProperties}
-          id={id}
-          ref={fullTableRef}
-        >
-          {title && <Panel class={`${prefixCls}-title`}>{title(mergedData.value)}</Panel>}
-          <div class={`${prefixCls}-container`}>{groupTableNode()}</div>
-          {footer && <Panel class={`${prefixCls}-footer`}>{footer(mergedData.value)}</Panel>}
-        </div>
-      )
-
-      if (horizonScroll.value) {
-        return (
-          <VCResizeObserver
-            onResize={onFullTableResize}
-            v-slots={{ default: fullTable }}
-          ></VCResizeObserver>
-        )
-      }
-      return fullTable()
-    }
-  },
-})