I have an ant table where I pass a parameter "defaultExpandAllRows=true" which renders the table in an expanded form.
<Table columns={columns} pagination={false} expandable={{ expandedRowRender: (record) => ( <p style={{ margin: 0 }}>{record.description}</p> ), defaultExpandAllRows: true, rowExpandable: (record) => record.name !== "Not Expandable" }} dataSource={customScopeTableData} />
My use case is to show the dynamically added row in expanded form. Here is the working sample code https://codesandbox.io/s/dynamic-expandable-row-issue-f6bn5?file=/index.js
I couldn't find something in the API doc. Any help on this would be appreciable.
I think you should use expandedRowKeys
instead of defaultExpandAllRows
. Because of defaultExpandAllRows only apply to the initial data, so newly added rows won't be affected.
expandable={{
expandedRowRender: (record) => (
<p style={{ margin: 0 }}>{record.description}</p>
),
rowExpandable: (record) => record.name !== "Not Expandable",
expandedRowKeys: expandedRowKeys,
onExpand: (expanded, record) => {
updateExpandedRowKeys({ record });
}
}}
First create a state for expandedRowKeys
and a function for update expandedRowKeys
const [expandedRowKeys, setExpandedRowKeys] = useState(data.map(({ key }) => key));
const updateExpandedRowKeys = ({ record }) => {
const rowKey = record.key;
const isExpanded = expandedRowKeys.find(key => key === rowKey);
let newExpandedRowKeys = [];
if (isExpanded) {
newExpandedRowKeys = expandedRowKeys.reduce((acc, key) => {
if (key !== rowKey) acc.push(key);
return acc;
}, []);
} else {
newExpandedRowKeys = expandedRowKeys;
newExpandedRowKeys.push(rowKey);
}
setExpandedRowKeys(newExpandedRowKeys);
};
Then insert new expandedRowKey
when new row added
const addCustomField = () => {
const newIndex = customScopeTableData.slice(-1)[0].key + 1;
setCustomScopeTableData([...customScopeTableData, newEntry(newIndex)]);
setExpandedRowKeys([...expandedRowKeys, newIndex])
};
Column key for newEntry
should be unique, Date.now()
seems will be duplicated. I have changed it to incremental index.
const newIndex = customScopeTableData.slice(-1)[0].key + 1;
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Button } from "antd";
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: () => <a>Delete</a>
}
];
const data = [
{
key: 1,
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
description:
"My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
},
{
key: 2,
name: "Jim Green",
age: 42,
address: "London No. 1 Lake Park",
description:
"My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
},
{
key: 3,
name: "Not Expandable",
age: 29,
address: "Jiangsu No. 1 Lake Park",
description: "This not expandable"
},
{
key: 4,
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
description:
"My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park."
}
];
const newEntry = (key) => {
return {
key: key,
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
description:
"My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
}
};
const TableComponent = () => {
const [customScopeTableData, setCustomScopeTableData] = useState(data);
const addCustomField = () => {
const newIndex = customScopeTableData.slice(-1)[0].key + 1;
setCustomScopeTableData([...customScopeTableData, newEntry(newIndex)]);
setExpandedRowKeys([...expandedRowKeys, newIndex])
};
const [expandedRowKeys, setExpandedRowKeys] = useState(data.map(({ key }) => key));
const updateExpandedRowKeys = ({ record }) => {
const rowKey = record.key;
const isExpanded = expandedRowKeys.find(key => key === rowKey);
let newExpandedRowKeys = [];
if (isExpanded) {
newExpandedRowKeys = expandedRowKeys.reduce((acc, key) => {
if (key !== rowKey) acc.push(key);
return acc;
}, []);
} else {
newExpandedRowKeys = expandedRowKeys;
newExpandedRowKeys.push(rowKey);
}
setExpandedRowKeys(newExpandedRowKeys);
};
return (
<>
<Table
columns={columns}
pagination={false}
expandable={{
expandedRowRender: (record) => (
<p style={{ margin: 0 }}>{record.description}</p>
),
rowExpandable: (record) => record.name !== "Not Expandable",
expandedRowKeys: expandedRowKeys,
onExpand: (expanded, record) => {
updateExpandedRowKeys({ record });
}
}}
dataSource={customScopeTableData}
/>
<Button type="dashed" onClick={() => addCustomField()}>
Add field
</Button>
</>
);
};
ReactDOM.render(<TableComponent />, document.getElementById("container"));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.