It didnt worked either.

Below is how the values are defined and set:

enter code here

const [loading, setLoading] = useState(false);

const getAllData = async () => {

setLoading(true)
try {
  const res =  await axios
      .get(
          `url`,
          {
            headers:{
              AccessToken:userData.accessToken,
              Userid: userData.userId
            }
          }
      )
  const products = res.data;
  setData(products.orders)
  setCustomData({
    "columns" : columns,
    "rows": products.orders
  })
  setLoading(false)
} catch(err) {
  console.log(`An error has occured: ${err}`)
}

}

        </div>
            <MDBRow className="mt-4">
              <MDBCol>
                <MDBDataTable noRecordsFoundLabel="Orders not found" theadColor="silver" paging={true} bordered searching={true} fixed={true} noBottomColumns
                               striped isLoading={loading}  data={customData}/>
              </MDBCol>
            </MDBRow>
      </div>

getAllData is called whenever changes in the page like user presses any button. the table does not show any progress bar, when the getAllData is called which sets loading to true and false.

Is there any working example that I can look into ?

The prop has been changed to isLoading