diff --git a/.gitignore b/.gitignore
index e3c5beadd..9f11d8f43 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,4 +33,5 @@ es/
.storybook
.doc
!tests/__mocks__/rc-util/lib
-examples/debug.tsx
\ No newline at end of file
+examples/debug.tsx
+.history
diff --git a/examples/ellipsis-custom-tooltip.tsx b/examples/ellipsis-custom-tooltip.tsx
new file mode 100644
index 000000000..5241352d7
--- /dev/null
+++ b/examples/ellipsis-custom-tooltip.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import Tooltip from 'rc-tooltip';
+import Table from '../src';
+import '../assets/index.less';
+import 'rc-tooltip/assets/bootstrap.css';
+
+const createColumns = (length: number) => {
+ return Array.from({ length }, (_, i) => ({
+ title: 'description',
+ dataIndex: 'description',
+ key: `description ${i + 1}`,
+ ellipsis: {
+ showTitle: false,
+ },
+ ...(i === 0 ? { width: 50 } : null),
+ render(description: string) {
+ return (
+
+ {description}
+
+ );
+ },
+ }));
+};
+
+const columns = [
+ {
+ title: 'name',
+ dataIndex: 'name',
+ width: 100,
+ ellipsis: {
+ showTitle: false,
+ },
+ render: (name: string) => (
+
+ {name}
+
+ ),
+ },
+ ...createColumns(10),
+ {
+ title: 'Operations',
+ key: 'operations',
+ ellipsis: {
+ showTitle: false,
+ },
+ render() {
+ return (
+
+ Operations
+
+ );
+ },
+ },
+];
+
+const data = [
+ { name: 'jack', description: 'description description', key: '1' },
+ { name: 'jackjackjackjackjackjack', description: 'description description', key: '2' },
+ { name: 'jack ma', description: 'description description', key: '3' },
+ { name: 'jack nickson', description: 'description description', key: '4' },
+];
+
+const Demo = () => (
+
+
Table ellipsis custom tooltip
+
+
+);
+
+export default Demo;
diff --git a/package.json b/package.json
index c9dd0057c..5778e4045 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
"rc-animate": "^3.0.0",
"rc-dropdown": "~3.1.0",
"rc-menu": "^8.0.2",
+ "rc-tooltip": "^4.0.3",
"react": "^16.0.0",
"react-dnd": "^2.5.4",
"react-dnd-html5-backend": "^2.5.4",
diff --git a/src/Cell/index.tsx b/src/Cell/index.tsx
index 5d8a3e329..92dd4c4d9 100644
--- a/src/Cell/index.tsx
+++ b/src/Cell/index.tsx
@@ -9,6 +9,7 @@ import {
CellType,
DefaultRecordType,
AlignType,
+ CellEllipsisType,
} from '../interface';
import { getPathValue } from '../utils/valueUtil';
@@ -38,7 +39,7 @@ export interface CellProps {
children?: React.ReactNode;
colSpan?: number;
rowSpan?: number;
- ellipsis?: boolean;
+ ellipsis?: CellEllipsisType;
align?: AlignType;
shouldCellUpdate?: (record: RecordType) => boolean;
@@ -55,6 +56,8 @@ export interface CellProps {
/** @private Used for `expandable` with nest tree */
appendNode?: React.ReactNode;
additionalProps?: React.HTMLAttributes;
+
+ rowType?: 'header' | 'body' | 'footer';
}
function Cell(
@@ -79,6 +82,7 @@ function Cell(
additionalProps = {},
ellipsis,
align,
+ rowType,
}: CellProps,
ref: React.Ref,
): React.ReactElement {
@@ -157,7 +161,8 @@ function Cell(
// ====================== Render ======================
let title: string;
- if (ellipsis) {
+ const ellipsisConfig: CellEllipsisType = ellipsis === true ? { showTitle: true } : ellipsis;
+ if (ellipsisConfig && (ellipsisConfig.showTitle || rowType === 'header')) {
if (typeof childNode === 'string' || typeof childNode === 'number') {
title = childNode.toString();
} else if (React.isValidElement(childNode) && typeof childNode.props.children === 'string') {
diff --git a/src/Header/HeaderRow.tsx b/src/Header/HeaderRow.tsx
index 74c3c39ab..18de958dd 100644
--- a/src/Header/HeaderRow.tsx
+++ b/src/Header/HeaderRow.tsx
@@ -66,6 +66,7 @@ function HeaderRow({
key={columnsKey[cellIndex]}
{...fixedInfo}
additionalProps={additionalProps}
+ rowType="header"
/>
);
})}
diff --git a/src/interface.ts b/src/interface.ts
index 3f4ac79ca..b8a56b2ad 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -55,13 +55,15 @@ export interface RenderedCell {
export type DataIndex = string | number | (string | number)[];
+export type CellEllipsisType = { showTitle?: boolean } | boolean;
+
interface ColumnSharedType {
title?: React.ReactNode;
key?: Key;
className?: string;
fixed?: FixedType;
onHeaderCell?: GetComponentProps[number]>;
- ellipsis?: boolean;
+ ellipsis?: CellEllipsisType;
align?: AlignType;
}
diff --git a/tests/Table.spec.js b/tests/Table.spec.js
index 9f4b3e9c0..d9efbbbe7 100644
--- a/tests/Table.spec.js
+++ b/tests/Table.spec.js
@@ -267,6 +267,41 @@ describe('Table.Basic', () => {
});
});
+ it('renders ellipsis by showTitle option', () => {
+ const wrapper = mount(
+ createTable({
+ columns: [
+ { title: 'title', ellipsis: { showTitle: true } },
+ { title: 'node title', ellipsis: { showTitle: true }, render: () => 233
},
+ ],
+ }),
+ );
+
+ wrapper.find('td').forEach(td => {
+ expect(td.hasClass('rc-table-cell-ellipsis')).toBeTruthy();
+ });
+ });
+
+ it('not renders ellipsis origin html title', () => {
+ const columns = [
+ { title: 'title', ellipsis: { showTitle: false } },
+ { title: 'node title', ellipsis: { showTitle: false }, render: () => 233
},
+ ];
+ const wrapper = mount(
+ createTable({
+ columns,
+ }),
+ );
+
+ wrapper.find('.rc-table-thead th').forEach(td => {
+ expect(td.getDOMNode().attributes.getNamedItem('title')).toBeTruthy();
+ });
+
+ wrapper.find('.rc-table-tbody td').forEach(td => {
+ expect(td.getDOMNode().attributes.getNamedItem('title')).toBeFalsy();
+ });
+ });
+
it('renders column correctly', () => {
const columns = [
{