diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap index 3a1bbb4160a4..6c5372aece1d 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap @@ -26954,7 +26954,7 @@ exports[`ConfigProvider components Table configProvider 1`] = ` > @@ -27260,7 +27260,7 @@ exports[`ConfigProvider components Table configProvider componentDisabled 1`] = > @@ -27568,7 +27568,7 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`] > @@ -27874,7 +27874,7 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`] > @@ -28180,7 +28180,7 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc > @@ -28486,7 +28486,7 @@ exports[`ConfigProvider components Table normal 1`] = ` > @@ -28792,7 +28792,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = ` > diff --git a/components/table/__tests__/Table.sorter.test.tsx b/components/table/__tests__/Table.sorter.test.tsx index 2509419833aa..6238c4f38ec4 100644 --- a/components/table/__tests__/Table.sorter.test.tsx +++ b/components/table/__tests__/Table.sorter.test.tsx @@ -105,7 +105,9 @@ describe('Table.sorter', () => { fireEvent.click(container.querySelector('.ant-table-column-sorters')!); expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null); - expect(getNameColumn()?.getAttribute('aria-label')).toEqual('Name sortable'); + expect(getNameColumn()?.getAttribute('aria-label')).toEqual( + "this column's title is Name,this column is sortable", + ); }); it('sort records', () => { diff --git a/components/table/__tests__/Table.test.tsx b/components/table/__tests__/Table.test.tsx index c1e5b3964b11..8caff8c6d534 100644 --- a/components/table/__tests__/Table.test.tsx +++ b/components/table/__tests__/Table.test.tsx @@ -287,6 +287,53 @@ describe('Table', () => { expect(warnSpy).not.toHaveBeenCalled(); }); + // https://github.com/ant-design/ant-design/issues/38371 + it('should render title', () => { + const columns = [ + { + title: ( +
+ name + Jason +
+ ), + key: 'name', + sorter: true, + }, + { + title: ( +
+ +
+ ), + key: 'name', + sorter: true, + }, + { + title: () => ( +
+ age + 20 +
+ ), + key: 'name', + sorter: true, + }, + { + title: () => 'color', + key: 'name', + sorter: true, + }, + { + title: 'sex', + key: 'name', + sorter: true, + }, + ]; + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + it('title should support ReactNode', () => { const { container } = render(
diff --git a/components/table/__tests__/__snapshots__/Table.test.tsx.snap b/components/table/__tests__/__snapshots__/Table.test.tsx.snap index 72081b366857..74920ff02bf4 100644 --- a/components/table/__tests__/__snapshots__/Table.test.tsx.snap +++ b/components/table/__tests__/__snapshots__/Table.test.tsx.snap @@ -205,6 +205,426 @@ exports[`Table rtl render component should be rendered correctly in RTL directio `; +exports[`Table should render title 1`] = ` +
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + +
+
+ +
+ + name + + + Jason + +
+ + + + + + + + + + + +
+ 		+
+ +
+ +
+ + + + + + + + + + + +
+ 		+
+ +
+ + age + + + 20 + +
+ + + + + + + + + + + +
+ 		+
+ + color + + + + + + + + + + + +
+ 		+
+ + sex + + + + + + + + + + + +
+
+
+
+ + + + + + + + + +
+
+ No data +
+
+
+
+
+
+
+
+
+
+`; + exports[`Table title should support ReactNode 1`] = `
@@ -1549,7 +1549,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c @@ -3314,7 +3314,7 @@ Array [ Name @@ -3625,7 +3625,7 @@ Array [ @@ -7589,7 +7589,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md extend context correc @@ -8410,7 +8410,7 @@ exports[`renders ./components/table/demo/filter-search.md extend context correct @@ -12254,7 +12254,7 @@ exports[`renders ./components/table/demo/grouping-columns.md extend context corr
@@ -14707,7 +14707,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre Name @@ -14792,7 +14792,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre @@ -14877,7 +14877,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md extend context corre @@ -20374,7 +20374,7 @@ Array [ >
diff --git a/components/table/__tests__/__snapshots__/demo.test.ts.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap index 7a49c23c5cfc..f01e1926a5f0 100644 --- a/components/table/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo.test.ts.snap @@ -35,7 +35,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = ` >
@@ -1141,7 +1141,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] = @@ -2784,7 +2784,7 @@ Array [ Name @@ -2883,7 +2883,7 @@ Array [ @@ -5861,7 +5861,7 @@ exports[`renders ./components/table/demo/filter-in-tree.md correctly 1`] = ` @@ -6208,7 +6208,7 @@ exports[`renders ./components/table/demo/filter-search.md correctly 1`] = ` @@ -9382,7 +9382,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
@@ -11074,7 +11074,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = ` Name @@ -11135,7 +11135,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = ` @@ -11196,7 +11196,7 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = ` @@ -15392,7 +15392,7 @@ Array [ >
diff --git a/components/table/hooks/useSorter.tsx b/components/table/hooks/useSorter.tsx index 48f9807f14bb..125d7930b560 100644 --- a/components/table/hooks/useSorter.tsx +++ b/components/table/hooks/useSorter.tsx @@ -17,7 +17,7 @@ import type { TableLocale, TransformColumns, } from '../interface'; -import { getColumnKey, getColumnPos, renderColumnTitle } from '../util'; +import { getColumnKey, getColumnPos, renderColumnTitle, safeColumnTitle } from '../util'; const ASCEND = 'ascend'; const DESCEND = 'descend'; @@ -205,16 +205,21 @@ function injectSorter( } }; + const renderTitle = safeColumnTitle(column.title, {}); + const displayTitle = renderTitle?.toString(); + // Inform the screen-reader so it can tell the visually impaired user which column is sorted if (sorterOrder) { cell['aria-sort'] = sorterOrder === 'ascend' ? 'ascending' : 'descending'; } else { - cell['aria-label'] = `${renderColumnTitle(column.title, {})} sortable`; + cell['aria-label'] = `${ + displayTitle ? `this column's title is ${displayTitle},` : '' + }this column is sortable`; } cell.className = classNames(cell.className, `${prefixCls}-column-has-sorters`); cell.tabIndex = 0; if (column.ellipsis) { - cell.title = (renderColumnTitle(column.title, {}) ?? '').toString(); + cell.title = (renderTitle ?? '').toString(); } return cell; }, diff --git a/components/table/util.ts b/components/table/util.ts index 4a355c1ef745..9870cf2cc214 100644 --- a/components/table/util.ts +++ b/components/table/util.ts @@ -26,3 +26,20 @@ export function renderColumnTitle( return title; } + +/** + * Safe get column title + * + * Should filter [object Object] + * + * @param title + * @returns + */ +export function safeColumnTitle( + title: ColumnTitle, + props: ColumnTitleProps, +) { + const res = renderColumnTitle(title, props); + if (Object.prototype.toString.call(res) === '[object Object]') return ''; + return res; +}