Table ant d expand able row icon - row

Question

Here is the sand box link:
Ant d expandable icon
Is this possible to set width, height of expandable icon column (+ sign) or is it possible to render custom icon? Basically I want to control the spacing between expandable column and "Name" column.

Answer 1

You can now add
expandIcon={record => <i>expand</i>}
below the expandedRowRender line in the props. So it will look like :
<Table
columns={columns}
expandedRowRender={record => <p style={{ margin: 0 }}>{record.description}</p>}
expandIcon={record => <i>expand</i>}
dataSource={data}
/>
P.S. This only customizes the expand icon as you have asked, you'll have to write some more lines of code to make the new icon clickable and pass the record to show data in the expanded area.
Please give it a try and let me know if you need help with the onClick() part of it!

Answer 2

I know it's too late, but it might help some new comer.
<Table
size="small"
dataSource={getDataSource()}
locale={{ emptyText: "No Data found" }}
expandedRowRender={expandedRowRender}
expandIcon={record => showExpandIcon(record)}
columns={getColumn()}
/>
Now inside your showExpandIcon custom function you can return whatever custom Icon you want.
showExpandIcon(record){
const { expanded, onExpand } = record;
if(expanded){
return <CustomIcon onClick={e=>{onExpand(record, e)}}/>
}
else{
return <SomeOtherCustomIcon onClick={e=>{onExpand(record, e)}}
}
onExpand is an event, which you need to pass on onClick of your custom Icon to expand the row.

Answer 3

try adding
expandIcon={record => <i>expand</i>}
below the expandedRowRender line in the props. So it will look like :
// like this we can add inside table props
<Table
...props
**expandedRowRender={record => <p style={{ margin: 0 }}>}**
/>