diff --git a/examples/expandIcon.html b/examples/expandIcon.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/examples/expandIcon.js b/examples/expandIcon.js
new file mode 100644
index 000000000..ac474c133
--- /dev/null
+++ b/examples/expandIcon.js
@@ -0,0 +1,63 @@
+/* eslint-disable no-console,react/prop-types,react/no-danger */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Table from 'rc-table';
+import 'rc-table/assets/index.less';
+
+const data = [
+ { key: 0, a: '123' },
+ { key: 1, a: 'cdd', b: 'edd' },
+ { key: 2, a: '1333', c: 'eee', d: 2 },
+];
+
+const columns = [
+ { title: 'title 1', dataIndex: 'a', key: 'a', width: 100 },
+ { title: 'title 2', dataIndex: 'b', key: 'b', width: 100 },
+ { title: 'title 3', dataIndex: 'c', key: 'c', width: 200 },
+];
+
+function CustomExpandIcon(props) {
+ let text;
+ if (props.expanded) {
+ text = '⇧ collapse';
+ } else {
+ text = '⇩ expand';
+ }
+ return (
+ props.onExpand(props.record, e)}
+ dangerouslySetInnerHTML={{ __html: text }}
+ style={{ color: 'blue', cursor: 'pointer' }}
+ />
+ );
+}
+
+class Demo extends React.Component {
+ onExpand = (expanded, record) => {
+ console.log('onExpand', expanded, record);
+ };
+
+ render() {
+ return (
+
+
extra: {record.a}
}
+ onExpand={this.onExpand}
+ expandIcon={CustomExpandIcon}
+ expandIconAsCell
+ data={data}
+ />
+
+ );
+ }
+}
+
+ReactDOM.render(
+
+
expandIcon
+
+ ,
+ document.getElementById('__react-content'),
+);
diff --git a/src/ExpandableRow.js b/src/ExpandableRow.js
index 6fb97e6a4..0b44bc63d 100644
--- a/src/ExpandableRow.js
+++ b/src/ExpandableRow.js
@@ -17,6 +17,7 @@ class ExpandableRow extends React.Component {
expandIconColumnIndex: PropTypes.number,
childrenColumnName: PropTypes.string,
expandedRowRender: PropTypes.func,
+ expandIcon: PropTypes.func,
onExpandedChange: PropTypes.func.isRequired,
onRowClick: PropTypes.func,
children: PropTypes.func.isRequired,
@@ -58,7 +59,18 @@ class ExpandableRow extends React.Component {
};
renderExpandIcon = () => {
- const { prefixCls, expanded, record, needIndentSpaced } = this.props;
+ const { prefixCls, expanded, record, needIndentSpaced, expandIcon } = this.props;
+
+ if (expandIcon) {
+ return expandIcon({
+ prefixCls,
+ expanded,
+ record,
+ needIndentSpaced,
+ expandable: this.expandable,
+ onExpand: this.handleExpandChange,
+ });
+ }
return (
{
expect(wrapper).toMatchSnapshot();
});
+ /* eslint-disable react/prop-types */
+ it('renders a custom icon', () => {
+ function CustomExpandIcon(props) {
+ return (
+ props.onExpand(props.record, e)}>
+
+
+ );
+ }
+ const wrapper = render(
+ createTable({
+ expandedRowRender,
+ expandIcon: ({ onExpand, record }) => (
+
+ ),
+ }),
+ );
+ expect(wrapper).toMatchSnapshot();
+ });
+ /* eslint-enable react/prop-types */
+
it('renders nested data correctly', () => {
const localData = [
{
diff --git a/tests/__snapshots__/Table.expandRow.spec.js.snap b/tests/__snapshots__/Table.expandRow.spec.js.snap
index afcaac62c..8e7b771e0 100644
--- a/tests/__snapshots__/Table.expandRow.spec.js.snap
+++ b/tests/__snapshots__/Table.expandRow.spec.js.snap
@@ -527,6 +527,101 @@ exports[`Table.expand expand rows by defaultExpandedRowKeys 1`] = `
`;
+exports[`Table.expand renders a custom icon 1`] = `
+
+`;
+
exports[`Table.expand renders expand icon as cell 1`] = `