feat: Optimize table sorting hot spots (#2413)

* feat: Optimize table sorting hot spots * fix: change showSortTip default value to false
DouyinFE · Aug 20, 2024 · 26802be · 26802be
1 parent 765161d
commit 26802be
Show file tree

Hide file tree

Showing 34 changed files with 203 additions and 34 deletions.
diff --git a/content/show/table/index-en-US.md b/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,6 +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** |
+| 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 |

diff --git a/content/show/table/index.md b/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,6 +5550,7 @@ 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 |

diff --git a/packages/semi-foundation/table/animation.scss b/packages/semi-foundation/table/animation.scss
@@ -1,3 +1,5 @@
 $transition_duration-table_body-bg: var(--semi-transition_duration-none); // 表格-背景颜色-动画持续时间
 $transition_function-table_body-bg: var(--semi-transition_function-easeOut); // 表格-背景颜色-过渡曲线
 $transition_delay-table_body-bg: 0ms; // 表格-背景颜色-延迟时间
+$transition_duration-table_row-head-bg: 0.1s; // 表格-行头-背景颜色-动画持续时间
+$transition_function-table_row-head-bg: linear; // 表格-行头-背景颜色-过渡曲线
diff --git a/packages/semi-foundation/table/table.scss b/packages/semi-foundation/table/table.scss
@@ -140,6 +140,23 @@ $module: #{$prefix}-table;
  // word-break: break-all;
  // word-wrap: break-word;
  position: relative;
+ transition: background-color $transition_duration-table_row-head-bg $transition_function-table_row-head-bg;
+
+ &.#{$module}-row-head-clickSort {
+ cursor: pointer;
+ &:hover {
+ background: $color-table_th-clickSort-bg-hover;
+
+ &.#{$module}-cell-fixed {
+ &-left,
+ &-right {
+ &::before {
+ background-color: transparent;
+ }
+ }
+ }
+ }
+ }
 
  &.#{$module}-cell-fixed {
  &-left,

diff --git a/packages/semi-foundation/table/variables.scss b/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); // 表格背景颜色 - 默认

