将 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)，这样图标将出现在 的右侧删除动作.这将避免在左侧创建空间并将图标移动到最右侧的列.给定您的代码，这是需要最少重构的方法.以下是您更新后的列.

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

},{ title: "", dataIndex: "", key: "expand", width: 1},];

And here is the updated Table.

这是更新后的Table.

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.

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

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

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