fix: change showSortTip default value to false

content/show/table/index-en-US.md

@@ -1198,6 +1198,10 @@ render(App);
 
 When sorter is a function type, the sortOrder status can be obtained through the third parameter of the function. The function type is `(a?: RecordType, b?: RecordType, sortOrder?: 'ascend' | 'descend') => number`. Supported by version v2.47.
 
+You can control whether to display the sorting tip through the `showSortTip` attribute. It is supported since v2.65 and defaults to `false`. When the tip is turned on, when there is only sorting function, the sorting prompt will be displayed when the mouse is moved to the table header; in other cases, the sorting prompt will be displayed only when the mouse is moved to the sorting icon.
+
+**Note**: When using the `sortOrder` attribute for controlled sorting, since the next sort order cannot be predicted, `showSortTip` does not take effect and the prompt will not be displayed.
+
 ```jsx live=true noInline=true dir="column"
 import React from 'react';
 import { Table, Avatar } from '@douyinfe/semi-ui';
@@ -5418,7 +5422,7 @@ import { Table } from '@douyinfe/semi-ui';
 | renderFilterDropdown | Custom filter dropdown panel, for usage details, see [Custom Filter Rendering](#Custom-Filter-Rendering) | (props?: RenderFilterDropdownProps) => React.ReactNode; | - | **2.52.0** |
 | renderFilterDropdownItem | Customize the rendering method of each filter item. For usage details, see [Custom Filter Item Rendering](#Custom-Filter-Item-Rendering) | ({ value: any, text: any, onChange: Function, level: number, ...otherProps }) => ReactNode | - | **1.1.0** |
 | resize | Whether to enable resize mode, this property will take effect only after Table resizable is enabled | boolean |  | **2.42.0** |
-| showSortTooltip | Whether to display sorting tips | boolean | true | **2.65.0** |
+| showSortTip | Whether to display sorting tips, If sortOrder is set and sorting is controlled, this parameter will not take effect | boolean | false | **2.65.0** |
 | sortChildrenRecord | Whether to sort child data locally | boolean |  | **0.29.0** |
 | sortOrder | The controlled property of the sorting, the sorting of this control column can be set to 'ascend'\|'descended '\|false | boolean | false |
 | sorter | Sorting function, local sorting uses a function (refer to the compareFunction of Array.sort), requiring a server-side sorting can be set to true. **An independent dataIndex must be set for the sort column, and an independent key must be set for each data item in the dataSource** | boolean\|(r1: RecordType, r2: RecordType, sortOrder: 'ascend' \| 'descend') => number | true |

content/show/table/index.md

@@ -1302,6 +1302,10 @@ render(App);
 
 sorter 为函数类型时，可以通过函数的第三个参数获取 sortOrder 状态。函数类型为 `(a?: RecordType, b?: RecordType, sortOrder?: 'ascend' | 'descend') => number`。v2.47 版本支持。
 
+可通过 `showSortTip` 属性控制是否展示排序提示，自 v2.65 版本支持，默认为 `false`。当开启提示后，当仅有排序功能时候，鼠标移动至表头时，会展示排序提示；其他情况下，仅鼠标移动至排序图标时，会展示排序提示。
+
+**注**：在使用 `sortOrder` 属性受控排序时，由于无法预测下一个排序顺序，因此 `showSortTip` 不生效，不会展示提示。
+
 ```jsx live=true noInline=true dir="column"
 import React from 'react';
 import { Table, Avatar } from '@douyinfe/semi-ui';
@@ -1338,6 +1342,7 @@ function App() {
                     return 0; // 保持原来的顺序
                 }
             },
