Unable to find loading option in mdbdatatable


Topic: Unable to find loading option in mdbdatatable

Spitz Trader asked 2 years ago

I am unable to find a way to set the loading option in mdb tables in JSX code. Is the option is removed ?

"mdb-react-ui-kit": "^4.2.0",
"mdbreact": "^5.2.0",
"react": "^18.2.0",

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

The prop has been changed to isLoading


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 ?


Wojciech Staniszewski staff commented 2 years ago

Yes, it should be in the MDBDatatable documentation: https://mdbootstrap.com/docs/react/data/datatables/#section-async-data


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 4.2.0
  • Device: Desktop
  • Browser: chrome
  • OS: Linux
  • Provided sample code: No
  • Provided link: No