stk-table-vue 0.11.0-beta.4 → 0.11.0

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

@@ -107,6 +107,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     rowCurrentRevokable?: boolean;
     /** 表头行高。default = rowHeight */
     headerRowHeight?: number | string | null;
+    /** 表尾行高。default = rowHeight */
+    footerRowHeight?: number | string | null;
     /** 虚拟滚动 */
     virtual?: boolean;
     /** x轴虚拟滚动(必须设置列宽)*/
@@ -224,6 +226,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * 实验性功能配置
      */
     experimental?: ExperimentalConfig;
+    /** 表格底部合计行数据 */
+    footerData?: DT[];
 }>, {
     width: string;
     fixedMode: boolean;
@@ -234,10 +238,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     theme: string;
     rowHeight: number;
     autoRowHeight: () => false;
+    footerData: () => never[];
     rowHover: boolean;
     rowActive: () => Required<RowActiveOption<any>>;
     rowCurrentRevokable: boolean;
     headerRowHeight: number;
+    footerRowHeight: number;
     virtual: boolean;
     virtualX: boolean;
     columns: () => never[];
@@ -533,6 +539,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     rowCurrentRevokable?: boolean;
     /** 表头行高。default = rowHeight */
     headerRowHeight?: number | string | null;
+    /** 表尾行高。default = rowHeight */
+    footerRowHeight?: number | string | null;
     /** 虚拟滚动 */
     virtual?: boolean;
     /** x轴虚拟滚动(必须设置列宽)*/
@@ -650,6 +658,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * 实验性功能配置
      */
     experimental?: ExperimentalConfig;
+    /** 表格底部合计行数据 */
+    footerData?: DT[];
 }>, {
     width: string;
     fixedMode: boolean;
@@ -660,10 +670,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     theme: string;
     rowHeight: number;
     autoRowHeight: () => false;
+    footerData: () => never[];
     rowHover: boolean;
     rowActive: () => Required<RowActiveOption<any>>;
     rowCurrentRevokable: boolean;
     headerRowHeight: number;
+    footerRowHeight: number;
     virtual: boolean;
     virtualX: boolean;
     columns: () => never[];
@@ -780,6 +792,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     rowHover: boolean;
     rowActive: boolean | RowActiveOption<DT>;
     rowCurrentRevokable: boolean;
+    footerRowHeight: number | string | null;
     virtual: boolean;
     virtualX: boolean;
     columns: StkTableColumn<DT>[];
@@ -815,6 +828,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     smoothScroll: boolean;
     scrollRowByRow: boolean | "scrollbar";
     experimental: ExperimentalConfig;
+    footerData: DT[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

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

@@ -27,6 +27,13 @@ export type CustomHeaderCellProps<T extends Record<string, any>> = {
     rowIndex: number;
     colIndex: number;
 };
+export type CustomFooterCellProps<T extends Record<string, any>> = {
+    col: StkTableColumn<T>;
+    row: T;
+    cellValue: any;
+    rowIndex: number;
+    colIndex: number;
+};
 export type MergeCellsParam<T extends Record<string, any>> = {
     row: T;
     col: StkTableColumn<T>;
@@ -111,6 +118,17 @@ export type StkTableColumn<T extends Record<string, any>> = {
      * @param props.colIndex 列索引
      */
     customHeaderCell?: CustomCell<CustomHeaderCellProps<T>, T>;
+    /**
+     * 自定义 tfoot td 渲染内容
+     *
+     * 组件prop入参:
+     * @param props.row tfoot行的记录。
+     * @param props.col 列配置
+     * @param props.cellValue row[col.dataIndex] 的值
+     * @param props.rowIndex tfoot行索引（从0开始）
+     * @param props.colIndex 列索引
+     */
+    customFooterCell?: CustomCell<CustomFooterCellProps<T>, T>;
     /** 二级表头 */
     children?: StkTableColumn<T>[];
     /** 单元格合并 */
@@ -220,7 +238,9 @@ export type SortConfig<T extends Record<string, any>> = {
 /** th td type */
 export declare const enum TagType {
     TH = 0,
-    TD = 1
+    TD = 1,
+    /** tfoot */
+    TF = 2
 }
 export type HighlightConfig = {
     /** Duration of the highlight in seconds */

package/lib/stk-table-vue.js

@@ -791,6 +791,7 @@ function registerFeature(feature) {
 var TagType = /* @__PURE__ */ ((TagType2) => {
   TagType2[TagType2["TH"] = 0] = "TH";
   TagType2[TagType2["TD"] = 1] = "TD";
+  TagType2[TagType2["TF"] = 2] = "TF";
   return TagType2;
 })(TagType || {});
 function useAutoResize(tableContainerRef, initVirtualScroll, props, debounceMs) {
@@ -1068,7 +1069,7 @@ function useFixedCol(props, colKeyGen, getFixedColPosition, tableHeaders, tableH
 function useFixedStyle(props, isRelativeMode, getFixedColPosition, virtualScroll, virtualScrollX, virtualX_on, virtualX_offsetRight) {
   function getFixedStyle(tagType, col, depth = 0) {
     const { fixed } = col;
-    if (tagType === TagType.TD && !fixed) return null;
+    if ((tagType === TagType.TD || tagType === TagType.TF) && !fixed) return null;
     const style = {};
     const { headerRowHeight, rowHeight } = props;
     const isFixedLeft = fixed === "left";
@@ -1082,6 +1083,8 @@ function useFixedStyle(props, isRelativeMode, getFixedColPosition, virtualScroll
       } else {
         style.top = virtualScroll.value.scrollTop + "px";
       }
+    } else if (tagType === TagType.TF) {
+      style.bottom = "0px";
     }
     if (fixed) {
       if (!isRelativeMode.value) {
@@ -2430,25 +2433,36 @@ const _hoisted_4 = ["onClick"];
 const _hoisted_5 = ["onMousedown"];
 const _hoisted_6 = { class: "table-header-title" };
 const _hoisted_7 = ["onMousedown"];
-const _hoisted_8 = {
+const _hoisted_8 = { key: 1 };
+const _hoisted_9 = {
   key: 0,
   class: "vt-x-left"
 };
-const _hoisted_9 = ["onDrop"];
-const _hoisted_10 = {
+const _hoisted_10 = ["title"];
+const _hoisted_11 = { key: 0 };
+const _hoisted_12 = {
+  key: 1,
+  class: "vt-x-right"
+};
+const _hoisted_13 = {
+  key: 0,
+  class: "vt-x-left"
+};
+const _hoisted_14 = ["onDrop"];
+const _hoisted_15 = {
   key: 0,
   class: "vt-x-left"
 };
-const _hoisted_11 = ["colspan"];
-const _hoisted_12 = { class: "table-cell-wrapper" };
-const _hoisted_13 = ["title"];
-const _hoisted_14 = {
+const _hoisted_16 = ["colspan"];
+const _hoisted_17 = { class: "table-cell-wrapper" };
+const _hoisted_18 = ["title"];
+const _hoisted_19 = {
   key: 2,
   class: "table-cell-wrapper"
 };
-const _hoisted_15 = ["title"];
-const _hoisted_16 = { key: 2 };
-const _hoisted_17 = {
+const _hoisted_20 = ["title"];
+const _hoisted_21 = { key: 2 };
+const _hoisted_22 = {
   key: 3,
   class: "vt-x-right"
 };
@@ -2469,6 +2483,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     rowActive: { type: [Boolean, Object], default: () => DEFAULT_ROW_ACTIVE_CONFIG },
     rowCurrentRevokable: { type: Boolean, default: true },
     headerRowHeight: { default: DEFAULT_ROW_HEIGHT },
+    footerRowHeight: { default: DEFAULT_ROW_HEIGHT },
     virtual: { type: Boolean, default: false },
     virtualX: { type: Boolean, default: false },
     columns: { default: () => [] },
@@ -2505,7 +2520,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     smoothScroll: { type: Boolean, default: DEFAULT_SMOOTH_SCROLL },
     scrollRowByRow: { type: [Boolean, String], default: false },
     scrollbar: { type: [Boolean, Object], default: false },
-    experimental: { default: () => ({}) }
+    experimental: { default: () => ({}) },
+    footerData: { default: () => [] }
   },
   emits: ["sort-change", "row-click", "current-change", "cell-selected", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "cell-mouseenter", "cell-mouseleave", "cell-mouseover", "cell-mousedown", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "row-order-change", "col-resize", "toggle-row-expand", "toggle-tree-expand", "area-selection-change", "filter-change", "update:columns"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -2807,6 +2823,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const cellStyleMap = computed(() => {
       const thMap = /* @__PURE__ */ new Map();
       const tdMap = /* @__PURE__ */ new Map();
+      const tfMap = /* @__PURE__ */ new Map();
       const { virtualX } = props;
       const headers = tableHeaders.value;
       const colKeyGenValue = colKeyGen.value;
@@ -2824,11 +2841,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           const colKey = colKeyGenValue(col);
           thMap.set(colKey, Object.assign({}, style, getFixedStyle(TagType.TH, col, depth)));
           tdMap.set(colKey, Object.assign({}, style, getFixedStyle(TagType.TD, col, depth)));
+          tfMap.set(colKey, Object.assign({ position: "sticky" }, style, getFixedStyle(TagType.TF, col, depth)));
         }
       }
       return {
         [TagType.TH]: thMap,
-        [TagType.TD]: tdMap
+        [TagType.TD]: tdMap,
+        [TagType.TF]: tfMap
       };
     });
     function getRowIndex(rowIndex) {
@@ -2879,7 +2898,20 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           colKey === sortCol.value && sortOrderIndex.value !== 0 && "sorter-" + sortSwitchOrder[sortOrderIndex.value],
           col.headerClassName,
           fixedColClassMap.value.get(colKey),
-          col.headerAlign && (col.headerAlign === "left" ? "text-l" : col.headerAlign === "right" ? "text-r" : null)
+          col.headerAlign && (col.headerAlign === "left" ? "text-l" : col.headerAlign === "right" ? "text-r" : col.headerAlign === "center" ? "text-c" : null)
+        ]
+      };
+    }
+    function getTFProps(col) {
+      const colKey = colKeyGen.value(col);
+      return {
+        "data-col-key": colKey,
+        style: cellStyleMap.value[TagType.TF].get(colKey),
+        class: [
+          col.className,
+          fixedColClassMap.value.get(colKey),
+          col.type === "seq" ? "seq-column" : "",
+          col.align === "center" ? "text-c" : col.align === "right" ? "text-r" : ""
         ]
       };
     }
@@ -3444,6 +3476,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         style: normalizeStyle({
           "--row-height": props.autoRowHeight ? void 0 : unref(virtualScroll).rowHeight + "px",
           "--header-row-height": props.headerRowHeight + "px",
+          "--footer-row-height": props.footerRowHeight + "px",
           "--highlight-duration": props.highlightConfig.duration && props.highlightConfig.duration + "s",
           "--highlight-timing-function": unref(highlightSteps) ? `steps(${unref(highlightSteps)})` : void 0,
           "--sb-width": `${scrollbarOptions.value.width}px`,
@@ -3543,6 +3576,35 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 ], 32);
               }), 128))
             ])) : createCommentVNode("", true),
+            __props.footerData && __props.footerData.length > 0 ? (openBlock(), createElementBlock("tfoot", _hoisted_8, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.footerData, (footRow, footRowIndex) => {
+                return openBlock(), createElementBlock("tr", { key: footRowIndex }, [
+                  unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_9)) : createCommentVNode("", true),
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_columnPart), (col, colIndex) => {
+                    return openBlock(), createElementBlock("td", mergeProps({
+                      key: colKeyGen.value(col)
+                    }, { ref_for: true }, getTFProps(col)), [
+                      col.customFooterCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customFooterCell), {
+                        key: 0,
+                        class: "table-cell-wrapper",
+                        col,
+                        row: footRow,
+                        rowIndex: footRowIndex,
+                        colIndex,
+                        cellValue: footRow[col.dataIndex]
+                      }, null, 8, ["col", "row", "rowIndex", "colIndex", "cellValue"])) : createCommentVNode("", true),
+                      createElementVNode("div", {
+                        class: "table-cell-wrapper",
+                        title: footRow[col.dataIndex] || ""
+                      }, [
+                        footRow[col.dataIndex] != null ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(footRow[col.dataIndex]), 1)) : createCommentVNode("", true)
+                      ], 8, _hoisted_10)
+                    ], 16);
+                  }), 128)),
+                  unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_12)) : createCommentVNode("", true)
+                ]);
+              }), 128))
+            ])) : createCommentVNode("", true),
             createElementVNode("tbody", {
               class: "stk-tbody-main",
               style: normalizeStyle({ transform: `translateY(${unref(virtualScroll).translateY}px)` }),
@@ -3555,7 +3617,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 style: normalizeStyle(`height:${unref(virtualScroll).offsetTop}px`),
                 class: "padding-top-tr"
               }, [
-                unref(virtualX_on) && __props.fixedMode && __props.headless ? (openBlock(), createElementBlock("td", _hoisted_8)) : createCommentVNode("", true),
+                unref(virtualX_on) && __props.fixedMode && __props.headless ? (openBlock(), createElementBlock("td", _hoisted_13)) : createCommentVNode("", true),
                 __props.fixedMode && __props.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
                   return openBlock(), createElementBlock("td", {
                     key: colKeyGen.value(col),
@@ -3573,12 +3635,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   onDrop: ($event) => unref(onTrDrop)($event, getRowIndex(rowIndex)),
                   onMouseleave: onTrMouseLeave
                 }), [
-                  unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_10)) : createCommentVNode("", true),
+                  unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_15)) : createCommentVNode("", true),
                   row && row.__EXP_R__ ? (openBlock(), createElementBlock("td", {
                     key: 1,
                     colspan: unref(virtualX_columnPart).length
                   }, [
-                    createElementVNode("div", _hoisted_12, [
+                    createElementVNode("div", _hoisted_17, [
                       renderSlot(_ctx.$slots, "expand", {
                         row: row.__EXP_R__,
                         col: row.__EXP_C__
@@ -3589,7 +3651,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                         ];
                       })
                     ])
-                  ], 8, _hoisted_11)) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(virtualX_columnPart), (col, colIndex) => {
+                  ], 8, _hoisted_16)) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(virtualX_columnPart), (col, colIndex) => {
                     var _a2;
                     return openBlock(), createElementBlock(Fragment, null, [
                       !unref(hiddenCellMap) || !((_a2 = unref(hiddenCellMap)[rowKeyGen(row)]) == null ? void 0 : _a2.has(colKeyGen.value(col))) ? (openBlock(), createElementBlock("td", mergeProps({
@@ -3624,7 +3686,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                           key: 1,
                           class: "table-cell-wrapper",
                           title: row[col.dataIndex] || ""
-                        }, toDisplayString((row && row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 9, _hoisted_13)) : col.type === "seq" ? (openBlock(), createElementBlock("div", _hoisted_14, toDisplayString((props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1), 1)) : col.type === "tree-node" ? (openBlock(), createBlock(_sfc_main$2, {
+                        }, toDisplayString((row && row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 9, _hoisted_18)) : col.type === "seq" ? (openBlock(), createElementBlock("div", _hoisted_19, toDisplayString((props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1), 1)) : col.type === "tree-node" ? (openBlock(), createBlock(_sfc_main$2, {
                           key: 3,
                           class: "table-cell-wrapper",
                           col,
@@ -3642,13 +3704,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                             key: 1,
                             onClick: ($event) => triangleClick($event, row, col)
                           }, null, 8, ["onClick"])) : createCommentVNode("", true),
-                          row[col.dataIndex] != null ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(row[col.dataIndex]), 1)) : createCommentVNode("", true)
-                        ], 8, _hoisted_15))
+                          row[col.dataIndex] != null ? (openBlock(), createElementBlock("span", _hoisted_21, toDisplayString(row[col.dataIndex]), 1)) : createCommentVNode("", true)
+                        ], 8, _hoisted_20))
                       ], 16)) : createCommentVNode("", true)
                     ], 64);
                   }), 256)),
