feat(next-table): support row click

Author: weareoutman

bricks/advanced/src/next-table/Table.tsx

@@ -69,6 +69,7 @@ export interface NextTableComponentProps extends NextTableProps {
   onPageChange?: (detail: { page: number; pageSize: number }) => void;
   onPageSizeChange?: (detail: { page: number; pageSize: number }) => void;
   onSort?: (detail?: Sort | Sort[]) => void;
+  onRowClick?: (detail: RecordType) => void;
   onRowSelect?: (detail: {
     keys: (string | number)[];
     rows: RecordType[];
@@ -106,6 +107,7 @@ export const NextTableComponent = forwardRef(function LegacyNextTableComponent(
     expandable,
     childrenColumnName,
     rowDraggable,
+    rowClickable,
     searchFields,
     size,
     showHeader,
@@ -116,6 +118,7 @@ export const NextTableComponent = forwardRef(function LegacyNextTableComponent(
     onPageChange,
     onPageSizeChange,
     onSort,
+    onRowClick,
     onRowSelect,
     onRowExpand,
     onExpandedRowsChange,
@@ -618,6 +621,15 @@ export const NextTableComponent = forwardRef(function LegacyNextTableComponent(
                       },
                     }
               }
+              onRow={
+                rowClickable
+                  ? (record) => ({
+                      onClick: () => {
+                        onRowClick?.(record);
+                      },
+                    })
+                  : undefined
+              }
               onChange={(pagination, _filters, sorter, extra) => {
                 switch (extra.action) {
                   case "paginate": {
@@ -661,7 +673,9 @@ export const NextTableComponent = forwardRef(function LegacyNextTableComponent(
                   }
                 }
               }}
-              className="next-table"
+              className={classNames("next-table", {
+                "row-clickable": rowClickable,
+              })}
             />
           </SortableContext>
         </DndContext>

bricks/advanced/src/next-table/index.tsx

@@ -159,6 +159,14 @@ class EoNextTable extends ReactNextElement implements NextTableProps {
   })
   accessor rowDraggable: boolean | undefined;
 
+  /**
+   * 表格行可点击（激活鼠标手势）
+   */
+  @property({
+    type: Boolean,
+  })
+  accessor rowClickable: boolean | undefined;
+
   /**
    * 进行前端搜索的字段，支持嵌套的写法。不配置的时候默认为对所有 column.dataIndex 进行前端搜索
    */
@@ -260,6 +268,17 @@ class EoNextTable extends ReactNextElement implements NextTableProps {
     this.#sortChangeEvent.emit(detail);
   };
 
+  /**
+   * 行点击时的回调
+   * @detail 被点击的行数据
+   */
+  @event({ type: "row.click" })
+  accessor #rowClickEvent!: EventEmitter<RecordType>;
+
+  #handleRowClick = (detail: RecordType): void => {
+    this.#rowClickEvent.emit(detail);
+  };
+
   /**
    * 行选中项发生变化时的回调
    * @detail 改变后的 rowKey 及行数据
@@ -356,6 +375,7 @@ class EoNextTable extends ReactNextElement implements NextTableProps {
           expandedRowKeys={this.expandedRowKeys}
           childrenColumnName={this.childrenColumnName}
           rowDraggable={this.rowDraggable}
+          rowClickable={this.rowClickable}
           searchFields={this.searchFields}
           size={this.size}
           showHeader={this.showHeader}
@@ -366,6 +386,7 @@ class EoNextTable extends ReactNextElement implements NextTableProps {
           onPageChange={this.#handlePageChange}
           onPageSizeChange={this.#handlePageSizeChange}
           onSort={this.#handleSort}
+          onRowClick={this.#handleRowClick}
           onRowSelect={this.#handleRowSelect}
           onRowExpand={this.#handleRowExpand}
           onExpandedRowsChange={this.#handleExpandedRowsChange}

bricks/advanced/src/next-table/interface.ts

@@ -25,6 +25,7 @@ export interface NextTableProps {
   expandedRowKeys?: (string | number)[];
   childrenColumnName?: string;
   rowDraggable?: boolean;
+  rowClickable?: boolean;
   searchFields?: (string | string[])[];
   size?: TableProps<RecordType>["size"];
   showHeader?: boolean;

bricks/advanced/src/next-table/styles.shadow.css

@@ -207,6 +207,10 @@
   border-inline-end: none;
 }
 
+.next-table.row-clickable .ant-table-tbody > tr {
+  cursor: pointer;
+}
+
 :host([theme-variant="elevo"]) {
   --eo-next-table-header-border-radius: var(--elevo-border-radius);
   --eo-table-head-cell-height: 41px;