fix: Table column group with controlled sorter (#22450)

* update interface

* support group sorterOrder controlled

* add test case

* fix test case

components/table/__tests__/Table.sorter.test.js

@@ -722,4 +722,56 @@ describe('Table.sorter', () => {
         .hasClass('active'),
     ).toBeFalsy();
   });
+
+  it('controlled multiple group', () => {
+    const groupColumns = [
+      {
+        title: 'Math Score',
+        dataIndex: 'math1',
+        sortOrder: 'ascend',
+        sorter: { multiple: 1 },
+        children: [
+          {
+            title: 'math',
+            dataIndex: 'math',
+          },
+        ],
+      },
+      {
+        title: 'English Score',
+        dataIndex: 'english',
+        sortOrder: 'descend',
+        sorter: { multiple: 2 },
+      },
+    ];
+
+    const groupData = [
+      {
+        key: '1',
+        name: 'John Brown',
+        chinese: 98,
+        math: 60,
+        english: 70,
+      },
+    ];
+
+    const wrapper = mount(<Table columns={groupColumns} data={groupData} />);
+    wrapper.update();
+    expect(
+      wrapper
+        .find('.ant-table-column-sorter-full')
+        .first()
+        .find('.ant-table-column-sorter-up')
+        .first()
+        .hasClass('active'),
+    ).toBeTruthy();
+    expect(
+      wrapper
+        .find('.ant-table-column-sorter-full')
+        .last()
+        .find('.ant-table-column-sorter-down')
+        .first()
+        .hasClass('active'),
+    ).toBeTruthy();
+  });
 });

components/table/hooks/useSorter.tsx

@@ -12,6 +12,7 @@ import {
   CompareFn,
   ColumnTitleProps,
   SorterResult,
+  ColumnGroupType,
 } from '../interface';
 import { getColumnKey, getColumnPos, renderColumnTitle } from '../util';
 
@@ -56,20 +57,31 @@ function collectSortStates<RecordType>(
 ): SortState<RecordType>[] {
   let sortStates: SortState<RecordType>[] = [];
 
+  function pushState(column: ColumnsType<RecordType>[number], columnPos: string) {
+    sortStates.push({
+      column,
+      key: getColumnKey(column, columnPos),
+      multiplePriority: getMultiplePriority(column),
+      sortOrder: column.sortOrder!,
+    });
+  }
+
   (columns || []).forEach((column, index) => {
     const columnPos = getColumnPos(index, pos);
 
-    if ('children' in column) {
-      sortStates = [...sortStates, ...collectSortStates(column.children, init, columnPos)];
+    if ((column as ColumnGroupType<RecordType>).children) {
+      if ('sortOrder' in column) {
+        // Controlled
+        pushState(column, columnPos);
+      }
+      sortStates = [
+        ...sortStates,
+        ...collectSortStates((column as ColumnGroupType<RecordType>).children, init, columnPos),
+      ];
     } else if (column.sorter) {
       if ('sortOrder' in column) {
         // Controlled
-        sortStates.push({
-          column,
-          key: getColumnKey(column, columnPos),
-          multiplePriority: getMultiplePriority(column),
-          sortOrder: column.sortOrder!,
-        });
+        pushState(column, columnPos);
       } else if (init && column.defaultSortOrder) {
         // Default sorter
         sortStates.push({

components/table/interface.tsx

@@ -88,7 +88,7 @@ export interface ColumnType<RecordType> extends RcColumnType<RecordType> {
   onFilterDropdownVisibleChange?: (visible: boolean) => void;
 }
 
-export interface ColumnGroupType<RecordType> extends ColumnType<RecordType> {
+export interface ColumnGroupType<RecordType> extends Omit<ColumnType<RecordType>, 'dataIndex'> {
   children: ColumnsType<RecordType>;
 }