Async datatable issue


Topic: Async datatable issue

Colin S asked 4 years ago

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


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: 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