Topic: Async datatable issue
Expected behavior Combining tags produces an async datatable with fixed headers and selectable rows
<!-- Start your project here-->
<div id="datatable" data-mdb-loading="true" data-mdb-selectable="true" data-mdb-multi="true"></div>
<!-- End your project here-->
...
<!-- Custom scripts -->
<script type="text/javascript">
const columns = [
{ label: 'Address', field: 'address' },
{ label: 'Company', field: 'company' },
{ label: 'Email', field: 'email' },
{ label: 'Name', field: 'name' },
{ label: 'Phone', field: 'phone' },
{ label: 'Username', field: 'username' },
{ label: 'Website', field: 'website' },
];
const asyncTable = new mdb.Datatable(
document.getElementById('datatable'),
{
columns,
}
);
fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.json())
.then((data) => {
asyncTable.update(
{
rows: data.map((user) => ({
...user,
address: `${user.address.city}, ${user.address.street}`,
company: user.company.name,
})),
},
{ loading: false }
);
});
</script>
Actual behavior The async request is never made if the datatable has tags data-mdb-loading, data-mdb-fixed-header and data-mdb-selectable. Removing either data-mdb-fixed-header or data-mdb-selectable makes the async request work.
Resources (screenshots, code snippets etc.)
Grzegorz Bujański staff answered 4 years ago
Thanks for reporting this bug. We will fix it. As a workaround, try adding a fixedHeader
in the update method: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/2892856#js-tab-view
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Standard
- MDB Version: 3.2.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No