stk-table-vue 0.4.1 → 0.4.3

package/README.md

@@ -15,11 +15,10 @@ repo:
 * [] 固定列列宽拖动目标。
 
 ## Feature TODO:
-* [x] 高亮行，单元格。使用css @keyframes实现。
-  - [x] 虚拟滚动默认通过js计算行高亮背景色，可通过 `useCss` 设置为css @keyframe实现 。
-  - [x] 支持配置高亮参数（持续时间，颜色，频率（虚拟滚动））。(`v0.2.9`)
-  - [x] `setHighlightDimRow`/`setHighlightCellRow`支持自定义高亮css类名。(`v0.2.9`)
+* [x] 高亮行，单元格。
   - [x] 使用 `Web Animations API` 实现高亮。(`v0.3.4` 变更为默认值)
+  - [x] 支持配置高亮参数（持续时间，颜色，频率）。(`v0.2.9`)
+  - [x] `setHighlightDimRow`/`setHighlightCellRow`支持自定义高亮css类名。(`v0.2.9`)
 * [x] 虚拟滚动。
   - [x] 纵向。
   - [x] 横向（必须设置列宽）。
@@ -29,21 +28,16 @@ repo:
     - [x] sticky column 动态计算阴影位置。(`v0.4.0`)
 * [] 列筛选。
 * [x] 斑马纹。
-  - [x] 虚拟滚动斑马纹。
-* [x] 表头拖动更改顺序。
-* [x] 表头拖动调整列宽。
+* [x] 拖动更改列顺序。
+* [x] 拖动调整列宽。
 * [x] 排序
-  - [x] 基本表头点击排序。
   - [x] 支持配置 `null` | `undefined` 永远排最后。
   - [x] 支持配置 string 使用 `String.prototype.localCompare` 排序。
 * [x] 多级表头。
-  - [x] 支持最多`2级`表头。
-  - [x] 支持更多级表头。
   - [] 横向虚拟滚动。
 * [x] 支持table-layout: fixed 配置。
 * [x] 鼠标悬浮在表格上，键盘滚动虚拟表格。
-  - [x] 键盘 `ArrowUp`/`ArrowDown`/`ArrowLeft`/`ArrowRight` 按键支持。
-  - [x] 键盘 `PageUp`/ `PageDown` 按键支持。
+  - [x] 键盘 `ArrowUp`/`ArrowDown`/`ArrowLeft`/`ArrowRight`/`PageUp`/ `PageDown` 按键支持。
 * [] 非虚拟滚动时，大数据分批加载。
 * [x] vue2.7支持（引入源码使用）。
   - [x] `props.optimizeVue2Scroll` 优化vue2虚拟滚动流畅度。(`v0.2.0`)
@@ -51,8 +45,6 @@ repo:
 * [x] `props.cellHover`单元格悬浮样式。(`v0.3.2`)
 
 
-
-
 ## Usage
 > npm install stk-table-vue
 
