refactor(data-table): remove provider(reactive) pattern

2025-01-12 12:25:16 +08:00 · 2021-04-20 23:08:51 +08:00 · 2021-04-20 23:08:51 +08:00 · d9b50209bd
commit d9b50209bd
parent 3581c3570f
15 changed files with 307 additions and 243 deletions
--- a/src/data-table/src/DataTable.tsx
+++ b/src/data-table/src/DataTable.tsx
@ -6,7 +6,6 @@ import {
  provide,
  PropType,
  ExtractPropTypes,
-  reactive,
  toRef,
  CSSProperties
 } from 'vue'
@ -220,17 +219,16 @@ export default defineComponent({
      mergedClsPrefix
    )
    const mainTableInstRef = ref<MainTableRef | null>(null)
-    const { rows, cols, dataRelatedCols } = useGroupHeader(props)
+    const { rowsRef, colsRef, dataRelatedColsRef } = useGroupHeader(props)
    const {
-      treeMate: treeMateRef,
-      mergedCurrentPage: mergedCurrentPageRef,
-      paginatedData: paginatedDataRef,
-      selectionColumn: selectionColumnRef,
-      hoverKey,
-      currentPage,
-      mergedPagination,
-      mergedFilterState,
-      mergedSortState,
+      treeMateRef,
+      mergedCurrentPageRef,
+      paginatedDataRef,
+      selectionColumnRef,
+      hoverKeyRef,
+      mergedPaginationRef,
+      mergedFilterStateRef,
+      mergedSortStateRef,
      doUpdateFilters,
      doUpdateSorter,
      filter,
@ -239,22 +237,22 @@ export default defineComponent({
      clearFilters,
      page,
      sort
-    } = useTableData(props, { dataRelatedCols })
+    } = useTableData(props, { dataRelatedColsRef })
    const {
      doCheckAll,
      doUncheckAll,
      doUpdateCheckedRowKeys,
-      someRowsChecked,
-      allRowsChecked,
-      mergedCheckedRowKeys
+      someRowsCheckedRef,
+      allRowsCheckedRef,
+      mergedCheckedRowKeysRef
    } = useCheck(props, {
      selectionColumnRef,
      treeMateRef,
      paginatedDataRef
    })
    const {
-      mergedExpandedRowKeys,
-      renderExpand,
+      mergedExpandedRowKeysRef,
+      renderExpandRef,
      doUpdateExpandedRowKeys
    } = useExpand(props)
    const {
@ -262,73 +260,70 @@ export default defineComponent({
      handleTableHeaderScroll,
      deriveActiveRightFixedColumn,
      deriveActiveLeftFixedColumn,
-      leftActiveFixedColKey,
-      rightActiveFixedColKey,
-      leftFixedColumns,
-      rightFixedColumns,
-      fixedColumnLeftMap,
-      fixedColumnRightMap
+      leftActiveFixedColKeyRef,
+      rightActiveFixedColKeyRef,
+      leftFixedColumnsRef,
+      rightFixedColumnsRef,
+      fixedColumnLeftMapRef,
+      fixedColumnRightMapRef
    } = useScroll(props, {
      mainTableInstRef,
      mergedCurrentPageRef
    })
    const { locale } = useLocale('DataTable')
-    provide(
-      dataTableInjectionKey,
-      reactive({
-        hoverKey,
-        mergedClsPrefix,
-        treeMate: treeMateRef,
-        mergedTheme: themeRef,
-        scrollX: computed(() => props.scrollX),
-        rows,
-        cols,
-        paginatedData: paginatedDataRef,
-        leftActiveFixedColKey,
-        rightActiveFixedColKey,
-        leftFixedColumns,
-        rightFixedColumns,
-        fixedColumnLeftMap,
-        fixedColumnRightMap,
-        currentPage,
-        someRowsChecked,
-        allRowsChecked,
-        mergedSortState,
-        mergedFilterState,
-        loading: toRef(props, 'loading'),
-        rowClassName: toRef(props, 'rowClassName'),
-        mergedCheckedRowKeys,
-        mergedExpandedRowKeys,
-        locale,
-        rowKey: toRef(props, 'rowKey'),
-        checkOptions: computed(() => {
-          const { value: selectionColumn } = selectionColumnRef
-          return selectionColumn?.options
-        }),
-        filterMenuCssVars: computed(() => {
-          const {
-            self: { actionDividerColor, actionPadding, actionButtonMargin }
-          } = themeRef.value
-          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-          return {
-            '--action-padding': actionPadding,
-            '--action-button-margin': actionButtonMargin,
-            '--action-divider-color': actionDividerColor
-          } as CSSProperties
-        }),
-        renderExpand,
-        deriveActiveRightFixedColumn,
-        deriveActiveLeftFixedColumn,
-        doUpdateFilters,
-        doUpdateSorter,
-        doUpdateCheckedRowKeys,
-        doCheckAll,
-        doUncheckAll,
-        doUpdateExpandedRowKeys,
-        handleTableHeaderScroll,
-        handleTableBodyScroll
-      })
-    )
+    provide(dataTableInjectionKey, {
+      hoverKeyRef,
+      mergedClsPrefixRef: mergedClsPrefix,
+      treeMateRef,
+      mergedThemeRef: themeRef,
+      scrollXRef: computed(() => props.scrollX),
+      rowsRef,
+      colsRef,
+      paginatedDataRef,
+      leftActiveFixedColKeyRef,
+      rightActiveFixedColKeyRef,
+      leftFixedColumnsRef,
+      rightFixedColumnsRef,
+      fixedColumnLeftMapRef,
+      fixedColumnRightMapRef,
+      mergedCurrentPageRef,
+      someRowsCheckedRef,
+      allRowsCheckedRef,
+      mergedSortStateRef,
+      mergedFilterStateRef,
+      loadingRef: toRef(props, 'loading'),
+      rowClassNameRef: toRef(props, 'rowClassName'),
+      mergedCheckedRowKeysRef,
+      mergedExpandedRowKeysRef,
+      localeRef: locale,
+      rowKeyRef: toRef(props, 'rowKey'),
+      renderExpandRef,
+      checkOptionsRef: computed(() => {
+        const { value: selectionColumn } = selectionColumnRef
+        return selectionColumn?.options
+      }),
+      filterMenuCssVarsRef: computed(() => {
+        const {
+          self: { actionDividerColor, actionPadding, actionButtonMargin }
+        } = themeRef.value
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        return {
+          '--action-padding': actionPadding,
+          '--action-button-margin': actionButtonMargin,
+          '--action-divider-color': actionDividerColor
+        } as CSSProperties
+      }),
+      deriveActiveRightFixedColumn,
+      deriveActiveLeftFixedColumn,
+      doUpdateFilters,
+      doUpdateSorter,
+      doUpdateCheckedRowKeys,
+      doCheckAll,
+      doUncheckAll,
+      doUpdateExpandedRowKeys,
+      handleTableHeaderScroll,
+      handleTableBodyScroll
+    })
    const exposedMethods: DataTableInst = {
      filter,
      filters,
@ -344,7 +339,7 @@ export default defineComponent({
      paginatedData: paginatedDataRef,
      mergedBordered,
      mergedBottomBordered: mergedBottomBorderedRef,
-      mergedPagination,
+      mergedPagination: mergedPaginationRef,
      ...exposedMethods,
      cssVars: computed(() => {
        const { size } = props
--- a/src/data-table/src/HeaderButton/FilterButton.tsx
+++ b/src/data-table/src/HeaderButton/FilterButton.tsx
@ -38,12 +38,16 @@ export default defineComponent({
  },
  setup (props) {
    const { NConfigProvider } = useConfig()
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const NDataTable = inject(dataTableInjectionKey)!
+    const {
+      mergedThemeRef,
+      mergedClsPrefixRef,
+      mergedFilterStateRef,
+      filterMenuCssVarsRef,
+      doUpdateFilters
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    } = inject(dataTableInjectionKey)!
    const showPopoverRef = ref(false)
-    const filterStateRef = computed(() => {
-      return NDataTable.mergedFilterState
-    })
+    const filterStateRef = mergedFilterStateRef
    const filterMultipleRef = computed(() => {
      return props.column.filterMultiple !== false
    })
@ -77,7 +81,7 @@ export default defineComponent({
        props.column.key,
        mergedFilterValue
      )
-      NDataTable.doUpdateFilters(nextFilterState, props.column)
+      doUpdateFilters(nextFilterState, props.column)
    }
    function handleFilterMenuCancel (): void {
      showPopoverRef.value = false
@ -86,20 +90,21 @@ export default defineComponent({
      showPopoverRef.value = false
    }
    return {
-      NDataTable,
+      mergedTheme: mergedThemeRef,
+      mergedClsPrefix: mergedClsPrefixRef,
      active: activeRef,
      showPopover: showPopoverRef,
      mergedRenderFilter: mergedRenderFilterRef,
      filterMultiple: filterMultipleRef,
      mergedFilterValue: mergedFilterValueRef,
+      filterMenuCssVars: filterMenuCssVarsRef,
      handleFilterChange,
      handleFilterMenuConfirm,
      handleFilterMenuCancel
    }
  },
  render () {
-    const { NDataTable } = this
-    const { mergedTheme, mergedClsPrefix } = NDataTable
+    const { mergedTheme, mergedClsPrefix } = this
    return (
      <NPopover
        show={this.showPopover}
@ -142,7 +147,7 @@ export default defineComponent({
              renderFilterMenu()
            ) : (
              <NDataTableFilterMenu
-                style={NDataTable.filterMenuCssVars}
+                style={this.filterMenuCssVars}
                radioGroupName={String(this.column.key)}
                multiple={this.filterMultiple}
                value={this.mergedFilterValue}
--- a/src/data-table/src/HeaderButton/FilterMenu.tsx
+++ b/src/data-table/src/HeaderButton/FilterMenu.tsx
@ -52,8 +52,12 @@ export default defineComponent({
    }
  },
  setup (props) {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const NDataTable = inject(dataTableInjectionKey)!
+    const {
+      mergedClsPrefixRef,
+      mergedThemeRef,
+      localeRef
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    } = inject(dataTableInjectionKey)!
    // to be compared with changed value
    // const initialValueRef = ref(props.value)
    const temporalValueRef = ref(props.value)
@ -109,7 +113,9 @@ export default defineComponent({
      props.onClear()
    }
    return {
-      NDataTable,
+      mergedClsPrefix: mergedClsPrefixRef,
+      mergedTheme: mergedThemeRef,
+      locale: localeRef,
      checkboxGroupValue: checkboxGroupValueRef,
      radioGroupValue: radioGroupValueRef,
      handleChange,
@ -118,8 +124,7 @@ export default defineComponent({
    }
  },
  render () {
-    const { NDataTable } = this
-    const { mergedTheme, locale, mergedClsPrefix } = NDataTable
+    const { mergedTheme, locale, mergedClsPrefix } = this
    return (
      <div class={`${mergedClsPrefix}-data-table-filter-menu`}>
        <NScrollbar>
--- a/src/data-table/src/HeaderButton/SortButton.tsx
+++ b/src/data-table/src/HeaderButton/SortButton.tsx
@ -16,10 +16,10 @@ export default defineComponent({
  setup (props) {
    const { NConfigProvider } = useConfig()
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const NDataTable = inject(dataTableInjectionKey)!
-    const sortStateRef = computed(() => {
-      return NDataTable.mergedSortState
-    })
+    const { mergedSortStateRef, mergedClsPrefixRef } = inject(
+      dataTableInjectionKey
+    )!
+    const sortStateRef = mergedSortStateRef
    const activeRef = computed(() => {
      const { value } = sortStateRef
      if (value) return value.columnKey === props.column.key
@ -37,18 +37,14 @@ export default defineComponent({
      )
    })
    return {
-      NDataTable,
+      mergedClsPrefix: mergedClsPrefixRef,
      active: activeRef,
      mergedSortOrder: mergedSortOrderRef,
      mergedRenderSorter: mergedRenderSorterRef
    }
  },
  render () {
-    const {
-      mergedRenderSorter,
-      mergedSortOrder,
-      NDataTable: { mergedClsPrefix }
-    } = this
+    const { mergedRenderSorter, mergedSortOrder, mergedClsPrefix } = this
    return mergedRenderSorter ? (
      <RenderSorter render={mergedRenderSorter} order={mergedSortOrder} />
    ) : (
--- a/src/data-table/src/MainTable.tsx
+++ b/src/data-table/src/MainTable.tsx
@ -20,13 +20,15 @@ export default defineComponent({
    }
  },
  setup (props) {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const NDataTable = inject(dataTableInjectionKey)!
-
    const {
+      mergedClsPrefixRef,
+      rightFixedColumnsRef,
+      leftFixedColumnsRef,
      deriveActiveLeftFixedColumn,
-      deriveActiveRightFixedColumn
-    } = NDataTable
+      deriveActiveRightFixedColumn,
+      handleTableHeaderScroll
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    } = inject(dataTableInjectionKey)!

    let tableWidth: number = 0
    const bodyMaxHeightRef = ref<number | undefined>(undefined)
@ -35,9 +37,8 @@ export default defineComponent({
    const headerInstRef = ref<MainTableHeaderRef | null>(null)
    const bodyInstRef = ref<MainTableBodyRef | null>(null)

-    const { rightFixedColumns, leftFixedColumns } = NDataTable
    const fixedStateInitializedRef = ref(
-      !(leftFixedColumns.length || rightFixedColumns.length)
+      !(leftFixedColumnsRef.value.length || rightFixedColumnsRef.value.length)
    )

    const bodyStyleRef = computed(() => {
@ -58,7 +59,7 @@ export default defineComponent({
    function handleHeaderScroll (e: Event): void {
      deriveActiveRightFixedColumn(e.target as HTMLElement, tableWidth)
      deriveActiveLeftFixedColumn(e.target as HTMLElement, tableWidth)
-      NDataTable.handleTableHeaderScroll(e)
+      handleTableHeaderScroll(e)
    }
    function getHeaderElement (): HTMLElement | null {
      const { value } = headerInstRef
@ -91,7 +92,7 @@ export default defineComponent({
      getHeaderElement
    }
    return {
-      NDataTable,
+      mergedClsPrefix: mergedClsPrefixRef,
      headerInstRef,
      bodyInstRef,
      bodyStyle: bodyStyleRef,
@ -102,9 +103,7 @@ export default defineComponent({
    }
  },
  render () {
-    const {
-      NDataTable: { mergedClsPrefix }
-    } = this
+    const { mergedClsPrefix } = this
    return (
      <div
        class={[
--- a/src/data-table/src/TableParts/Body.tsx
+++ b/src/data-table/src/TableParts/Body.tsx
@ -11,23 +11,38 @@ import ExpandTrigger from './ExpandTrigger'
 export default defineComponent({
  name: 'DataTableBody',
  setup () {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const NDataTable = inject(dataTableInjectionKey)!
+    const {
+      treeMateRef,
+      mergedCheckedRowKeysRef,
+      mergedExpandedRowKeysRef,
+      mergedClsPrefixRef,
+      mergedThemeRef,
+      scrollXRef,
+      colsRef,
+      paginatedDataRef,
+      fixedColumnLeftMapRef,
+      fixedColumnRightMapRef,
+      mergedCurrentPageRef,
+      rowClassNameRef,
+      leftActiveFixedColKeyRef,
+      rightActiveFixedColKeyRef,
+      renderExpandRef,
+      hoverKeyRef,
+      doUpdateExpandedRowKeys,
+      handleTableBodyScroll,
+      doUpdateCheckedRowKeys
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    } = inject(dataTableInjectionKey)!
    const scrollbarInstRef = ref<ScrollbarInst | null>(null)
    function handleCheckboxUpdateChecked (
      tmNode: TmNode,
      checked: boolean
    ): void {
-      NDataTable.doUpdateCheckedRowKeys(
-        checked
-          ? NDataTable.treeMate.check(
-            tmNode.key,
-            NDataTable.mergedCheckedRowKeys
-          ).checkedKeys
-          : NDataTable.treeMate.uncheck(
-            tmNode.key,
-            NDataTable.mergedCheckedRowKeys
-          ).checkedKeys
+      doUpdateCheckedRowKeys(
+        (checked ? treeMateRef.value.check : treeMateRef.value.uncheck)(
+          tmNode.key,
+          mergedCheckedRowKeysRef.value
+        ).checkedKeys
      )
    }
    function getScrollContainer (): HTMLElement | null {
@ -36,10 +51,10 @@ export default defineComponent({
      return null
    }
    function handleScroll (event: Event): void {
-      NDataTable.handleTableBodyScroll(event)
+      handleTableBodyScroll(event)
    }
    function handleUpdateExpanded (key: RowKey): void {
-      const { mergedExpandedRowKeys, doUpdateExpandedRowKeys } = NDataTable
+      const { value: mergedExpandedRowKeys } = mergedExpandedRowKeysRef
      const index = mergedExpandedRowKeys.indexOf(key)
      const nextExpandedKeys = Array.from(mergedExpandedRowKeys)
      if (~index) {
@ -50,8 +65,22 @@ export default defineComponent({
      doUpdateExpandedRowKeys(nextExpandedKeys)
    }
    return {
-      NDataTable,
      scrollbarInstRef,
+      mergedClsPrefix: mergedClsPrefixRef,
+      mergedTheme: mergedThemeRef,
+      scrollX: scrollXRef,
+      cols: colsRef,
+      paginatedData: paginatedDataRef,
+      fixedColumnLeftMap: fixedColumnLeftMapRef,
+      fixedColumnRightMap: fixedColumnRightMapRef,
+      currentPage: mergedCurrentPageRef,
+      mergedCheckedRowKeys: mergedCheckedRowKeysRef,
+      rowClassName: rowClassNameRef,
+      leftActiveFixedColKey: leftActiveFixedColKeyRef,
+      rightActiveFixedColKey: rightActiveFixedColKeyRef,
+      renderExpand: renderExpandRef,
+      mergedExpandedRowKeys: mergedExpandedRowKeysRef,
+      hoverKey: hoverKeyRef,
      getScrollContainer,
      handleScroll,
      handleCheckboxUpdateChecked,
@ -59,8 +88,7 @@ export default defineComponent({
    }
  },
  render () {
-    const { NDataTable, handleScroll } = this
-    const { mergedTheme, scrollX, mergedClsPrefix } = NDataTable
+    const { mergedTheme, scrollX, mergedClsPrefix, handleScroll } = this
    return (
      <NScrollbar
        ref="scrollbarInstRef"
@ -94,7 +122,7 @@ export default defineComponent({
              rightActiveFixedColKey,
              renderExpand,
              mergedExpandedRowKeys
-            } = NDataTable
+            } = this
            const { length: colCount } = cols
            const { length: rowCount } = paginatedData
            const { handleCheckboxUpdateChecked, handleUpdateExpanded } = this
@ -144,7 +172,7 @@ export default defineComponent({
                    }
                  }
                }
-                const hoverKey = isCrossRowTd ? NDataTable.hoverKey : null
+                const hoverKey = isCrossRowTd ? this.hoverKey : null
                return (
                  <td
                    key={colKey}
@ -216,7 +244,7 @@ export default defineComponent({
              const row = (
                <tr
                  onMouseenter={() => {
-                    NDataTable.hoverKey = rowKey
+                    this.hoverKey = rowKey
                  }}
                  key={rowKey}
                  class={[
@ -259,7 +287,7 @@ export default defineComponent({
                ref="body"
                class={`${mergedClsPrefix}-data-table-table`}
                onMouseleave={() => {
-                  NDataTable.hoverKey = null
+                  this.hoverKey = null
                }}
              >
                <colgroup>
--- a/src/data-table/src/TableParts/CheckMenu.tsx
+++ b/src/data-table/src/TableParts/CheckMenu.tsx
@ -68,25 +68,36 @@ function createDropdownOptions (

 export default defineComponent({
  name: 'DataTableCheckMenu',
+  props: {
+    clsPrefix: {
+      type: String,
+      required: true
+    }
+  },
  setup () {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const NDataTable = inject(dataTableInjectionKey)!
-    const { doCheckAll, doUncheckAll } = NDataTable
+    const {
+      checkOptionsRef,
+      doCheckAll,
+      doUncheckAll
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    } = inject(dataTableInjectionKey)!
    return {
-      handleSelect: createSelectHandler(
-        NDataTable.checkOptions,
-        doCheckAll,
-        doUncheckAll
+      handleSelect: computed(() =>
+        createSelectHandler(checkOptionsRef.value, doCheckAll, doUncheckAll)
      ),
-      options: computed(() => createDropdownOptions(NDataTable.checkOptions))
+      options: computed(() => createDropdownOptions(checkOptionsRef.value))
    }
  },
  render () {
+    const { clsPrefix } = this
    return (
      <NDropdown options={this.options} onSelect={this.handleSelect}>
        {{
          default: () => (
-            <NBaseIcon clsPrefix="n" class="n-data-table-check-extra">
+            <NBaseIcon
+              clsPrefix={clsPrefix}
+              class={`${clsPrefix}-data-table-check-extra`}
+            >
              {{
                default: () => <ChevronDownIcon />
              }}
--- a/src/data-table/src/TableParts/Header.tsx
+++ b/src/data-table/src/TableParts/Header.tsx
@ -33,13 +33,31 @@ export default defineComponent({
    onScroll: Function as PropType<(e: Event) => void>
  },
  setup () {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const NDataTable = inject(dataTableInjectionKey)!
+    const {
+      mergedClsPrefixRef,
+      scrollXRef,
+      fixedColumnLeftMapRef,
+      fixedColumnRightMapRef,
+      mergedCurrentPageRef,
+      allRowsCheckedRef,
+      someRowsCheckedRef,
+      leftActiveFixedColKeyRef,
+      rightActiveFixedColKeyRef,
+      rowsRef,
+      colsRef,
+      mergedThemeRef,
+      checkOptionsRef,
+      mergedSortStateRef,
+      doUpdateSorter,
+      doUncheckAll,
+      doCheckAll
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    } = inject(dataTableInjectionKey)!
    function handleCheckboxUpdateChecked (): void {
-      if (NDataTable.someRowsChecked || NDataTable.allRowsChecked) {
-        NDataTable.doUncheckAll()
+      if (someRowsCheckedRef.value || allRowsCheckedRef.value) {
+        doUncheckAll()
      } else {
-        NDataTable.doCheckAll()
+        doCheckAll()
      }
    }
    function handleColHeaderClick (
@ -48,43 +66,48 @@ export default defineComponent({
    ): void {
      if (happensIn(e, 'dataTableFilter')) return
      if (!isColumnSortable(column)) return
-      const activeSorter = NDataTable.mergedSortState
+      const activeSorter = mergedSortStateRef.value
      const nextSorter = createNextSorter(column, activeSorter)
-      NDataTable.doUpdateSorter(nextSorter)
+      doUpdateSorter(nextSorter)
    }
    return {
-      NDataTable,
-      headerStyle: {
-        overflow: 'scroll'
-      },
+      mergedClsPrefix: mergedClsPrefixRef,
+      scrollX: scrollXRef,
+      fixedColumnLeftMap: fixedColumnLeftMapRef,
+      fixedColumnRightMap: fixedColumnRightMapRef,
+      currentPage: mergedCurrentPageRef,
+      allRowsChecked: allRowsCheckedRef,
+      someRowsChecked: someRowsCheckedRef,
+      leftActiveFixedColKey: leftActiveFixedColKeyRef,
+      rightActiveFixedColKey: rightActiveFixedColKeyRef,
+      rows: rowsRef,
+      cols: colsRef,
+      mergedTheme: mergedThemeRef,
+      checkOptions: checkOptionsRef,
      handleCheckboxUpdateChecked,
      handleColHeaderClick
    }
  },
  render () {
    const {
-      NDataTable: {
-        mergedClsPrefix,
-        scrollX,
-        fixedColumnLeftMap,
-        fixedColumnRightMap,
-        currentPage,
-        allRowsChecked,
-        someRowsChecked,
-        leftActiveFixedColKey,
-        rightActiveFixedColKey,
-        rows,
-        cols,
-        mergedTheme,
-        checkOptions
-      },
-      headerStyle,
+      mergedClsPrefix,
+      scrollX,
+      fixedColumnLeftMap,
+      fixedColumnRightMap,
+      currentPage,
+      allRowsChecked,
+      someRowsChecked,
+      leftActiveFixedColKey,
+      rightActiveFixedColKey,
+      rows,
+      cols,
+      mergedTheme,
+      checkOptions,
      handleColHeaderClick,
      handleCheckboxUpdateChecked
    } = this
    return (
      <div
-        style={headerStyle}
        class={`${mergedClsPrefix}-data-table-base-table-header`}
        onScroll={this.onScroll}
      >
@ -154,7 +177,9 @@ export default defineComponent({
                              indeterminate={someRowsChecked}
                              onUpdateChecked={handleCheckboxUpdateChecked}
                            />
-                            {checkOptions ? <CheckMenu /> : null}
+                            {checkOptions ? (
+                              <CheckMenu clsPrefix={mergedClsPrefix} />
+                            ) : null}
                          </>
                        ) : column.ellipsis === true ||
                          (column.ellipsis && !column.ellipsis.tooltip) ? (
--- a/src/data-table/src/interface.ts
+++ b/src/data-table/src/interface.ts
@ -1,5 +1,5 @@
 import { TreeNode, TreeMate } from 'treemate'
-import { CSSProperties, InjectionKey, VNodeChild } from 'vue'
+import { CSSProperties, InjectionKey, Ref, VNodeChild } from 'vue'
 import { EllipsisProps } from '../../ellipsis/src/Ellipsis'
 import { NLocale } from '../../locales'
 import { MergedTheme } from '../../_mixins'
@ -134,35 +134,35 @@ export type DataTableCheckOptions = Array<
 | { label: string, key: string | number, onSelect: () => void }
 >
 export interface DataTableInjection {
-  checkOptions: DataTableCheckOptions | undefined
-  hoverKey: RowKey | null
-  mergedClsPrefix: string
-  mergedTheme: MergedTheme<DataTableTheme>
-  scrollX: string | number | undefined
-  rows: RowItem[][]
-  cols: ColItem[]
-  treeMate: TreeMate<RowData>
-  paginatedData: TmNode[]
-  leftFixedColumns: TableColumns
-  rightFixedColumns: TableColumns
-  leftActiveFixedColKey: ColumnKey | null
-  rightActiveFixedColKey: ColumnKey | null
-  fixedColumnLeftMap: Record<ColumnKey, number | undefined>
-  fixedColumnRightMap: Record<ColumnKey, number | undefined>
-  currentPage: number
-  someRowsChecked: boolean
-  allRowsChecked: boolean
-  mergedSortState: SortState | null
-  mergedFilterState: FilterState
-  loading: boolean
-  rowClassName: string | CreateRowClassName | undefined
-  mergedCheckedRowKeys: RowKey[]
-  locale: NLocale['DataTable']
-  filterMenuCssVars: CSSProperties
-  mergedExpandedRowKeys: RowKey[]
-  renderExpand: undefined | RenderExpand
+  checkOptionsRef: Ref<DataTableCheckOptions | undefined>
+  hoverKeyRef: Ref<RowKey | null>
+  mergedClsPrefixRef: Ref<string>
+  mergedThemeRef: Ref<MergedTheme<DataTableTheme>>
+  scrollXRef: Ref<string | number | undefined>
+  rowsRef: Ref<RowItem[][]>
+  colsRef: Ref<ColItem[]>
+  treeMateRef: Ref<TreeMate<RowData>>
+  paginatedDataRef: Ref<TmNode[]>
+  leftFixedColumnsRef: Ref<TableColumns>
+  rightFixedColumnsRef: Ref<TableColumns>
+  leftActiveFixedColKeyRef: Ref<ColumnKey | null>
+  rightActiveFixedColKeyRef: Ref<ColumnKey | null>
+  fixedColumnLeftMapRef: Ref<Record<ColumnKey, number | undefined>>
+  fixedColumnRightMapRef: Ref<Record<ColumnKey, number | undefined>>
+  mergedCurrentPageRef: Ref<number>
+  someRowsCheckedRef: Ref<boolean>
+  allRowsCheckedRef: Ref<boolean>
+  mergedSortStateRef: Ref<SortState | null>
+  mergedFilterStateRef: Ref<FilterState>
+  loadingRef: Ref<boolean>
+  rowClassNameRef: Ref<string | CreateRowClassName | undefined>
+  mergedCheckedRowKeysRef: Ref<RowKey[]>
+  localeRef: Ref<NLocale['DataTable']>
+  filterMenuCssVarsRef: Ref<CSSProperties>
+  mergedExpandedRowKeysRef: Ref<RowKey[]>
+  rowKeyRef: Ref<CreateRowKey | undefined>
+  renderExpandRef: Ref<undefined | RenderExpand>
  doUpdateExpandedRowKeys: (keys: RowKey[]) => void
-  rowKey: CreateRowKey | undefined
  doUpdateFilters: (
    filters: FilterState,
    sourceColumn?: TableBaseColumn
--- a/src/data-table/src/styles/index.cssr.ts
+++ b/src/data-table/src/styles/index.cssr.ts
@ -269,11 +269,12 @@ export default c([
        fixedColumnStyle
      ])
    ]),
-    cB('data-table-base-table-header', {
-      flexShrink: 0,
-      transition: 'border-color .3s var(--bezier)',
-      scrollbarWidth: 'none'
-    }, [
+    cB('data-table-base-table-header', `
+      overflow: scroll;
+      flex-shrink: 0;
+      transition: border-color .3s var(--bezier);
+      scrollbar-width: none;
+    `, [
      c('&::-webkit-scrollbar', {
        width: 0,
        height: 0
--- a/src/data-table/src/use-check.ts
+++ b/src/data-table/src/use-check.ts
@ -90,9 +90,9 @@ export function useCheck (
    )
  }
  return {
-    mergedCheckedRowKeys: mergedCheckedRowKeysRef,
-    someRowsChecked: someRowsCheckedRef,
-    allRowsChecked: allRowsCheckedRef,
+    mergedCheckedRowKeysRef,
+    someRowsCheckedRef,
+    allRowsCheckedRef,
    doUpdateCheckedRowKeys,
    doCheckAll,
    doUncheckAll
--- a/src/data-table/src/use-expand.ts
+++ b/src/data-table/src/use-expand.ts
@ -21,7 +21,7 @@ export function useExpand (props: DataTableSetupProps) {
  })
  const uncontrolledExpandedRowKeysRef = ref(props.defaultExpandedRowKeys)
  const controlledExpandedRowKeysRef = toRef(props, 'expandedRowKeys')
-  const mergedExpandedRowKeys = useMergedState(
+  const mergedExpandedRowKeysRef = useMergedState(
    controlledExpandedRowKeysRef,
    uncontrolledExpandedRowKeysRef
  )
@ -39,8 +39,8 @@ export function useExpand (props: DataTableSetupProps) {
    uncontrolledExpandedRowKeysRef.value = expandedKeys
  }
  return {
-    mergedExpandedRowKeys: mergedExpandedRowKeys,
-    renderExpand: renderExpandRef,
+    mergedExpandedRowKeysRef,
+    renderExpandRef,
    doUpdateExpandedRowKeys
  }
 }
--- a/src/data-table/src/use-group-header.ts
+++ b/src/data-table/src/use-group-header.ts
@ -119,16 +119,16 @@ function getRowsAndCols (
 export function useGroupHeader (
  props: DataTableSetupProps
 ): {
-    rows: ComputedRef<RowItem[][]>
-    cols: ComputedRef<ColItem[]>
-    dataRelatedCols: ComputedRef<
+    rowsRef: ComputedRef<RowItem[][]>
+    colsRef: ComputedRef<ColItem[]>
+    dataRelatedColsRef: ComputedRef<
    Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>
    >
  } {
  const rowsAndCols = computed(() => getRowsAndCols(props.columns))
  return {
-    rows: computed(() => rowsAndCols.value.rows),
-    cols: computed(() => rowsAndCols.value.cols),
-    dataRelatedCols: computed(() => rowsAndCols.value.dataRelatedCols)
+    rowsRef: computed(() => rowsAndCols.value.rows),
+    colsRef: computed(() => rowsAndCols.value.cols),
+    dataRelatedColsRef: computed(() => rowsAndCols.value.dataRelatedCols)
  }
 }
--- a/src/data-table/src/use-scroll.ts
+++ b/src/data-table/src/use-scroll.ts
@ -169,12 +169,12 @@ export function useScroll (
  })
  return {
    styleScrollXRef,
-    fixedColumnLeftMap: fixedColumnLeftMapRef,
-    fixedColumnRightMap: fixedColumnRightMapRef,
-    leftFixedColumns: leftFixedColumnsRef,
-    rightFixedColumns: rightFixedColumnsRef,
-    leftActiveFixedColKey: leftActiveFixedColKeyRef,
-    rightActiveFixedColKey: rightActiveFixedColKeyRef,
+    fixedColumnLeftMapRef,
+    fixedColumnRightMapRef,
+    leftFixedColumnsRef,
+    rightFixedColumnsRef,
+    leftActiveFixedColKeyRef,
+    rightActiveFixedColKeyRef,
    deriveActiveRightFixedColumn,
    deriveActiveLeftFixedColumn,
    handleTableBodyScroll,
--- a/src/data-table/src/use-table-data.ts
+++ b/src/data-table/src/use-table-data.ts
@ -26,9 +26,9 @@ import { call, warn } from '../../_utils'
 export function useTableData (
  props: DataTableSetupProps,
  {
-    dataRelatedCols
+    dataRelatedColsRef
  }: {
-    dataRelatedCols: ComputedRef<
+    dataRelatedColsRef: ComputedRef<
    Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>
    >
  }
@ -44,7 +44,7 @@ export function useTableData (
  const uncontrolledCurrentPageRef = ref(1)
  const uncontrolledPageSizeRef = ref(10)

-  dataRelatedCols.value.forEach((column) => {
+  dataRelatedColsRef.value.forEach((column) => {
    if (column.sorter !== undefined) {
      uncontrolledSortStateRef.value = {
        columnKey: column.key,
@ -102,7 +102,7 @@ export function useTableData (
  const mergedSortStateRef = computed<SortState | null>(() => {
    // If one of the columns's sort order is false or 'ascend' or 'descend',
    // the table's controll functionality should work in controlled manner.
-    const columnsWithControlledSortOrder = dataRelatedCols.value.filter(
+    const columnsWithControlledSortOrder = dataRelatedColsRef.value.filter(
      (column) =>
        column.type !== 'selection' &&
        column.sorter !== undefined &&
@ -132,7 +132,7 @@ export function useTableData (
  })

  const mergedFilterStateRef = computed<FilterState>(() => {
-    const columnsWithControlledFilter = dataRelatedCols.value.filter(
+    const columnsWithControlledFilter = dataRelatedColsRef.value.filter(
      (column) => {
        return (
          column.filterOptionValues !== undefined ||
@ -346,7 +346,7 @@ export function useTableData (
    if (!columnKey) {
      clearSorter()
    } else {
-      const columnToSort = dataRelatedCols.value.find(
+      const columnToSort = dataRelatedColsRef.value.find(
        (column) =>
          column.type !== 'selection' &&
          column.type !== 'expand' &&
@ -383,15 +383,14 @@ export function useTableData (
    }
  }
  return {
-    treeMate: treeMateRef,
-    mergedCurrentPage: mergedCurrentPageRef,
-    mergedPagination: mergedPaginationRef,
-    paginatedData: paginatedDataRef,
-    currentPage: mergedCurrentPageRef,
-    mergedFilterState: mergedFilterStateRef,
-    mergedSortState: mergedSortStateRef,
-    hoverKey: ref<RowKey | null>(null),
-    selectionColumn: selectionColumnRef,
+    treeMateRef,
+    mergedCurrentPageRef,
+    mergedPaginationRef,
+    paginatedDataRef,
+    mergedFilterStateRef,
+    mergedSortStateRef: mergedSortStateRef,
+    hoverKeyRef: ref<RowKey | null>(null),
+    selectionColumnRef,
    doUpdateFilters,
    doUpdateSorter,
    doUpdatePageSize,