How to put a loader in a nested table in antd?

user_5832240 0
Viewed 850

I have a nested table in antd, wherein when I click on a row, it expands and a new table opens open. Illustrated herenested table.

But it takes some time to fetch the data for the nested table ( I fetch it through an API). I need to put a loader/spinner in the nested table to indicate that the data is still not available to displayed. How can I achieve that in antd?

I have tried doing the following, but it didnt work:

//(Outer table) 
<Table key="campaignListByDate-table" 
    columns={campaignDateColumns}
    expandable={{ expandedRowRender }}
    loading={{
     indicator: <div><Spin /></div>,
     spinning: !campaignList
    }}
    dataSource={campaignList} 
    />

//Inner table ( The one that opens when u click on the "+" sign of a row. 

<Table 
  columns={columnsExpanded}
  dataSource={emailRate} 
  pagination={false} 
  loading={{
    indicator: <div><Spin /></div>,
    spinning: !emailRate
 }}/>

CampaignList: 
[
    {
        "id": "27813f63-aee2-4c69-bf5d-9e4ac8",
        "name": "bnce",
        "templateId": "ae7e094f-1735-4a31-bc67-95bd3d",
        "userId": "3122be78-703d-4621-92f0-8a2bd8",
        "createdAt": 1604984929337,
    },
    {
        "id": "438e0cd9-a550-453a-8a5b-4bd37",
        "name": "asd",
        "templateId": "ae7e094f-1735-4a31-bc67-95bd3",
        "userId": "3122be78-703d-4621-92f0-8a2bd87",
        "createdAt": 1604985347370,
    },

]

EmailRate: 
[
    {
        "time": "2020-11-11 11 : 39",
        "count": 3,
        "key": "2020-11-11 11 : 39"
    }
]
antd reactjs
1 Answers

From your code, I assume you are trying to set ![ ] to spinning when you do not have any data. But ![ ] will not return true.

Example:

//When you have some data
console.log(!['something to avoid empty array'])

//when you do not have any data
console.log(![])

Both cases will return false and your loader is not getting activated.

Try using boolean state variables and assign true and false to those variables before and after your data fetch and assign it to the table spinner

user_116845010
Related