Is there a way to make api call when expanding table to show nested table?

Question

In Ant Nested table - When expanding a row, I want to make an api call and get the data to show the nested table.

The function expandedRowRender, expects to return the nested table, it does not accept a promise.

How can I show a nested Ant table using ajax call?

I have tried to recreate the scenario for reference.

import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";
import reqwest from "reqwest";

const nestedColumns = [
  {
    title: "Name",
    dataIndex: "name",
    sorter: true,
    render: name => `${name.first} ${name.last}`,
    width: "20%"
  },
  {
    title: "Gender",
    dataIndex: "gender",
    filters: [
      { text: "Male", value: "male" },
      { text: "Female", value: "female" }
    ],
    width: "20%"
  },
  {
    title: "Email",
    dataIndex: "email"
  }
];

class App extends React.Component {
  state = {
    data: []
  };

  fetch = (params = {}) => {
    console.log("params:", params);
    reqwest({
      url: "https://randomuser.me/api",
      method: "get",
      data: {
        results: 10,
        ...params
      },
      type: "json"
    }).then(data => {
      return (
        <Table
          columns={nestedColumns}
          dataSource={data.results}
          pagination={false}
        />
      );
      // this.setState({
      //   data: data.results
      // });
    });
  };

  expandedRowRender = () => {
    this.fetch();
    return <table columns={nestedColumns} dataSource={this.state.data} />;
  };

  render() {
    const columns = [
      { title: "Name", dataIndex: "name", key: "name" },
      { title: "Platform", dataIndex: "platform", key: "platform" },
      { title: "Version", dataIndex: "version", key: "version" }
    ];

    const data = [
      {
        key: 1,
        name: "Screem",
        platform: "iOS",
        version: "10.3.4.5654"
      }
    ];

    return (
      <Table
        columns={columns}
        dataSource={data}
        pagination={false}
        expandedRowRender={this.expandedRowRender}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

Answer 1

I try my level best to answer your question. Here is the reduced type of code and you can get an idea of how to do that.

In state,

state = {
    data: null,
    loading: false,
};

Here is your function to make API call,

fetch = (expanded, record) => {
    axios.get(`put your api to load nested table`)
        .then(res => {
            const data = res.data;

            this.setState({
                ...this.state.data,
                data,
                loading: true
            })
        }).catch(error => {
            console.log(error, "error")
        })
}

After that,

  expandedRowRender=() => {
    
            if(this.state.loading){
              const nestedTableData = this.state.data.map(row => ({
                key: row.id,
                Id: row.id,
                name: 'test',
                gender: 'gender',
      }))
              const nestedColumns = [
                { title: "Name", dataIndex: "name", key: "name" },
                { title: "Gender", dataIndex: "gender", key: "gender" },
              ];
              return <Table columns={nestedColumns} dataSource={nestedTableData } pagination={false} />          
            }
          
        };

And put following code below return

    <Table
            className="components-table-demo-nested"
            columns={columns}
            dataSource={tableData}
            expandable={{
    
              expandedRowRender: this.expandedRowRender,
      
              rowExpandable: record => true,
              onExpand: this.fetch
      
          }}              
          />

I hope it may help you and let me know if it does. :)