@ticatec/uniface-element 0.1.12 → 0.1.14

package/dist/data-table/parts/ContentPanel.svelte

@@ -2,47 +2,58 @@
 
     import DataRow from "./DataRow.svelte";
     import type DataColumn from "../lib/DataColumn";
-    import type ActionsColumn from "../lib/ActionsColumn";
-    import type IndicatorColumn from "../lib/IndicatorColumn";
-
-    import iconLoading from "../assets/loading.gif"
     import type TableRow from "./TableRow";
-    import type {TableEventHandler} from "../UniDataTable";
-    import ActionPanel from "./ActionsPanel.svelte";
-    import FixedColumnsPanel from "./FixedColumnsPanel.svelte";
-    import {onMount, tick} from "svelte";
+    import {onMount} from "svelte";
+    import TableHeaderPanel from "./TableHeaderPanel.svelte";
+    import UniDataTable, {type TableEventHandler} from "../UniDataTable";
+    import {OrderDirection} from "../lib/OrderDirection";
+
+
+    export let columns: Array<DataColumn>;
+    export let rows: Array<TableRow>;
+    export let orderColumn: DataColumn ;
+    export let orderDirection: OrderDirection;
 
+    export let emptyIndicator: string | null = null;
 
-    export let columns: Array<DataColumn>;   //columns={dataColumns}
-    export let rows: Array<TableRow>; //{rows}
+    export let list: Array<any>;
 
-    export let width: number = 0; //width={tabWidth}
+    export let expandRow: TableRow | null;
 
-    export let actionsColumn: ActionsColumn | null;  //{actionsColumn}
-    export let indicatorColumn: IndicatorColumn;  //{indicatorColumn}
-    export let scrollLeft: number = 0; //bind:scrollLeft
-    export let rowHeight: number;  //{ rowHeight}
+    let width: number = 0;
+
+    export let scrollTop: number = 0;
+    export let rowHeight: number;
     export let inlineRowHeight: number = 80;
-    export let handleRowSelectChange: TableEventHandler; //{handleRowSelectChange}
 
+    export let inlineComponent: any = null;
+
+    export let table: UniDataTable;
+
+    export let showVerticalScroll: boolean = false;
+    export let displayHorizontalScroll: boolean = true;
 
-    let hasOperation: boolean = actionsColumn != null;
-    let scrollTop: number = 0;
+    export let handleWidthChange: TableEventHandler;
+
+    export let  handleCellClick: (col: DataColumn) => any;
+
+    export let tabWidth: number;
+
+    let scrollLeft: number = 0;
 
     let resizeObserver: ResizeObserver;
