feat(components): [virtual-table] renderers (#7204)

- Update sorting for table-v2.
- Update SortIndicator component's style.

packages/components/table-v2/src/renderers/header-cell.tsx

@@ -67,15 +67,6 @@ const HeaderCellRenderer: FunctionalComponent<HeaderCellRendererProps> = (
    */
   const { sortBy, sortState, headerCellProps } = props
 
-  const cellKls = [
-    ns.e('header-cell'),
-    ...tryCall(headerClass, props, ''),
-    column.align === Alignment.CENTER && ns.is('align-center'),
-    column.align === Alignment.RIGHT && ns.is('align-right'),
-    sortable && ns.is('sortable'),
-    column.key === resizingKey && ns.is('resizing'),
-  ]
-
   let sorting: boolean, sortOrder: SortOrder
   if (sortState) {
     const order = sortState[column.key]
@@ -86,6 +77,15 @@ const HeaderCellRenderer: FunctionalComponent<HeaderCellRendererProps> = (
     sortOrder = sorting ? sortBy.order : SortOrder.ASC
   }
 
+  const cellKls = [
+    ns.e('header-cell'),
+    ...tryCall(headerClass, props, ''),
+    column.align === Alignment.CENTER && ns.is('align-center'),
+    column.align === Alignment.RIGHT && ns.is('align-right'),
+    sortable && ns.is('sortable'),
+    column.key === resizingKey && ns.is('resizing'),
+  ]
+
   const cellProps = {
     ...tryCall(headerCellProps, props),
     onClick: column.sortable ? onColumnSorted : undefined,
@@ -97,7 +97,13 @@ const HeaderCellRenderer: FunctionalComponent<HeaderCellRendererProps> = (
   return (
     <div {...cellProps}>
       {Cell}
-      {sortable && <SortIcon sortOrder={sortOrder} />}
+
+      {sortable && (
+        <SortIcon
+          class={[ns.e('sort-icon'), sorting && ns.is('sorting')]}
+          sortOrder={sortOrder}
+        />
+      )}
       {resizable && (
         <ColumnResizer
           class={ns.e('column-resizer')}

packages/components/table-v2/src/sort-icon.tsx

@@ -1,21 +1,22 @@
-import { defineComponent } from 'vue'
 import ElIcon from '@element-plus/components/icon'
 import { SortDown, SortUp } from '@element-plus/icons-vue'
 import { SortOrder } from './constants'
 
+import type { FunctionalComponent } from 'vue'
+
 export type SortIconProps = {
   sortOrder: SortOrder
-  class?: string
+  class?: string | string[]
 }
 
-const SortIcon = defineComponent((props: SortIconProps) => {
+const SortIcon: FunctionalComponent<SortIconProps> = (props) => {
   const { sortOrder } = props
 
   return (
     <ElIcon size={14} class={props.class}>
-      {sortOrder === SortOrder.ASC ? SortUp : SortDown}
+      {sortOrder === SortOrder.ASC ? <SortUp /> : <SortDown />}
     </ElIcon>
   )
-})
+}
 
 export default SortIcon

packages/components/table-v2/src/use-table.ts

@@ -299,7 +299,9 @@ function useTable(props: TableV2Props) {
     props.onColumnResizeEnded?.(getColumn(_resizingKey)!, _resizingWidth)
   }
 
-  function onColumnSorted(key: KeyType) {
+  function onColumnSorted(e: MouseEvent) {
+    const { key } = (e.currentTarget as HTMLElement).dataset
+    if (!key) return
     const { sortState, sortBy } = props
 
     let order = SortOrder.ASC

packages/theme-chalk/src/table-v2.scss

@@ -79,12 +79,32 @@
     @include e('header-cell') {
       @include center-flex;
       @include cell-padding;
+      @include cell-alignment;
       height: 100%;
       user-select: none;
       background-color: getCssVar('table-header', 'bg-color');
       color: getCssVar('table-header', 'text-color');
 
-      @include cell-alignment;
+      @include when(sortable) {
+        cursor: pointer;
+      }
+
+      &:hover {
+        #{$namespace}-icon {
+          display: block;
+        }
+      }
+    }
+
+    @include e('sort-icon') {
+      transition: opacity, display getCssVar('transition-duration', '');
+      opacity: 0.6;
+      display: none;
+
+      @include when(sorting) {
+        display: block;
+        opacity: 1;
+      }
     }
   }