CODEWITHSUNDEEP
reactjsantd
Rich
Rich

Reputation: 185

Move expandIcon icon to right and remove empty space from expanded table Ant Design and React.js

I need your help to solve this problem.

I am using the Ant Design table and I am stuck here. I want the expand row icon should be at the right(Next to delete in the given sandbox code) of table current it is on left and when we expand a row the expanded contents leave a small space in left, I want to remove it. i.e. it should not have any extra space in left. Please help me out, guys.

Sandbox code: https://codesandbox.io/s/ancient-mountain-ft8m1?file=/index.js

Upvotes: 4

Views: 9221

Answers (3)

Cem Şanal
Cem Şanal

Reputation: 11

No need to struggle with css. You can use expandIconColumnIndex in expandable. If you add float: right to the icon css, it will be aligned to right with 0 space. Here is my working example:

        <Table
          size="middle"
          bordered={false}
          columns={columns}
          expandable={{
            expandedRowRender: (record: FormedRecordDataType) =>
              expandedRowRender(record),
            defaultExpandedRowKeys: ["0"],
            expandIcon: ({ expanded, onExpand, record }) =>
              expanded ? (
                <DownOutlined style={{float: "right"}}
                  onClick={(e) => onExpand(record, e)}
                />
              ) : (
                <DownOutlined style={{float: "right"}}
                  onClick={(e) => onExpand(record, e)}
                />
              ),
            expandIconColumnIndex: 3,
          }}
          dataSource={data}
          pagination={false}
        />

Upvotes: 0

Matt Croak
Matt Croak

Reputation: 2888

A potential solution could be to make use of expandIconColumnIndex, a prop that can be passed to an expandable antd Table component as well as adding an extra row for the expander. By doing this, you can set the expandIconColumnIndex to the index of the last (empty) row (in your case the index is 4), this way the icon will appear to the right of the Delete action. This will avoid creating space on the left and will move the icon to the right most column. This is the method that requires the least refactor given your code. Below is your updated columns.

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: (r) => <div>
    <a>Delete</a> 
    <a onClick={()=>expandRows(r.key)}>  ex</a>
    </div>
  },
   { title: "", dataIndex: "", key: "expand", width: 1},
];

And here is the updated Table.

<Table
   expandIconColumnIndex={4}
    columns={columns}
    dataSource={data}
    expandIcon={({ expanded, onExpand, record }) =>
      expanded ? (
        <UpOutlined style={{float: 'right'}} onClick={e => onExpand(record, e)} />
      ) : (
        <DownOutlined onClick={e => onExpand(record, e)} />
      )
    }
    expandable={{
      expandedRowRender: record => <p style={{ margin: 0 }}>{renderTable()}</p>
    }}
  />

In order to remove the left space from the nested table, you will need to overwrite Ant Design's CSS, which includes more padding for the nested table to act as indentation and differentiate it from the rest of the table. I recommend you keep it the way it is but if you really don't want to have that space you can overwrite their style by adding the className parentTable to your first table, and then nestedTable for the nested table (found in renderTable). Then add the following CSS to your style sheet.

.parentTable
  table
  tbody
  .ant-table-expanded-row.ant-table-expanded-row-level-1
  > td {
  padding: 0px !important;
}

.nestedTable > div > div > div {
  width: 100%;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

Here is the working codesandbox.

Upvotes: 3

Arpit Vyas
Arpit Vyas

Reputation: 2227

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.

Hope this 'll help you .

Upvotes: 0

Related Questions