stk-table-vue 0.6.17 → 0.7.0

package/README.md

@@ -1,213 +1,211 @@
-<p align="center">
-    <a href="https://ja-plus.github.io/stk-table-vue/">
-        <img src="./docs-src/public/assets/logo.svg" width="152">
-    </a>
-    <h3 align='center'>Stk Table Vue</h3>
-    <p align="center">
-        <a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/v/stk-table-vue"></a>
-        <a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/dw/stk-table-vue"></a>
-        <a href="https://github.com/ja-plus/stk-table-vue/stargazers"><img src="https://img.shields.io/github/stars/ja-plus/stk-table-vue.svg"></a>
-        <a href="https://raw.githubusercontent.com/ja-plus/stk-table-vue/master/LICENSE"><img src="https://img.shields.io/npm/l/stk-table-vue"></a>
-        <a href="https://github.com/ja-plus/stk-table-vue"><img src="https://img.shields.io/npm/types/stk-table-vue"></a>
-    </p>
-</p>
-
-> StK Table (Sticky Table) 是一个基于Vue 的高性能虚拟列表组件。
-> 用于实时数据展示，数据高亮动效。
-
-> Vue2.7支持引入源码(**ts**)使用。
-
-## Doc
-文档： [Stk Table Vue 高性能虚拟表格](https://ja-plus.github.io/stk-table-vue/)
-
-## Repo: 
-- [Github](https://github.com/ja-plus/stk-table-vue)
-- [Gitee](https://gitee.com/japlus/stk-table-vue) 🇨🇳
-
-## Demo
-
-[<span style="font-size: 16px;font-weight: bold;">Online Demo</span>](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)
-
-## Feature TODO:
-* [x] 高亮行，单元格。
-  - [x] 使用 `Web Animations API` 实现高亮。(`v0.3.4` 变更为默认值)
-  - [x] 支持配置高亮参数（持续时间，颜色，频率）。(`v0.2.9`)
-  - [x] `setHighlightDimRow`/`setHighlightCellRow`支持自定义高亮css类名。(`v0.2.9`)
-* [x] 虚拟列表。
-  - [x] 纵向。
-  - [x] 横向（必须设置列宽）。
-  - [x] 支持不定行高。（`v0.6.0`）
-* [x] 列固定。
-  - [x] 固定列阴影。
-    - [x] 多级表头固定列阴影。
-    - [x] sticky column 动态计算阴影位置。(`v0.4.0`)
-* [x] 行展开。(`v0.5.0`)
-* [x] 行拖动。(`v0.5.0`)
-* [] 列筛选。
-* [x] 斑马纹。
-* [x] 拖动更改列顺序。
-* [x] 拖动调整列宽。
-* [x] 排序
-  - [x] 支持配置 `null` | `undefined` 永远排最后。
-  - [x] 支持配置 string 使用 `String.prototype.localCompare` 排序。
-* [x] 多级表头。
-  - [] 横向虚拟滚动。
-* [x] 支持table-layout: fixed 配置。
-* [x] 鼠标悬浮在表格上，键盘滚动虚拟表格。
-  - [x] 键盘 `ArrowUp`/`ArrowDown`/`ArrowLeft`/`ArrowRight`/`PageUp`/ `PageDown` 按键支持。
-* [] 非虚拟滚动时，大数据分批加载。
-* [x] vue2.7支持（引入源码使用）。
-  - [x] `props.optimizeVue2Scroll` 优化vue2虚拟滚动流畅度。(`v0.2.0`)
-* [x] 支持配置序号列。`StkTableColumn['type']`。(`v0.3.0`)
-* [x] `props.cellHover`单元格悬浮样式。(`v0.3.2`)
-* [] 惯性滚动优化。
-
-
-## Usage
-> npm install stk-table-vue
-
-```html
-<script setup>
-import { StkTable } from 'stk-table-vue'
-import { ref, useTemplateRef } from 'vue'
-const stkTableRef = ref<InstanceType<typeof StkTable>>();
-// or Vue 3.5 useTemplateRef
-const stkTableRef = useTemplateRef('stkTableRef');
-
-// highlight row
-stkTableRef.value.setHighlightDimRow([rowKey]，{
-  method: 'css'|'js'|'animation',// 默认 animation。
-  className: 'custom-class-name', // method css 时生效。
-  keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}],//same as https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
-  duration: 2000,// 动画时长。
-});
- // highlight cell
-stkTableRef.value.setHighlightDimCell(rowKey, colDataIndex, {
-  method: 'css'|'animation',
-  className:'custom-class-name', // method css 时生效。
-  keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}], // method animation 时生效。
-  duration: 2000,// 动画时长。
-});
-
-const columns = [
-  {title: 'name', dataIndex: 'name'},
-  {title: 'age', dataIndex: 'age'},
-  {title: 'address', dataIndex: 'address'},
-];
-
-const dataSource = [
-  {id: 1, name: 'John', age: 32, address: 'New York'},
-  {id: 2, name: 'Jim', age: 42, address: 'London'},
-  {id: 3, name: 'Joe', age: 52, address: 'Tokyo'},
-  {id: 4, name: 'Jack', age: 62, address: 'Sydney'},
-  {id: 5, name: 'Jill', age: 72, address: 'Paris'},
-]
-
-</script>
-
-<template>
-    <StkTable ref='stkTableRef' row-key="id" :data-source="dataSource" :columns="columns"></StkTable>
-</template>
-
-```
-
-### Vue2.7 Usage
-[在vue2中使用](https://ja-plus.github.io/stk-table-vue/main/start/vue2-usage.html)
-
-## Notice
-注意，组件会改动 `props.columns` 中的对象。如果多个组件 `columns` 数组元素存在引用同一个 `StkTableColumn` 对象。则考虑赋值 `columns` 前进行深拷贝。
-
-## API
-### Props
-[Props 表格配置](https://ja-plus.github.io/stk-table-vue/main/api/table-props.html)
-
-### Emits
-[Emits 事件](https://ja-plus.github.io/stk-table-vue/main/api/emits.html)
-
-### Slots
-[Slots 插槽](https://ja-plus.github.io/stk-table-vue/main/api/slots.html)
-
-### Expose
-[Expose 实例方法](https://ja-plus.github.io/stk-table-vue/main/api/expose.html)
-
-### StkTableColumn 列配置
-[StkTableColumn 列配置](https://ja-plus.github.io/stk-table-vue/main/api/stk-table-column.html)
-
-### setHighlightDimCell & setHighlightDimRow
-[高亮使用文档](https://ja-plus.github.io/stk-table-vue/main/api/expose.html#sethighlightdimcell)
-
-
-### Example
-```vue
-<template>
- <StkTable
-    ref="stkTable"
-    row-key="name"
-    v-model:columns="columns"
-    :style="{height:props.height}"
-    theme='dark'
-    height='200px'
-    bordered="h"
-    :row-height="28"
-    :show-overflow="false"
-    :show-header-overflow="false"
-    :sort-remote="false"
-    col-resizable
-    header-drag
-    virtual
-    virtual-x
-    no-data-full
-    col-resizable
-    auto-resize
-    fixed-col-shadow
-    :col-min-width="10"
-    :headless="false"
-    :data-source="dataSource"
-    @current-change="onCurrentChange"
-    @row-menu="onRowMenu"
-    @header-row-menu="onHeaderRowMenu"
-    @row-click="onRowClick"
-    @row-dblclick="onRowDblclick"
-    @sort-change="handleSortChange"
-    @cell-click="onCellClick"
-    @header-cell-click="onHeaderCellClick"
-    @scroll="onTableScroll"
-    @scroll-x="onTableScrollX"
-    @col-order-change="onColOrderChange"
-  />
-</template>
-<script setup>
-  import { h, defineComponent } from 'vue';
-  const columns = [
-    {
-      title: 'Name',
-      dataIndex: 'name',
-      fixed: 'left',
-      width: '200px',
-      headerClassName: 'my-th',
-      className: 'my-td',
-      sorter: true,
-      customHeaderCell: function FunctionalComponent(props){
-          return h(
-              'span',
-              { style: 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap' },
-              props.col.title + '(render) text-overflow,',
-          );
-      },
-      customCell: defineComponent({
-        setup(){
-          //...
-          return () => <div></div> // vue jsx
-        }
-      })
-    },
-  ]
-</script>
-```
-
-
-## Other
-* `$*$` 兼容注释
-
-### Planed removal APi
-* `setHighlightDimRow` 中的 `method="js"`。观察animation Api 是否足够满足使用场景。若足够满足计划在后期移除，并且可以移除 `d3-interpolate` 依赖。
+<p align="center">
+    <a href="https://ja-plus.github.io/stk-table-vue/">
+        <img src="./docs-src/public/assets/logo.svg" width="152">
+    </a>
+    <h3 align='center'>Stk Table Vue</h3>
+    <p align="center">
+        <a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/v/stk-table-vue"></a>
+        <a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/dw/stk-table-vue"></a>
+        <a href="https://github.com/ja-plus/stk-table-vue/stargazers"><img src="https://img.shields.io/github/stars/ja-plus/stk-table-vue.svg"></a>
+        <a href="https://raw.githubusercontent.com/ja-plus/stk-table-vue/master/LICENSE"><img src="https://img.shields.io/npm/l/stk-table-vue"></a>
+        <a href="https://github.com/ja-plus/stk-table-vue"><img src="https://img.shields.io/npm/types/stk-table-vue"></a>
+    </p>
+</p>
+
+> StK Table (Sticky Table) 是一个基于Vue 的高性能虚拟列表组件。
+> 用于实时数据展示，数据高亮动效。
+
+> Vue2.7支持引入源码(**ts**)使用。
+
+## Doc
+文档： [Stk Table Vue 高性能虚拟表格](https://ja-plus.github.io/stk-table-vue/)
+
+## Repo: 
+- [Github](https://github.com/ja-plus/stk-table-vue)
+- [Gitee](https://gitee.com/japlus/stk-table-vue) 🇨🇳
+
+## Demo
+
+[<span style="font-size: 16px;font-weight: bold;">Online Demo</span>](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)
+
+## Feature TODO:
+* [x] 高亮行，单元格。
+  - [x] 使用 `Web Animations API` 实现高亮。(`v0.3.4` 变更为默认值)
+  - [x] 支持配置高亮参数（持续时间，颜色，频率）。(`v0.2.9`)
+  - [x] `setHighlightDimRow`/`setHighlightCellRow`支持自定义高亮css类名。(`v0.2.9`)
+* [x] 虚拟列表。
+  - [x] 纵向。
+  - [x] 横向（必须设置列宽）。
+  - [x] 支持不定行高。（`v0.6.0`）
+* [x] 列固定。
+  - [x] 固定列阴影。
+    - [x] 多级表头固定列阴影。
+    - [x] sticky column 动态计算阴影位置。(`v0.4.0`)
+* [x] 行展开。(`v0.5.0`)
+* [x] 行拖动。(`v0.5.0`)
+* [x] 树形。(`v0.7.0`)
+* [] 列筛选。
+* [x] 斑马纹。
+* [x] 拖动更改列顺序。
+* [x] 拖动调整列宽。
+* [x] 排序
+  - [x] 支持配置 `null` | `undefined` 永远排最后。
+  - [x] 支持配置 string 使用 `String.prototype.localCompare` 排序。
+* [x] 多级表头。
+  - [] 横向虚拟滚动。
+* [x] 支持table-layout: fixed 配置。
+* [x] 鼠标悬浮在表格上，键盘滚动虚拟表格。
+  - [x] 键盘 `ArrowUp`/`ArrowDown`/`ArrowLeft`/`ArrowRight`/`PageUp`/ `PageDown` 按键支持。
+* [] 非虚拟滚动时，大数据分批加载。
+* [x] vue2.7支持（引入源码使用）。
+  - [x] `props.optimizeVue2Scroll` 优化vue2虚拟滚动流畅度。(`v0.2.0`)
+* [x] 支持配置序号列。`StkTableColumn['type']`。(`v0.3.0`)
+* [x] `props.cellHover`单元格悬浮样式。(`v0.3.2`)
+* [] 惯性滚动优化。
+
+
+## Usage
+> npm install stk-table-vue
+
+```html
+<script setup>
+import { StkTable } from 'stk-table-vue'
+import { ref, useTemplateRef } from 'vue'
+const stkTableRef = ref<InstanceType<typeof StkTable>>();
+// or Vue 3.5 useTemplateRef
+const stkTableRef = useTemplateRef('stkTableRef');
+
+// highlight row
+stkTableRef.value.setHighlightDimRow([rowKey]，{
+  method: 'css'|'js'|'animation',// 默认 animation。
+  className: 'custom-class-name', // method css 时生效。
+  keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}],//same as https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
+  duration: 2000,// 动画时长。
+});
+ // highlight cell
+stkTableRef.value.setHighlightDimCell(rowKey, colDataIndex, {
+  method: 'css'|'animation',
+  className:'custom-class-name', // method css 时生效。
+  keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}], // method animation 时生效。
+  duration: 2000,// 动画时长。
+});
+
+const columns = [
+  {title: 'name', dataIndex: 'name'},
+  {title: 'age', dataIndex: 'age'},
+  {title: 'address', dataIndex: 'address'},
+];
+
+const dataSource = [
+  {id: 1, name: 'John', age: 32, address: 'New York'},
+  {id: 2, name: 'Jim', age: 42, address: 'London'},
+  {id: 3, name: 'Joe', age: 52, address: 'Tokyo'},
+  {id: 4, name: 'Jack', age: 62, address: 'Sydney'},
+  {id: 5, name: 'Jill', age: 72, address: 'Paris'},
+]
+
+</script>
+
+<template>
+    <StkTable ref='stkTableRef' row-key="id" :data-source="dataSource" :columns="columns"></StkTable>
+</template>
+
+```
+
+### Vue2.7 Usage
+[在vue2中使用](https://ja-plus.github.io/stk-table-vue/main/start/vue2-usage.html)
+
+## Notice
+注意，组件会改动 `props.columns` 中的对象。如果多个组件 `columns` 数组元素存在引用同一个 `StkTableColumn` 对象。则考虑赋值 `columns` 前进行深拷贝。
+
+## API
+### Props
+[Props 表格配置](https://ja-plus.github.io/stk-table-vue/main/api/table-props.html)
+
+### Emits
+[Emits 事件](https://ja-plus.github.io/stk-table-vue/main/api/emits.html)
+
+### Slots
+[Slots 插槽](https://ja-plus.github.io/stk-table-vue/main/api/slots.html)
+
+### Expose
+[Expose 实例方法](https://ja-plus.github.io/stk-table-vue/main/api/expose.html)
+
+### StkTableColumn 列配置
+[StkTableColumn 列配置](https://ja-plus.github.io/stk-table-vue/main/api/stk-table-column.html)
+
+### setHighlightDimCell & setHighlightDimRow
+[高亮使用文档](https://ja-plus.github.io/stk-table-vue/main/api/expose.html#sethighlightdimcell)
+
+
+### Example
+```vue
+<template>
+ <StkTable
+    ref="stkTable"
+    row-key="name"
+    v-model:columns="columns"
+    :style="{height:props.height}"
+    theme='dark'
+    height='200px'
+    bordered="h"
+    :row-height="28"
+    :show-overflow="false"
+    :show-header-overflow="false"
+    :sort-remote="false"
+    col-resizable
+    header-drag
+    virtual
+    virtual-x
+    no-data-full
+    col-resizable
+    auto-resize
+    fixed-col-shadow
+    :col-min-width="10"
+    :headless="false"
+    :data-source="dataSource"
+    @current-change="onCurrentChange"
+    @row-menu="onRowMenu"
+    @header-row-menu="onHeaderRowMenu"
+    @row-click="onRowClick"
+    @row-dblclick="onRowDblclick"
+    @sort-change="handleSortChange"
+    @cell-click="onCellClick"
+    @header-cell-click="onHeaderCellClick"
+    @scroll="onTableScroll"
+    @scroll-x="onTableScrollX"
+    @col-order-change="onColOrderChange"
+  />
+</template>
+<script setup>
+  import { h, defineComponent } from 'vue';
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      fixed: 'left',
+      width: '200px',
+      headerClassName: 'my-th',
+      className: 'my-td',
+      sorter: true,
+      customHeaderCell: function FunctionalComponent(props){
+          return h(
+              'span',
+              { style: 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap' },
+              props.col.title + '(render) text-overflow,',
+          );
+      },
+      customCell: defineComponent({
+        setup(){
+          //...
+          return () => <div></div> // vue jsx
+        }
+      })
+    },
+  ]
+</script>
+```
+
+
+## Other
+* `$*$` 兼容注释

package/lib/src/StkTable/StkTable.vue.d.ts

@@ -1,4 +1,4 @@
-import { AutoRowHeightConfig, DragRowConfig, ExpandConfig, HeaderDragConfig, HighlightConfig, Order, PrivateRowDT, SeqConfig, SortConfig, SortOption, StkTableColumn, UniqKeyProp, ColResizableConfig } from './types/index';
+import { AutoRowHeightConfig, ColResizableConfig, DragRowConfig, ExpandConfig, HeaderDragConfig, HighlightConfig, Order, PrivateRowDT, SeqConfig, SortConfig, SortOption, StkTableColumn, TreeConfig, UniqKeyProp } from './types/index';
 
 /** Generic stands for DataType */
 type DT = any & PrivateRowDT;
@@ -52,17 +52,6 @@ declare function getSortColumns(): {
     key: string | number | symbol | undefined;
     order: "desc" | "asc";
 }[];
-/**
- *
- * @param rowKeyOrRow rowKey or row
- * @param expand expand or collapse
- * @param data { col?: StkTableColumn<DT> }
- * @param data.silent if set true, not emit `toggle-row-expand`, default:false
- */
-declare function setRowExpand(rowKeyOrRow: string | undefined | DT, expand?: boolean, data?: {
-    col?: StkTableColumn<DT>;
-    silent?: boolean;
-}): void;
 declare function __VLS_template(): {
     tableHeader?(_: {
         col: StkTableColumn<any>;
@@ -142,7 +131,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     /** 单元格再次点击否可以取消选中 (cellActive=true)*/
     selectedCellRevokable?: boolean;
     /** 表头是否可拖动。支持回调函数。 */
-    headerDrag?: HeaderDragConfig;
+    headerDrag?: boolean | HeaderDragConfig;
     /**
      * 给行附加className<br>
      * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
@@ -187,6 +176,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     expandConfig?: ExpandConfig;
     /** 行拖动配置 */
     dragRowConfig?: DragRowConfig;
+    /** 树形配置 */
+    treeConfig?: TreeConfig;
     /**
      * 固定头，固定列实现方式。(非响应式)
      *
@@ -224,7 +215,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     columns: () => never[];
     dataSource: () => never[];
     rowKey: string;
-    colKey: string;
     emptyCellText: string;
     noDataFull: boolean;
     showNoData: boolean;
@@ -252,6 +242,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     seqConfig: () => {};
     expandConfig: () => {};
     dragRowConfig: () => {};
+    treeConfig: () => {};
     cellFixedMode: string;
     smoothScroll: boolean;
     scrollRowByRow: boolean;
@@ -352,7 +343,10 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * en: Set expanded rows
      * @see {@link setRowExpand}
      */
-    setRowExpand: typeof setRowExpand;
+    setRowExpand: (rowKeyOrRow: string | undefined | PrivateRowDT, expand?: boolean, data?: {
+        col?: StkTableColumn<PrivateRowDT>;
+        silent?: boolean;
+    }) => void;
     /**
      * 不定行高时，如果行高有变化，则调用此方法更新行高。
      *
@@ -367,6 +361,19 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * @see {@link clearAllAutoHeight}
      */
     clearAllAutoHeight: () => void;
+    /**
+     * 设置树节点展开状态
+     *
+     * en: Set tree node expand state
+     * @see {@link setTreeExpand}
+     */
+    setTreeExpand: (row: (import('./types/index').UniqKey | (PrivateRowDT & {
+        children?: (PrivateRowDT & /*elided*/ any)[];
+    })) | (import('./types/index').UniqKey | (PrivateRowDT & {
+        children?: (PrivateRowDT & /*elided*/ any)[];
+    }))[], option?: {
+        expand? /** 是否高亮选中的行 */: boolean;
+    }) => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "sort-change": (col: StkTableColumn<any> | null, order: Order, data: any[], sortConfig: SortConfig<any>) => void;
     "row-click": (ev: MouseEvent, row: any, data: {
@@ -412,6 +419,11 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         row: DT;
         col: StkTableColumn<DT> | null;
     }) => void;
+    "toggle-tree-expand": (data: {
+        expanded: boolean;
+        row: DT;
+        col: StkTableColumn<DT> | null;
+    }) => void;
     "update:columns": (cols: StkTableColumn<any>[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     width?: string;
@@ -481,7 +493,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     /** 单元格再次点击否可以取消选中 (cellActive=true)*/
     selectedCellRevokable?: boolean;
     /** 表头是否可拖动。支持回调函数。 */
-    headerDrag?: HeaderDragConfig;
+    headerDrag?: boolean | HeaderDragConfig;
     /**
      * 给行附加className<br>
      * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
@@ -526,6 +538,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     expandConfig?: ExpandConfig;
     /** 行拖动配置 */
     dragRowConfig?: DragRowConfig;
+    /** 树形配置 */
+    treeConfig?: TreeConfig;
     /**
      * 固定头，固定列实现方式。(非响应式)
      *
@@ -563,7 +577,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     columns: () => never[];
     dataSource: () => never[];
     rowKey: string;
-    colKey: string;
     emptyCellText: string;
     noDataFull: boolean;
     showNoData: boolean;
@@ -591,6 +604,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     seqConfig: () => {};
     expandConfig: () => {};
     dragRowConfig: () => {};
+    treeConfig: () => {};
     cellFixedMode: string;
     smoothScroll: boolean;
     scrollRowByRow: boolean;
@@ -601,10 +615,20 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     }) => any) | undefined;
     "onUpdate:columns"?: ((cols: StkTableColumn<any>[]) => any) | undefined;
     "onCol-resize"?: ((col: StkTableColumn<any>) => any) | undefined;
+    "onToggle-row-expand"?: ((data: {
+        expanded: boolean;
+        row: DT;
+        col: StkTableColumn<DT> | null;
+    }) => any) | undefined;
     "onTh-drag-start"?: ((dragStartKey: string) => any) | undefined;
     "onTh-drop"?: ((targetColKey: string) => any) | undefined;
     "onCol-order-change"?: ((dragStartKey: string, targetColKey: string) => any) | undefined;
     "onRow-order-change"?: ((dragStartKey: string, targetRowKey: string) => any) | undefined;
+    "onToggle-tree-expand"?: ((data: {
+        expanded: boolean;
+        row: DT;
+        col: StkTableColumn<DT> | null;
+    }) => any) | undefined;
     "onSort-change"?: ((col: StkTableColumn<any> | null, order: Order, data: any[], sortConfig: SortConfig<any>) => any) | undefined;
     "onRow-click"?: ((ev: MouseEvent, row: any, data: {
         rowIndex: number;
@@ -635,11 +659,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     }) => any) | undefined;
     "onHeader-cell-click"?: ((ev: MouseEvent, col: StkTableColumn<any>) => any) | undefined;
     "onScroll-x"?: ((ev: Event) => any) | undefined;
-    "onToggle-row-expand"?: ((data: {
-        expanded: boolean;
-        row: DT;
-        col: StkTableColumn<DT> | null;
-    }) => any) | undefined;
 }>, {
     width: string;
     minWidth: string;
@@ -652,7 +671,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     optimizeVue2Scroll: boolean;
     rowKey: UniqKeyProp;
     headerRowHeight: number | null;
-    colKey: UniqKeyProp;
     fixedMode: boolean;
     theme: "light" | "dark";
     rowHover: boolean;
@@ -675,7 +693,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     cellHover: boolean;
     cellActive: boolean;
     selectedCellRevokable: boolean;
-    headerDrag: HeaderDragConfig;
+    headerDrag: boolean | HeaderDragConfig;
     rowClassName: (row: DT, i: number) => string;
     colResizable: boolean | ColResizableConfig<DT>;
     colMinWidth: number;
@@ -687,6 +705,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     seqConfig: SeqConfig;
     expandConfig: ExpandConfig;
     dragRowConfig: DragRowConfig;
+    treeConfig: TreeConfig;
     cellFixedMode: "sticky" | "relative";
     smoothScroll: boolean;
     scrollRowByRow: boolean;

package/lib/src/StkTable/components/TriangleIcon.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/src/StkTable/const.d.ts

@@ -15,7 +15,6 @@ export declare const HIGHLIGHT_COLOR: {
 };
 export declare const HIGHLIGHT_DURATION = 2000;
 /** highlight change frequency 1000/30 -> 30FPS */
-export declare const HIGHLIGHT_FREQ: number;
 export declare const HIGHLIGHT_ROW_CLASS = "highlight-row";
 export declare const HIGHLIGHT_CELL_CLASS = "highlight-cell";
 /** legacy sticky compatible mode  */

package/lib/src/StkTable/types/highlightDimOptions.d.ts

@@ -16,10 +16,6 @@ type HighlightDimCssOption = HighlightDimBaseOption & {
     /** control delay time to remove className */
     duration?: number;
 };
-type HighlightDimJsOption = HighlightDimBaseOption & {
-    /** use d3-interpolate js to change background color */
-    method: 'js';
-};
 export type HighlightDimCellOption = HighlightDimBaseOption | HighlightDimAnimationOption | HighlightDimCssOption;
-export type HighlightDimRowOption = HighlightDimBaseOption | HighlightDimAnimationOption | HighlightDimCssOption | HighlightDimJsOption;
+export type HighlightDimRowOption = HighlightDimBaseOption | HighlightDimAnimationOption | HighlightDimCssOption;
 export {};