Ant 设计中的 React 和 ExpandedRow 渲染

Question

I am using Ant Design table in which I am using row expanded functionality. my query is when I click any row of the table the row is opening but the issue is when i click on other row the previous row still open, I just want such functionality in which if I click any row the other which is already open should close..... if any one have solution please show me demo in stackBlitz..... Thanks In advance

Answer 1

Check the antd docs AntD/#expandable .

Its simple. AntD tables have parameter expandable that accepts many variables such as expandedRowKeys that holds witch of the rows have been expanded and onExpand that is amethod that gets called when you click the icon to expand it. A simple way would be to create your own variable to hold the key that is expanded like so

const [expandedKey, setExpandedKey] = useState(null);

And create a new method for when the row is being expanded as so

const onExpand = (_, { key }) => setExpandedKey(key);

Then when rendering a AntD table pass these variables

<Table
  columns={columns}
  expandable={{
    expandedRowRender: (record) => (
      <p style={{ margin: 0 }}>{record.description}</p>
    ),
    onExpand: onExpand,
    expandedRowKeys: [expandedKey]
  }}
  dataSource={data}
/>

Live example: https://codesandbox.io/s/eloquent-http-jxf1m?file=/src/App.js

---

EDIT

To make it close whenever clicking the _ icon (when its open), change the onExpand method to this:

const onExpand = (_, { key }) =>
    expandedKey === key ? setExpandedKey(null) : setExpandedKey(key);

---