CODEWITHSUNDEEP
antd
ThePainnn
ThePainnn

Reputation: 431

Antd: Is it possible to change the row expand icon

The default is: [+] and [-]. Could not find a way to change it to other icon. For example down and right from https://ant.design/components/icon/.

My users are very very picky.

Thanks!

Upvotes: 6

Views: 28207

Answers (8)

user2442950
user2442950

Reputation: 61

<Table
                expandable={{
                    expandedRowRender: (record: FacebookInterface) => {
                        let myArray
                        if (record.ext)
                            myArray = record.ext.split('\n')
                        if (myArray?.length > 0)
                            return myArray.map((value, index) => <div>{index + 1}: {value}</div>)
                        else return null
                    },
                    expandIcon: (props) => {
//custom your icon when you want show
                        if (props.record.kenh === "comment") {
                            if (props.expanded) {
                                return <a style={{ color: 'black' }} onClick={e => {
                                    props.onExpand(props.record, e);
                                }}><MinusSquareOutlined /></a>
                            } else {
                                return <a style={{ color: 'black' }} onClick={e => {
                                    props.onExpand(props.record, e);
                                }}><PlusSquareOutlined /></a>
                            }
                        }

                    }
                }}
</Table>

Upvotes: 0

Ved
Ved

Reputation: 1028

For antd version 3.6.x (for v3.1.x)

You can customize the css class .ant-table-row-expand-icon

.ant-table-row-expand-icon{
  height: 25px;
  width: 25px;
  font-size: 30px;
}

Screenshot Screenshot

For antd version 4.x

You can use expandIcon property to resize or change the icon, increase the fontSize to increase size of the icon

<Table
    columns={columns}
    expandable={{
      expandedRowRender: (record) => (
        <p style={{ margin: 0 }}>{record.description}</p>
      ),
      rowExpandable: (record) => record.name !== 'Not Expandable',
      expandIcon: ({ expanded, onExpand, record }) =>
        expanded ? (
          <MinusOutlined
            style={{ fontSize: '20px' }}
            onClick={(e) => onExpand(record, e)}
          />
        ) : (
          <PlusOutlined
            style={{ fontSize: '20px' }}
            onClick={(e) => onExpand(record, e)}
          />
        ),
    }}
    dataSource={data}
  />

Screenshot Screenshot

Upvotes: 1

Kewal89
Kewal89

Reputation: 21

For antd (v4) - Collapse

Component :

expandIcon={(props) => this.customExpandIcon(props)}

Function:

customExpandIcon(props) {
    if (props.isActive) {
        return <a onClick={e => { props.onItemClick(props.panelKey)
        }}><Icon type="minus" /></a>
    } else {
        return <a onClick={e => { props.onItemClick(props.panelKey)
        }}><Icon type="plus" /></a>
    }
}

Upvotes: 2

Vigneshwaran Chandrasekaran
Vigneshwaran Chandrasekaran

Reputation: 3213

https://codesandbox.io/s/fervent-bird-nuzpr?file=/index.js:70-107

 <Table
    columns={columns}
    dataSource={data}
    expandable={{
      expandedRowRender: record => (
        <p style={{ margin: 0 }}>{record.description}</p>
      ),
      expandIcon: ({ expanded, onExpand, record }) =>
        expanded ? (
          <MinusCircleTwoTone onClick={e => onExpand(record, e)} />
        ) : (
          <PlusCircleTwoTone onClick={e => onExpand(record, e)} />
        )
    }}
  />

Upvotes: 3

codebee
codebee

Reputation: 57

Using Antd Table,

Within Table renderer:

 expandIcon={(props) => this.customExpandIcon(props)}

And implement customExpandIcons as:

customExpandIcon(props) {
        if (props.expanded) {
            return <Button title="Close the row" type="primary" htmltype="submit" icon="close" onClick={e => {
                props.onExpand(props.record, e);

            }}>Close</Button>
        } else {

                return <Button title="Click to open" htmltype="submit" icon="history" >Show
                    History</Button>

        }
    }

Upvotes: 0

Itunu Adekoya
Itunu Adekoya

Reputation: 86

to use expandIcon with Antd Collapse you'd want to do

  customExpandIcon=(props) =>{
    if (props.isActive) {
      return (
        <a
          style={{ color: "black" }}
          onClick={e => {
            props.onExpand(props.record, e);
          }}
        >
          <Icon type="minus" />
        </a>
      );
    } else {
      return (
        <a
          style={{ color: "black" }}
          onClick={e => {
            props.onExpand(props.record, e);
          }}
        >
          <Icon type="plus" />
        </a>
      );
    }
  }

then add the prop <Collapse expandIcon={(props) => this.customExpandIcon(props)}/>

Upvotes: 0

James Schmiechen
James Schmiechen

Reputation: 253

For those coming to this in the future, the correct way to do this is to use the antd table props.

The expandIcon prop of the antd table takes a function that returns a react node.

customExpandIcon(props) {
    if (props.expanded) {
        return <a style={{ color: 'black' }} onClick={e => {
            props.onExpand(props.record, e);
        }}><Icon type="minus" /></a>
    } else {
        return <a style={{ color: 'black' }} onClick={e => {
            props.onExpand(props.record, e);
        }}><Icon type="plus" /></a>
    }
}

Then inside of your table put:

<Table
    expandIcon={(props) => this.customExpandIcon(props)}
    ...
/>

This will allow you to use any combination of icons from antd in place of the expand/minimize buttons on the antd table.

Using Antd version 3.14.1

For further information, check out this example: Antd expandIcon example

Hope this helps!

Upvotes: 21

ThePainnn
ThePainnn

Reputation: 431

Found it:

  .ant-table-row-expand-icon-cell {

    position: relative;

    .ant-table-row-collapsed:after {
      content : "\E61D";
      font-family: "anticon" !important;
      font-style: normal;
      vertical-align: baseline;
      text-align: center;
      text-transform: none;
      text-rendering: auto;

      right: 16px;
      top: 0;
      display: inline-block;
      transform: scale(0.66666667) rotate(0deg);
      transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      zoom: 1;
    }

    .ant-table-row-expanded:after {
      content : "\E61D";
      font-family: "anticon" !important;
      font-style: normal;
      vertical-align: baseline;
      text-align: center;
      text-transform: none;
      text-rendering: auto;

      right: 16px;
      top: 0;
      display: inline-block;
      transform: rotate(180deg) scale(0.75);
      transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      zoom: 1;
    }

Upvotes: 6

Related Questions