diff --git a/packages/semi-ui/locale/interface.ts b/packages/semi-ui/locale/interface.ts
@@ -99,7 +99,10 @@ export interface Locale {
  };
  Table: {
  emptyText: string;
- pageText: string
+ pageText: string;
+ descend: string;
+ ascend: string;
+ cancelSort: string
  };
  Select: {
  emptyText: string;

diff --git a/packages/semi-ui/locale/source/ar.ts b/packages/semi-ui/locale/source/ar.ts
@@ -101,6 +101,9 @@ const local: Locale = {
  Table: {
  emptyText: 'لا نتيجة',
  pageText: 'عرض ${currentStart} إلى ${currentEnd} من ${total}',
+ descend: 'انقر للهبوط',
+ ascend: 'انقر للصعود',
+ cancelSort: 'إلغاء الترتيب',
  },
  Select: {
  emptyText: 'لا نتيجة',

diff --git a/packages/semi-ui/locale/source/de.ts b/packages/semi-ui/locale/source/de.ts
@@ -101,6 +101,9 @@ const local: Locale = {
  Table: {
  emptyText: 'Kein Ergebnis',
  pageText: 'Anzeigen ${currentStart} bis ${currentEnd} von ${total}',
+ descend: 'Klicken, um absteigend zu sortieren',
+ ascend: 'Klicken, um aufsteigend zu sortieren',
+ cancelSort: 'Sortierung abbrechen',
  },
  Select: {
  emptyText: 'Kein Ergebnis',

diff --git a/packages/semi-ui/locale/source/en_GB.ts b/packages/semi-ui/locale/source/en_GB.ts
@@ -101,6 +101,9 @@ const local: Locale = {
  Table: {
  emptyText: 'No Result',
  pageText: 'Showing ${currentStart} to ${currentEnd} of ${total}',
+ descend: 'Click to descend',
+ ascend: 'Click to ascend',
+ cancelSort: 'Cancel sorting',
  },
  Select: {
  emptyText: 'No Result',

diff --git a/packages/semi-ui/locale/source/en_US.ts b/packages/semi-ui/locale/source/en_US.ts
@@ -101,6 +101,9 @@ const local: Locale = {
  Table: {
  emptyText: 'No Result',
  pageText: 'Showing ${currentStart} to ${currentEnd} of ${total}',
+ descend: 'Click to descend',
+ ascend: 'Click to ascend',
+ cancelSort: 'Cancel sorting',
  },
  Select: {
  emptyText: 'No Result',

diff --git a/packages/semi-ui/locale/source/es.ts b/packages/semi-ui/locale/source/es.ts
@@ -106,6 +106,9 @@ const locale: Locale = {
  Table: {
  emptyText: 'Sin resultados',
  pageText: 'Mostrando del ${currentStart} al ${currentEnd} de ${total}',
+ descend: 'Hacer clic para descender',
+ ascend: 'Hacer clic para ascender',
+ cancelSort: 'Cancelar ordenación',
  },
  Select: {
  emptyText: 'Sin resultados',

diff --git a/packages/semi-ui/locale/source/fr.ts b/packages/semi-ui/locale/source/fr.ts
@@ -101,6 +101,9 @@ const local: Locale = {
  Table: {
  emptyText: 'Aucun Résultat',
  pageText: 'Montrant ${currentStart} to ${currentEnd} of ${total}',
+ descend: 'Cliquez pour descendre',
+ ascend: 'Cliquez pour monter',
+ cancelSort: 'Annuler le tri',
  },
  Select: {
  emptyText: 'Aucun Résultat',

diff --git a/packages/semi-ui/locale/source/id_ID.ts b/packages/semi-ui/locale/source/id_ID.ts
@@ -101,6 +101,9 @@ const local: Locale = {
  Table: {
  emptyText: 'Tidak ada Hasil',
  pageText: 'Tampilkan halaman ${currentStart} sampai ${currentEnd} dari ${total}',
+ descend: 'Klik untuk menurun',
+ ascend: 'Klik untuk menaik',
+ cancelSort: 'Batalkan penyortiran',
  },
  Select: {
  emptyText: 'Tidak ada Hasil',

diff --git a/packages/semi-ui/locale/source/it.ts b/packages/semi-ui/locale/source/it.ts
@@ -101,6 +101,9 @@ const local: Locale = {
  Table: {
  emptyText: 'Nessun risultato',
  pageText: 'Mostra ${currentStart} a ${currentEnd} di ${total}',
+ descend: 'Clicca per discendere',
+ ascend: 'Clicca per ascendere',
+ cancelSort: 'Annulla ordinamento',
  },
  Select: {
  emptyText: 'Nessun risultato',

diff --git a/packages/semi-ui/locale/source/ja_JP.ts b/packages/semi-ui/locale/source/ja_JP.ts
@@ -102,6 +102,9 @@ const local: Locale = {
  Table: {
  emptyText: 'データがありません',
  pageText: '第 ${currentStart} 条から第 ${currentEnd} 条まで表示します。計 ${total} 条',
+ descend: 'クリックして降順',
+ ascend: 'クリックして昇順',
+ cancelSort: 'ソートのキャンセル',
  },
  Select: {
  emptyText: 'データがありません',

diff --git a/packages/semi-ui/locale/source/ko_KR.ts b/packages/semi-ui/locale/source/ko_KR.ts
@@ -102,6 +102,9 @@ const local: Locale = {
  Table: {
  emptyText: '결과 없음',
  pageText: '${total} 중 ${currentStart}-${currentEnd}',
+ descend: '내림차순을 보려면 클릭하세요',
+ ascend: '오름차순을 보려면 클릭하세요',
+ cancelSort: '정렬 취소',
  },
  Select: {
  emptyText: '결과 없음',

diff --git a/packages/semi-ui/locale/source/ms_MY.ts b/packages/semi-ui/locale/source/ms_MY.ts
@@ -101,6 +101,9 @@ const local: Locale = {
  Table: {
  emptyText: 'Tiada kandungan',
  pageText: 'Papar halaman ${currentStart} hingga ${currentEnd} daripada ${total}',
+ descend: 'Klik untuk menurun',
+ ascend: 'Klik untuk menaik',
+ cancelSort: 'Batal mengurutkan',
  },
  Select: {
  emptyText: 'Tiada kandungan',

diff --git a/packages/semi-ui/locale/source/nl_NL.ts b/packages/semi-ui/locale/source/nl_NL.ts
@@ -108,6 +108,9 @@ const local: Locale = {
  Table: {
  emptyText: 'Geen resultaten gevonden',
  pageText: '${currentStart} tot ${currentEnd} van ${total} wordt weergegeven',
+ descend: 'Klik om af te dalen',
+ ascend: 'Klik om op te stijgen',
+ cancelSort: 'Sorteren annuleren',
  },
  Select: {
  emptyText: 'Geen resultaten gevonden',

diff --git a/packages/semi-ui/locale/source/pl_PL.ts b/packages/semi-ui/locale/source/pl_PL.ts
@@ -109,6 +109,9 @@ const local: Locale = {
  Table: {
  emptyText: 'Nie znaleziono żadnych wyników',
  pageText: 'Wyświetlanie od ${currentStart} do ${currentEnd} z ${total}',
+ descend: 'Kliknij, aby sortować malejąco',
+ ascend: 'Kliknij, aby sortować rosnąco',
+ cancelSort: 'Anuluj sortowanie',
  },
  Select: {
  emptyText: 'Nie znaleziono żadnych wyników',

diff --git a/packages/semi-ui/locale/source/pt_BR.ts b/packages/semi-ui/locale/source/pt_BR.ts
@@ -109,6 +109,9 @@ const local: Locale = {
  Table: {
  emptyText: 'Não há dados',
  pageText: 'Mostrando ${currentStart} - ${currentEnd} ，de ${total}',
+ descend: 'Clique para descrescer',
+ ascend: 'Clique para crescer',
+ cancelSort: 'Cancelar classificação',
  },
  Select: {
  emptyText: 'Não há dados',

diff --git a/packages/semi-ui/locale/source/ro.ts b/packages/semi-ui/locale/source/ro.ts
@@ -101,6 +101,9 @@ const local: Locale = {
  Table: {
  emptyText: 'Nici un rezultat',
  pageText: 'Arată ${currentStart} la ${currentEnd} de ${total}',
+ descend: 'Faceți clic pentru a coborî',
+ ascend: 'Faceți clic pentru a urca',
+ cancelSort: 'Anulați sortarea',
  },
  Select: {
  emptyText: 'Nici un rezultat',

diff --git a/packages/semi-ui/locale/source/ru_RU.ts b/packages/semi-ui/locale/source/ru_RU.ts
@@ -104,6 +104,9 @@ const local: Locale = {
  Table: {
  emptyText: 'Нет результата',
  pageText: 'Отображение ${currentStart} до ${currentEnd} из ${total}',
+ descend: 'Щелкните, чтобы упорядочить по убыванию',
+ ascend: 'Щелкните, чтобы упорядочить по возрастанию',
+ cancelSort: 'Отменить сортировку',
  },
  Select: {
  emptyText: 'Нет результата',

diff --git a/packages/semi-ui/locale/source/sv_SE.ts b/packages/semi-ui/locale/source/sv_SE.ts
@@ -106,6 +106,9 @@ const local: Locale = {
  Table: {
  emptyText: 'Inga resultat hittades',
  pageText: 'Visar ${currentStart} till ${currentEnd} av ${total}',
+ descend: 'Klicka för att sortera fallande',
+ ascend: 'Klicka för att sortera stigande',
+ cancelSort: 'Avbryt sortering',
  },
  Select: {
  emptyText: 'Inga resultat hittades',

diff --git a/packages/semi-ui/locale/source/th_TH.ts b/packages/semi-ui/locale/source/th_TH.ts
@@ -105,6 +105,9 @@ const local: Locale = {
  Table: {
  emptyText: 'ไม่มีข้อมูล',
  pageText: 'แสดงรายการ ${currentStart} - ${currentEnd} จาก ${total}',
+ descend: 'คลิกเพื่อเรียงจากมากไปหาน้อย',
+ ascend: 'คลิกเพื่อเรียงจากน้อยไปหามาก',
+ cancelSort: 'ยกเลิกการเรียงลำดับ',
  },
  Select: {
  emptyText: 'ไม่มีข้อมูล',

diff --git a/packages/semi-ui/locale/source/tr_TR.ts b/packages/semi-ui/locale/source/tr_TR.ts
@@ -107,7 +107,11 @@ const local: Locale = {
  {
  emptyText: 'Henüz veri yok',
  pageText:
- '${currentStart} öğesini görüntüle - ${currentEnd} öğe, toplam ${total} öğe '
+ '${currentStart} öğesini görüntüle - ${currentEnd} öğe, toplam ${total} öğe ',
+ descend: 'Azalan sıralama için tıklayın',
+ ascend: 'Artan sıralama için tıklayın',
+ cancelSort: 'Sıralamayı iptal et',
+
  },
  Select: { emptyText: 'Henüz veri yok', createText: 'Oluştur' },
  Cascader: { emptyText: 'Henüz veri yok' },

diff --git a/packages/semi-ui/locale/source/vi_VN.ts b/packages/semi-ui/locale/source/vi_VN.ts
@@ -104,6 +104,9 @@ const local: Locale = {
  Table: {
  emptyText: 'Không kết quả',
  pageText: 'Hiển thị ${currentStart} đến ${currentEnd} trong tổng số ${total}',
+ descend: 'Nhấp để sắp xếp giảm dần',
+ ascend: 'Nhấp để sắp xếp tăng dần',
+ cancelSort: 'Hủy sắp xếp',
  },
  Select: {
  emptyText: 'Không kết quả',

diff --git a/packages/semi-ui/locale/source/zh_CN.ts b/packages/semi-ui/locale/source/zh_CN.ts
@@ -102,6 +102,9 @@ const local: Locale = {
  Table: {
  emptyText: '暂无数据',
  pageText: '显示第 ${currentStart} 条-第 ${currentEnd} 条，共 ${total} 条',
+ descend: '点击降序',
+ ascend: '点击升序',
+ cancelSort: '取消排序',
  },
  Select: {
  emptyText: '暂无数据',

diff --git a/packages/semi-ui/locale/source/zh_TW.ts b/packages/semi-ui/locale/source/zh_TW.ts
@@ -102,6 +102,9 @@ const local: Locale = {
  Table: {
  emptyText: '暫無數據',
  pageText: '顯示第 ${currentStart} 條-第 ${currentEnd} 條，共 ${total} 條',
+ descend: '點擊降序',
+ ascend: '點擊升序',
+ cancelSort: '取消排序',
  },
  Select: {
  emptyText: '暫無數據',

diff --git a/packages/semi-ui/table/ColumnShape.ts b/packages/semi-ui/table/ColumnShape.ts
@@ -30,4 +30,5 @@ export default {
  title: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
  useFullRender: PropTypes.bool,
  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ showSortTip: PropTypes.bool,
 };