@@ -64,15 +56,15 @@ const stkTable = ref<InstanceType<typeof StkTable>>();
 
 // highlight row
 stkTable.value.setHighlightDimRow([rowKey]，{
-  method: 'css'|'js'|'animation',// 是否使用css @keyframe实现。虚拟滚动下默认false。
-  className: 'custom-class-name',// useCss 为true时生效。
+  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
 stkTable.value.setHighlightDimCell(rowKey, colDataIndex, {
   method: 'css'|'animation',
-  className:'custom-class-name',// method css 时生效。
+  className:'custom-class-name', // method css 时生效。
   keyframe: [{backgroundColor:'#aaa'},{backgroundColor: '#222'}], // method animation 时生效。
   duration: 2000,// 动画时长。
 })
@@ -88,17 +80,17 @@ stkTable.value.setHighlightDimCell(rowKey, colDataIndex, {
 vue2.7 支持引入源码使用。依赖`less`。
 ```html
 <script>
-  import { StkTable } from 'stk-table-vue/src/StkTable/index';
+  import { StkTable } from 'stk-table-vue/src/StkTable/index'; // include less
 </script>
 ```
-不要less的话
+Use `css`
 ```html
 <script>
-  import { StkTable } from 'stk-table-vue/src/StkTable/StkTable.vue';
+  import StkTable from 'stk-table-vue/src/StkTable/StkTable.vue';
   import 'stk-table-vue/lib/style.css';
 </script>
 ```
-#### webpack TS 配置参考
+#### webpack TS
 ##### webpack.config.js
 ```js
  rules:[{ 
@@ -142,6 +134,12 @@ export type StkProps = {
   theme?: 'light' | 'dark';
   /** 行高 */
   rowHeight?: number;
+  /** 是否高亮鼠标悬浮的行 */
+  rowHover?: boolean;
+  /** 是否高亮选中的行 */
+  rowActive?: boolean;
+  /** 当前行再次点击否可以取消 */
+  rowCurrentRevokable?: boolean;
   /** 表头行高。default = rowHeight */
   headerRowHeight?: number | null;
   /** 虚拟滚动 */
@@ -152,7 +150,7 @@ export type StkProps = {
   columns?: StkTableColumn<any>[];
   /** 表格数据源 */
   dataSource?: any[];
-  /** 行唯一键 */
+  /** 行唯一键 (行唯一值不能为undefined）*/
   rowKey?: UniqKeyProp;
   /** 列唯一键 */
   colKey?: UniqKeyProp;
@@ -170,6 +168,7 @@ export type StkProps = {
   showOverflow?: boolean;
   /** 是否增加行hover class */
   showTrHoverClass?: boolean;
+ 
   /** 是否高亮鼠标悬浮的单元格 */
   cellHover?: boolean;
   /** 表头是否可拖动。支持回调函数。 */
@@ -262,9 +261,9 @@ export type StkProps = {
     (e: 'row-click', ev: MouseEvent, row: DT): void;
     /**
      * 选中一行触发。ev返回null表示不是点击事件触发的
-     * ```(ev: MouseEvent | null, row: DT, data: { select: boolean })```
+     * ```(ev: MouseEvent | null, row: DT | undefined,, data: { select: boolean })```
      */
-    (e: 'current-change', ev: MouseEvent | null, row: DT, data: { select: boolean }): void;
+    (e: 'current-change', ev: MouseEvent | null, row: DT | undefined,, data: { select: boolean }): void;
     /**
      * 行双击事件
      * ```(ev: MouseEvent, row: DT)```
@@ -431,7 +430,7 @@ export type SortConfig<T extends Record<string, any>> = {
     };
     /**
      * string排序是否使用 String.prototype.localCompare
-     * 默认true (&$&应该false)
+     * 默认true ($*$应该false)
      */
     stringLocaleCompare?: boolean;
 };
@@ -444,7 +443,7 @@ export type SortConfig<T extends Record<string, any>> = {
     rowKeyValues: UniqKey[],
       option: {
         method?: 'css' | 'animation' | 'js';
-        /** @deprecated 请使用method */
+        /** @deprecated use method */
         useCss?: boolean;
         className?: string;
         keyframe?: Parameters<Animatable['animate']>['0'];
@@ -458,7 +457,7 @@ export type SortConfig<T extends Record<string, any>> = {
     rowKeyValues: UniqKey[],
       option: {
         method?: 'css' | 'animation' | 'js';  
-        /** @deprecated 请使用method */
+        /** @deprecated use method */
         useCss?: boolean;
         className?: string;
         keyframe?: Parameters<Animatable['animate']>['0'];
@@ -542,7 +541,7 @@ export type SortConfig<T extends Record<string, any>> = {
       customCell: defineComponent({
         setup(){
           //...
-          return () => <div></div>
+          return () => <div></div> // vue jsx
         }
       })
     },
@@ -570,6 +569,11 @@ export type SortConfig<T extends Record<string, any>> = {
     - 在 `customCell` 较多且复杂时。
     - 大量 highlight 动画时。
 
+## Tips
+### props.fixedMode
+* **低版本浏览器** 需要设置 `props.width`（default: width=fit-content不生效）。否则列宽不设宽度会变为0。
+
+
 ## Other
 * `$*$` 兼容注释
 

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

@@ -1,6 +1,7 @@
 import { HighlightConfig, Order, SeqConfig, SortConfig, SortOption, SortState, StkTableColumn, UniqKeyProp } from './types/index';
+
 /** Generic stands for DataType */
-type DT = any;
+type DT = Record<string | number, any>;
 /**
  * 选中一行，
  * @param {string} rowKey selected rowKey, null to unselect
@@ -23,7 +24,7 @@ declare function setSorter(dataIndex: string, order: Order, option?: {
     force?: boolean;
     silent?: boolean;
     sort?: boolean;
-}): any[];
+}): DT[];
 /** 重置排序 */
 declare function resetSorter(): void;
 /**
@@ -33,10 +34,10 @@ declare function resetSorter(): void;
  */
 declare function scrollTo(top?: number | null, left?: number | null): void;
 /** 获取当前状态的表格数据 */
-declare function getTableData(): any[];
+declare function getTableData(): DT[];
 /** 获取当前排序列的信息 */
-declare function getSortColumns(): SortState<DT>[];
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare function getSortColumns(): Partial<SortState<DT>>[];
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     width?: string | undefined;
     /** 最小表格宽度 */
     minWidth?: string | undefined;
@@ -44,7 +45,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     maxWidth?: string | undefined;
     /** 斑马线条纹 */
     stripe?: boolean | undefined;
-    /** 是否使用 table-layout:fixed */
+    /** 是否使用 table-layout:fixed(低版本浏览器需要设置table) */
     fixedMode?: boolean | undefined;
     /** 是否隐藏表头 */
     headless?: boolean | undefined;
@@ -52,6 +53,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     theme?: "light" | "dark" | undefined;
     /** 行高 */
     rowHeight?: number | undefined;
+    /** 是否高亮鼠标悬浮的行 */
+    rowHover?: boolean | undefined;
+    /** 是否高亮选中的行 */
+    rowActive?: boolean | undefined;
+    /** 当前行再次点击否可以取消 */
+    rowCurrentRevokable?: boolean | undefined;
     /** 表头行高。default = rowHeight */
     headerRowHeight?: number | null | undefined;
     /** 虚拟滚动 */
@@ -59,17 +66,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /** x轴虚拟滚动(必须设置列宽)*/
     virtualX?: boolean | undefined;
     /** 表格列配置 */
-    columns?: StkTableColumn<any>[] | undefined;
+    columns?: StkTableColumn<DT>[] | undefined;
     /** 表格数据源 */
-    dataSource?: any[] | undefined;
-    /** 行唯一键 */
+    dataSource?: DT[] | undefined;
+    /** 行唯一键 （行唯一值不能为undefined） */
     rowKey?: UniqKeyProp | undefined;
     /** 列唯一键 */
     colKey?: UniqKeyProp | undefined;
     /** 空值展示文字 */
     emptyCellText?: string | ((option: {
-        row: any;
-        col: StkTableColumn<any>;
+        row: DT;
+        col: StkTableColumn<DT>;
     }) => string) | undefined;
     /** 暂无数据兜底高度是否撑满 */
     noDataFull?: boolean | undefined;
@@ -81,17 +88,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showHeaderOverflow?: boolean | undefined;
     /** 表体溢出是否展示... */
     showOverflow?: boolean | undefined;
-    /** 是否增加行hover class */
+    /** 是否增加行hover class $*$ rename*/
     showTrHoverClass?: boolean | undefined;
     /** 是否高亮鼠标悬浮的单元格 */
     cellHover?: boolean | undefined;
     /** 表头是否可拖动。支持回调函数。 */
-    headerDrag?: boolean | ((col: StkTableColumn<any>) => boolean) | undefined;
+    headerDrag?: boolean | ((col: StkTableColumn<DT>) => boolean) | undefined;
     /**
      * 给行附加className<br>
      * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
      */
-    rowClassName?: ((row: any, i: number) => string) | undefined;
+    rowClassName?: ((row: DT, i: number) => string) | undefined;
     /**
      * 列宽是否可拖动<br>
      * **不要设置**列minWidth，**必须**设置width<br>
@@ -119,7 +126,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /** 优化vue2 滚动 */
     optimizeVue2Scroll?: boolean | undefined;
     /** 排序配置 */
-    sortConfig?: SortConfig<any> | undefined;
+    sortConfig?: SortConfig<DT> | undefined;
     /** 隐藏头部title。可传入dataIndex数组 */
     hideHeaderTitle?: boolean | string[] | undefined;
     /** 高亮配置 */
@@ -145,6 +152,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     headless: boolean;
     theme: string;
     rowHeight: number;
+    rowHover: boolean;
+    rowActive: boolean;
+    rowCurrentRevokable: boolean;
     headerRowHeight: null;
     virtual: boolean;
     virtualX: boolean;
@@ -193,7 +203,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         duration?: number | undefined;
     }) => void;
     /** 设置高亮渐暗行 */
-    setHighlightDimRow: (rowKeyValues: import("./types/index").UniqKey[], option?: {
+    setHighlightDimRow: (rowKeyValues: import('./types/index').UniqKey[], option?: {
         method?: "animation" | "css" | "js" | undefined;
         useCss?: boolean | undefined;
         className?: string | undefined;
@@ -201,7 +211,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         duration?: number | undefined;
     }) => void;
     /** 表格排序列dataIndex */
-    sortCol: import("vue").Ref<string | null | undefined>;
+    sortCol: import('vue').Ref<string | number | undefined>;
     /** 获取当前排序状态 */
     getSortColumns: typeof getSortColumns;
     /** 设置排序 */
@@ -212,20 +222,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     scrollTo: typeof scrollTo;
     /** 获取表格数据 */
     getTableData: typeof getTableData;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "sort-change": (col: StkTableColumn<any>, order: Order, data: any[], sortConfig: SortConfig<any>) => void;
-    "row-click": (ev: MouseEvent, row: any) => void;
-    "current-change": (ev: MouseEvent | null, row: any, data: {
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "sort-change": (col: StkTableColumn<DT>, order: Order, data: DT[], sortConfig: SortConfig<DT>) => void;
+    "row-click": (ev: MouseEvent, row: DT) => void;
+    "current-change": (ev: MouseEvent | null, row: DT | undefined, data: {
         select: boolean;
     }) => void;
-    "row-dblclick": (ev: MouseEvent, row: any) => void;
+    "row-dblclick": (ev: MouseEvent, row: DT) => void;
     "header-row-menu": (ev: MouseEvent) => void;
-    "row-menu": (ev: MouseEvent, row: any) => void;
-    "cell-click": (ev: MouseEvent, row: any, col: StkTableColumn<any>) => void;
-    "cell-mouseenter": (ev: MouseEvent, row: any, col: StkTableColumn<any>) => void;
-    "cell-mouseleave": (ev: MouseEvent, row: any, col: StkTableColumn<any>) => void;
-    "cell-mouseover": (ev: MouseEvent, row: any, col: StkTableColumn<any>) => void;
-    "header-cell-click": (ev: MouseEvent, col: StkTableColumn<any>) => void;
+    "row-menu": (ev: MouseEvent, row: DT) => void;
+    "cell-click": (ev: MouseEvent, row: DT, col: StkTableColumn<DT>) => void;
+    "cell-mouseenter": (ev: MouseEvent, row: DT, col: StkTableColumn<DT>) => void;
+    "cell-mouseleave": (ev: MouseEvent, row: DT, col: StkTableColumn<DT>) => void;
+    "cell-mouseover": (ev: MouseEvent, row: DT, col: StkTableColumn<DT>) => void;
+    "header-cell-click": (ev: MouseEvent, col: StkTableColumn<DT>) => void;
     scroll: (ev: Event, data: {
         startIndex: number;
         endIndex: number;
@@ -234,8 +244,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "col-order-change": (dragStartKey: string, targetColKey: string) => void;
     "th-drag-start": (dragStartKey: string) => void;
     "th-drop": (targetColKey: string) => void;
-    "update:columns": (cols: StkTableColumn<any>[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    "update:columns": (cols: StkTableColumn<DT>[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     width?: string | undefined;
     /** 最小表格宽度 */
     minWidth?: string | undefined;
@@ -243,7 +253,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     maxWidth?: string | undefined;
     /** 斑马线条纹 */
     stripe?: boolean | undefined;
-    /** 是否使用 table-layout:fixed */
+    /** 是否使用 table-layout:fixed(低版本浏览器需要设置table) */
     fixedMode?: boolean | undefined;
     /** 是否隐藏表头 */
     headless?: boolean | undefined;
@@ -251,6 +261,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     theme?: "light" | "dark" | undefined;
     /** 行高 */
     rowHeight?: number | undefined;
+    /** 是否高亮鼠标悬浮的行 */
+    rowHover?: boolean | undefined;
+    /** 是否高亮选中的行 */
+    rowActive?: boolean | undefined;
+    /** 当前行再次点击否可以取消 */
+    rowCurrentRevokable?: boolean | undefined;
     /** 表头行高。default = rowHeight */
     headerRowHeight?: number | null | undefined;
     /** 虚拟滚动 */
@@ -258,17 +274,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /** x轴虚拟滚动(必须设置列宽)*/
     virtualX?: boolean | undefined;
     /** 表格列配置 */
-    columns?: StkTableColumn<any>[] | undefined;
+    columns?: StkTableColumn<DT>[] | undefined;
     /** 表格数据源 */
-    dataSource?: any[] | undefined;
-    /** 行唯一键 */
+    dataSource?: DT[] | undefined;
+    /** 行唯一键 （行唯一值不能为undefined） */
     rowKey?: UniqKeyProp | undefined;
     /** 列唯一键 */
     colKey?: UniqKeyProp | undefined;
     /** 空值展示文字 */
     emptyCellText?: string | ((option: {
-        row: any;
-        col: StkTableColumn<any>;
+        row: DT;
+        col: StkTableColumn<DT>;
     }) => string) | undefined;
     /** 暂无数据兜底高度是否撑满 */
     noDataFull?: boolean | undefined;
@@ -280,17 +296,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showHeaderOverflow?: boolean | undefined;
     /** 表体溢出是否展示... */
     showOverflow?: boolean | undefined;
-    /** 是否增加行hover class */
+    /** 是否增加行hover class $*$ rename*/
     showTrHoverClass?: boolean | undefined;
     /** 是否高亮鼠标悬浮的单元格 */
     cellHover?: boolean | undefined;
     /** 表头是否可拖动。支持回调函数。 */
-    headerDrag?: boolean | ((col: StkTableColumn<any>) => boolean) | undefined;
+    headerDrag?: boolean | ((col: StkTableColumn<DT>) => boolean) | undefined;
     /**
      * 给行附加className<br>
      * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
      */
-    rowClassName?: ((row: any, i: number) => string) | undefined;
+    rowClassName?: ((row: DT, i: number) => string) | undefined;
     /**
      * 列宽是否可拖动<br>
      * **不要设置**列minWidth，**必须**设置width<br>
@@ -318,7 +334,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /** 优化vue2 滚动 */
     optimizeVue2Scroll?: boolean | undefined;
     /** 排序配置 */
-    sortConfig?: SortConfig<any> | undefined;
+    sortConfig?: SortConfig<DT> | undefined;
     /** 隐藏头部title。可传入dataIndex数组 */
     hideHeaderTitle?: boolean | string[] | undefined;
     /** 高亮配置 */
@@ -344,6 +360,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     headless: boolean;
     theme: string;
     rowHeight: number;
+    rowHover: boolean;
+    rowActive: boolean;
+    rowCurrentRevokable: boolean;
     headerRowHeight: null;
     virtual: boolean;
     virtualX: boolean;
@@ -380,43 +399,46 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         startIndex: number;
         endIndex: number;
     }) => any) | undefined;
-    "onUpdate:columns"?: ((cols: StkTableColumn<any>[]) => any) | undefined;
+    "onUpdate:columns"?: ((cols: StkTableColumn<DT>[]) => any) | undefined;
     "onTh-drag-start"?: ((dragStartKey: string) => any) | undefined;
     "onCol-order-change"?: ((dragStartKey: string, targetColKey: string) => any) | undefined;
     "onTh-drop"?: ((targetColKey: string) => any) | undefined;
-    "onSort-change"?: ((col: StkTableColumn<any>, order: Order, data: any[], sortConfig: SortConfig<any>) => any) | undefined;
-    "onRow-click"?: ((ev: MouseEvent, row: any) => any) | undefined;
-    "onCurrent-change"?: ((ev: MouseEvent | null, row: any, data: {
+    "onSort-change"?: ((col: StkTableColumn<DT>, order: Order, data: DT[], sortConfig: SortConfig<DT>) => any) | undefined;
+    "onRow-click"?: ((ev: MouseEvent, row: DT) => any) | undefined;
+    "onCurrent-change"?: ((ev: MouseEvent | null, row: DT | undefined, data: {
         select: boolean;
     }) => any) | undefined;
-    "onRow-dblclick"?: ((ev: MouseEvent, row: any) => any) | undefined;
+    "onRow-dblclick"?: ((ev: MouseEvent, row: DT) => any) | undefined;
     "onHeader-row-menu"?: ((ev: MouseEvent) => any) | undefined;
-    "onRow-menu"?: ((ev: MouseEvent, row: any) => any) | undefined;
-    "onCell-click"?: ((ev: MouseEvent, row: any, col: StkTableColumn<any>) => any) | undefined;
-    "onCell-mouseenter"?: ((ev: MouseEvent, row: any, col: StkTableColumn<any>) => any) | undefined;
-    "onCell-mouseleave"?: ((ev: MouseEvent, row: any, col: StkTableColumn<any>) => any) | undefined;
-    "onCell-mouseover"?: ((ev: MouseEvent, row: any, col: StkTableColumn<any>) => any) | undefined;
-    "onHeader-cell-click"?: ((ev: MouseEvent, col: StkTableColumn<any>) => any) | undefined;
+    "onRow-menu"?: ((ev: MouseEvent, row: DT) => any) | undefined;
+    "onCell-click"?: ((ev: MouseEvent, row: DT, col: StkTableColumn<DT>) => any) | undefined;
+    "onCell-mouseenter"?: ((ev: MouseEvent, row: DT, col: StkTableColumn<DT>) => any) | undefined;
+    "onCell-mouseleave"?: ((ev: MouseEvent, row: DT, col: StkTableColumn<DT>) => any) | undefined;
+    "onCell-mouseover"?: ((ev: MouseEvent, row: DT, col: StkTableColumn<DT>) => any) | undefined;
+    "onHeader-cell-click"?: ((ev: MouseEvent, col: StkTableColumn<DT>) => any) | undefined;
     "onScroll-x"?: ((ev: Event) => any) | undefined;
 }, {
     width: string;
     minWidth: string;
     maxWidth: string;
     rowHeight: number;
-    headless: boolean;
     headerRowHeight: number | null;
+    headless: boolean;
     stripe: boolean;
     fixedMode: boolean;
     theme: "light" | "dark";
+    rowHover: boolean;
+    rowActive: boolean;
+    rowCurrentRevokable: boolean;
     virtual: boolean;
     virtualX: boolean;
-    columns: StkTableColumn<any>[];
-    dataSource: any[];
+    columns: StkTableColumn<DT>[];
+    dataSource: DT[];
     rowKey: UniqKeyProp;
     colKey: UniqKeyProp;
     emptyCellText: string | ((option: {
-        row: any;
-        col: StkTableColumn<any>;
+        row: DT;
+        col: StkTableColumn<DT>;
     }) => string);
     noDataFull: boolean;
     showNoData: boolean;
@@ -425,22 +447,22 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showOverflow: boolean;
     showTrHoverClass: boolean;
     cellHover: boolean;
-    headerDrag: boolean | ((col: StkTableColumn<any>) => boolean);
-    rowClassName: (row: any, i: number) => string;
+    headerDrag: boolean | ((col: StkTableColumn<DT>) => boolean);
+    rowClassName: (row: DT, i: number) => string;
     colResizable: boolean;
     colMinWidth: number;
     bordered: boolean | "h" | "v" | "body-v";
     autoResize: boolean | (() => void);
     fixedColShadow: boolean;
     optimizeVue2Scroll: boolean;
-    sortConfig: SortConfig<any>;
+    sortConfig: SortConfig<DT>;
     hideHeaderTitle: boolean | string[];
     highlightConfig: HighlightConfig;
     seqConfig: SeqConfig;
     cellFixedMode: "sticky" | "relative";
 }, {}>, {
     tableHeader?(_: {
-        col: StkTableColumn<any>;
+        col: StkTableColumn<DT>;
     }): any;
     empty?(_: {}): any;
 }>;

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

@@ -1,4 +1,3 @@
 export { default as StkTable } from './StkTable.vue';
 export { tableSort, insertToOrderedArray } from './utils';
 export type { StkTableColumn } from './types/index';
-import './style.less';

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

@@ -1,21 +1,34 @@
 import { Component, VNode } from 'vue';
+
 /** 排序方式，asc-正序，desc-倒序，null-默认顺序 */
 export type Order = null | 'asc' | 'desc';
 type Sorter<T> = boolean | ((data: T[], option: {
     order: Order;
     column: any;
 }) => T[]);
-export type CustomCellFunc<T extends Record<string, any>> = (props: {
+export type CustomCellProps<T extends Record<string, any>> = {
     row: T;
     col: StkTableColumn<T>;
     /** row[col.dataIndex] 的值 */
     cellValue: any;
     rowIndex: number;
     colIndex: number;
-}) => VNode;
-export type CustomHeaderCellFunc<T extends Record<string, any>> = (props: {
+};
+/**
+ * $*$自定义单元格渲染函数
+ * @deprecated
+ */
+export type CustomCellFunc<T extends Record<string, any>> = (props: CustomCellProps<T>) => VNode;
+export type CustomHeaderCellProps<T extends Record<string, any>> = {
     col: StkTableColumn<T>;
-}) => VNode;
+    rowIndex: number;
+    colIndex: number;
+};
+/**
+ * $*$自定义表头渲染函数
+ * @deprecated
+ */
+export type CustomHeaderCellFunc<T extends Record<string, any>> = (props: CustomHeaderCellProps<T>) => VNode;
 /** 表格列配置 */
 export type StkTableColumn<T extends Record<string, any>> = {
     /**
@@ -55,17 +68,22 @@ export type StkTableColumn<T extends Record<string, any>> = {
      * 自定义 td 渲染内容。
      *
      * 组件prop入参:
-     * - props.row 一行的记录。
-     * - props.col 列配置
+     * @param props.row 一行的记录。
+     * @param props.col 列配置
+     * @param props.cellValue row[col.dataIndex] 的值
+     * @param props.rowIndex 行索引
+     * @param props.colIndex 列索引
      */
-    customCell?: Component | VNode | CustomCellFunc<T>;
+    customCell?: Component<CustomCellProps<T>> | string;
     /**
      * 自定义 th 渲染内容
      *
      * 组件prop入参:
-     * - props.col 列配置
+     * @param props.col 列配置
+     * @param props.rowIndex 行索引
+     * @param props.colIndex 列索引
      */
-    customHeaderCell?: Component | VNode | CustomHeaderCellFunc<T>;
+    customHeaderCell?: Component<CustomHeaderCellProps<T>> | string;
     /** 二级表头 */
     children?: StkTableColumn<T>[];
     /** 父节点引用 */
@@ -76,7 +94,7 @@ export type StkTableColumn<T extends Record<string, any>> = {
 export type SortOption<T extends Record<string, any>> = Pick<StkTableColumn<T>, 'sorter' | 'dataIndex' | 'sortField' | 'sortType'>;
 /** 排序状态 */
 export type SortState<T> = {
-    dataIndex: T;
+    dataIndex: keyof T;
     order: null | 'asc' | 'desc';
     sortType?: 'number' | 'string';
 };
@@ -100,7 +118,7 @@ export type SortConfig<T extends Record<string, any>> = {
     };
     /**
      * string排序是否使用 String.prototype.localCompare
-     * 默认true (&$&应该false)
+     * 默认true ($*$应该false)
      */
     stringLocaleCompare?: boolean;
 };

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

@@ -1,4 +1,5 @@
 import { Ref } from 'vue';
+
 type Options = {
     props: any;
     tableContainerRef: Ref<HTMLElement | undefined>;

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

@@ -1,5 +1,6 @@
 import { ComputedRef, Ref, ShallowRef } from 'vue';
 import { StkTableColumn, UniqKey } from './types';
+
 type Params<DT extends Record<string, any>> = {
     props: any;
     emits: any;

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

@@ -1,6 +1,7 @@
 import { ComputedRef, Ref, ShallowRef } from 'vue';
 import { StkTableColumn, UniqKey } from './types';
 import { VirtualScrollXStore } from './useVirtualScroll';
+
 type Params<T extends Record<string, any>> = {
     props: any;
     colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;

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

@@ -1,6 +1,7 @@
 import { CSSProperties, ComputedRef, Ref } from 'vue';
 import { StkTableColumn, TagType } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
+
 type Options<T extends Record<string, any>> = {
     props: any;
     isRelativeMode: Ref<boolean>;

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

@@ -1,5 +1,6 @@
 import { ComputedRef, ShallowRef } from 'vue';
 import { StkTableColumn, UniqKey } from './types';
+
 type Params<T extends Record<string, any>> = {
     colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
     tableHeaders: ShallowRef<StkTableColumn<T>[][]>;

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

@@ -1,5 +1,6 @@
 import { Ref } from 'vue';
 import { UniqKey } from './types';
+
 type Params = {
     props: any;
     stkTableId: string;