-    let dataPanel: any;
-    let tabWidth: number;
+    let viewPanel: any;
 
     onMount(async () => {
         resizeObserver = new ResizeObserver(() => {
             // 每次 div 尺寸变化时，更新 clientWidth
-            tabWidth = dataPanel?.clientWidth;
+            viewWidth = Math.round(viewPanel?.clientWidth)-1;
         });
-        resizeObserver.observe(dataPanel);
+        resizeObserver.observe(viewPanel);
     });
 
     const handleDataTableScroll = (e: Event) => {
-        if (!hasOperation) {
+        if (showVerticalScroll) {
             scrollTop = e.target?.scrollTop;
         }
         scrollLeft = e.target?.scrollLeft;
@@ -51,7 +62,7 @@
 
     const handleWheelEvent = (e: WheelEvent) => {
         let maxSh = dataPanel.scrollHeight - dataPanel.clientHeight;
-        if (hasOperation && maxSh > 0) {
+        if (!showVerticalScroll && maxSh > 0) {
             if (e.deltaY != 0) {
                 scrollTop = scrollTop + e.deltaY;
                 if (scrollTop < 0) {
@@ -67,82 +78,59 @@
         }
     }
 
-    let expandRow: any = null;
-    let loadingRow: any = null;
-    let inlineComponent: any;
-    let inlineError: string | null = null;
-
-    let fixedCols: Array<DataColumn> = [];
+    $: if (dataPanel && scrollTop > -1 && !showVerticalScroll) {
+        console.log('移动', scrollTop)
+        dataPanel.scrollTop = scrollTop;
+    }
 
 
-    const handleRowExpand = async (row: TableRow) => {
-        if (row == expandRow) {
-            row.expand = false;
-            expandRow = null;
-        } else {
-            if (expandRow != null) {
-                expandRow.expand = false;
-            }
-            expandRow = row;
+    $: {
+        if (table) {
+            table.data = [...list];
+            rows = table.rows;
         }
-        inlineComponent = null;
-        await tick();
-        loadingRow = true;
-        try {
-            inlineError = null;
-            inlineComponent = await indicatorColumn?.buildInlineComponent(row.data);
-        } catch (ex) {
-            inlineError = indicatorColumn.getInlineError?.(ex as Error) ?? 'Unknown Error';
-        }
-        loadingRow = false;
     }
 
-    let rowWidth: number;
 
-    $: rowWidth = Math.max(width, tabWidth);
+    let viewWidth: number;
+    $: rowWidth = Math.max(viewWidth, tabWidth);
 
-    $: if (dataPanel && scrollTop > -1) {
-        dataPanel.scrollTop = scrollTop;
+    $: if (columns) {
+        tabWidth = table.width;
     }
 
+    let hasWhitespace: boolean = true;
+    $: hasWhitespace = viewWidth > tabWidth;
+
+
+    let top: string = "0px";
+    let dataPanel: any;
+
+
 </script>
-<div class="data-content-panel">
-    <FixedColumnsPanel {indicatorColumn} {expandRow} {rowHeight} {fixedCols} {inlineRowHeight} {rows} bind:scrollTop {handleRowExpand}
-                       {handleRowSelectChange}/>
+<div class="data-content-panel" bind:this={viewPanel}>
+
+    <TableHeaderPanel {handleCellClick} {orderColumn} {orderDirection} dataCols={columns} {scrollLeft} width={tabWidth} {hasWhitespace} {handleWidthChange}/>
     <div class="data-view-panel" bind:this={dataPanel} on:scroll|passive={handleDataTableScroll} on:wheel|passive={handleWheelEvent}
-         style="{actionsColumn == null ? 'overflow-y: scroll' : ''}">
+         style="overflow-x: {displayHorizontalScroll ? 'scroll' : 'auto'}; overflow-y: {showVerticalScroll ?'auto': 'hidden' };">
         {#if rows && rows.length > 0}
-            <div style="box-sizing: border-box; width: {rowWidth}px;">
+            <div style="box-sizing: border-box; width: {rowWidth}px; top: {top}">
                 {#each rows as row, idx}
-                    <DataRow {rowHeight} {row} {columns} alternative={idx % 2 == 1} />
-                    {#if row == expandRow}
+                    <DataRow {rowHeight} {row} {columns} alternative={idx % 2 == 1}/>
+                    {#if row == expandRow && inlineComponent}
                         <div class="expand-data-row" bind:clientHeight={inlineRowHeight}
                              style="position: relative; box-sizing: content-box; width: 100%; height: auto">
                             <div class="inline-panel">
-                                {#if loadingRow}
-                                    <div style="text-align: center; padding: 16px">
-                                        <img src={iconLoading} width="32" height="32" style="vertical-align: middle"/>
-                                        <span style="">{indicatorColumn.loadingIndicator ?? 'Loading data...'}</span>
-                                    </div>
-                                {:else if inlineError}
-                                    <div style="text-align: center; padding: 16px">
-                                        <span style="">{inlineError}</span>
-                                    </div>
-                                {:else}
-                                    <svelte:component this={inlineComponent} data={row}/>
-                                {/if}
+                                <svelte:component this={inlineComponent} data={row}/>
                             </div>
                         </div>
                     {/if}
                 {/each}
             </div>
         {:else}
-            <div class="empty-content-board" style="width: {width}px;">
-                <div>{indicatorColumn.emptyIndicator ?? "Empty dataset."}</div>
+            <div class="empty-content-board" style="width: 100%">
+                <div>{emptyIndicator ?? "Empty dataset."}</div>
             </div>
         {/if}
     </div>
-    {#if actionsColumn}
-        <ActionPanel {expandRow} {rowHeight} {actionsColumn} {rows} {inlineRowHeight} bind:scrollTop/>
-    {/if}
 </div>

package/dist/data-table/parts/ContentPanel.svelte.d.ts

@@ -1,8 +1,7 @@
 import type DataColumn from "../lib/DataColumn";
-import type ActionsColumn from "../lib/ActionsColumn";
-import type IndicatorColumn from "../lib/IndicatorColumn";
 import type TableRow from "./TableRow";
-import type { TableEventHandler } from "../UniDataTable";
+import UniDataTable, { type TableEventHandler } from "../UniDataTable";
+import { OrderDirection } from "../lib/OrderDirection";
 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;
@@ -19,13 +18,21 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const ContentPanel: $$__sveltets_2_IsomorphicComponent<{
     columns: Array<DataColumn>;
     rows: Array<TableRow>;
-    width?: number;
-    actionsColumn: ActionsColumn | null;
-    indicatorColumn: IndicatorColumn;
-    scrollLeft?: number;
+    orderColumn: DataColumn;
+    orderDirection: OrderDirection;
+    emptyIndicator?: string | null;
+    list: Array<any>;
+    expandRow: TableRow | null;
+    scrollTop?: number;
     rowHeight: number;
     inlineRowHeight?: number;
-    handleRowSelectChange: TableEventHandler;
+    inlineComponent?: any;
+    table: UniDataTable;
+    showVerticalScroll?: boolean;
+    displayHorizontalScroll?: boolean;
+    handleWidthChange: TableEventHandler;
+    handleCellClick: (col: DataColumn) => any;
+    tabWidth: number;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

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

@@ -18,10 +18,10 @@
         hint = column.hint?.(data);
     }
 
-    $: col$class = frozen ? `fz-col-${colIdx}` : `col-${colIdx}`;
+    $: col$class = frozen ? `fz_col-${colIdx}` : `col-${colIdx}`;
 
 </script>
-<div class="table-data-cell {col$class}">
+<div class="data-cell {col$class}">
     <div>
         {#if column.render}
             <svelte:component this={column.render.component} {...column.render.props} {data}/>

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

@@ -11,18 +11,16 @@
 
     let style: string = '';
 
-
-
     $: style = rowHeight== null ? '' : `height: ${rowHeight}px`
 
 
 </script>
 
-<div class="table-row" {style} class:alternative aria-hidden="true">
+<div class="data-row" {style} class:alternative aria-hidden="true">
     {#each columns as col, idx}
         <DataCell colIdx={idx} data={row.data} column={col}/>
     {/each}
-    <div class="table-data-cell"  style="border-right: none">
+    <div class="data-cell" style="border-right: none; width: unset">
     </div>
 </div>
 

package/dist/data-table/parts/FixedColumnsPanel.svelte

@@ -3,22 +3,33 @@
     import FixedRow from "./FixedRow.svelte";
     import type TableRow from "./TableRow";
     import type {IndicatorColumn} from "..";
-    import type {RowEventHandler, TableEventHandler} from "../UniDataTable";
+    import UniDataTable, {type RowEventHandler, SelectionMode, type TableEventHandler} from "../UniDataTable";
     import type DataColumn from "../lib/DataColumn";
+    import FixedHeaderPanel from "./FixedHeaderPanel.svelte";
+    import {tick} from "svelte";
+    import {OrderDirection} from "../lib/OrderDirection";
 
 
-    export let fixedCols: Array<DataColumn>;
-    export let indicatorColumn: IndicatorColumn;
+    export let fixedCols: Array<DataColumn> = [];
+    export let indicatorColumn: IndicatorColumn | null;
+    export let width: number;
     export let scrollTop: number = 0;
     export let rows: Array<TableRow>;
+    export let table: UniDataTable;
+    export let handleWidthChange: TableEventHandler;
     export let handleRowExpand: RowEventHandler;
-    export let handleRowSelectChange: TableEventHandler;
 
-    export let expandRow: TableRow;
+    export let handleCellClick: (col: DataColumn) => any;
+    export let orderColumn: DataColumn;
+    export let orderDirection: OrderDirection;
 
-    export let rowHeight: number;
+    let selectionMode: SelectionMode = SelectionMode.None;
+
+    export let selectedRows: Array<any> = [];
 
-    let width: number = indicatorColumn.width;
+    export let expandRow: TableRow | null;
+
+    export let rowHeight: number;
 
     export let inlineRowHeight: number = 0;
 
@@ -26,17 +37,45 @@
     let selectable: boolean = false;
     let expandable: boolean = false;
 
-    $: selectable = indicatorColumn.selectable == true;
-    $: expandable = indicatorColumn.buildInlineComponent != null;
+    $: selectable = indicatorColumn?.selectable == true;
+    $: expandable = indicatorColumn?.buildInlineComponent != null;
+
+    const handleToggleSelectAll = async (value: boolean) => {
+        selectedRows = value ? rows.map(item => item.data) : [];
+        await tick();
+        selectionMode = value ? SelectionMode.All : SelectionMode.None;
+        rows = [...rows];
+        console.log('选中行', selectionMode)
+    }
+
+    const handleRowSelectChange = async (row: TableRow, value: boolean) => {
+        if (value) {
+            if (selectedRows.indexOf(row.data) < 0) {
+                selectedRows = [...selectedRows, row.data];
+            }
+        } else {
+            let pos = selectedRows.indexOf(row.data);
+            if (pos > -1) {
+                selectedRows.splice(pos, 1);
+                selectedRows = [...selectedRows];
+            }
+        }
+        selectionMode = selectedRows.length == rows.length ? SelectionMode.All : selectedRows.length == 0 ? SelectionMode.None : SelectionMode.Partial;
+    }
+
+
+    $: console.log('选中行', selectionMode)
 
 </script>
 
-<div class="fixed-panel" style="width: {width}px">
-    <div class="scroll-panel" style="overflow-y: hidden">
+<div class="left-fixed-panel" style="width: {width}px">
+    <FixedHeaderPanel {selectionMode} {orderColumn} {orderDirection} {handleCellClick} {handleWidthChange} columns={fixedCols} {indicatorColumn}
+                      {handleToggleSelectAll} {rowHeight}/>
+    <div class="rows-container">
         <div style="top: {-scrollTop}px">
             {#each rows ?? [] as row, idx}
-                <FixedRow rowNo={idx+1} {row} selected={row.selected} alternative={idx % 2 == 1} {selectable} cols={fixedCols}
-                          {rowHeight} {expandable} {handleRowExpand} {handleRowSelectChange}/>
+                <FixedRow rowNo={idx+1} {row} selected={selectedRows.indexOf(row.data) > -1} alternative={idx % 2 == 1} {selectable}
+                          cols={fixedCols} {expandRow} {rowHeight} {expandable} {handleRowExpand} {handleRowSelectChange} {indicatorColumn}/>
                 {#if row == expandRow}
                     <div class="inline-panel" style="height: {inlineRowHeight}px">
 

package/dist/data-table/parts/FixedColumnsPanel.svelte.d.ts

@@ -1,7 +1,8 @@
 import type TableRow from "./TableRow";
 import type { IndicatorColumn } from "..";
-import type { RowEventHandler, TableEventHandler } from "../UniDataTable";
+import UniDataTable, { type RowEventHandler, type TableEventHandler } from "../UniDataTable";
 import type DataColumn from "../lib/DataColumn";
+import { OrderDirection } from "../lib/OrderDirection";
 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;
@@ -16,13 +17,19 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const FixedColumnsPanel: $$__sveltets_2_IsomorphicComponent<{
-    fixedCols: Array<DataColumn>;
-    indicatorColumn: IndicatorColumn;
+    fixedCols?: Array<DataColumn>;
+    indicatorColumn: IndicatorColumn | null;
+    width: number;
     scrollTop?: number;
     rows: Array<TableRow>;
+    table: UniDataTable;
+    handleWidthChange: TableEventHandler;
     handleRowExpand: RowEventHandler;
-    handleRowSelectChange: TableEventHandler;
-    expandRow: TableRow;
+    handleCellClick: (col: DataColumn) => any;
+    orderColumn: DataColumn;
+    orderDirection: OrderDirection;
+    selectedRows?: Array<any>;
+    expandRow: TableRow | null;
     rowHeight: number;
     inlineRowHeight?: number;
 }, {

package/dist/data-table/parts/FixedHeaderPanel.svelte

@@ -2,14 +2,18 @@
 
     import type DataColumn from "../lib/DataColumn";
     import type {IndicatorColumn} from "..";
-    import {type SelectionEventHandler, SelectionMode} from "../UniDataTable";
+    import {type SelectionEventHandler, SelectionMode, type TableEventHandler} from "../UniDataTable";
     import utils from "../../common/utils";
+    import {OrderDirection} from "../lib/OrderDirection";
+    import i18n from "../../i18nContext";
 
     export let columns: Array<DataColumn>;
-    export let indicatorColumn: IndicatorColumn;
-
-
-
+    export let indicatorColumn: IndicatorColumn | null;
+    export let handleWidthChange: TableEventHandler;
+    export let rowHeight;
+    export let handleCellClick: (col: DataColumn) => any;
+    export let orderColumn: DataColumn;
+    export let orderDirection: OrderDirection;
     export let selectionMode: SelectionMode;
 
     export let handleToggleSelectAll: SelectionEventHandler;
@@ -33,13 +37,72 @@
         indeterminate = true;
     }
 
+    let resizeCol: any;
+    let startX: number = 0;
+    let startWidth: number = 0;
+    const handleResizeMouseDown = (col: DataColumn) => (event: MouseEvent) => {
+        if (col.resizable) {
+            resizeCol = col;
+            startX = event.clientX;
+            startWidth = resizeCol.width;
+
+            document.body.style.cursor = 'col-resize';
+            // 绑定鼠标移动和松开事件
+            window.addEventListener('mousemove', onMouseMove);
+            window.addEventListener('mouseup', onMouseUp);
+        }
+    }
+    const onMouseMove = (event: MouseEvent) => {
+        if (resizeCol !== null) {
+            const diff = event.clientX - startX;
+            let w = startWidth + diff;
+            if (w > (resizeCol.minWidth ?? 50)) {
+                resizeCol.width = startWidth + diff;
+            }
+
+        }
+        handleWidthChange?.();
+    }
+
+    // 结束拖动
+    function onMouseUp() {
+        resizeCol = null;
+        document.body.style.cursor = 'default';
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    }
 
 </script>
 
-<div class="header-indicator" style="width: {indicatorColumn.width}px">
-    <div>
-        {#if indicatorColumn.selectable==true}
-            <input type="checkbox" tabindex="-1" bind:checked {indeterminate} on:click={handleHeaderCheckBoxClick}/>
-        {/if}
-    </div>
+<div class="header-row" style="flex: 0 0 auto; {rowHeight}px">
+    {#if indicatorColumn}
+        <div class="data-cell" style="width: {indicatorColumn.width}px">
+            {#if indicatorColumn?.selectable === true}
+                <div style="text-align: center" class="vertical-center">
+                    <input type="checkbox" tabindex="-1" bind:checked {indeterminate} on:click={handleHeaderCheckBoxClick}/>
+                </div>
+            {:else }
+                <div style="text-align: center" class="vertical-center">
+                    {#if indicatorColumn.displayNo}
+                        <span>{i18n.getText('uniface.dataTable.rowNo', '#No')}</span>
+                    {/if}
+                </div>
+            {/if}
+            <div class="header-cell-divider"></div>
+        </div>
+    {/if}
+    {#each columns as column, index}
+        <div class="fz_col-{index} data-cell" class:sortable={column.compareFunction!=null} style="text-align: center">
+            <div class:sortable={column.compareFunction != null} on:click={handleCellClick(column)} aria-hidden="true" class="vertical-center">
+                <span>{column.text}</span>
+                {#if column === orderColumn}
+                    <i style="margin-left: 2px; font-size: 12px; position: absolute; top: 0; right: 4px"
+                       class={orderDirection===OrderDirection.Ascending ? 'uniface-icon-chevron-up' : 'uniface-icon-chevron-down'}></i>
+                {/if}
+            </div>
+
+            <div class="header-cell-divider" class:resizer={column.resizable} aria-hidden="true"
+                 on:mousedown={handleResizeMouseDown(column)}></div>
+        </div>
+    {/each}
 </div>

package/dist/data-table/parts/FixedHeaderPanel.svelte.d.ts

@@ -1,6 +1,7 @@
 import type DataColumn from "../lib/DataColumn";
 import type { IndicatorColumn } from "..";
-import { type SelectionEventHandler, SelectionMode } from "../UniDataTable";
+import { type SelectionEventHandler, SelectionMode, type TableEventHandler } from "../UniDataTable";
+import { OrderDirection } from "../lib/OrderDirection";
 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;
@@ -16,7 +17,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const FixedHeaderPanel: $$__sveltets_2_IsomorphicComponent<{
     columns: Array<DataColumn>;
-    indicatorColumn: IndicatorColumn;
+    indicatorColumn: IndicatorColumn | null;
+    handleWidthChange: TableEventHandler;
+    rowHeight: any;
+    handleCellClick: (col: DataColumn) => any;
+    orderColumn: DataColumn;
+    orderDirection: OrderDirection;
     selectionMode: SelectionMode;
     handleToggleSelectAll: SelectionEventHandler;
 }, {

package/dist/data-table/parts/FixedRow.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 
     import type TableRow from "./TableRow";
-    import type {RowEventHandler} from "../UniDataTable";
+    import type {RowEventHandler, RowSelectEventHandler} from "../UniDataTable";
     import DataCell from "./DataCell.svelte";
     import type DataColumn from "../lib/DataColumn";
+    import type {IndicatorColumn} from "../..";
 
     export let selectable: boolean = false;
     export let rowNo: number;
@@ -12,11 +13,15 @@
     export let row: TableRow;
     export let alternative: boolean;
     export let handleRowExpand: RowEventHandler;
-    export let handleRowSelectChange: RowEventHandler;
-    export let selected: boolean = row.selected;
+    export let handleRowSelectChange: RowSelectEventHandler;
+    export let selected: boolean;
+
+    export let expandRow: any = null;
 
     export let rowHeight: number;
 
+    export let indicatorColumn: IndicatorColumn | null;
+
     let style: string;
 
     const showInlineData = (e: MouseEvent) => {
@@ -25,24 +30,32 @@
         e.stopPropagation();
     }
 
-    $: if (row.selected != selected) {
-        row.selected = selected;
-        handleRowSelectChange(row);
+    $: {
+        handleRowSelectChange(row, selected);
     }
 
-    $: style = rowHeight== null ? '' : `height: ${rowHeight}px`
+    $: style = rowHeight == null ? '' : `height: ${rowHeight}px`
 
 </script>
-<div class="table-row" class:alternative {style}>
-    <div class="indicator-cell">
-        {#if selectable}
-            <input type="checkbox" bind:checked={selected}/>
-        {/if}
-        <span>{rowNo}</span>
-        {#if expandable}
-            <i class={row.expand ? 'uniface-icon-folder' : "uniface-icon-folder-plus"} aria-hidden="true" on:click={showInlineData}></i>
-        {/if}
-    </div>
+<div class="data-row" class:alternative style="width: 100%; {style}">
+    {#if indicatorColumn}
+        <div class="data-cell indicator-cell" style="width: {indicatorColumn.width}px">
+            {#if selectable}
+                <input type="checkbox" bind:checked={selected}/>
+            {/if}
+
+            {#if expandable}
+                <div class="expand-icon" style="">
+                    <i class={row == expandRow ? 'uniface-icon-folder' : "uniface-icon-folder-plus"} aria-hidden="true" on:click={showInlineData}></i>
+                </div>
+            {/if}
+            {#if indicatorColumn.displayNo}
+                <div style="margin-left: 4px; width: 20px; text-align: left">
+                    <span>{rowNo}</span>
+                </div>
+            {/if}
+        </div>
+    {/if}
     {#each cols as column, colIdx}
         <DataCell frozen={true} {colIdx} {column} data={row.data}/>
     {/each}

package/dist/data-table/parts/FixedRow.svelte.d.ts

@@ -1,6 +1,7 @@
 import type TableRow from "./TableRow";
-import type { RowEventHandler } from "../UniDataTable";
+import type { RowEventHandler, RowSelectEventHandler } from "../UniDataTable";
 import type DataColumn from "../lib/DataColumn";
+import type { IndicatorColumn } from "../..";
 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;
@@ -22,9 +23,11 @@ declare const FixedRow: $$__sveltets_2_IsomorphicComponent<{
     row: TableRow;
     alternative: boolean;
     handleRowExpand: RowEventHandler;
-    handleRowSelectChange: RowEventHandler;
-    selected?: boolean;
+    handleRowSelectChange: RowSelectEventHandler;
+    selected: boolean;
+    expandRow?: any;
     rowHeight: number;
+    indicatorColumn: IndicatorColumn | null;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;