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>
Wojciech Staniszewski staff answered 2 years ago
Spitz Trader answered 2 years ago
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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