-                  unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_17)) : createCommentVNode("", true)
-                ], 16, _hoisted_9);
+                  unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_22)) : createCommentVNode("", true)
+                ], 16, _hoisted_14);
               }), 128)),
               !((_d = __props.experimental) == null ? void 0 : _d.scrollY) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                 unref(virtual_on) && !unref(isSRBRActive) ? (openBlock(), createElementBlock("tr", {

package/lib/style.css

@@ -108,6 +108,7 @@
 .stk-table{
   --row-height:28px;
   --header-row-height:var(--row-height);
+  --footer-row-height:var(--row-height);
   --cell-padding-y:0;
   --cell-padding-x:8px;
   --resize-handle-width:4px;
@@ -117,6 +118,7 @@
   --td-hover-color:hsl(207, 90%, 70%);
   --td-active-color:hsl(207, 90%, 54%);
   --th-bgc:#f1f1f9;
+  --tf-bgc:#f1f1f9;
   --th-color:#272841;
   --tr-active-bgc:#e6f7ff;
   --tr-hover-bgc:#e6f7ff;
@@ -154,6 +156,7 @@
 }
 .stk-table.dark{
   --th-bgc:#202029;
+  --tf-bgc:#202029;
   --th-color:#c0c0d1;
   --td-bgc:#1b1b24;
   --td-hover-color:hsl(219, 59%, 60%);
@@ -368,6 +371,18 @@
   background-color:var(--th-bgc);
   height:var(--header-row-height);
 }
+.stk-table tfoot{
+  position:sticky;
+  bottom:0;
+  z-index:1;
+}
+.stk-table tfoot tr{
+  background-color:var(--tf-bgc);
+  height:var(--footer-row-height);
+}
+.stk-table tfoot tr td{
+  background-color:inherit;
+}
 .stk-table tbody tr{
   background-color:var(--td-bgc);
   height:var(--row-height);
@@ -489,6 +504,9 @@
 .stk-table td.fixed-cell--active{
   z-index:1;
 }
+.stk-table tfoot td.fixed-cell--active{
+  z-index:2;
+}
 .stk-table .table-header-cell-wrapper{
   max-width:100%;
   display:inline-flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.11.0-beta.4",
+  "version": "0.11.0",
   "description": "High performance realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",

package/src/StkTable/StkTable.vue

@@ -32,6 +32,7 @@
         :style="{
             '--row-height': props.autoRowHeight ? void 0 : virtualScroll.rowHeight + 'px',
             '--header-row-height': props.headerRowHeight + 'px',
+            '--footer-row-height': props.footerRowHeight + 'px',
             '--highlight-duration': props.highlightConfig.duration && props.highlightConfig.duration + 's',
             '--highlight-timing-function': highlightSteps ? `steps(${highlightSteps})` : void 0,
             '--sb-width': `${scrollbarOptions.width}px`,
@@ -101,6 +102,28 @@
                     </tr>
                 </thead>
 
+                <tfoot v-if="footerData && footerData.length > 0">
+                    <tr v-for="(footRow, footRowIndex) in footerData" :key="footRowIndex">
+                        <td v-if="virtualX_on" class="vt-x-left"></td>
+                        <td v-for="(col, colIndex) in virtualX_columnPart" :key="colKeyGen(col)" v-bind="getTFProps(col)">
+                            <component
+                                :is="col.customFooterCell"
+                                v-if="col.customFooterCell"
+                                class="table-cell-wrapper"
+                                :col="col"
+                                :row="footRow"
+                                :rowIndex="footRowIndex"
+                                :colIndex="colIndex"
+                                :cellValue="footRow[col.dataIndex]"
+                            />
+                            <div class="table-cell-wrapper" :title="footRow[col.dataIndex] || ''">
+                                <span v-if="footRow[col.dataIndex] != null">{{ footRow[col.dataIndex] }}</span>
+                            </div>
+                        </td>
+                        <td v-if="virtualX_on" class="vt-x-right"></td>
+                    </tr>
+                </tfoot>
+
                 <tbody
                     class="stk-tbody-main"
                     :style="{ transform: `translateY(${virtualScroll.translateY}px)` }"
@@ -329,6 +352,8 @@ const props = withDefaults(
         rowCurrentRevokable?: boolean;
         /** 表头行高。default = rowHeight */
         headerRowHeight?: number | string | null;
+        /** 表尾行高。default = rowHeight */
+        footerRowHeight?: number | string | null;
         /** 虚拟滚动 */
         virtual?: boolean;
         /** x轴虚拟滚动(必须设置列宽)*/
@@ -443,6 +468,8 @@ const props = withDefaults(
          * 实验性功能配置
          */
         experimental?: ExperimentalConfig;
+        /** 表格底部合计行数据 */
+        footerData?: DT[];
     }>(),
     {
         width: '',
@@ -454,10 +481,12 @@ const props = withDefaults(
         theme: 'light',
         rowHeight: DEFAULT_ROW_HEIGHT,
         autoRowHeight: () => false,
+        footerData: () => [],
         rowHover: true,
         rowActive: () => DEFAULT_ROW_ACTIVE_CONFIG,
         rowCurrentRevokable: true,
         headerRowHeight: DEFAULT_ROW_HEIGHT,
+        footerRowHeight: DEFAULT_ROW_HEIGHT,
         virtual: false,
         virtualX: false,
         columns: () => [],
@@ -1046,6 +1075,7 @@ function cellKeyGen(row: DT | null | undefined, col: StkTableColumn<DT>) {
 const cellStyleMap = computed(() => {
     const thMap = new Map();
     const tdMap = new Map();
+    const tfMap = new Map();
     const { virtualX } = props;
     const headers = tableHeaders.value;
     const colKeyGenValue = colKeyGen.value;
@@ -1063,11 +1093,13 @@ const cellStyleMap = computed(() => {
             const colKey = colKeyGenValue(col);
             thMap.set(colKey, Object.assign({}, style, getFixedStyle(TagType.TH, col, depth)));
             tdMap.set(colKey, Object.assign({}, style, getFixedStyle(TagType.TD, col, depth)));
+            tfMap.set(colKey, Object.assign({ position: 'sticky' }, style, getFixedStyle(TagType.TF, col, depth)));
         }
     }
     return {
         [TagType.TH]: thMap,
         [TagType.TD]: tdMap,
+        [TagType.TF]: tfMap,
     };
 });
 
@@ -1126,7 +1158,22 @@ function getTHProps(col: PrivateStkTableColumn<DT>) {
             colKey === sortCol.value && sortOrderIndex.value !== 0 && 'sorter-' + sortSwitchOrder[sortOrderIndex.value],
             col.headerClassName,
             fixedColClassMap.value.get(colKey),
-            col.headerAlign && (col.headerAlign === 'left' ? 'text-l' : col.headerAlign === 'right' ? 'text-r' : null),
+            col.headerAlign &&
+                (col.headerAlign === 'left' ? 'text-l' : col.headerAlign === 'right' ? 'text-r' : col.headerAlign === 'center' ? 'text-c' : null),
+        ],
+    };
+}
+
+function getTFProps(col: StkTableColumn<DT>) {
+    const colKey = colKeyGen.value(col);
+    return {
+        'data-col-key': colKey,
+        style: cellStyleMap.value[TagType.TF].get(colKey),
+        class: [
+            col.className,
+            fixedColClassMap.value.get(colKey),
+            col.type === 'seq' ? 'seq-column' : '',
+            col.align === 'center' ? 'text-c' : col.align === 'right' ? 'text-r' : '',
         ],
     };
 }

package/src/StkTable/style.less

@@ -8,6 +8,7 @@
 .stk-table {
     --row-height: 28px;
     --header-row-height: var(--row-height);
+    --footer-row-height: var(--row-height);
     --cell-padding-y: 0;
     --cell-padding-x: 8px;
     --resize-handle-width: 4px;
@@ -17,6 +18,7 @@
     --td-hover-color: hsl(207, 90%, 70%);
     --td-active-color: hsl(207, 90%, 54%);
     --th-bgc: #f1f1f9;
+    --tf-bgc: #f1f1f9;
     --th-color: #272841;
     --tr-active-bgc: rgb(230, 247, 255);
     --tr-hover-bgc: #e6f7ff;
@@ -71,6 +73,7 @@
     /**深色模式 */
     &.dark {
         --th-bgc: #202029;
+        --tf-bgc: #202029;
         --th-color: #c0c0d1;
         --td-bgc: #1b1b24;
         --td-hover-color: hsl(219, 59%, 60%);
@@ -396,6 +399,19 @@
         height: var(--header-row-height);
     }
 
+    tfoot{
+        position: sticky;
+        bottom: 0;
+        z-index: 1;
+        tr {
+            background-color: var(--tf-bgc);
+            height: var(--footer-row-height);
+            td {
+                background-color: inherit;
+            }
+        }
+    }
+
     tbody tr {
         background-color: var(--td-bgc);
         height: var(--row-height);
@@ -560,6 +576,10 @@
         z-index: 1;
     }
 
+    tfoot td.fixed-cell--active {
+        z-index: 2;
+    }
+
     .table-header-cell-wrapper {
         max-width: 100%;
         display: inline-flex;

package/src/StkTable/types/index.ts

@@ -28,6 +28,14 @@ export type CustomHeaderCellProps<T extends Record<string, any>> = {
     colIndex: number;
 };
 
+export type CustomFooterCellProps<T extends Record<string, any>> = {
+    col: StkTableColumn<T>;
+    row: T;
+    cellValue: any;
+    rowIndex: number;
+    colIndex: number;
+};
+
 export type MergeCellsParam<T extends Record<string, any>> = {
     row: T;
     col: StkTableColumn<T>;
@@ -115,6 +123,17 @@ export type StkTableColumn<T extends Record<string, any>> = {
      * @param props.colIndex 列索引
      */
     customHeaderCell?: CustomCell<CustomHeaderCellProps<T>, T>;
+    /**
+     * 自定义 tfoot td 渲染内容
+     *
+     * 组件prop入参:
+     * @param props.row tfoot行的记录。
+     * @param props.col 列配置
+     * @param props.cellValue row[col.dataIndex] 的值
+     * @param props.rowIndex tfoot行索引（从0开始）
+     * @param props.colIndex 列索引
+     */
+    customFooterCell?: CustomCell<CustomFooterCellProps<T>, T>;
     /** 二级表头 */
     children?: StkTableColumn<T>[];
     /** 单元格合并 */
@@ -232,6 +251,8 @@ export type SortConfig<T extends Record<string, any>> = {
 export const enum TagType {
     TH,
     TD,
+    /** tfoot */
+    TF,
 }
 
 export type HighlightConfig = {

package/src/StkTable/useFixedStyle.ts

@@ -20,7 +20,7 @@ export function useFixedStyle<DT extends Record<string, any>>(
     virtualScroll: Ref<VirtualScrollStore>,
     virtualScrollX: Ref<VirtualScrollXStore>,
     virtualX_on: Ref<boolean>,
-    virtualX_offsetRight: Ref<number>
+    virtualX_offsetRight: Ref<number>,
 ) {
     /**
      * 固定列的style
@@ -30,7 +30,7 @@ export function useFixedStyle<DT extends Record<string, any>>(
      */
     function getFixedStyle(tagType: TagType, col: StkTableColumn<DT>, depth = 0): CSSProperties | null {
         const { fixed } = col;
-        if (tagType === TagType.TD && !fixed) return null;
+        if ((tagType === TagType.TD || tagType === TagType.TF) && !fixed) return null;
 
         const style: CSSProperties = {};
         const { headerRowHeight, rowHeight } = props;
@@ -40,17 +40,19 @@ export function useFixedStyle<DT extends Record<string, any>>(
 
         if (tagType === TagType.TH) {
             if (!isRelativeMode.value) {
-                if(depth){
-                    style.top = depth  * (headerRowHeight ?? rowHeight) + 'px';
+                if (depth) {
+                    style.top = depth * (headerRowHeight ?? rowHeight) + 'px';
                 }
             } else {
                 style.top = virtualScroll.value.scrollTop + 'px';
             }
+        } else if (tagType === TagType.TF) {
+            style.bottom = '0px';
         }
 
         if (fixed) {
             if (!isRelativeMode.value) {
-                 const lr = getFixedColPosition.value(col) + 'px';
+                const lr = getFixedColPosition.value(col) + 'px';
                 if (isFixedLeft) {
                     style.left = lr;
                 } else {