Migrating datatable to 7.2.0 using UMD


Topic: Migrating datatable to 7.2.0 using UMD

Torroni pro asked 9 months ago

Expected behavior Successful migration of datatable from MDB standard 6.4.0 to MDB standard 7.2.0 using UMD

Actual behavior datatable not initialised

Resources (screenshots, code snippets etc.) I'm migrating from 6.4.0 to 7.2.0. I have followed the migration instructions and I'm testing the end result, loading the html file locally into the browser. There are a few things that don't work. This post concerns datatable elements. This is how I instantiated a datatable via Javascript using version 6.4.0:

const orderTableColumns = [
    { label: 'Id', field: 'id' },
    { label: 'Processor', field: 'processor' },
    { label: 'Start Time', field: 'vstart' },
    { label: 'Stop Time', field: 'vstop' },
    { label: 'Processing Start', field: 'pstart' },
    { label: 'Processing Stop', field: 'pstop' },
    { label: 'Status', field: 'status' },
    { label: 'Node', field: 'node' }
];
var orderTableSort = { column: "id", order: "ASC" };
var orderTable;
orderTable = new mdb.Datatable(
    document.getElementById('orderTable'),
    { columns: orderTableColumns, },
    { loading: true, noFoundMessage: 'no results', selectable: true, multi: true, sm: true, fullPagination: true, fixedHeader: true, forceSort: true, sortField: orderTableSort.column, sortOrder: orderTableSort.order.toLowerCase() }
);

According to the migration guide:

Datatable - add data-mdb-datatable-init attribute to .datatable.

but this works only if the datatable is instantiated via html. In the datatable component section, there are examples of how to instantiate it via javascript using UMD, and they are the same as in v6.4.0, there is no mention of the data-mdb-datatable-init attribute. If I create a snippet on the mdbootstrap web portal, it works, but the same code does not work when executed locally by a browser, I get the following error: Uncaught TypeError: mdb.Datatable is not a constructor


Torroni pro commented 9 months ago

Auto-fill put an old version of Chrome, I'm actually using Version 122.0.6261.129 (Official Build) (64-bit)


Kamila Pieńkowska staff answered 9 months ago

If you use new constructor you are not suppose to use html init attributes. Since you init components one way or another - not both. Plese describe how are doing your imports and check if you get any console errors. Also see what you will get when you try console.log(mdb)


Torroni pro commented 9 months ago

This fixed itself after I have removed the data-init from the canvas (see other post). Thanks.


Torroni pro answered 9 months ago

I'm not doing any import, the migration guide says that they are only required when using ES6, they are not required when using UMD. At the end of my html file I have:

<script type="text/javascript" src="js/mdb.umd.min.js"></script>

In my html I have a wrapper element for the datatable:

<div id="orderTable"></div>

I instantiate the datatable using the new constructor, no init attribute. The console shows the following error:

Uncaught TypeError: mdb.Datatable is not a constructor

console.log(mdb) does not print anything.


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: MDB5 7.2.0
  • Device: laptop
  • Browser: Google Chrome Version 112.0.5615.121 (Official Build) (64-bit)
  • OS: Microsoft Windows 11 Pro
  • Provided sample code: No
  • Provided link: No
Tags