Expand all header

What problem does this feature solve?

It feels natural to have an expand all button alongside with onExpandAll property, the same way it’s done for selection column. It can be achieved using existing api, but UI would be much cleaner with header button.

And perhaps it makes sense to group expandable options too. (see proposal api).

p.s. Thanks for the amazing product!

What does the proposed API look like?

<Table
        ...
        rowExpansion={{
          expandedRowKeys: <...>,
          expandedRowRender: <...>,
         ...


          onExpandAll: <..>,
        }}
/>

[MihaiWill]

@afc163 any update on the expandAll prop? <Table expandAll={true | false} />

[rhysdiab]

I put together a temporary solution using expandedRowKeys. When expandAllRows is set to true, the expandedRowKeys property is set, and contains every row key.

import React, { useState } from 'react';
import { Table } from 'antd';

function Table({ columns, dataSource }) {
 [expandAllRows, setExpandAllRows] = useState(true);

 const getExpandedRowKeys = dataSource => {
  const keyArray = dataSource.map(object => {
   if (object.children && object.children.length !== 0) {
    return [object.key, getExpandedRowKeys(object.children)];
   }

   return object.key;
  });
  return keyArray.flat(10);
 };

 const expandedRowKeys = getExpandedRowKeys(dataSource);

 const expandable = {
  ...(expandAllRows && { expandedRowKeys }),
 };

 return <Table columns={columns} dataSource={dataSource} expandable={expandable} />;
}