在 ant 表中以展开形式显示动态添加的行

Question

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.

Answer 1

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"));