+            showSortTip: true,
             render: text => text ? `${text} KB` : '未知',
         },
         {
@@ -5545,11 +5550,11 @@ import { Table } from '@douyinfe/semi-ui';
 | renderFilterDropdown | 自定义筛选器 dropdown 面板，用法详见[自定义筛选器](#自定义筛选器) | (props?: RenderFilterDropdownProps) => React.ReactNode; | - | **2.52.0** |
 | renderFilterDropdownItem | 自定义每个筛选项渲染方式，用法详见[自定义筛选项渲染](#自定义筛选项渲染) | ({ value: any, text: any, onChange: Function, level: number, ...otherProps }) => ReactNode | - | **1.1.0** |
 | resize | 是否开启 resize 模式，只有 Table resizable 开启后此属性才会生效 | boolean |  | **2.42.0** |
+| showSortTip | 是否展示排序提示, 如果设置了 sortOrder，排序受控，则该参数不会生效 | boolean | false | **2.65.0** |
 | sortChildrenRecord | 是否对子级数据进行本地排序 | boolean |  | **0.29.0** |
 | sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 'ascend'\|'descend'\|false | boolean\| string | false |
 | sorter | 排序函数，本地排序使用一个函数(参考 Array.sort 的 compareFunction)，需要服务端排序可设为 true。**必须给排序列设置一个独立的 dataIndex，必须为 dataSource 里面的每条数据项设置独立的 key** | boolean\|(r1: RecordType, r2: RecordType, sortOrder: 'ascend' \| 'descend') => number | true |
 | sortIcon | 自定义 sort 图标，返回的节点控制了整个排序按钮，包含升序和降序。需根据 sortOrder 控制高亮行为 | (props: { sortOrder }) => ReactNode | | **2.50.0** |
-| showSortTooltip | 是否展示排序提示 | boolean | true | **2.65.0** |
 | title | 列头显示文字。传入 function 时，title 将使用函数的返回值；传入其他类型，将会和 sorter、filter 进行聚合。需要搭配 useFullRender 获取函数类型中的 filter 等参数 | ReactNode\|({ filter: ReactNode, sorter: ReactNode, selection: ReactNode }) => ReactNode |  | Function 类型需要**0.34.0** |
 | useFullRender | 是否完全自定义渲染，用法详见[完全自定义渲染](#完全自定义渲染)， 开启此功能会造成一定的性能损耗 | boolean | false | **0.34.0** |
 | width | 列宽度 | string \| number |  |

packages/semi-foundation/table/table.scss

@@ -142,13 +142,21 @@ $module: #{$prefix}-table;
                 position: relative;
                 transition: background-color $transition_duration-table_row-head-bg $transition_function-table_row-head-bg;
 
-                &-clickSort {
+                &.#{$module}-row-head-clickSort {
                     cursor: pointer;
                     &:hover {
-                        background: var(--semi-color-fill-0),
+                        background: $color-table_th-clickSort-bg-hover;
+
+                        &.#{$module}-cell-fixed {
+                            &-left,
+                            &-right {
+                                &::before {
+                                    background-color: transparent;
+                                }
+                            }
+                        }
                     }
                 }
-
 
                 &.#{$module}-cell-fixed {
                     &-left,

packages/semi-foundation/table/variables.scss

@@ -57,6 +57,7 @@ $color-table_shadow-border-default: var(--semi-color-border); // 表格拟阴影
 $color-table_th-bg-default: var(--semi-color-bg-1); // 表头背景色
 $color-table_th-border-default: var(--semi-color-border); // 表头底部分割线颜色
 $color-table_th-text-default: var(--semi-color-text-2); // 表头文字颜色
+$color-table_th-clickSort-bg-hover: var(--semi-color-fill-0); //点击表头触发排序背景色 - 悬浮
 
 $color-table_pl-bg-default: transparent;
 $color-table_body-bg-default: var(--semi-color-bg-1); // 表格背景颜色 - 默认

packages/semi-ui/table/ColumnShape.ts

@@ -30,5 +30,5 @@ export default {
     title: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
     useFullRender: PropTypes.bool,
     width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    showSortTooltip: PropTypes.bool,
+    showSortTip: PropTypes.bool,
 };

packages/semi-ui/table/Table.tsx

@@ -1014,7 +1014,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
                 typeof column.renderFilterDropdown === 'function';
             let hasSorterOrFilter = false;
             const sortOrderNotControlled = !('sortOrder' in column);
-            let showSortTooltip = sortOrderNotControlled && !(column.showSortTooltip === false) ;
+            const showSortTip = sortOrderNotControlled && column.showSortTip === true;
             const { dataIndex, title: rawTitle, useFullRender } = column;
             const clickColumnToSorter = hasSorter && !hasFilter && !Boolean(useFullRender);
             const curQuery = this.foundation.getQuery(dataIndex);
@@ -1049,7 +1049,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
                         sortIcon={column.sortIcon}
                         onClick={useFullRender || hasFilter ? e => this.foundation.handleSort(column, e) : null}
                         title={TitleNode}
-                        showTooltip={!clickColumnToSorter && showSortTooltip}
+                        showTooltip={!clickColumnToSorter && showSortTip}
                     />
                 );
                 useFullRender && (titleMap.sorter = sorter);
@@ -1095,7 +1095,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
                     this.foundation.handleSort(column, e);
                 };
                 column.sortOrder = sortOrder;
-                column.showSortTooltip = showSortTooltip;
+                column.showSortTip = showSortTip;
             }
         }
 

packages/semi-ui/table/TableHeaderRow.tsx

@@ -213,8 +213,7 @@ export default class TableHeaderRow extends BaseComponent<TableHeaderRowProps, R
                 style={cellStyle}
                 key={column.key || column.dataIndex || cellIndex}
             />);
-
-            if (typeof column.clickToSort === 'function' && column.showSortTooltip !== false) {
+            if (typeof column.clickToSort === 'function' && column.showSortTip === true) {
                 let content = getNextSortOrder(column.sortOrder);
                 return (<LocaleConsumer 
                     componentName="Table" 

packages/semi-ui/table/interface.ts

@@ -117,7 +117,7 @@ export interface ColumnProps<RecordType extends Record<string, any> = any> {
     onHeaderCell?: OnHeaderCell<RecordType>;
     ellipsis?: BaseEllipsis;
     resize?: boolean;
-    showSortTooltip?: boolean
+    showSortTip?: boolean
 }
 
 export type Align = BaseAlign;