stk-table-vue 0.4.0 → 0.4.2

package/README.md

@@ -8,15 +8,17 @@ repo:
 - [Github](https://github.com/ja-plus/stk-table-vue)
 - [Gitee](https://gitee.com/japlus/stk-table-vue) 🇨🇳
 
+[<span style="font-size: 16px;font-weight: bold;">Online Demo</span>](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)
+
 ## Bug TODO:
 * [x] props.dataSource 为 shallowRef 时，高亮行不生效。(bug:2024.02.21)(resolved:0.2.3)
+* [] 固定列列宽拖动目标。
 
 ## 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] 横向（必须设置列宽）。
@@ -26,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`)
@@ -48,8 +45,6 @@ repo:
 * [x] `props.cellHover`单元格悬浮样式。(`v0.3.2`)
 
 
-
-
 ## Usage
 > npm install stk-table-vue
 
@@ -61,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,// 动画时长。
 })
@@ -85,10 +80,10 @@ 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';
@@ -149,7 +144,7 @@ export type StkProps = {
   columns?: StkTableColumn<any>[];
   /** 表格数据源 */
   dataSource?: any[];
-  /** 行唯一键 */
+  /** 行唯一键 (行唯一值不能为undefined）*/
   rowKey?: UniqKeyProp;
   /** 列唯一键 */
   colKey?: UniqKeyProp;
@@ -217,7 +212,7 @@ export type StkProps = {
      */
     stringLocaleCompare?: boolean;
   },
-  /** 隐藏头部title。可传入dataIndex数组 */
+  /** 隐藏头部鼠标悬浮title。可传入dataIndex数组 */
   hideHeaderTitle?: boolean | string[];
   /** 高亮配置 */
   highlightConfig?: {
@@ -232,8 +227,8 @@ export type StkProps = {
     startIndex?: number;
   };
   /**
-   * 固定头，固定列实现方式。(非响应式)
-   *
+   * 固定头，固定列实现方式。
+   * [非响应式]
    * relative：固定列只能放在props.columns的两侧。
    * - 如果列宽会变动则谨慎使用。
    * - 多级表头固定列慎用
@@ -259,9 +254,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)```
@@ -428,7 +423,7 @@ export type SortConfig<T extends Record<string, any>> = {
     };
     /**
      * string排序是否使用 String.prototype.localCompare
-     * 默认true (&$&应该false)
+     * 默认true ($*$应该false)
      */
     stringLocaleCompare?: boolean;
 };
@@ -464,20 +459,20 @@ export type SortConfig<T extends Record<string, any>> = {
   )
 ```
 #### option
-| key |value| desc |
-| ---- | ---- | ---- |
-| method | `css` `animation` `js` | 设置高亮方式。虚拟滚动默认js。否则css |
-| ~~useCss~~  `deprecated` | `boolean`| ~~是否使用css~~ |
-| className | `string` | 设置高亮样式。method == 'css' 生效 |
-| keyframe | `Parameters<Animatable['animate']>['0']` | 设置高亮动画。method == 'animation' 生效。 |
-| duration | `number` | 设置高亮动画持续时间。 method='css'状态下，用于移除class，如果传入了className则需要与自定义的动画时间一致。|
+| key |value| default |desc |
+| ---- | ---- | ---- | ---- |
+| method | `css` `animation` `js` | `animation` | 设置高亮方式。 |
+| ~~useCss~~  `deprecated` | `boolean`| false | ~~是否使用css~~ |
+| className | `string` | `highlight-row`/`highlight-cell` | 自定义 css 动画。method == 'css' 生效 |
+| keyframe | `Parameters<Animatable['animate']>['0']` | ... | 自定义高亮动画。method == 'animation' 生效。 |
+| duration | `number` | 2000 | 设置高亮动画持续时间ms。 method='css'状态下，用于移除class，如果传入了className则需要与自定义的动画时间一致。|
 
 ##### option.method
 | `option.method`| desc |
 | ---- | ---- |
-| css | 使用css class 实现高亮。 |
-| animation | 使用 animation api 实现高亮。 |
-| js | 使用 js 循环计算颜色实现高亮。虚拟滚动默认使用js。 |
+| animation | animation api 实现高亮。(default) |
+| css | css @keyframes 实现高亮。 |
+| js | js 循环计算颜色实现高亮。 |
 
 ### Example
 ```vue
@@ -539,7 +534,7 @@ export type SortConfig<T extends Record<string, any>> = {
       customCell: defineComponent({
         setup(){
           //...
-          return () => <div></div>
+          return () => <div></div> // vue jsx
         }
       })
     },
@@ -567,6 +562,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;
@@ -59,17 +60,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;
@@ -86,12 +87,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /** 是否高亮鼠标悬浮的单元格 */
     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 +120,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;
     /** 高亮配置 */
@@ -189,11 +190,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     setHighlightDimCell: (rowKeyValue: string, dataIndex: string, option?: {
         className?: string | undefined;
         method?: "animation" | "css" | undefined;
-        keyframe?: Keyframe[] | PropertyIndexedKeyframes | null | undefined;
+        keyframe?: Keyframe[] | PropertyIndexedKeyframes | null | undefined; /**
+         * 选中一行触发。ev返回null表示不是点击事件触发的
+         * ```(ev: MouseEvent | null, row: DT | undefined, data: { select: boolean })```
+         */
         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 +205,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 +216,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 +238,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 +247,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;
@@ -258,17 +262,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;
@@ -285,12 +289,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /** 是否高亮鼠标悬浮的单元格 */
     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 +322,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;
     /** 高亮配置 */
@@ -380,43 +384,43 @@ 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";
     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 +429,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/const.d.ts

@@ -21,6 +21,6 @@ export declare const HIGHLIGHT_FREQ: number;
 export declare const HIGHLIGHT_ROW_CLASS = "highlight-row";
 /** 高连单元格class */
 export declare const HIGHLIGHT_CELL_CLASS = "highlight-cell";
-/** 是否兼容低版本模式 */
+/** 低版本sticky兼容模式  */
 export declare const IS_LEGACY_MODE: boolean;
 export declare const STK_ID_PREFIX = "stk";

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;

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

@@ -1,6 +1,7 @@
 import { ComputedRef, Ref, ShallowRef } from 'vue';
 import { StkTableColumn } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
+
 type Options<DT extends Record<string, any>> = {
     props: any;
     scrollTo: (y: number | null, x: number | null) => void;

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

@@ -1,4 +1,5 @@
 import { StkTableColumn } from './types';
+
 type Params = {
     props: any;
     emits: any;