@ticatec/topside-elements 1.0.5 → 1.1.0

package/dist/data_table/README_CN.md

@@ -55,6 +55,7 @@ import type { DataColumn, ActionsColumn, IndicatorColumn, RowAction } from "@tic
 | `style` | `string` | `""` | 附加 CSS 样式 |
 | `summaryLabel` | `string` | i18n `dataTable.summaryLabel`（合计） | 合计行标签，传空串不显示 |
 | `summaryValues` | `Record<string, any> \| null` | `null` | 外部合计值（按 field），优先于本地计算，用于分页时显示服务端全量合计 |
+| `rowExpansion` | `RowExpansion \| null` | `null` | 行展开配置（展开区组件、是否显示图标、单击 / 双击触发等），见[行展开](#行展开) |
 
 ## 类型
 
@@ -134,7 +135,28 @@ interface IndicatorColumn {
   width: number;                   // 列宽（像素）
   selectable?: boolean;            // 行是否可选择
   showRowNo?: boolean;             // 是否显示行号
-  buildInlineComponent?: (data: any) => Promise<any>;  // 内联组件生成器
+  /** @deprecated 请改用 DataTable 的 rowExpansion 属性 */
+  buildInlineComponent?: (data: any) => Promise<any>;
+}
+```
+
+### RowExpansion
+
+```typescript
+interface RowExpansion<T = any> {
+  build: (data: T) => Promise<Component> | Component; // 展开区组件生成器（可异步）
+  showToggle?: boolean;             // 指示列是否显示展开图标，默认 true（需配置 indicatorColumn）
+  trigger?: 'click' | 'dblclick';   // 整行单击 / 双击切换展开，默认不设置
+  isExpandable?: (data: T) => boolean; // 哪些行允许展开
+  onExpandChange?: (data: T | null) => void; // 展开 / 收起回调
+}
+
+// 展开区组件收到的属性：data（行数据）与 context
+interface RowExpandContext<T = any> {
+  data: T;
+  collapse: () => void;                       // 关闭当前展开行
+  actions: Array<RowAction<T>>;               // 本行的行动作（来自 actionsColumn.getActions）
+  invoke: (label: string) => Promise<boolean>; // 按 label 执行行动作
 }
 ```
 
@@ -486,60 +508,36 @@ interface RowAction {
   import OrderDetails from "./OrderDetails.svelte";
   
   const columns = [
-    { text: "订单ID", field: "orderId", width: 120 },
-    { text: "客户", field: "customer", width: 150 },
-    { text: "总计", field: "total", width: 100, align: "right",
+    { title: "订单ID", field: "orderId", width: 120 },
+    { title: "客户", field: "customer", width: 150 },
+    { title: "总计", field: "total", width: 100, align: "right",
       formatter: (value) => `¥${value?.toFixed(2) ?? '0.00'}`
     },
-    { text: "状态", field: "status", width: 120, align: "center" },
-    { text: "日期", field: "orderDate", width: 120 }
+    { title: "状态", field: "status", width: 120, align: "center" }
   ];
   
-  const indicatorColumn = {
-    width: 50,
-    selectable: false,
-    showRowNo: false,
-    buildInlineComponent: async (orderData) => {
-      // 模拟 API 调用以获取订单详情
-      await new Promise(resolve => setTimeout(resolve, 1000));
+  const indicatorColumn = { width: 50 };
+
+  const rowExpansion = {
+    build: async (orderData) => {
+      // 可以先请求明细再决定展开区组件
+      await new Promise(resolve => setTimeout(resolve, 300));
       return OrderDetails;
     }
   };
-  
-  const orders = [
-    {
-      orderId: "ORD-001",
-      customer: "张伟",
-      total: 2999.99,
-      status: "已发货",
-      orderDate: "2024-01-15",
-      items: [
-        { product: "笔记本电脑", quantity: 1, price: 2999.99 }
-      ]
-    },
-    {
-      orderId: "ORD-002", 
-      customer: "李娜",
-      total: 1499.98,
-      status: "处理中",
-      orderDate: "2024-01-14",
-      items: [
-        { product: "鼠标", quantity: 2, price: 249.99 },
-        { product: "键盘", quantity: 1, price: 999.99 }
-      ]
-    }
-  ];
 </script>
 
 <DataTable 
   {columns} 
   list={orders} 
   {indicatorColumn}
-  inlineRowHeight={200}
+  {rowExpansion}
   emptyText="未找到订单"
 />
 ```
 
+更多触发方式与展开区内关闭 / 调用行动作见下文[行展开](#行展开)。
+
 ### 带有冻结列的表格
 
 ```svelte
@@ -862,6 +860,89 @@ const columns: DataColumn[] = [
 
 合计行背景色可用 CSS 变量 `--topside-data-table-summary-bg` 覆盖（默认同表头）。
 
+## 行展开
+
+通过 `rowExpansion` 配置。同一时间只展开一行；展开区组件收到 `data`（行数据）与 `context`（`RowExpandContext`）两个属性。
+
+### 触发方式
+
+```svelte
+<script>
+  import DataTable from "@ticatec/topside-elements/DataTable";
+  import OrderDetails from "./OrderDetails.svelte";
+
+  let table;
+
+  const rowExpansion = {
+    build: async (order) => OrderDetails,
+    showToggle: false,       // 不在指示列显示展开图标（默认 true）
+    trigger: 'dblclick',     // 双击行切换；'click' 为单击（点到按钮 / 链接 / 输入框不会触发）
+    isExpandable: (order) => order.items?.length > 0,
+    onExpandChange: (order) => console.log('expanded:', order)   // 收起时为 null
+  };
+
+  const actionsColumn = {
+    width: 120,
+    getActions: (order) => [
+      { label: '编辑', handler: () => edit(order) },
+      // 操作列按钮通过组件方法控制展开
+      { label: '明细', handler: () => table.toggleRowExpand(order) }
+    ]
+  };
+</script>
+
+<DataTable bind:this={table} {columns} {list} {rowExpansion} {actionsColumn} />
+<button onclick={() => table.expandRow(list[0])}>展开第一行</button>
+<button onclick={() => table.collapseRow()}>收起</button>
+```
+
+组件方法（`bind:this` 后调用，按行数据对象匹配）：
+
+| 方法 | 说明 |
+|------|------|
+| `expandRow(data)` | 展开指定行（已展开 / 不允许展开 / 找不到时忽略），返回 Promise |
+| `collapseRow(data?)` | 收起指定行；不传参数收起当前展开行 |
+| `toggleRowExpand(data)` | 切换指定行，返回 Promise |
+| `isRowExpanded(data)` | 该行是否展开 |
+| `getExpandedRow()` | 当前展开行的数据，没有为 `null` |
+
+### 在自定义单元格里触发
+
+自定义 `render` 组件或 `ActionCell` 不需要拿到表格实例：在行内任意元素上派发事件即可，DataTable 会定位到所在行。
+
+```svelte
+<!-- OrderNoCell.svelte -->
+<script>
+  import { requestRowToggle } from "@ticatec/topside-elements/DataTable";
+  let { data } = $props();
+</script>
+
+<a href="#" onclick={(e) => { e.preventDefault(); requestRowToggle(e.currentTarget); }}>{data.orderId}</a>
+```
+
+可用的助手：`requestRowExpand(el)`、`requestRowCollapse(el)`、`requestRowToggle(el)`；也可以自己派发 `ROW_EXPAND_EVENT`（`topside-row-expand`，`detail: { expanded?: boolean }`，需要 `bubbles: true`）。没有配置 `rowExpansion` 时这些请求被忽略。
+
+### 展开区内关闭 / 调用行动作
+
+```svelte
+<!-- OrderDetails.svelte -->
+<script>
+  let { data, context } = $props();
+</script>
+
+<div>
+  {#each context.actions as action}
+    <button disabled={action.disabled} onclick={() => action.handler(data)}>{action.label}</button>
+  {/each}
+  <button onclick={() => context.invoke('编辑')}>编辑</button>
+  <button onclick={() => context.collapse()}>关闭</button>
+</div>
+```
+
+`context.actions` 即 `actionsColumn.getActions(data)` 的结果（没有 `actionsColumn` 时为空数组）；嵌套很深的子组件也可以用 `requestRowCollapse(el)` 关闭所在行。
+
+> 兼容：旧写法 `indicatorColumn.buildInlineComponent` 仍然有效，等价于 `rowExpansion = { build }`。
+
 ## 样式
 
 DataTable 组件通过 CSS 自定义属性和类支持广泛的样式定制：

package/dist/data_table/index.d.ts

@@ -8,8 +8,13 @@ import type DataColumn from "./lib/DataColumn";
 import type { SummaryKind, SummaryFn, ColumnRender, ColumnRenderObject } from "./lib/DataColumn";
 import type { CellAction, GetCellAction, ActionCellProps } from "./lib/CellAction";
 import ActionCell from "./parts/ActionCell.svelte";
+import type RowExpansion from "./lib/RowExpansion";
+import type { RowExpandTrigger, RowExpandContext, RowExpandRequest, BuildInlineComponent, IsRowExpandable } from "./lib/RowExpansion";
+import { ROW_EXPAND_EVENT, requestRowExpand, requestRowCollapse, requestRowToggle } from "./lib/RowExpansion";
 export default DataTable;
 export { ActionCell };
+export { ROW_EXPAND_EVENT, requestRowExpand, requestRowCollapse, requestRowToggle };
+export type { RowExpansion, RowExpandTrigger, RowExpandContext, RowExpandRequest, BuildInlineComponent, IsRowExpandable };
 export type { ActionsColumn, IndicatorColumn, FormatCellFn, CellHint, DataColumn, ColumnRender, ColumnRenderObject };
 export type { RowAction, GetRowActions, ActionHandler, CellAction, GetCellAction, ActionCellProps };
 export type { SummaryKind, SummaryFn };

package/dist/data_table/index.js

@@ -1,4 +1,6 @@
 import DataTable from "./DataTable.svelte";
 import ActionCell from "./parts/ActionCell.svelte";
+import { ROW_EXPAND_EVENT, requestRowExpand, requestRowCollapse, requestRowToggle } from "./lib/RowExpansion";
 export default DataTable;
 export { ActionCell };
+export { ROW_EXPAND_EVENT, requestRowExpand, requestRowCollapse, requestRowToggle };

package/dist/data_table/lib/IndicatorColumn.d.ts

@@ -8,7 +8,8 @@ export default interface IndicatorColumn {
      */
     selectable?: boolean;
     /**
-     *
+     * @deprecated 请改用 DataTable 的 `rowExpansion` 属性（`{ build, showToggle, trigger, ... }`）。
+     * 保留兼容：等价于 rowExpansion = { build: buildInlineComponent }。
      */
     buildInlineComponent?: (data: any) => Promise<any>;
     /**

package/dist/data_table/lib/RowExpansion.d.ts

@@ -0,0 +1,84 @@
+import type { Component } from "svelte";
+import type RowAction from "./RowAction";
+/**
+ * 行展开触发方式（作用在整行上）：
+ * - 'click'    单击行切换展开 / 收起
+ * - 'dblclick' 双击行切换展开 / 收起
+ * 不设置时只能通过指示列图标、组件方法（expandRow / collapseRow / toggleRowExpand）
+ * 或行内派发的 DOM 事件（requestRowExpand / requestRowCollapse）来控制。
+ */
+export type RowExpandTrigger = 'click' | 'dblclick';
+/**
+ * 构建展开区组件：返回一个 Svelte 组件（可异步，如先请求明细再决定组件）。
+ * 组件会收到 `data`（行数据）和 `context`（RowExpandContext）两个属性。
+ */
+export type BuildInlineComponent<T = any> = (data: T) => Promise<Component<any>> | Component<any>;
+/** 判定某行是否允许展开 */
+export type IsRowExpandable<T = any> = (data: T) => boolean;
+/**
+ * 传给展开区组件的上下文
+ */
+export interface RowExpandContext<T = any> {
+    /** 行数据 */
+    data: T;
+    /** 关闭当前展开行 */
+    collapse: () => void;
+    /** 本行的行动作（取自 actionsColumn.getActions(data)，没有 actionsColumn 时为空数组） */
+    actions: Array<RowAction<T>>;
+    /** 按 label 执行一个行动作；找不到时返回 false */
+    invoke: (label: string) => Promise<boolean>;
+}
+/**
+ * DataTable 行展开配置（`rowExpansion` 属性）
+ */
+export default interface RowExpansion<T = any> {
+    /** 展开区组件生成器 */
+    build: BuildInlineComponent<T>;
+    /**
+     * 是否在指示列显示展开 / 收起图标，默认 true。
+     * 需要同时配置 indicatorColumn；设为 false 时只靠 trigger / 方法 / 事件触发。
+     */
+    showToggle?: boolean;
+    /** 整行触发方式（单击 / 双击），默认不设置 */
+    trigger?: RowExpandTrigger;
+    /** 判定某行是否允许展开，默认所有行都可以 */
+    isExpandable?: IsRowExpandable<T>;
+    /** 展开状态变化回调：展开时为该行数据，收起时为 null */
+    onExpandChange?: (data: T | null) => void;
+}
+/**
+ * 行内元素（render cell / ActionCell / 操作列 / 展开区）请求切换展开状态时派发的 DOM 事件名。
+ * 事件冒泡到所在行，由 DataTable 定位行并处理；detail 见 RowExpandRequest。
+ */
+export declare const ROW_EXPAND_EVENT = "topside-row-expand";
+export interface RowExpandRequest {
+    /** true 展开、false 收起、undefined 切换 */
+    expanded?: boolean;
+}
+/**
+ * 在行内任意元素上调用：请求展开所在行。
+ * 典型用法：自定义单元格组件里 `onclick={(e) => requestRowExpand(e.currentTarget)}`
+ */
+export declare const requestRowExpand: (target: EventTarget | null | undefined) => boolean;
+/** 在行内任意元素（包括展开区内部）上调用：请求收起所在行 */
+export declare const requestRowCollapse: (target: EventTarget | null | undefined) => boolean;
+/** 在行内任意元素上调用：切换所在行的展开状态 */
+export declare const requestRowToggle: (target: EventTarget | null | undefined) => boolean;
+/** 事件是否发生在交互元素内部（按钮、链接、输入框……） */
+export declare const isInteractiveTarget: (e: Event) => boolean;
+/**
+ * 内部使用：DataTable 传给各行组件的事件处理器
+ * @internal
+ */
+export interface RowEventHandlers<R = any> {
+    onRowClick: (row: R, e: MouseEvent) => void;
+    onRowDblClick: (row: R, e: MouseEvent) => void;
+    onExpandRequest: (row: R, e: Event) => void;
+}
+/**
+ * 内部使用的 Svelte action：在行容器上监听 ROW_EXPAND_EVENT。
+ * @internal
+ */
+export declare const onRowExpandRequest: (node: HTMLElement, handler: (e: Event) => void) => {
+    destroy(): void;
+};

package/dist/data_table/lib/RowExpansion.js

@@ -0,0 +1,43 @@
+/**
+ * 行内元素（render cell / ActionCell / 操作列 / 展开区）请求切换展开状态时派发的 DOM 事件名。
+ * 事件冒泡到所在行，由 DataTable 定位行并处理；detail 见 RowExpandRequest。
+ */
+export const ROW_EXPAND_EVENT = 'topside-row-expand';
+const dispatch = (target, expanded) => {
+    if (!target)
+        return false;
+    return target.dispatchEvent(new CustomEvent(ROW_EXPAND_EVENT, {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail: { expanded }
+    }));
+};
+/**
+ * 在行内任意元素上调用：请求展开所在行。
+ * 典型用法：自定义单元格组件里 `onclick={(e) => requestRowExpand(e.currentTarget)}`
+ */
+export const requestRowExpand = (target) => dispatch(target, true);
+/** 在行内任意元素（包括展开区内部）上调用：请求收起所在行 */
+export const requestRowCollapse = (target) => dispatch(target, false);
+/** 在行内任意元素上调用：切换所在行的展开状态 */
+export const requestRowToggle = (target) => dispatch(target);
+/** 行级触发时忽略来自这些元素内部的点击（它们有自己的行为） */
+const INTERACTIVE_SELECTOR = 'a, button, input, select, textarea, label, [role="button"], [contenteditable="true"]';
+/** 事件是否发生在交互元素内部（按钮、链接、输入框……） */
+export const isInteractiveTarget = (e) => {
+    const el = e.target;
+    return !!el && typeof el.closest === 'function' && el.closest(INTERACTIVE_SELECTOR) != null;
+};
+/**
+ * 内部使用的 Svelte action：在行容器上监听 ROW_EXPAND_EVENT。
+ * @internal
+ */
+export const onRowExpandRequest = (node, handler) => {
+    node.addEventListener(ROW_EXPAND_EVENT, handler);
+    return {
+        destroy() {
+            node.removeEventListener(ROW_EXPAND_EVENT, handler);
+        }
+    };
+};

package/dist/data_table/parts/ActionsPanel.svelte

@@ -5,6 +5,7 @@
     import { onDestroy, onMount } from "svelte";
     import i18nRes from "../../i18nRes";
     import type { VirtualWindow } from "../lib/virtualWindow";
+    import type { RowEventHandlers } from "../lib/RowExpansion";
 
     interface Props {
         actionsColumn: ActionsColumn;
@@ -18,6 +19,7 @@
         vwindow?: VirtualWindow | null;
         /** 与数据区的合计行对齐（操作列这一格留空） */
         showSummary?: boolean;
+        rowEvents?: RowEventHandlers<TableRow> | null;
     }
 
     let {
@@ -30,6 +32,7 @@
         headerHeight,
         vwindow = null,
         showSummary = false,
+        rowEvents = null,
     }: Props = $props();
 
     // Virtual scrolling: same shared window as the other panels.
@@ -89,6 +92,7 @@
                     width={actionsColumn.width}
                     align={actionsColumn.align}
                     actions={actionsColumn.getActions(row.data)}
+                    {rowEvents}
                 />
                 {#if row == expandRow}
                     <div class="inline-panel" style="height: {inlineRowHeight ?? 0}px"> </div>

package/dist/data_table/parts/ActionsPanel.svelte.d.ts

@@ -1,6 +1,7 @@
 import type ActionsColumn from "../lib/ActionsColumn";
 import type TableRow from "./TableRow";
 import type { VirtualWindow } from "../lib/virtualWindow";
+import type { RowEventHandlers } from "../lib/RowExpansion";
 interface Props {
     actionsColumn: ActionsColumn;
     scrollTop?: number;
@@ -13,6 +14,7 @@ interface Props {
     vwindow?: VirtualWindow | null;
     /** 与数据区的合计行对齐（操作列这一格留空） */
     showSummary?: boolean;
+    rowEvents?: RowEventHandlers<TableRow> | null;
 }
 declare const ActionsPanel: import("svelte").Component<Props, {}, "scrollTop">;
 type ActionsPanel = ReturnType<typeof ActionsPanel>;

package/dist/data_table/parts/ActionsRow.svelte

@@ -5,6 +5,7 @@
     import { onDestroy, onMount, tick } from "svelte";
     import utils from "../../overlay/common/utils";
     import PopupMenu from "./PopupMenu.svelte";
+    import { onRowExpandRequest, type RowEventHandlers } from "../lib/RowExpansion";
 
     interface Props {
         row: TableRow;
@@ -14,9 +15,10 @@
         width: number;
         rowHeight?: number;
         align?: 'left' | 'center';
+        rowEvents?: RowEventHandlers<TableRow> | null;
     }
 
-    let { row, actions, alternative, parentRect, width, rowHeight, align }: Props = $props();
+    let { row, actions, alternative, parentRect, width, rowHeight, align, rowEvents = null }: Props = $props();
 
     let actionList = $state<Array<RowAction>>([]);
     let popupList = $state<Array<RowAction>>([]);
@@ -82,10 +84,15 @@
     let style = $derived(rowHeight == null ? '' : `height: ${rowHeight}px`);
 </script>
 
+<!-- 行级单击 / 双击展开是鼠标快捷方式；键盘用户通过指示列图标（可聚焦）操作 -->
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 <div
     class="data-row"
     class:alternative
     style="position: relative; display: block; padding: 0 4px; width: {width}px; {style}"
+    onclick={(e) => rowEvents?.onRowClick(row, e)}
+    ondblclick={(e) => rowEvents?.onRowDblClick(row, e)}
+    use:onRowExpandRequest={(e) => rowEvents?.onExpandRequest(row, e)}
 >
     <div class="action-cell" bind:this={cell} style={align == 'center' ? 'margin: 0 auto' : ''}>
         {#each actionList as action (action)}

package/dist/data_table/parts/ActionsRow.svelte.d.ts

@@ -1,5 +1,6 @@
 import type RowAction from "../lib/RowAction";
 import type TableRow from "./TableRow";
+import { type RowEventHandlers } from "../lib/RowExpansion";
 interface Props {
     row: TableRow;
     actions: Array<RowAction>;
@@ -8,6 +9,7 @@ interface Props {
     width: number;
     rowHeight?: number;
     align?: 'left' | 'center';
+    rowEvents?: RowEventHandlers<TableRow> | null;
 }
 declare const ActionsRow: import("svelte").Component<Props, {}, "">;
 type ActionsRow = ReturnType<typeof ActionsRow>;

package/dist/data_table/parts/ContentPanel.svelte

@@ -8,6 +8,7 @@
     import { OrderDirection } from "../lib/OrderDirection";
     import type { GetRowFontStyle } from "../../types";
     import type { VirtualWindow } from "../lib/virtualWindow";
+    import { onRowExpandRequest, type RowEventHandlers, type RowExpandContext } from "../lib/RowExpansion";
 
     interface Props {
         columns: Array<DataColumn>;
@@ -35,6 +36,9 @@
         viewportHeight?: number;
         /** 合计行各列文字；null 不显示 */
         summary?: Array<string> | null;
+        /** 传给展开区组件的上下文（collapse / actions） */
+        expandContext?: RowExpandContext | null;
+        rowEvents?: RowEventHandlers<TableRow> | null;
     }
 
     let {
@@ -60,6 +64,8 @@
         vwindow = null,
         viewportHeight = $bindable(0),
         summary = null,
+        expandContext = null,
+        rowEvents = null,
     }: Props = $props();
 
     let scrollLeft = $state(0);
@@ -172,6 +178,7 @@
                         {row}
                         {columns}
                         alternative={idx % 2 == 1}
+                        {rowEvents}
                     />
                     {#if row == expandRow && inlineComponent}
                         {@const InlineComp = inlineComponent}
@@ -179,9 +186,10 @@
                             class="expand-data-row"
                             bind:clientHeight={inlineRowHeight}
                             style="position: relative; box-sizing: content-box; width: 100%; height: auto"
+                            use:onRowExpandRequest={(e) => rowEvents?.onExpandRequest(row, e)}
                         >
                             <div class="inline-panel">
-                                <InlineComp data={row.data} />
+                                <InlineComp data={row.data} context={expandContext} />
                             </div>
                         </div>
                     {/if}

package/dist/data_table/parts/ContentPanel.svelte.d.ts

@@ -4,6 +4,7 @@ import UniDataTable, { type OnWidthChange } from "../UniDataTable";
 import { OrderDirection } from "../lib/OrderDirection";
 import type { GetRowFontStyle } from "../../types";
 import type { VirtualWindow } from "../lib/virtualWindow";
+import { type RowEventHandlers, type RowExpandContext } from "../lib/RowExpansion";
 interface Props {
     columns: Array<DataColumn>;
     rows: Array<TableRow>;
@@ -30,6 +31,9 @@ interface Props {
     viewportHeight?: number;
     /** 合计行各列文字；null 不显示 */
     summary?: Array<string> | null;
+    /** 传给展开区组件的上下文（collapse / actions） */
+    expandContext?: RowExpandContext | null;
+    rowEvents?: RowEventHandlers<TableRow> | null;
 }
 declare const ContentPanel: import("svelte").Component<Props, {}, "scrollTop" | "viewportHeight" | "rows" | "inlineRowHeight" | "tabWidth">;
 type ContentPanel = ReturnType<typeof ContentPanel>;

package/dist/data_table/parts/DataRow.svelte

@@ -3,6 +3,7 @@
     import DataCell from "./DataCell.svelte";
     import type TableRow from "./TableRow";
     import type { RowFontStyle } from "../../types";
+    import { onRowExpandRequest, type RowEventHandlers } from "../lib/RowExpansion";
 
     interface Props {
         columns: Array<DataColumn>;
@@ -10,9 +11,10 @@
         alternative: boolean;
         rowHeight?: number;
         fontStyle?: RowFontStyle;
+        rowEvents?: RowEventHandlers<TableRow> | null;
     }
 
-    let { columns, row, alternative, rowHeight, fontStyle }: Props = $props();
+    let { columns, row, alternative, rowHeight, fontStyle, rowEvents = null }: Props = $props();
 
     const getRowStyle = (rh: number | undefined, fs: RowFontStyle | undefined): string => {
         let rs = '';
@@ -34,7 +36,16 @@
     let style = $derived(getRowStyle(rowHeight, fontStyle));
 </script>
 
-<div class="data-row" {style} class:alternative aria-hidden="true">
+<!-- 行级单击 / 双击展开是鼠标快捷方式；键盘用户通过指示列图标（可聚焦）操作。本元素 aria-hidden，无需 a11y 忽略 -->
+<div
+    class="data-row"
+    {style}
+    class:alternative
+    aria-hidden="true"
+    onclick={(e) => rowEvents?.onRowClick(row, e)}
+    ondblclick={(e) => rowEvents?.onRowDblClick(row, e)}
+    use:onRowExpandRequest={(e) => rowEvents?.onExpandRequest(row, e)}
+>
     {#each columns as col, idx (idx)}
         <DataCell colIdx={idx} data={row.data} column={col} />
     {/each}

package/dist/data_table/parts/DataRow.svelte.d.ts

@@ -1,12 +1,14 @@
 import type DataColumn from "../lib/DataColumn";
 import type TableRow from "./TableRow";
 import type { RowFontStyle } from "../../types";
+import { type RowEventHandlers } from "../lib/RowExpansion";
 interface Props {
     columns: Array<DataColumn>;
     row: TableRow;
     alternative: boolean;
     rowHeight?: number;
     fontStyle?: RowFontStyle;
+    rowEvents?: RowEventHandlers<TableRow> | null;
 }
 declare const DataRow: import("svelte").Component<Props, {}, "">;
 type DataRow = ReturnType<typeof DataRow>;

package/dist/data_table/parts/FixedColumnsPanel.svelte

@@ -12,6 +12,7 @@
     import { OrderDirection } from "../lib/OrderDirection";
     import type { VirtualWindow } from "../lib/virtualWindow";
     import type { TableSummary } from "../lib/summary";
+    import type { RowEventHandlers, IsRowExpandable } from "../lib/RowExpansion";
 
     interface Props {
         fixedCols?: Array<DataColumn>;
@@ -33,6 +34,10 @@
         vwindow?: VirtualWindow | null;
         /** 合计行；null 不显示 */
         summary?: TableSummary | null;
+        /** 是否在指示列显示展开 / 收起图标（由 DataTable 根据 rowExpansion 决定） */
+        expandable?: boolean;
+        isExpandable?: IsRowExpandable<TableRow>;
+        rowEvents?: RowEventHandlers<TableRow> | null;
     }
 
     let {
@@ -47,12 +52,15 @@
         orderColumn,
         orderDirection,
         selectedRows = $bindable([]),
-        expandRow = $bindable(null),
+        expandRow = null,
         rowHeight,
         headerHeight,
         inlineRowHeight = 0,
         vwindow = null,
         summary = null,
+        expandable = false,
+        isExpandable = () => true,
+        rowEvents = null,
     }: Props = $props();
 
     // Virtual scrolling: same shared window as the other panels, so all three
@@ -63,7 +71,6 @@
     let selectionMode = $state<SelectionMode>(SelectionMode.None);
 
     let selectable = $derived(indicatorColumn?.selectable == true);
-    let expandable = $derived(indicatorColumn?.buildInlineComponent != null);
 
     // Track selected indices internally to avoid $state proxy identity issues
     let selectedIndices = $state<Set<number>>(new Set());
@@ -162,6 +169,8 @@
                     {expandRow}
                     {rowHeight}
                     {expandable}
+                    {isExpandable}
+                    {rowEvents}
                     {onRowExpand}
                     {onRowSelectChange}
                     {indicatorColumn}

package/dist/data_table/parts/FixedColumnsPanel.svelte.d.ts

@@ -5,6 +5,7 @@ import type DataColumn from "../lib/DataColumn";
 import { OrderDirection } from "../lib/OrderDirection";
 import type { VirtualWindow } from "../lib/virtualWindow";
 import type { TableSummary } from "../lib/summary";
+import type { RowEventHandlers, IsRowExpandable } from "../lib/RowExpansion";
 interface Props {
     fixedCols?: Array<DataColumn>;
     indicatorColumn?: IndicatorColumn | null;
@@ -25,7 +26,11 @@ interface Props {
     vwindow?: VirtualWindow | null;
     /** 合计行；null 不显示 */
     summary?: TableSummary | null;
+    /** 是否在指示列显示展开 / 收起图标（由 DataTable 根据 rowExpansion 决定） */
+    expandable?: boolean;
+    isExpandable?: IsRowExpandable<TableRow>;
+    rowEvents?: RowEventHandlers<TableRow> | null;
 }
-declare const FixedColumnsPanel: import("svelte").Component<Props, {}, "scrollTop" | "expandRow" | "selectedRows">;
+declare const FixedColumnsPanel: import("svelte").Component<Props, {}, "scrollTop" | "selectedRows">;
 type FixedColumnsPanel = ReturnType<typeof FixedColumnsPanel>;
 export default FixedColumnsPanel;