question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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:closed
  • Created 5 years ago
  • Reactions:14
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

10reactions
hengkxcommented, Aug 31, 2018

I hope so too

expandableRowIcon={<Icon type="right" />}
collapsedRowIcon={<Icon type="down" />}
2reactions
nichitapaseciniccommented, Mar 9, 2021

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found