Antd: Is it possible to change the row expand icon

Question

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!

Answer 1

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!

Answer 2

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;
    }

Answer 3

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)} />
        )
    }}
  />