向右移动expandIcon图标，并从扩展表中删除空白空间Ant Design reatc js [英] Move expandIcon icon to right and remove empty space from expanded table Ant Design reatc js

问题描述

我需要您的帮助来解决此问题.

I need your help to solve this problem.

我正在使用Ant Design表，并且被卡在这里.我希望扩展行图标应该在表格当前的右侧(在给定的沙箱代码中删除，然后在它的左侧)，当我们扩展一行时，扩展内容在左侧留一个小空间，我想将其删除.也就是说，它不应有任何多余的空间.伙计们，请帮帮我.

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.

沙盒代码: https://codesandbox.io/s/ancient-mountain-ft8m1?file=/index.js

推荐答案

可能的解决方案是利用expandIconColumnIndex，该道具可以传递给可扩展的antd Table组件，并添加一个额外的组件.扩展器的行.这样，您可以将expandIconColumnIndex设置为最后一个(空)行的索引(在您的情况下，索引为4)，这样图标将显示在Delete操作的右侧.这将避免在左侧创建空间，并将图标移到最右侧的列.在给定代码的情况下，这种方法需要最少的重构.以下是您更新的专栏.

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

这是更新的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>
    }}
  />

为了从嵌套表中删除剩余空间，您将需要覆盖Ant Design的CSS，该CSS包括用于嵌套表的更多填充，以用作缩进并将其与表的其余部分区分开.我建议您保持原样，但如果您确实不希望拥有该空间，则可以通过在第一个表中添加className parentTable，然后在嵌套表中添加nestedTable来覆盖其样式(位于renderTable).然后将以下CSS添加到样式表中.

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

这是有效的 codesandbox .

这篇关于向右移动expandIcon图标，并从扩展表中删除空白空间Ant Design reatc js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！