feat(data-table): adds scrollTo method, closes #2570

CHANGELOG.en-US.md

@@ -18,6 +18,7 @@
 - `n-select` adds `node-props` prop.
 - `n-popselect` adds `node-props` prop.
 - `n-popselect` adds `virtual-scroll` prop.
+- `n-data-table` adds `scrollTo` method, closes [#2570](https://github.com/TuSimple/naive-ui/issues/2570).
 
 ## 2.30.3
 

CHANGELOG.zh-CN.md

@@ -18,6 +18,7 @@
 - `n-select` 新增 `node-props` 属性
 - `n-popselect` 新增 `node-props` 属性
 - `n-popselect` 新增 `virtual-scroll` 属性
+- `n-data-table` 新增 `scrollTo` 方法，关闭 [#2570](https://github.com/TuSimple/naive-ui/issues/2570)
 
 ## 2.30.3
 

package.json

@@ -156,7 +156,7 @@
     "treemate": "^0.3.11",
     "vdirs": "^0.1.8",
     "vooks": "^0.2.12",
-    "vueuc": "^0.4.39"
+    "vueuc": "^0.4.40"
   },
   "sideEffects": false,
   "homepage": "https://www.naiveui.com",

src/data-table/demos/enUS/index.demo-entry.md

@@ -179,13 +179,14 @@ type DataTableCreateSummary = (pageData: RowData[]) =>
 
 These methods can help you control table in an uncontrolled manner. However, it's not recommended to use them to implement some async operations. If async operations is needed, use table in a **controlled** manner.
 
-| Name | Type | Description |
-| --- | --- | --- |
-| clearFilters | `() => void` | Clear all filter state. |
-| clearSorter | `() => void` | Clear all sort state. |
-| filters | `(filters: DataTableFilterState \| null) => void` | Set the active filters of the table. |
-| page | `(page: number) => void` | Manually set the page. |
-| sort | `(columnKey: string \| number, order: 'ascend' \| 'descend' \| false) => void` | Set the sort state of the table. |
+| Name | Type | Description | Version |
+| --- | --- | --- | --- |
+| clearFilters | `() => void` | Clear all filter state. |  |
+| clearSorter | `() => void` | Clear all sort state. |  |
+| filters | `(filters: DataTableFilterState \| null) => void` | Set the active filters of the table. |  |
+| page | `(page: number) => void` | Manually set the page. |  |
+| scrollTo | `(options: { left?: number, top?: number, behavior?: ScrollBehavior }): void & (x: number, y: number) => void` | Scroll content. | NEXT_VERSION |
+| sort | `(columnKey: string \| number, order: 'ascend' \| 'descend' \| false) => void` | Set the sort state of the table. |  |
 
 ### DataTable Slots
 

src/data-table/demos/zhCN/index.demo-entry.md

@@ -184,13 +184,14 @@ type DataTableCreateSummary = (pageData: RowData[]) =>
 
 这些方法可以帮助你在非受控的状态下改变表格，但是，并不推荐在异步的状况下使用这些方法。如果需要异步操作，最好用**受控**的方式使用表格。
 
-| 名称 | 类型 | 说明 |
-| --- | --- | --- |
-| clearFilters | `() => void` | 清空所有的 filter 状态 |
-| clearSorter | `() => void` | 清空所有的 sort 状态 |
-| filters | `(filters: DataTableFilterState \| null) => void` | 设定表格当前的过滤器 |
-| page | `(page: number) => void` | 手动设置 page |
-| sort | `(columnKey: string \| number \| null, order: 'ascend' \| 'descend' \| false) => void` | 设定表格的过滤状态 |
+| 名称 | 类型 | 说明 | 版本 |
+| --- | --- | --- | --- |
+| clearFilters | `() => void` | 清空所有的 filter 状态 |  |
+| clearSorter | `() => void` | 清空所有的 sort 状态 |  |
+| filters | `(filters: DataTableFilterState \| null) => void` | 设定表格当前的过滤器 |  |
+| page | `(page: number) => void` | 手动设置 page |  |
+| scrollTo | `(options: { left?: number, top?: number, behavior?: ScrollBehavior }): void & (x: number, y: number) => void` | 滚动内容 | NEXT_VERSION |
+| sort | `(columnKey: string \| number \| null, order: 'ascend' \| 'descend' \| false) => void` | 设定表格的过滤状态 |  |
 
 ### DataTable Slots
 

src/data-table/src/DataTable.tsx

@@ -402,7 +402,10 @@ export default defineComponent({
       clearSorter,
       page,
       sort,
-      clearFilter
+      clearFilter,
+      scrollTo: (arg0: any, arg1?: any) => {
+        mainTableInstRef.value?.scrollTo(arg0, arg1)
+      }
     }
     const cssVarsRef = computed(() => {
       const { size } = props

src/data-table/src/MainTable.tsx

@@ -61,7 +61,10 @@ export default defineComponent({
     }
     const exposedMethods: MainTableRef = {
       getBodyElement,
-      getHeaderElement
+      getHeaderElement,
+      scrollTo (arg0: any, arg1?: any) {
+        bodyInstRef.value?.scrollTo(arg0, arg1)
+      }
     }
     watchEffect(() => {
       const { value: selfEl } = selfElRef

src/data-table/src/TableParts/Body.tsx

@@ -310,7 +310,14 @@ export default defineComponent({
       scrollbarInstRef.value?.sync()
     }
     const exposedMethods: MainTableBodyRef = {
-      getScrollContainer
+      getScrollContainer,
+      scrollTo (arg0: any, arg1?: any) {
+        if (virtualScrollRef.value) {
+          virtualListRef.value?.scrollTo(arg0, arg1)
+        } else {
+          scrollbarInstRef.value?.scrollTo(arg0, arg1)
+        }
+      }
     }
 
     interface StyleCProps {

src/data-table/src/interface.ts

@@ -1,5 +1,6 @@
 import { TreeNode } from 'treemate'
 import { CSSProperties, Ref, VNodeChild, HTMLAttributes, Slots } from 'vue'
+import type { ScrollTo } from '../../scrollbar/src/Scrollbar'
 import { EllipsisProps } from '../../ellipsis/src/Ellipsis'
 import { NLocale } from '../../locales'
 import { MergedTheme } from '../../_mixins'
@@ -282,10 +283,12 @@ export interface FilterState {
 export interface MainTableRef {
   getHeaderElement: () => HTMLElement | null
   getBodyElement: () => HTMLElement | null
+  scrollTo: ScrollTo
 }
 
 export interface MainTableBodyRef {
   getScrollContainer: () => HTMLElement | null
+  scrollTo: ScrollTo
 }
 
 export interface MainTableHeaderRef {
@@ -308,6 +311,7 @@ export interface DataTableInst {
   clearSorter: () => void
   page: (page: number) => void
   sort: (columnKey: ColumnKey, order: SortOrder) => void
+  scrollTo: ScrollTo
   /** @deprecated it but just leave it here, it does no harm */
   clearFilter: () => void
 }