fix: #13312

components/table/Table.tsx

@@ -785,6 +785,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
       const key = this.getColumnKey(column, i) as string;
       let filterDropdown;
       let sortButton;
+      let sortTitle = this.getColumnTitle(column.title, {}) || locale.sortTitle;
       const isSortColumn = this.isSortColumn(column);
       if ((column.filters && column.filters.length > 0) || column.filterDropdown) {
         const colFilters = key in filters ? filters[key] : [];
@@ -830,7 +831,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
         title: [
           <div
             key="title"
-            title={sortButton ? locale.sortTitle : undefined}
+            title={sortButton ? sortTitle : undefined}
             className={sortButton ? `${prefixCls}-column-sorters` : undefined}
             onClick={() => this.toggleSortOrder(column)}
           >
@@ -855,6 +856,20 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     return title;
   }
 
+  getColumnTitle: any = (node: any, parentNode: any) => {
+    if(!node) {
+      return;
+    }
+    if (typeof node !== 'string') {
+      const props = node.props;
+      if (props && props.children) {
+        return this.getColumnTitle(props.children, props);
+      }
+    } else {
+      return parentNode.title ? parentNode.title : node;
+    }
+  }
+
   handleShowSizeChange = (current: number, pageSize: number) => {
     const { pagination } = this.state;
     pagination.onShowSizeChange!(current, pageSize);

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

@@ -453,4 +453,22 @@ describe('Table.filter', () => {
     wrapper.find('.ant-dropdown-trigger').first().simulate('click');
     expect(wrapper.find('.ant-input').instance().value).toBe('');
   });
+
+  it('renders title correctly', () => {
+    const title = (
+      <div title="title1">
+        <div title="title2">
+          <div title="title3">test</div>
+        </div>
+      </div>
+    );
+    const wrapper = mount(createTable({
+      columns: [{
+        ...column,
+        title,
+      }],
+    }));
+
+    expect(wrapper).toMatchSnapshot();
+  });
 });

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

@@ -10,7 +10,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
     >
       <div
         class="ant-table-column-sorters"
-        title="Sort"
+        title="Name"
       >
         Name
         <div

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -40,7 +40,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
                   >
                     <div
                       class="ant-table-column-sorters"
-                      title="Sort"
+                      title="Name"
                     >
                       Name
                       <div
@@ -7882,7 +7882,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                     >
                       <div
                         class="ant-table-column-sorters"
-                        title="Sort"
+                        title="Age"
                       >
                         Age
                         <div
@@ -9073,9 +9073,21 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                   >
                     <div
                       class="ant-table-column-sorters"
-                      title="Sort"
+                      title="title3"
                     >
-                      Name
+                      <div
+                        title="title1"
+                      >
+                        <div
+                          title="title2"
+                        >
+                          <div
+                            title="title3"
+                          >
+                            Name
+                          </div>
+                        </div>
+                      </div>
                       <div
                         class="ant-table-column-sorter"
                       >
@@ -9139,7 +9151,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                   >
                     <div
                       class="ant-table-column-sorters"
-                      title="Sort"
+                      title="Age"
                     >
                       Age
                       <div
@@ -9187,7 +9199,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                   >
                     <div
                       class="ant-table-column-sorters"
-                      title="Sort"
+                      title="Address"
                     >
                       Address
                       <div
@@ -10185,7 +10197,7 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
                     >
                       <div
                         class="ant-table-column-sorters"
-                        title="Sort"
+                        title="Name"
                       >
                         Name
                         <div
@@ -10251,7 +10263,7 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
                     >
                       <div
                         class="ant-table-column-sorters"
-                        title="Sort"
+                        title="Age"
                       >
                         Age
                         <div
@@ -10299,7 +10311,7 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
                     >
                       <div
                         class="ant-table-column-sorters"
-                        title="Sort"
+                        title="Address"
                       >
                         Address
                         <div

components/table/demo/head.md

@@ -3,6 +3,7 @@ order: 7
 title:
   en-US: Filter and sorter
   zh-CN: 筛选和排序
+  debug: true
 ---
 
 ## zh-CN
@@ -27,7 +28,13 @@ If a `sortOrder` or `defaultSortOrder` is specified with the value `ascend` or `
 import { Table } from 'antd';
 
 const columns = [{
-  title: 'Name',
+  title: (
+    <div title="title1">
+      <div title="title2">
+        <div title="title3">Name</div>
+      </div>
+    </div>
+  ),
   dataIndex: 'name',
   filters: [{
     text: 'Joe',