Table Expand Column Title Customization (#854)

* feat: Table Expand Column Title Customization(#853)

* style: rename expandedColumnTitle to columnTitle

* test: add render expend column title case

* style: recover the code style

Author: losgif

docs/examples/expandedRowRender.tsx

@@ -33,6 +33,7 @@ for (let i = 0; i < 10; i += 1) {
 const Demo = () => {
   const [data, setData] = React.useState(tableData);
   const [expandedRowKeys, setExpandedRowKeys] = React.useState([]);
+  const [columnTitle, columnTitleProps] = useCheckbox(false);
   const [expandRowByClick, expandRowByClickProps] = useCheckbox(false);
   const [fixColumns, fixColumnsProps] = useCheckbox(false);
   const [scrollX, scrollXProps] = useCheckbox(false);
@@ -104,6 +105,10 @@ const Demo = () => {
   return (
     <div>
       {toggleButton}
+      <label>
+        <input {...columnTitleProps} />
+        Expand Column Title
+      </label>
       <label>
         <input {...expandRowByClickProps} />
         Expand Row by Click
@@ -131,6 +136,7 @@ const Demo = () => {
       <Table<RecordType>
         columns={columns}
         expandable={{
+          columnTitle: columnTitle ? <span>title</span> : '',
           expandRowByClick,
           expandedRowRender: (record, index, indent, expanded) =>
             expanded ? <p>extra: {record.a}</p> : null,

src/Table.tsx

@@ -260,6 +260,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
     defaultExpandedRowKeys,
     defaultExpandAllRows,
     expandedRowRender,
+    columnTitle,
     onExpand,
     onExpandedRowsChange,
     expandRowByClick,
@@ -356,6 +357,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
       ...props,
       ...expandableConfig,
       expandable: !!expandedRowRender,
+      columnTitle: columnTitle,
       expandedKeys: mergedExpandedKeys,
       getRowKey,
       // https://github.com/ant-design/ant-design/issues/23894

src/hooks/useColumns.tsx

@@ -113,6 +113,7 @@ function useColumns<RecordType>(
     children,
     expandable,
     expandedKeys,
+    columnTitle,
     getRowKey,
     onTriggerExpand,
     expandIcon,
@@ -128,6 +129,7 @@ function useColumns<RecordType>(
     children?: React.ReactNode;
     expandable: boolean;
     expandedKeys: Set<Key>;
+    columnTitle?: React.ReactNode;
     getRowKey: GetRowKey<RecordType>;
     onTriggerExpand: TriggerEventHandler<RecordType>;
     expandIcon?: RenderExpandIcon<RecordType>;
@@ -196,7 +198,7 @@ function useColumns<RecordType>(
           className: `${prefixCls}-expand-icon-col`,
           columnType: 'EXPAND_COLUMN',
         },
-        title: '',
+        title: columnTitle,
         fixed: fixedColumn,
         className: `${prefixCls}-row-expand-icon-cell`,
         width: columnWidth,

src/interface.ts

@@ -200,6 +200,7 @@ export interface ExpandableConfig<RecordType> {
   expandedRowKeys?: readonly Key[];
   defaultExpandedRowKeys?: readonly Key[];
   expandedRowRender?: ExpandedRowRender<RecordType>;
+  columnTitle?: React.ReactNode;
   expandRowByClick?: boolean;
   expandIcon?: RenderExpandIcon<RecordType>;
   onExpand?: (expanded: boolean, record: RecordType) => void;

tests/ExpandRow.spec.js

@@ -414,6 +414,22 @@ describe('Table.Expand', () => {
     expect(wrapper.find('tbody tr').at(1).hasClass('expand-row-test-class-name')).toBeTruthy();
   });
 
+  it('renders expend column title', () => {
+    const wrapper = mount(
+      createTable({
+        expandable: {
+          expandedRowRender,
+          columnTitle: 'column title',
+        },
+      }),
+    );
+
+    expect(
+      wrapper.find('thead tr th').first().hasClass('rc-table-row-expand-icon-cell'),
+    ).toBeTruthy();
+    expect(wrapper.find('thead tr th').first().html()).toContain('column title');
+  });
+
   it('fires expand change event', () => {
     const onExpand = jest.fn();
     const wrapper = mount(