@ticatec/uniface-element 0.1.13 → 0.1.15

package/dist/concise-data-table/Column.d.ts

@@ -0,0 +1,9 @@
+export default interface Column {
+    title: string;
+    field: string;
+    width: number;
+    align?: "left" | "center" | "right";
+    weight?: number;
+    formatter?: (value: any) => string;
+    escapeHTML?: boolean;
+}

package/dist/concise-data-table/Column.js

@@ -0,0 +1 @@
+export {};

package/dist/concise-data-table/ConciseListTable.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+
+    import {onMount, onDestroy, tick} from 'svelte';
+    import DataRow from "./DataRow.svelte";
+    import {type RowClickHandler, type TableOptions} from "./TableOptions";
+    import utils from "./utils";
+
+    // list array to display
+    export let list: Array<any>;
+    // Column definitions with configuration
+    export let columns: Array<Column>;
+    // Enable auto-scroll feature
+    export let autoScroll: boolean = false;
+    // Milliseconds between each scroll step
+    export let scrollInterval: number = 2000;
+    export let rowClickHandler: RowClickHandler | null = null;
+    //行高
+
+    // Height of the component in pixels
+    //table background color
+    export let options: TableOptions;
+
+    let tabOptions: TableOptions;
+
+    $: tabOptions = {headerHeight: 36, rowHeight: 32, ...options}
+
+
+    let id = (new Date().getTime() * 1000 + Math.floor(Math.random() * 1000)).toString(36);
+    let tableStyle: string = '';
+    let tableContainer: any;
+    let viewPanel: any;
+    let headerRow: any;
+    let scrollTimer: any;
+    let currentScrollIndex: number = 0;
+    let visibleRowCount: number = 0;
+
+    $: totalWeight = columns.reduce((sum, col) => sum + (col.weight || 0), 0);
+
+    let rowHeight: number;
+
+
+    let clonedRows: Array<any> = []; // 用于无缝滚动的克隆行
+    let viewWidth = 0;
+    let viewHeight = 0;
+    let resizeObserver: any;
+
+    onMount(async () => {
+        resizeObserver = new ResizeObserver(() => {
+            viewWidth = Math.round(viewPanel?.clientWidth) - 1;
+            viewHeight = Math.round(viewPanel?.clientHeight) - 1;
+        });
+        resizeObserver.observe(viewPanel);
+    });
+
+    onDestroy(() => {
+        resizeObserver.disconnect();
+    })
+
+
+    const setupAutoScroll = async () => {
+        if (autoScroll && tableContainer && list.length > 0) {
+            await tick();
+            const tableBody = tableContainer.querySelector('.table-body');
+            if (tableBody && tableBody.children.length > 0) {
+                rowHeight = tableBody.children[0].offsetHeight;
+                visibleRowCount = Math.floor((tableContainer.offsetHeight - headerRow.offsetHeight) / rowHeight);
+                if (list.length <= visibleRowCount) return;
+                clonedRows = [...list];
+                startAutoScroll();
+            }
+        }
+    }
+
+    const startAutoScroll = () => {
+        // Clear any existing timer
+        if (scrollTimer) clearInterval(scrollTimer);
+
+        currentScrollIndex = 0;
+
+        scrollTimer = setInterval(() => {
+            currentScrollIndex++;
+            const tableBody = tableContainer.querySelector('.table-body');
+            if (tableBody) {
+                tableBody.style.transform = `translateY(-${currentScrollIndex * rowHeight}px)`;
+                if (currentScrollIndex >= list.length) {
+                    setTimeout(() => {
+                        tableBody.style.transition = 'none';
+                        tableBody.style.transform = `translateY(0)`;
+                        currentScrollIndex = 0;
+
+                        // 恢复过渡效果
+                        setTimeout(() => {
+                            tableBody.style.transition = 'transform 2s ease';
+                        }, 50);
+                    }, 50);
+                }
+            }
+        }, scrollInterval);
+    }
+
+    const stopAutoScroll = () => {
+        if (scrollTimer) {
+            clearInterval(scrollTimer);
+            scrollTimer = null;
+        }
+    }
+
+    onMount(async () => {
+        await setupAutoScroll();
+    });
+
+    onDestroy(() => {
+        stopAutoScroll();
+    });
+
+    $: if (list || autoScroll || scrollInterval) {
+        stopAutoScroll();
+        setupAutoScroll();
+    }
+
+    $: tableStyle = utils.generateTableStyle(id, columns, tabOptions, viewWidth);
+
+
+</script>
+
+<div id="tab_{id}" class="uniface-concise-datatable">
+    {@html tableStyle}
+    <div class="table-container" bind:this={tableContainer}>
+        <!-- Fixed header -->
+        <div class="table-header">
+            <div class="table-row" bind:this={headerRow}>
+                {#each columns as column, idx}
+                    <div class="data-cell col_{idx}">
+                        {column.title ?? ''}
+                    </div>
+                {/each}
+            </div>
+        </div>
+
+        <!-- Scrollable body -->
+        <div class="table-body-container" bind:this={viewPanel} class:auto-scroll={autoScroll}>
+            <div class="table-body" style="transition: transform {autoScroll ? '2s' : '0s'} ease;">
+                {#each list as row, rowIndex}
+                    <DataRow data={row} {columns} showAlternative={rowIndex % 2 == 1} on:click={rowClickHandler?.(row)}/>
+                {/each}
+                {#if autoScroll && list.length > visibleRowCount}
+                    {#each list.slice(0, visibleRowCount) as row, rowIndex}
+                        <DataRow data={row} {columns} showAlternative={rowIndex % 2 == 1} on:click={rowClickHandler?.(row)}/>
+                    {/each}
+                {/if}
+            </div>
+        </div>
+    </div>
+</div>

package/dist/concise-data-table/ConciseListTable.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type RowClickHandler, type TableOptions } from "./TableOptions";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ConciseListTable: $$__sveltets_2_IsomorphicComponent<{
+    list: Array<any>;
+    columns: Array<Column>;
+    autoScroll?: boolean;
+    scrollInterval?: number;
+    rowClickHandler?: RowClickHandler | null;
+    options: TableOptions;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ConciseListTable = InstanceType<typeof ConciseListTable>;
+export default ConciseListTable;

package/dist/concise-data-table/DataCell.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type Column from "./Column";
+
+    export let column: Column;
+    export let idx: number;
+
+    export let data: any;
+
+    let text: string;
+    let escapeHTML: boolean = false;
+
+    $: text = column.formatter ? column.formatter(data[column.field]) : data[column.field];
+
+</script>
+
+<div class="data-cell col_{idx}">
+    {#if escapeHTML}
+        {@html text}
+    {:else }
+        <span>{text}</span>
+    {/if}
+</div>

package/dist/{data-table/parts/LinkButton.svelte.d.ts → concise-data-table/DataCell.svelte.d.ts}

@@ -1,3 +1,4 @@
+import type Column from "./Column";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,12 +12,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const LinkButton: $$__sveltets_2_IsomorphicComponent<{
-    text: any;
-    action: any;
-    style?: string;
+declare const DataCell: $$__sveltets_2_IsomorphicComponent<{
+    column: Column;
+    idx: number;
+    data: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type LinkButton = InstanceType<typeof LinkButton>;
-export default LinkButton;
+type DataCell = InstanceType<typeof DataCell>;
+export default DataCell;

package/dist/concise-data-table/DataRow.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import type Column from "./Column";
+    import DataCell from "./DataCell.svelte";
+
+    export let columns: Array<Column>;
+    export let data: any;
+
+    export let showAlternative: boolean;
+</script>
+
+<div class="table-row" class:alternative={showAlternative} on:click>
+    {#each columns as column, idx}
+        <DataCell {idx} {column} {data}/>
+    {/each}
+</div>

package/dist/concise-data-table/DataRow.svelte.d.ts

@@ -0,0 +1,25 @@
+import type Column from "./Column";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DataRow: $$__sveltets_2_IsomorphicComponent<{
+    columns: Array<Column>;
+    data: any;
+    showAlternative: boolean;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DataRow = InstanceType<typeof DataRow>;
+export default DataRow;

package/dist/concise-data-table/TableOptions.d.ts

@@ -0,0 +1,11 @@
+export interface TableOptions {
+    backgroundColor?: string;
+    color?: string;
+    headerHeight?: number;
+    headerBackgroundColor?: string;
+    headerColor?: string;
+    alternativeBackgroundColor?: string;
+    alternativeColor?: string;
+    rowHeight?: number;
+}
+export type RowClickHandler = (row: any) => (event: MouseEvent) => void;

package/dist/concise-data-table/TableOptions.js

@@ -0,0 +1 @@
+export {};

package/dist/concise-data-table/index.d.ts

@@ -0,0 +1,5 @@
+import ConciseListTable from "./ConciseListTable.svelte";
+import type Column from "./Column";
+import type { TableOptions } from "./TableOptions";
+export default ConciseListTable;
+export type { Column, TableOptions };

package/dist/concise-data-table/index.js

@@ -0,0 +1,2 @@
+import ConciseListTable from "./ConciseListTable.svelte";
+export default ConciseListTable;

package/dist/concise-data-table/utils.d.ts

@@ -0,0 +1,6 @@
+import type Column from "./Column";
+import type { TableOptions } from "./TableOptions";
+declare const _default: {
+    generateTableStyle: (id: string, columns: Array<Column>, options: TableOptions, viewWidth: number) => string;
+};
+export default _default;

package/dist/concise-data-table/utils.js

@@ -0,0 +1,38 @@
+const generateBlockStyle = (prefix, options, keys) => {
+    let style = '';
+    keys.forEach(key => {
+        if (options[key.code]) {
+            style += `${key.attr}: ${options[key.code]}${key.suffix ?? ''};\n`;
+        }
+    });
+    if (style.length > 0) {
+        return `${prefix} { ${style} }`;
+    }
+    else {
+        return '';
+    }
+};
+/**
+ *
+ * @param id
+ * @param columns
+ * @param options
+ * @param viewWidth
+ */
+const generateTableStyle = (id, columns, options, viewWidth) => {
+    let style = '';
+    if (options && columns) {
+        style += generateBlockStyle(`#tab_${id}`, options, [{ code: 'backgroundColor', attr: 'background-color' }, { code: 'color', attr: 'color' }]);
+        style += generateBlockStyle(`#tab_${id} .table-row.alternative `, options, [{ code: 'alternativeBackgroundColor', attr: 'background-color' }, { code: 'alternativeColor', attr: 'color' }]);
+        style += generateBlockStyle(`#tab_${id} .table-header .table-row `, options, [{ code: 'headerBackgroundColor', attr: 'background-color' }, { code: 'headerColor', attr: 'color' }, { code: 'headerHeight', attr: 'height', suffix: 'px' }]);
+        style += generateBlockStyle(`#tab_${id} .table-body .table-row`, options, [{ code: 'headerHeight', attr: 'height', suffix: 'px' }]);
+        let totalWeight = columns.reduce((sum, col) => sum + (col.weight || 0), 0);
+        let tabWidth = columns.reduce((sum, col) => sum + col.width, 0);
+        let diff = (viewWidth - tabWidth) / totalWeight;
+        columns.forEach((col, idx) => {
+            style += `#tab_${id} .col_${idx} {\n width: ${col.width + (col.weight ?? 0) * diff}px; \n text-align: ${col.align ?? 'left'};} \n`;
+        });
+    }
+    return `<style>${style}</style>`;
+};
+export default { generateTableStyle };

package/dist/data-table/DataTable.svelte

@@ -1,91 +1,122 @@
 <script lang="ts">
 
-
-    import TableHeaderPanel from "./parts/TableHeaderPanel.svelte";
     import ContentPanel from "./parts/ContentPanel.svelte";
     import type DataColumn from "./lib/DataColumn";
     import type ActionsColumn from "./lib/ActionsColumn";
     import type IndicatorColumn from "./lib/IndicatorColumn";
     import type TableRow from "./parts/TableRow";
+    import UniDataTable from "./UniDataTable";
+    import {onMount} from "svelte";
+    import FixedColumnsPanel from "./parts/FixedColumnsPanel.svelte";
+    import ActionPanel from "./parts/ActionsPanel.svelte";
+    import {OrderDirection} from "./lib/OrderDirection";
     import type {CompareFunction} from "./lib/CompareFunction";
-    import UniDataTable, {SelectionMode} from "./UniDataTable";
-    import {onMount, tick} from "svelte";
 
     export let columns: Array<DataColumn>;
-    export let actionsColumn: ActionsColumn | null;
-    export let indicatorColumn: IndicatorColumn;
-    export let rowHeight: number = null as unknown as number;  //{ rowHeight}
-    export let list;
+    export let actionsColumn: ActionsColumn | null = null;
+    export let indicatorColumn: IndicatorColumn | null = null;
+    export let rowHeight: number = 42;  //{ rowHeight}
+    export let list: Array<any>;
     export let selectedRows: Array<any> = [];
+    export let inlineRowHeight: number = 80;
+    export let rowBorder: boolean = false;
+    export let colBorder: boolean = false;
+
+    export let style: string = '';
 
-    let dataColumns: Array<DataColumn> = [];
+    let dataColumns: Array<DataColumn>;
 
-    let colStyle: string = '';
-    let scrollLeft: number = 0;
     let rows: Array<TableRow>;
     let table: UniDataTable = null as unknown as UniDataTable;
-    export let selectionMode: SelectionMode = SelectionMode.None;
+    let tabStyle: string = '';
 
-    let id: string = `${(new Date()).getTime().toString(16)}-${(Math.round(1000 * Math.random()) + 10000).toString(16)}`;
+    let id: string = (new Date()).getTime().toString(36);
 
     onMount(() => {
-        table = new UniDataTable(id, indicatorColumn.width);
+        table = new UniDataTable(id, indicatorColumn?.width);
+        selectedRows = selectedRows ?? [];
+        initializeTable();
     })
-    const sortRows = (compareFun: CompareFunction, descending: boolean) => {
-        let oList = list.sort(compareFun);
-        displayList = descending ? oList.reverse() : oList;
-        rows = table.rows;
-    }
 
-    const handleDataSelected = async (value: boolean) => {
-        rows.forEach(row => row.selected = value);
-        selectedRows = rows.filter(item => item.selected).map(item => item.data);
-        await tick();
-        selectionMode = value ? SelectionMode.All : SelectionMode.None;
-        rows = [...rows];
-    }
+    let expandRow: TableRow | null = null;
+    let fixedCols: Array<DataColumn>;
+    let scrollTop: number;
 
-    $: selectedRows = selectedRows ?? [];
+    const initializeTable = () => {
+        table.setColumns(columns);
+        rows = table.rows;
+        dataColumns = table.columns;
+        fixedCols = table.frozenColumns;
+        tabStyle = table.generateTemplateStyle();
+        tabWidth = table.width;
+        frozenWidth = table.frozenWidth;
+    }
 
-    $: displayList = [...list];
 
-    $: {
-        if (table && columns) {
-            table.setColumns(columns)
-            table.data = displayList;
-            rows = table.rows;
-            dataColumns = table.columns;
-            colStyle = table.generateTemplateStyle();
-            tabWidth = table.width;
-        }
+    $: if (table && columns) {
+        initializeTable();
     }
 
     let tabWidth: number;
-
+    let frozenWidth: number;
     const handleWidthChange = () => {
-        colStyle = table.generateTemplateStyle();
+        tabStyle = table.generateTemplateStyle();
         tabWidth = table.width;
+        frozenWidth = table.frozenWidth;
     }
 
+    let orderColumn: DataColumn = null as unknown as DataColumn;
+    let orderDirection: OrderDirection = OrderDirection.Ascending;
+    const sortRows = (compareFun: CompareFunction, descending: boolean) => {
+        expandRow = null;
+        let oList = list.sort(compareFun);
+        table.data = descending ? oList.reverse() : oList;
+        rows = table.rows;
+    }
+    const handleCellClick = (col: DataColumn) => (e: MouseEvent) => {
+        if (col.compareFunction != null) {
+            if (col == orderColumn) {
+                orderDirection = orderDirection == OrderDirection.Ascending ? OrderDirection.Descending : OrderDirection.Ascending;
+            } else {
+                orderColumn = col;
+                orderDirection = OrderDirection.Ascending;
+            }
+            sortRows(col.compareFunction, orderDirection == OrderDirection.Descending);
+        }
+    }
 
-    const handleRowSelectChange = async () => {
-        selectedRows = rows.filter(item => item.selected).map(item => item.data);
-        selectionMode = selectedRows.length == rows.length ? SelectionMode.All : selectedRows.length == 0 ? SelectionMode.None : SelectionMode.Partial;
+    let inlineComponent: any;
+    const handleRowExpand = async (row: TableRow) => {
+        if (row == expandRow) {
+            expandRow = null;
+            inlineComponent = null;
+        } else {
+            inlineComponent = await indicatorColumn?.buildInlineComponent?.(row.data);
+            expandRow = row;
+        }
     }
 
+    $: rowHeight = rowHeight ?? 42;
+
 </script>
 
-<div id="tab-{id}" class="uniface-data-table">
-    {@html colStyle}
-    {#if table}
-        <div>
-            <TableHeaderPanel sortData={sortRows} {selectionMode} frozenCols={[]} dataCols={dataColumns}
-                              {scrollLeft} width={tabWidth}
-                              {indicatorColumn} {actionsColumn} handleToggleSelectAll={handleDataSelected} {handleWidthChange}/>
-            {#if colStyle.length > 0 && list}
-                <ContentPanel columns={dataColumns} {rows} {indicatorColumn} {actionsColumn}
-                              bind:scrollLeft {rowHeight} width={tabWidth} {handleRowSelectChange}/>
-            {/if}
-        </div>
+<div id="tab-{id}" {style} class="uniface-data-table" class:cell-border={colBorder} class:row-border={rowBorder}>
+    {@html tabStyle}
+    {#if table && dataColumns && fixedCols}
+        {#if indicatorColumn || fixedCols.length > 0}
+            <FixedColumnsPanel {handleRowExpand} bind:selectedRows {orderDirection} {orderColumn} {handleCellClick} {indicatorColumn}
+                               bind:expandRow {table}
+                               {rowHeight} {fixedCols} {inlineRowHeight} {rows} {handleWidthChange} width={frozenWidth}
+                               bind:scrollTop/>
+        {/if}
+
+        <ContentPanel columns={dataColumns} {orderDirection} {orderColumn} {handleWidthChange} {handleCellClick} {tabWidth} bind:rows
+                      bind:scrollTop {expandRow} {rowHeight} {list} {table} {inlineComponent} bind:inlineRowHeight
+                      displayHorizontalScroll={actionsColumn!=null || indicatorColumn != null || fixedCols.length > 0}
+                      showVerticalScroll={actionsColumn == null}/>
+    {/if}
+
+    {#if actionsColumn}
+        <ActionPanel {expandRow} {rowHeight} {actionsColumn} {rows} {inlineRowHeight} bind:scrollTop/>
     {/if}
 </div>

package/dist/data-table/DataTable.svelte.d.ts

@@ -1,7 +1,6 @@
 import type DataColumn from "./lib/DataColumn";
 import type ActionsColumn from "./lib/ActionsColumn";
 import type IndicatorColumn from "./lib/IndicatorColumn";
-import { SelectionMode } from "./UniDataTable";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -17,12 +16,15 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const DataTable: $$__sveltets_2_IsomorphicComponent<{
     columns: Array<DataColumn>;
-    actionsColumn: ActionsColumn | null;
-    indicatorColumn: IndicatorColumn;
+    actionsColumn?: ActionsColumn | null;
+    indicatorColumn?: IndicatorColumn | null;
     rowHeight?: number;
-    list: any;
+    list: Array<any>;
     selectedRows?: Array<any>;
-    selectionMode?: SelectionMode;
+    inlineRowHeight?: number;
+    rowBorder?: boolean;
+    colBorder?: boolean;
+    style?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/data-table/UniDataTable.d.ts

@@ -1,6 +1,7 @@
 import type DataColumn from "./lib/DataColumn";
 import type TableRow from "./parts/TableRow";
 export type RowEventHandler = (row: TableRow) => void;
+export type RowSelectEventHandler = (row: TableRow, value: boolean) => void;
 export type TableEventHandler = () => void;
 export type SelectionEventHandler = (value: boolean) => void;
 export declare enum SelectionMode {
@@ -16,7 +17,7 @@ export default class UniDataTable {
     readonly id: string;
     private _width;
     private _frozenWidth;
-    constructor(id: string, indicatorWidth: number);
+    constructor(id: string, indicatorWidth?: number);
     set data(value: Array<any>);
     get data(): Array<any>;
     setColumns(columns: Array<DataColumn>): void;
@@ -24,5 +25,6 @@ export default class UniDataTable {
     get width(): number;
     get frozenWidth(): number;
     get rows(): Array<TableRow>;
-    get columns(): DataColumn[];
+    get columns(): Array<DataColumn>;
+    get frozenColumns(): Array<DataColumn>;
 }

package/dist/data-table/UniDataTable.js

@@ -15,7 +15,7 @@ export default class UniDataTable {
     _frozenWidth = 0;
     constructor(id, indicatorWidth) {
         this.id = id;
-        this.indicatorWidth = indicatorWidth;
+        this.indicatorWidth = indicatorWidth ?? 0;
         this.tableRows = new TableRows();
     }
     set data(value) {
@@ -25,12 +25,10 @@ export default class UniDataTable {
         return this.tableRows.data;
     }
     setColumns(columns) {
-        let frozen = true;
         this._frozenColumns = [];
         this._columns = [];
         (columns ?? []).forEach(col => {
-            frozen = frozen && col.frozen == true;
-            if (frozen) {
+            if (col.frozen) {
                 this._frozenColumns.push(col);
             }
             else {
@@ -40,12 +38,12 @@ export default class UniDataTable {
     }
     generateTemplateStyle() {
         this._width = 0;
-        this._frozenWidth = this.indicatorWidth;
+        this._frozenWidth = 0;
         let colStyle = '';
         let inv = 0;
         this._frozenColumns.forEach((col, idx) => {
             if (col.visible != false) {
-                this.indicatorWidth += col.width;
+                this._frozenWidth += col.width;
                 colStyle += `#tab-${this.id} .fz_col-${idx - inv} {width: ${col.width}px; ext-align: ${col.align ?? 'left'}}\n`;
             }
             else {
@@ -68,7 +66,7 @@ export default class UniDataTable {
         return this._width;
     }
     get frozenWidth() {
-        return this._frozenWidth;
+        return this._frozenWidth + this.indicatorWidth;
     }
     get rows() {
         return [...this.tableRows.rows];
@@ -76,4 +74,7 @@ export default class UniDataTable {
     get columns() {
         return this._columns;
     }
+    get frozenColumns() {
+        return this._frozenColumns;
+    }
 }

package/dist/data-table/lib/ActionsColumn.d.ts

@@ -1,9 +1,5 @@
 import type { GetRowActions } from "./RowAction";
 export default interface ActionsColumn {
-    /**
-     * 栏标题
-     */
-    title: string;
     /**
      * 宽度
      */

package/dist/data-table/lib/HrefLink.d.ts

@@ -1,4 +1,4 @@
-export type HrefBuilder = (item: any) => Array<HrefLink | string> | HrefLink;
+export type HrefBuilder = (item: any) => Array<HrefLink> | HrefLink;
 export type HrefAction = () => void;
 export default interface HrefLink {
     /**