@ticatec/uniface-element 0.1.13 → 0.1.14

package/dist/data-table/DataTable.svelte

@@ -1,91 +1,120 @@
 <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;
+        }
     }
 
 </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/IndicatorColumn.d.ts

@@ -12,16 +12,7 @@ export default interface IndicatorColumn {
      */
     buildInlineComponent?: (data: any) => Promise<any>;
     /**
-     *
-     * @param ex
-     */
-    getInlineError?: (ex: Error) => string;
-    /**
-     * 读取数据的指示信息
-     */
-    loadingIndicator?: string;
-    /**
-     *  空数据指示信息
+     * 是否显示行号
      */
-    emptyIndicator?: string;
+    displayNo?: boolean;
 }

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

@@ -4,6 +4,7 @@
     import type ActionsColumn from "../lib/ActionsColumn";
     import type TableRow from "./TableRow";
     import {onDestroy, onMount} from "svelte";
+    import i18n from "../../i18nContext";
 
     export let actionsColumn: ActionsColumn;
     export let scrollTop: number = 0;
@@ -11,7 +12,7 @@
 
     export let inlineRowHeight: number = 0;
 
-    export let expandRow: TableRow;
+    export let expandRow: TableRow | null;
 
     export let rowHeight: number;
 
@@ -42,11 +43,17 @@
         resizeObserver.disconnect();
     });
 
+    let actionText = i18n.getText('uniface.element.tableActions', 'Actions');
 
 </script>
 
 <div class="action-panel" bind:this={panel} style="user-select: none; width: {actionsColumn.width}px;">
-    <div bind:this={scrollPanel} class="scroll-panel" on:scroll|passive={handleActionPanelScroll}>
+    <div class="header-row">
+        <div class="vertical-center">
+            <span>{actionText}</span>
+        </div>
+    </div>
+    <div bind:this={scrollPanel} class="rows-container" style="overflow-y: auto" on:scroll|passive={handleActionPanelScroll}>
         <div>
             {#each rows as row, idx}
                 <ActionsRow {row} {rowHeight} parentRect={rect} alternative={idx % 2 == 1} width={actionsColumn.width}

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

@@ -18,7 +18,7 @@ declare const ActionsPanel: $$__sveltets_2_IsomorphicComponent<{
     scrollTop?: number;
     rows: Array<TableRow>;
     inlineRowHeight?: number;
-    expandRow: TableRow;
+    expandRow: TableRow | null;
     rowHeight: number;
 }, {
     [evt: string]: CustomEvent<any>;

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

@@ -84,9 +84,9 @@
     $: style = rowHeight== null ? '' : `height: ${rowHeight}px`
 
 </script>
-<div class="table-row" class:alternative style="position: relative; width: {width}px; display: block; {style}">
-    <div bind:this={cell}
-         style="width: max-content; overflow-x: auto; white-space: nowrap; top: 50%; position: relative; transform: translateY(-50%);">
+<div class="data-row" class:alternative style="position: relative; width: {width}px; display: block; {style}">
+    <div class="action-cell" bind:this={cell}
+         style="">
         {#each actionList as action}
             <TextButton style="flex-shrink: 0; top: 0" size="mini" type="primary" label={action.label} onClick={()=>action.callback(row.data)}/>
         {/each}

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,70 +78,50 @@
         }
     }
 
-    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}
@@ -138,11 +129,8 @@
             </div>
         {:else}
             <div class="empty-content-board" style="width: 100%">
-                <div>{indicatorColumn.emptyIndicator ?? "Empty dataset."}</div>
+                <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>