Allow for Customization of the Table Expandable Row Icon
See original GitHub issue- I have searched the issues of this repository and believe that this is not a duplicate.
What problem does this feature solve?
Allows one to use custom icons for displaying a table row that is expandable.
What does the proposed API look like?
import { Table, Icon } from 'antd';
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' },
{ title: 'Action', dataIndex: '', key: 'x', render: () => <a href="javascript:;">Delete</a> },
];
const data = [
{ key: 1, name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' },
{ key: 2, name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' },
{ key: 3, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.' },
];
ReactDOM.render(
<Table
columns={columns}
expandableRowIcon={<Icon type="right" />}
expandedRowRender={record => <p style={{ margin: 0 }}>{record.description}</p>}
dataSource={data}
/>,
mountNode);
Issue Analytics
- State:
- Created 5 years ago
- Reactions:14
- Comments:6 (1 by maintainers)
Top Results From Across the Web
Antd: Is it possible to change the row expand icon
This will allow you to use any combination of icons from antd in place of the expand/minimize buttons on the antd table.
Read more >Allow for Customization of the Table Expandable Row Icon
Allows one to use custom icons for displaying a table row that is expandable. What does the proposed API look like? import {...
Read more >Table - Ant Design
A table displays rows of data. ... filterSearch is used to enable search of filter items, and you can set a ... expandIcon,...
Read more >Table | Quasar Framework
Total customization of rows and cells through scoped slots; Ability to add additional row(s) at top or bottom of data rows; Column picker...
Read more >Examples: ExpandIcon Props | BaseTable
let frozen. if (columnIndex < 2) frozen = Column. ... for (let i = 0; i < 3; i++) {. data.push({ ...data[0], ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I hope so too
is there any animation property to customize between expand and shrink row icon? in default example the animation is present, but when is being used custom icons the transition disappears