Metronic

The Ultimate Bootstrap Admin Theme Framework For Next Generation Applications

Watch Video

Overview

Metronic is the most trusted and popular admin theme in the market which is based on Bootstrap 4 framework that provides a complete frontend to build any type of web applications. Metronic comes with multiple demos for classic jQuery and Angular versions. Metronic package also includes powerful build tools to manage and deploy project assets easily. This documentation provides the information you need to be able to use Metronic in your applications, customising it to match your exact requirements to get your projects done successfully.

Quick Start

  1. Download the latest Theme source from ThemeForest.
  2. Download and install Node.js from nodejs.org/en/download/
  3. Start command prompt window or terminal and change directory to [root]/tools/
    cd theme/angular/tools
    cd theme/default/tools
  4. Install the latest version of npm.
    npm install --global npm@latest
  5. Install the latest version of yarn.
    npm install --global yarn
  6. Install gulp.
    npm install --global gulp-cli
  7. Install yarn dependencies. Must execute in [root]/tools/ folder.
    yarn install
  8. Compile scss and javascript using gulp. You need to run this command everytime scripts under [root]/src has been changed. This command must execute in the [root]/tools folder.
    gulp --prod
  9. Run Angular application
    cd [root]/dist/demo/[demo_id]
    npm install
    ng serve
  10. Default static HTML location
    cd [root]/dist/demo/[demo_id]

Installation

Overview

This section guides you to install all required software and libraries in order to fully utilize Metronic for your projects.

Install Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js is required in order to run the Metronic build tools. Download the latest version of Node and install it: nodejs.org/en/download/

Install NPM

Npm is the package manager for JavaScript and the world’s largest software registry. Npm is a separate project from Node.js, and tends to update more frequently. As a result, even if you’ve just downloaded Node.js (and therefore npm), you’ll probably need to update your npm.

npm install --global npm@latest

Verify that npm in successfully installed, and version of installed npm will appear.

npm --version

Install Yarn

Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry.

npm install --global yarn

Verify that yarn in successfully installed, and version of installed yarn will appear.

yarn --version

Here is just a way to install yarn, using npm package manager. Alternatively, you can install yarn using other methods as stated in yarn installation site. More information on yarn installation, please check the documentation: https://yarnpkg.com/lang/en/docs/install/

Please don't forget to run yarn install after every Metronic updates released in order to install newly added or updated 3rd-party plugins.

Install Gulp

Gulp is a toolkit that helps you automate your time-consuming tasks in development workflow. To install gulp globally.

npm install --global gulp-cli

If you have previously installed a version of gulp globally, please remove it to make sure old version doesn't collide with new gulp-cli.

npm rm --global gulp

Verify that gulp in successfully installed, and version of installed gulp will appear.

gulp --version

Install Git

Git is a distributed version control system designed to handle projects. Download and install Git from https://git-scm.com/.

Verify that Git in successfully installed, and version of installed Git will appear.

git --version

Migrating to Yarn

Since Metronic v5.0.6, we are using Yarn and no longer use Bower as package dependencies. Please install the latest version Yarn for global install.

npm install --global yarn

Inside the [root]/tools/ directory, remove the old bower_components folder. Run yarn install command to install dependencies using yarn.

yarn install

GitHub Access

Head to https://keenthemes.com/metronic/github to register. Please provide your GitHub username and a valid Metronic purchase code from your ThemeForest account and receive our invitation to access to the Metronic's private repositories. Once you accept the invitation you will be added as a collaborator with following privileges:

  • You can access to the latest development version.
  • You can report issues and access to the hot bug fixes and new features before Themeforest release.
  • You can send pull requests that will be reviewed by us.

Cloning a Git repository

You can use Sourcetree for free or any other Git client software to clone from the Metronic's default and angular versions repositories:

https://github.com/KeenthemesHub/Metronic-Default.git
https://github.com/KeenthemesHub/Metronic-Angular.git

If the cloning was successful, a new sub-directory appears on your local drive. This directory has the same name as the repository that you cloned.

Files Structure

Overview

Metronic comes with a flexible file structure that can be easily used for small to large scope projects. This section will explain Metronic's entire file structure and how to adapt it to your project.

[root] is refers to the package type version.

  • default is the default version based on HTML, jQuery and Bootstrap
  • angular is the Angular integrated hybrid version built on top of the default version with Angular-CLI
Path Description
dist Theme versions folder
docs The theme documentation
.. Demo contents
src Src(stands for source) contains the raw source code of javascript, scss, images and web font files that will be minified/concatenated onto assets folder for production usage
js Javascript source files
media Media(image, video, font files, etc) files
sass Sass source files
vendors 3rd party libraries
tools Development and deployment tools
gulp The build tools gulp tasks for bundle and minify the js and css files and complile sass files.
node_modules NPM package installation folder
[version_package].json Metronic build config file. Depends on which version package, either default or angular. Here you can configure the build according to your requirements
gulpfile.json Gulp tasks main script. All the build tool tasks are grouped in this script
package.json NPM package manager config file
.. Another version package

Javascript

Below table explains Metronic javascript file structure. Is it located based on which version package, either defult or angular. The table below start with the path: [root]/src/
Path Description
src Src(stands for source) contains the raw source code of javascript, scss, images and web font files that will be minified/concatenated onto assets folder for production usage
js Javascript files
app Application level(global) javascript files
base Application level base javascript files are minified and concatenated into the base bundle assets/demo/[demo_id]/base/scripts.bundle.js to be included globally. demo_id is the selected demo name.
custom Application level custom javascript files are minified and moved to assets/app/js/* to be included on demand.
demo Demo level javascript files
default Default demo javascript files
base Demo level base javascript files are minified and concatenated into the base bundle assets/demo/[demo_id]/base/scripts.bundle.js to be included globally. demo_id is the selected demo name.
custom Demo level custom javascript files are minified and moved to assets/demo/[demo_id]/custom/* to be included on demand. demo_id is the selected demo name.
... Other demos
framework Framework components javascript files are minified and concatenated into the base bundle assets/demo/[demo_id]/base/scripts.bundle.js to be included globally. demo_id is the selected demo name.
snippets Snippets are custom templates created for certain requirements by customizing and extending the theme's base components and plugins
base Base snippets javascript files are minified and concatenated into the base bundle assets/demo/[demo_id]/base/scripts.bundle.js to be included globally. demo_id is the selected demo name.
custom Application level custom javascript files are minified and moved to assets/snippets/* to be included on demand.

SASS

Below table explains Metronic SASS file structure. Is it located based on which version package, either defult or angular. The table below start with the path: [root]/src/
Path Description
src Src(stands for source) contains the raw source code of javascript, scss, images and web font files that will be minified/concatenated onto assets folder for production usage
sass Javascript files
demo Demo level sass files
default Default demo sass files
style.css style.scss is compiled, minified and concatenated into the base bundle stylesheet assets/demo/[demo_id]/base/style.bundle.css to be included globally. demo_id is the selected demo name.
... Other demos
framework Framework scss files are compiled, minified and concatenated into the base bundle assets/demo/[demo_id]/base/style.bundle.css to be included globally. demo_id is the selected demo name.
snippets Snippets sass files are compiled, minified and concatenated into the base bundle assets/demo/[demo_id]/base/style.bundle.css to be included globally. demo_id is the selected demo name.
custom Application level custom javascript files are minified and moved to assets/snippets/* to be included on demand.

Build Tools

Overview

Metronic build tools provides easy package management and production deployment for any type of web application that also comes with powerful asset bundle tools to organize assets structure with custom bundling for production.

Metronic's central default.json and angular.json build config files allows you manage the entire assest bundling for production by taking advantage of yarn package manager.

Build Config

The build config file is located at [root]/tools/conf/[version_package].json and you can fully customize the build settings to meet your project requirements:

Please make sure the dist output path config.dist is set to true in default.json and angular.json, for the build tools to output the compilation.

{
    "config": {
        "demo": "",
        "debug": false,
        "compile": {
            "jsUglify": false,
            "cssMinify": false,
            "jsSourcemaps": false,
            "cssSourcemaps": false
        },
        "path": {
            "src": "./../theme/[root]/src",
            "node_modules": "./node_modules",
            "demo_api_url": "https://keenthemes.com/metronic/preview/"
        },
        "dist": [
            "./../theme/dist/preview/assets",
            "./../theme/dist/default/**/assets"
        ]
    },
    "build": {
        "vendors": {
            "base": {
                "src": {
                    "mandatory": {
                        "jquery": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery/dist/jquery.js"
                            ]
                        },
                        "bootstrap": {
                            "scripts": [
                                "{$config.path.node_modules}/popper.js/dist/umd/popper.js",
                                "{$config.path.node_modules}/bootstrap/dist/js/bootstrap.min.js"
                            ]
                        },
                        "js-cookie": {
                            "scripts": [
                                "{$config.path.node_modules}/js-cookie/src/js.cookie.js"
                            ]
                        },
                        "jquery-smooth-scroll": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery-smooth-scroll/jquery.smooth-scroll.js"
                            ]
                        },
                        "moment": {
                            "scripts": [
                                "{$config.path.node_modules}/moment/min/moment.min.js"
                            ]
                        },
                        "wNumb": {
                            "scripts": [
                                "{$config.path.node_modules}/wnumb/wNumb.js"
                            ]
                        }
                    },
                    "optional": {
                        "jquery.repeater": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery.repeater/src/intro.js",
                                "{$config.path.node_modules}/jquery.repeater/src/lib.js",
                                "{$config.path.node_modules}/jquery.repeater/src/jquery.input.js",
                                "{$config.path.node_modules}/jquery.repeater/src/repeater.js",
                                "{$config.path.node_modules}/jquery.repeater/src/outro.js"
                            ]
                        },
                        "jquery-form": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery-form/dist/jquery.form.min.js"
                            ]
                        },
                        "tether": {
                            "styles": [
                                "{$config.path.node_modules}/tether/dist/css/tether.css"
                            ],
                            "scripts": []
                        },
                        "malihu-custom-scrollbar-plugin": {
                            "styles": [
                                "{$config.path.node_modules}/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"
                            ],
                            "images": [
                                "{$config.path.node_modules}/malihu-custom-scrollbar-plugin/mCSB_buttons.png"
                            ]
                        },
                        "block-ui": {
                            "scripts": [
                                "{$config.path.node_modules}/block-ui/jquery.blockUI.js"
                            ]
                        },
                        "bootstrap-datepicker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"
                            ]
                        },
                        "bootstrap-datetime-picker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-datetime-picker/css/bootstrap-datetimepicker.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-datetime-picker/js/bootstrap-datetimepicker.min.js"
                            ]
                        },
                        "bootstrap-timepicker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-timepicker/css/bootstrap-timepicker.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-timepicker/js/bootstrap-timepicker.min.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-timepicker.init.js"
                            ]
                        },
                        "bootstrap-daterangepicker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-daterangepicker.init.js"
                            ]
                        },
                        "bootstrap-touchspin": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.js"
                            ]
                        },
                        "bootstrap-maxlength": {
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-maxlength/src/bootstrap-maxlength.js"
                            ]
                        },
                        "bootstrap-switch": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-switch/dist/js/bootstrap-switch.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-switch.init.js"
                            ]
                        },
                        "bootstrap-multiselectsplitter": {
                            "scripts": [
                                "{$config.path.src}/vendors/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.min.js"
                            ]
                        },
                        "bootstrap-select": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-select/dist/css/bootstrap-select.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-select/dist/js/bootstrap-select.js"
                            ]
                        },
                        "select2": {
                            "styles": [
                                "{$config.path.node_modules}/select2/dist/css/select2.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/select2/dist/js/select2.js"
                            ]
                        },
                        "typeahead.js": {
                            "scripts": [
                                "{$config.path.node_modules}/typeahead.js/dist/typeahead.bundle.js",
                                "{$config.path.node_modules}/handlebars/dist/handlebars.js"
                            ]
                        },
                        "inputmask": {
                            "scripts": [
                                "{$config.path.node_modules}/inputmask/dist/jquery.inputmask.bundle.js",
                                "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.date.extensions.js",
                                "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.numeric.extensions.js",
                                "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.phone.extensions.js"
                            ]
                        },
                        "nouislider": {
                            "styles": [
                                "{$config.path.node_modules}/nouislider/distribute/nouislider.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/nouislider/distribute/nouislider.js"
                            ]
                        },
                        "autosize": {
                            "scripts": [
                                "{$config.path.node_modules}/autosize/dist/autosize.js"
                            ]
                        },
                        "clipboard": {
                            "scripts": [
                                "{$config.path.node_modules}/clipboard/dist/clipboard.min.js"
                            ]
                        },
                        "ion-rangeslider": {
                            "styles": [
                                "{$config.path.node_modules}/ion-rangeslider/css/ion.rangeSlider.css",
                                "{$config.path.node_modules}/ion-rangeslider/css/ion.rangeSlider.skinFlat.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/ion-rangeslider/js/ion.rangeSlider.js"
                            ],
                            "images": [
                                "{$config.path.node_modules}/ion-rangeslider/img/sprite-skin-flat.png"
                            ]
                        },
                        "dropzone": {
                            "styles": [
                                "{$config.path.node_modules}/dropzone/dist/dropzone.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/dropzone/dist/dropzone.js"
                            ]
                        },
                        "summernote": {
                            "styles": [
                                "{$config.path.node_modules}/summernote/dist/summernote.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/summernote/dist/summernote.js"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/summernote/dist/font/**"
                            ]
                        },
                        "bootstrap-makrdown": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-markdown/css/bootstrap-markdown.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-markdown/js/bootstrap-markdown.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-markdown.init.js"
                            ]
                        },
                        "jquery-validation": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery-validation/dist/jquery.validate.js",
                                "{$config.path.node_modules}/jquery-validation/dist/additional-methods.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/jquery-validation.init.js"
                            ]
                        },
                        "remarkable-bootstrap-notify": {
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-notify/bootstrap-notify.min.js",
                                "{$config.path.src}/js/framework/components/plugins/base/bootstrap-notify.init.js"
                            ]
                        },
                        "animate.css": {
                            "styles": [
                                "{$config.path.node_modules}/animate.css/animate.min.css"
                            ]
                        },
                        "toastr": {
                            "styles": [
                                "{$config.path.node_modules}/toastr/build/toastr.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/toastr/build/toastr.min.js"
                            ]
                        },
                        "jstree": {
                            "styles": [
                                "{$config.path.node_modules}/jstree/dist/themes/default/style.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/jstree/dist/jstree.js"
                            ],
                            "images": [
                                "{$config.path.src}/vendors/jstree/32px.png",
                                "{$config.path.node_modules}/jstree/dist/themes/default/40px.png",
                                "{$config.path.node_modules}/jstree/dist/themes/default/*.gif"
                            ]
                        },
                        "morris.js": {
                            "styles": [
                                "{$config.path.node_modules}/morris.js/morris.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/raphael/raphael.js",
                                "{$config.path.node_modules}/morris.js/morris.js"
                            ]
                        },
                        "chartist": {
                            "styles": [
                                "{$config.path.node_modules}/chartist/dist/chartist.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/chartist/dist/chartist.js"
                            ]
                        },
                        "chart.js": {
                            "scripts": [
                                "{$config.path.node_modules}/chart.js/dist/Chart.bundle.js",
                                "{$config.path.src}/js/framework/components/plugins/charts/chart.init.js"
                            ]
                        },
                        "bootstrap-session-timeout": {
                            "scripts": [
                                "{$config.path.src}/vendors/bootstrap-session-timeout/bootstrap-session-timeout.min.js"
                            ]
                        },
                        "jquery-idletimer": {
                            "scripts": [
                                "{$config.path.src}/vendors/jquery-idletimer/idle-timer.min.js"
                            ]
                        },
                        "counterup": {
                            "scripts": [
                                "{$config.path.node_modules}/waypoints/lib/jquery.waypoints.js",
                                "{$config.path.node_modules}/counterup/jquery.counterup.js"
                            ]
                        },
                        "socicon": {
                            "styles": [
                                "{$config.path.node_modules}/socicon/css/socicon.css"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/socicon/font/**"
                            ]
                        },
                        "font-awesome": {
                            "styles": [
                                "{$config.path.node_modules}/font-awesome/css/font-awesome.css"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/font-awesome/fonts/**"
                            ]
                        },
                        "line-awesome": {
                            "styles": [
                                "{$config.path.src}/vendors/line-awesome/css/line-awesome.css"
                            ],
                            "fonts": [
                                "{$config.path.src}/vendors/line-awesome/fonts/**"
                            ]
                        },
                        "flaticon": {
                            "styles": [
                                "{$config.path.src}/vendors/flaticon/css/flaticon.css"
                            ],
                            "fonts": [
                                "{$config.path.src}/vendors/flaticon/fonts/**"
                            ]
                        },
                        "metronic": {
                            "styles": [
                                "{$config.path.src}/vendors/metronic/css/styles.css"
                            ],
                            "fonts": [
                                "{$config.path.src}/vendors/metronic/fonts/**"
                            ]
                        }
                    }
                },
                "bundle": {
                    "styles": "{$config.output}/vendors/base/vendors.bundle.css",
                    "scripts": "{$config.output}/vendors/base/vendors.bundle.js",
                    "images": "{$config.output}/vendors/base/images",
                    "fonts": "{$config.output}/vendors/base/fonts"
                }
            },
            "custom": {
                "jquery-ui": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/vendors/jquery-ui/jquery-ui.min.css"
                        ],
                        "scripts": [
                            "{$config.path.src}/vendors/jquery-ui/jquery-ui.min.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/vendors/custom/jquery-ui/jquery-ui.bundle.css",
                        "scripts": "{$config.output}/vendors/custom/jquery-ui/jquery-ui.bundle.js"
                    }
                },
                "fullcalendar": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/fullcalendar/dist/fullcalendar.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/fullcalendar/dist/fullcalendar.js",
                            "{$config.path.node_modules}/fullcalendar/dist/gcal.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/vendors/custom/fullcalendar/fullcalendar.bundle.css",
                        "scripts": "{$config.output}/vendors/custom/fullcalendar/fullcalendar.bundle.js"
                    }
                },
                "gmaps": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/gmaps/gmaps.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.output}/vendors/custom/gmaps/gmaps.js"
                    }
                },
                "jqvmap": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/jqvmap/dist/jqvmap.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/jqvmap/dist/jquery.vmap.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.europe.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.germany.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.russia.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.usa.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.world.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/vendors/custom/jqvmap/jqvmap.bundle.css",
                        "scripts": "{$config.output}/vendors/custom/jqvmap/jqvmap.bundle.js"
                    }
                },
                "flot": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/Flot/jquery.flot.js",
                            "{$config.path.node_modules}/Flot/jquery.flot.resize.js",
                            "{$config.path.node_modules}/Flot/jquery.flot.categories.js",
                            "{$config.path.node_modules}/Flot/jquery.flot.pie.js",
                            "{$config.path.node_modules}/Flot/jquery.flot.stack.js",
                            "{$config.path.node_modules}/Flot/jquery.flot.crosshair.js",
                            "{$config.path.node_modules}/Flot/jquery.flot.axislabels.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.output}/vendors/custom/flot/flot.bundle.js"
                    }
                }
            }
        },
        "demo": {
            "default": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/default/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/**/*.js",
                            "{$config.path.src}/js/demo/default/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/default/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/default/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/default/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/default/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/default/custom/",
                        "media": "{$config.output}/demo/default/media/"
                    }
                }
            },
            "demo2": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo2/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/**/*.js",
                            "{$config.path.src}/js/demo/demo2/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo2/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo2/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo2/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo2/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo2/custom/",
                        "media": "{$config.output}/demo/demo2/media/"
                    }
                }
            },
            "demo3": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo3/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/**/*.js",
                            "{$config.path.src}/js/demo/demo3/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo3/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo3/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo3/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo3/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo3/custom/",
                        "media": "{$config.output}/demo/demo3/media/"
                    }
                }
            },
            "demo4": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo4/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/**/*.js",
                            "{$config.path.src}/js/demo/demo4/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo4/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo4/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo4/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo4/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo4/custom/",
                        "media": "{$config.output}/demo/demo4/media/"
                    }
                }
            },
            "demo5": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo5/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/**/*.js",
                            "{$config.path.src}/js/demo/demo5/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo5/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo5/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo5/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo5/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo5/custom/",
                        "media": "{$config.output}/demo/demo5/media/"
                    }
                }
            },
            "demo6": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo6/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/**/*.js",
                            "{$config.path.src}/js/demo/demo6/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo6/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo6/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo6/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo6/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo6/custom/",
                        "media": "{$config.output}/demo/demo6/media/"
                    }
                }
            }
        },
        "snippets": {
            "src": {
                "scripts": [
                    "{$config.path.src}/js/snippets/custom/**/*.js"
                ]
            },
            "output": {
                "scripts": "{$config.output}/snippets/"
            }
        },
        "app": {
            "src": {
                "scripts": [
                    "{$config.path.src}/js/app/custom/**/*.js"
                ],
                "media": [
                    "{$config.path.src}/media/app/**/*.*"
                ]
            },
            "output": {
                "scripts": "{$config.output}/app/js",
                "media": "{$config.output}/app/media"
            }
        }
    }
}

Required Core CSS and JS files

Vendors list under build.vendors.base.src.mandatory is required, and the build.vendors.base.src.optional is optional. Also JS & CSS files in demo.[demo_id]* is required for specific demo styles and scripts.

* [demo_id] is the unique demo name, like default, demo2, demo3, etc.

Under snippets and app nodes are for preview demo and optional.

Build Config
Field Type Description
config.demo string Specify an ID of the selected demo for gulp tool to build assets only for selected demo
config.debug boolean Enable/disable debug console log.
config.compile.jsUglify boolean Enable/disable output Javascript minify.
config.compile.cssMinify boolean Enable/disable output CSS minify.
config.compile.jsSourcemaps boolean Enable/disable output Javascript with sourcemaps.
config.compile.cssSourcemaps boolean Enable/disable output CSS with sourcemaps.
config.path object Predefined paths the where src/, node_modules/ and theme/[root]/src/ are located. demo_api_url is the ajax API path used by datatables, dropdowns with live search and other json server side data source related demos.
config.dist object dist stands for distributable and refers to the directories where the minified and bundled assets will be stored for production uses.
Build Items
build.vendors object vendors object specifies all 3rd party resources to be deployed to assets/vendors/ folder for production usage
build.vendors.base object This object specifies global 3rd party resources to be added into the base css and js vendors bundles assets/vendors/base/vendors.bundle.js and assets/vendors/base/vendors.bundle.css

The 3rd party plugin images or font files also will be deployed into assets/vendors/base/images and assets/vendors/base/fonts
build.vendors.custom object This object specifies 3rd party resources that are includable on demand from assets/vendors/custom/ folder
build.demo.default object Default demo assets
build.demo.default.base object This object specifies the global assets of the demo to be added into the base css and js demo bundles assets/demo/default/base/scripts.bundle.js and assets/demo/default/base/styles.bundle.css

The media(e.g: images) of the demo are deployed into assets/demo/default/media
build.demo.default.custom object This object specifies custom assets that are includable on demand from assets/demo/default/custom/ folder
build.snippets object This object specifies snippets assets that are includable on demand from assets/snippets/ folder
build.app object This object specifies application level global assets that are includable on demand from assets/app/ folder. Useful if you want to add custom scripts that are used in some spesific pages only.

Tasks

Please update the Node.js, global npm and yarn to the latest version, if you got the error related to the node-sass.

Make sure that before running below tasks the demo parameter in [root]/tools/conf/[version_package].json is set to your current selected demo id (e.g: default, demo2, demo8 or demo12).
Leave the demo parameter empty to build for all demos.
Please set config.path.demo_api_url parameter in [root]/tools/conf/[version_package].json URL to your installed localhost API.

Launch your terminal and change its current directory to the project's tools folder where the build files are located. All commands below must be run in this tools folder.

cd [root]/tools/

For the first time launch, run the command below to install the npm dependencies defined in [root]/tools/package.json (if you haven't done already) :

yarn install

For the first time or after every modification in [root]/src/, run below task to compile the assets as defined in [root]/tools/conf/[version_package].json :

gulp

Provide argument --prod to build assets with JS and CSS minify enabled.

gulp --prod

Run below task to update server side ajax demo API URL fix (required fix for angular and html versions) as defined in config.path.demo_api_url right after gulp task completed:

gulp apiurl

In some cases, if the Angular demo folder was moved to other directories, gulp command may not work. Please use gulp command with flag --angular-jquery for the assets compilation.

gulp --prod --angular-jquery
For the Metronic v5.1 and older version, please use this instead.
gulp --prod --angular

Base theme CSS & JS in [root]/src/. When you run gulp, all CSS & JS from [root]/src/ will be compiled and place into several demo locations, for Angular and HTML static. The compile output folder is defined in [root]/tools/conf/[version_package].json file, under config.dist. You can create another compile output path.

"dist": [
    "./../theme/dist/preview/assets",
    "./../theme/dist/default/**/assets"
]

Gulp can run automatically when a file changed. Watch tasks file is located in [root]/tools/gulp/watch.js.

To run watcher for all JS and CSS files. Run command below.

gulp watch

You also can run watcher separately for JS and CSS.

gulp watch:js
gulp watch:scss

Stylesheets

Overview

Each demo has own base style [root]/src/sass/demo/[demo_id]/style.scss that will be compiled and added into the demo's base css bundle assets/demo/[demo_id]/base/styles.bundle.css.

Config

The demo's style.scss includes the entire framework stylesheets and compiles with its own layout and global settings that overrides's Metronic frameworks base global settings. Thus each demo can customize and change the look and feel of the the entire theme components by overriding global config [root]/src/sass/framework/_config.scss by the demo level config [root]/src/sass/demo/[demo_id]/_framework-config.scss.

Metronic uses nested map list to structure the config options with special custom function arrat-get() to access the nested config structure. Below is the example of the framework's base SASS config:


//
//** Global Config
//

//== Framework SASS Functions
@import "base/functions";

//== Layout Breakpoints
// Define the minimum and maximum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$m--layout-breakpoints: (
  	// Small screen / phone
  	sm: 576px,

  	// Medium screen / tablet
  	md: 768px,

  	// Large screen / desktop
  	lg: 992px,

  	// Extra large screen / wide desktop
  	xl: 1200px,

    // Extra large screen / wide desktop
    xxl: 1400px,

    xxxl: 1600px
) !default;

//== Global arrow style
$m--arrow-style: 'smooth'; // supported options: smooth, classic

//== Default skin
$m--default-skin: 'light'; // supported options: light, dark

//== Global rounded border mode
$m--rounded: true;

//== Force cursor with pointer for button tags globally
$m--btn-force-hover-pointer: true;

//== Border Radius
$m--border-radius: (
    general: 4px,
    dropdown: 6px,
    scrollbar: 2px
);

//== Transition
$m--transition: (
    general: all 0.3s,
    link: (
        hover: color .4s ease
    )
);

//== UI State Color
$m--state-colors: (
    // metronic states
    brand: (
        base: #716aca,
        inverse: #ffffff
    ),
    metal: (
        base: #c4c5d6,
        inverse: #111111
    ),
    light: (
        base: #ffffff,
        inverse: #282a3c
    ),
    accent: (
        base: #00c5dc,
        inverse: #ffffff
    ),
    focus: (
        base: #9816f4,
        inverse: #ffffff
    ),

    // bootstrap states
    primary: (
        base: #5867dd,
        inverse: #ffffff
    ),
    success: (
        base: #34bfa3,
        inverse: #ffffff
    ),
    info: (
        base: #36a3f7,
        inverse: #ffffff
    ),
    warning: (
        base: #ffb822,
        inverse: #111111
    ),
    danger: (
        base: #f4516c,
        inverse: #ffffff
    )
);

//== The body element font settings
$m--root-font: (
    size: (
        desktop: 14px,
        tablet: 13px,
        mobile: 13px
    ),
    weight: 300,
    color: (
        light: #333333,
        dark: #efefef
    )
);

//== Best font families
$m--font-families: (
    regular: 'Poppins',
    heading: 'Roboto'
);

//== General link font settings
$m--link-font: (
    default: (
        color: (
            light: get-brand-color(),
            dark: get-brand-color()
        )
    ),

    hover: (
        color: (
            light: get-brand-color('+'),
            dark: get-brand-color('+')
        )
    )
);
							
							

You can access to an option by using array-get() function as shown below:

$border-radius: array-get($m--border-radius, general); // 4px;
$brand-base-color: array-get($m--state-colors, brand, base); // #716aca
$brand-inverse-color: array-get($m--state-colors, brand, inverse); // #ffffff

Mixins

You can use Metronic's globally available base mixins in your custom codes. All available mixins can be found here: src/sass/framework/base/_mixins.scss

Functions

You can use Metronic's globally available SASS functions in your custom codes. All available functions can be found here: src/sass/framework/base/_functions.scss

Helper Classes

Class Description
m--margin-[size]
m--margin-top-[size]
m--margin-bottom-[size]
m--margin-left-[size]
m--margin-right-[size]
Margin helper classes where [size] can accept 5, 10, 15, 20, 25, 30, 35, 40, 45 and 50. Example: m--margin-10, m--margin-top-20
m--padding-[size]
m--padding-top-[size]
m--padding-bottom-[size]
m--padding-left-[size]
m--padding-right-[size]
Padding helper classes where [size] can accept 5, 10, 15, 20, 25, 30, 35, 40, 45 and 50. Example: m--padding-10, m--padding-left-20
m--full-height Set full 100% height helper class.
m--valign-top
m--valign-middle
m--valign-bottom
Vertical align the content to top, middle or bottom
m--space-[size] Space helper classes where [size] can accept 5, 10, 15, 20, 30, and 40. Example: m--space-10, m--space-20
m--block-center Helper class to set element centered.
m--align-[alignment] Alignment helper classes where [alignment] can accept right, left and center. Example: m--align-right, m--align-center
m--pull-[direction] Pull element helper classes where [direction] can accept right and left. Example: m--pull-right, m--pull-left
m--img-rounded Image rounded border helper class
m--block-inline Helper class to set element display as inline block.
m--hide Helper class to hide element.
m--clearfix
m--marginless Remove margin helper class
m--img-centered Helper class to set image centered
m--font-transform-u
m--font-transform-l
m--font-transform-c
m--font-transform-i
Text transform helper classes.
m--font-[weight] Weight helper classes where [weight] can accept thin, normal, bold, bolder, boldest and boldest2. Example: m--font-thin, m--font-normal, m--font-bold
m--[type]-font-size-[size] Font size helper classes where [type] can accept text and icon. [size] can accept lg1, lg2, lg3, lg4, lg5, sm1, sm2, sm3, sm4, and sm5. Example: m--icon-font-size-lg3, m--font-normal
m--font-[color]
m--font-inverse-[color]
m--bg-[color]
m--bg-fill-[color]
Font and background color helper classes where [color] can accept brand, metal, light, accent, focus, primary, success, info, warning and danger. Example: m--font-inverse-primary, m--bg-info, m--bg-fill-danger
m--visible-[breakpoint]
m--visible-[breakpoint]-inline-block
m--hidden-[breakpoint]
Helper classes to set visible or hidden for responsive breakpoint. [breakpoint] can accept sm, md, lg, xl, xxl, xxxl. Example: m--visible-sm, m--visible-md-inline-block, m--hidden-xl

Components

Util Class

Util is Metronic's base utility helper class defined in src/js/framework/base/util.js and globally available within the theme.

App Class

App is Metronic's base javascript class defined in src/js/framework/base/app.js and globally available within the theme that handles all the initializaitons of base components such as bootstrap popover and tooltips, scrollable contents(using Custom Scroll plugin), etc.

mDatatable

Overview

Datatable is a Metronic's custom plugin defined in src/js/framework/components/general/datatable.js.

Initialization

Below code shows basic initialization of the datatable from element with attribute ID m_datatable:

<div id="m_datatable"></div>
var datatable = $('#m_datatable').mDatatable(options);

You can also init the datatable using the class name. But the ID attribute is required for the datatable session state such as pagination, query, etc. Datatable save state can be disabled if don't require.

<div class="my_datatable" id="m_datatable"></div>
var datatable = $('.my_datatable').mDatatable(options);
var options = {
    data: {
        type: 'remote',
        source: {
            read: {
                url: 'inc/api/datatables/demos/orders.php',
                method: 'GET',
                // custom headers
                headers: { 'x-my-custom-header': 'some value', 'x-test-header': 'the value'},
                params: {
                    // custom parameters
                    generalSearch: '',
                    EmployeeID: 1,
                    someParam: 'someValue',
                    token: 'token-value'
                },
                map: function(raw) {
                    // sample data mapping
                    var dataSet = raw;
                    if (typeof raw.data !== 'undefined') {
                         dataSet = raw.data;
                    }
                    return dataSet;
                },
            }
        },
        pageSize: 10,
        saveState: {
            cookie: true,
            webstorage: true
        },

        serverPaging: false,
        serverFiltering: false,
        serverSorting: false
    },

    layout: {
        theme: 'default',
        class: 'm-datatable--brand',
        scroll: false,
        height: null,
        footer: false,
        header: true,

        smoothScroll: {
            scrollbarShown: true
        },

        spinner: {
            overlayColor: '#000000',
            opacity: 0,
            type: 'loader',
            state: 'brand',
            message: true
        },

        icons: {
            sort: {asc: 'la la-arrow-up', desc: 'la la-arrow-down'},
            pagination: {
                next: 'la la-angle-right',
                prev: 'la la-angle-left',
                first: 'la la-angle-double-left',
                last: 'la la-angle-double-right',
                more: 'la la-ellipsis-h'
            },
            rowDetail: {expand: 'fa fa-caret-down', collapse: 'fa fa-caret-right'}
        }
    },

    sortable: false,

    pagination: true,

    search: {
      // enable trigger search by keyup enter
      onEnter: false,
      // input text for search
      input: $('#generalSearch'),
      // search delay in milliseconds
      delay: 400,
    },

    detail: {
        title: 'Load sub table',
        content: function (e) {
            // e.data
            // e.detailCell
        }
    },

    rows: {
      callback: function() {},
      // auto hide columns, if rows overflow. work on non locked columns
      autoHide: false,
    },

    // columns definition
    columns: [{
        field: "RecordID",
        title: "#",
        locked: {left: 'xl'},
        sortable: false,
        width: 40,
        selector: {class: 'm-checkbox--solid m-checkbox--brand'}
    }, {
        field: "OrderID",
        title: "Order ID",
        sortable: 'asc',
        filterable: false,
        width: 150,
        responsive: {visible: 'lg'},
        locked: {left: 'xl'},
        template: '{{OrderID}} - {{ShipCountry}}'
    }, {
        field: "ShipCountry",
        title: "Ship Country",
        width: 150,
        overflow: 'visible',
        template: function (row) {
            return row.ShipCountry + ' - ' + row.ShipCity;
        }
    }, {
        field: "ShipCountry",
        title: "Ship Country",
        width: 150,
        overflow: 'visible',
        sortCallback: function (data, sort, column) {
            var field = column['field'];
            return $(data).sort(function (a, b) {
                var aField = a[field];
                var bField = b[field];
                if (sort === 'asc') {
                    return parseFloat(aField) > parseFloat(bField)
                        ? 1 : parseFloat(aField) < parseFloat(bField)
                            ? -1
                            : 0;
                } else {
                    return parseFloat(aField) < parseFloat(bField)
                        ? 1 : parseFloat(aField) > parseFloat(bField)
                            ? -1
                            : 0;
                }
            });
        }
    }],

    toolbar: {
        layout: ['pagination', 'info'],

        placement: ['bottom'],  //'top', 'bottom'

        items: {
            pagination: {
                type: 'default',

                pages: {
                    desktop: {
                        layout: 'default',
                        pagesNumber: 6
                    },
                    tablet: {
                        layout: 'default',
                        pagesNumber: 3
                    },
                    mobile: {
                        layout: 'compact'
                    }
                },

                navigation: {
                    prev: true,
                    next: true,
                    first: true,
                    last: true
                },

                pageSizeSelect: [10, 20, 30, 50, 100]
            },

            info: true
        }
    },

    translate: {
        records: {
            processing: 'Please wait...',
            noRecords: 'No records found'
        },
        toolbar: {
            pagination: {
                items: {
                    default: {
                        first: 'First',
                        prev: 'Previous',
                        next: 'Next',
                        last: 'Last',
                        more: 'More pages',
                        input: 'Page number',
                        select: 'Select page size'
                    },
                    info: 'Displaying {{start}} - {{end}} of {{total}} records'
                }
            }
        }
    }
}

Options

Field Type Description
data.type string Required. Set type to remote for remote data get public URL. local is for local data predefined in variable.
Sample
type: 'remote'
data.source.read.url string If data.type is defined as remote. Type of remote datasource can be static or dynamic. For the static datasource you can define static JSON file URL. And for dynamic datasource with pagination, sorting and filtering need to be defined as above sample. url is required, and params object is optional.
Sample
url: 'inc/api/datatables/demos/orders.php'
data.source.read.method string Request method for ajax request. The value can be GET or POST. The default value is POST.
Sample
method: 'GET'
data.source.read.headers object Headers parameter object will be sent along in the datatable API request headers.
Sample
headers: {
    'x-my-custom-header': 'some value',
    'x-test-header': 'the value'
},
data.source.read.params object Your own API may requires some parameter to call for getting the data. E.g. token, search keywords, IDs, etc. This query parameters object will be sent along in the datatable API request.
Sample
params: {
  generalSearch: '',
  EmployeeID: 1
  token: 'tokenvalue'
}
data.source.read.map function Custom mapping the received data into datatable grid.
Sample
map: function(raw) {
  // sample data mapping
  var dataSet = raw;
  if (typeof raw.data !== 'undefined') {
	dataSet = raw.data;
  }
  return dataSet;
}
data.source.read.timeout number Number of milliseconds before the request ended. Default is 30000, equal to 30 seconds.
Sample
timeout: 30000
data.pageSize number Define page size of data for each request. Default value is 10.
Sample
pageSize: 10
data.saveState.cookie boolean Set true or false to enable/disable datatable state to save in cookie. Default value is true.
Sample
cookie: true
data.saveState.webstorage boolean Set true or false to enable/disable datatable state to save in webstorage. Default value is true.
Sample
webstorage: true
data.serverPaging boolean Enable/disable pagination in server side. Only applied for the remote data.type.
Sample
serverPaging: true
data.serverFiltering boolean Enable/disable filtering in server side. Only applied for the remote data.type.
Sample
serverFiltering: true
data.serverSorting boolean Enable/disable sorting in server side. Only applied for the remote data.type.
Sample
serverSorting: true
Layout
layout.theme string Define which class of theme to apply into datatable.
Sample
theme: 'default'
layout.class string Custom class to add into datatable.
Sample
class: 'm-datatable--brand'
layout.scroll boolean Enable/disable scroll.
Sample
scroll: true
layout.height string Define fixed height for the datatable.
Sample
height: 300
layout.footer boolean Enable/disable footer.
Sample
footer: false
layout.header boolean Enable/disable header.
Sample
header: false
layout.smoothScroll
.scrollbarShown
boolean Enable/disable smooth scroll with the scroll bar.
Sample
smoothScroll: {
  scrollbarShown: true
}
layout.spinner.overlayColor string Spinner background overlay color.
Sample
overlayColor: '#000000'
layout.spinner.opacity number Spinner background opacity.
Sample
opacity: 0
layout.spinner.type string Spinner type.
Sample
type: 'loader'
layout.spinner.state string Spinner state style. Default to brand.
Sample
state: 'brand'
layout.spinner.message boolean
string
Enable/disable loading message during spinner is active. Set boolean or text string message.
Sample
message: true
message: 'Loading..'
layout.icons.sort object Options config for the icons class for sorting icon ascending and descending.
Sample
sort: {
  asc: 'la la-arrow-up',
  desc: 'la la-arrow-down'
}
layout.icons.pagination object Icons for pagination buttons.
Sample
pagination: {
  next: 'la la-angle-right',
  prev: 'la la-angle-left',
  first: 'la la-angle-double-left',
  last: 'la la-angle-double-right',
  more: 'la la-ellipsis-h'
}
layout.icons.rowDetail object rowDetail is for expand and collapse icon for table with child table.
Sample
rowDetail: {
  expand: 'fa fa-caret-down',
  collapse: 'fa fa-caret-right'
}
Others
sortable boolean Enable/disable columns sortable globally.
Sample
sortable: true
pagination boolean Enable/disable pagination globally.
Sample
pagination: true
search.onEnter boolean Set the search input keyup event to enter. The internal search will be triggered using Enter button. Set false to trigger search on keyup any buttons.
Sample
search: {
   onEnter: true,
},
search.input jQuery Pass the jQuery element of input. The datatable will add onKeyup event to the input to trigger the internal search filter the data that already in the table.
Sample
search: {
   input: $('#generalSearch'),
},
search.delay number Control the speed of search and data load request to reduce the search call frequency automatically. Default value is 400ms. Set the number of milliseconds.
Sample
search: {
  // search delay in milliseconds
  delay: 400,
},
Toolbar
toolbar.layout array Set the order of pagination and info by array index.
Sample
layout: ['pagination', 'info']
toolbar.placement array An array list of placement for pagination buttons. Can be multiple values. Set the pagination placement to bottom or top.
Sample
placement: ['bottom']
toolbar.items
.pagination.type
string Pagination type.
Sample
type: 'default'
toolbar.items
.pagination.pages.desktop
object Pagination pages responsive config for desktop. An object that contains layout and pagesNumber.
Default value for layout is default. Define pagesNumber to specify how many number of page for each responsive breakpoint.
Sample
desktop: {
  layout: 'default',
  pagesNumber: 6
}
toolbar.items
.pagination.pages.tablet
object Pagination pages responsive config for tablet. An object that contains layout and pagesNumber.
Default value for layout is default. Define pagesNumber to specify how many number of page for each responsive breakpoint.
Sample
tablet: {
  layout: 'default',
  pagesNumber: 3
}
toolbar.items
.pagination.pages.mobile
object Pagination pages responsive config for mobile. Default value for layout is compact. Layout compact type do not have to specify pagesNumber.
Sample
mobile: {
  layout: 'compact'
}
toolbar.items
.pagination.navigation
object Enable/disable pagination buttons for prev, next, first, last.
Sample
navigation: {
  prev: true,
  next: true,
  first: true,
  last: true
},
toolbar.items
.pagination.pageSizeSelect
array Array of Number for select size dropdown to select pagination size. -1 is used for "All" option.
Sample
pageSizeSelect: [10, 20, 30, 50, 100]
toolbar.items.info boolean Enable/disable display of records and pagination info.
Sample
info: true
Translate
translate.records.processing string Translation for records loading during spinner is active.
Sample
processing: 'Please wait...'
translate.records.noRecords string Translation for no records message.
Sample
noRecords: 'No records found'
translate.toolbar
.pagination.items.default
object Translation for pagination. Contains key for first, prev, next, last, more, input, select.
Sample
default: {
  first: 'First',
  prev: 'Previous',
  next: 'Next',
  last: 'Last',
  more: 'More pages',
  input: 'Page number',
  select: 'Select page size'
}
translate.toolbar
.pagination.items.info
string Translation for info template.
Sample
info: 'Displaying {{start}} - {{end}} of {{total}} records'
Detail
detail.title string Sub table title.
Sample
title: 'Load sub table'
detail.content object A callback function of Datatable instance as a sub table of each record. The callback has one parameter which you can access the row data event.data and child table element in event.detailCell.
Sample
content: function (event) {
}
Rows
rows object An array of columns with options object for each column. First column should be define as a unique key for each records.
rows.callback string Row callback. Deprecated in v5.0.6 Please use rows.beforeTemplate instead.
Sample
callback: function (row, data, index) {
}
rows.beforeTemplate string Row callback that call before template being rendered. Receive 3 params which are the row jQuery element, the row data and row number index.
Sample
beforeTemplate: function (row, data, index) {
}
rows.afterTemplate string Row callback that call after rows has been rendered. Receive 3 params which are the row jQuery element, the row data and row number index.
Sample
afterTemplate: function (row, data, index) {
}
rows.autoHide boolean Auto hide columns which are overflow in a row
Sample
autoHide: true,
Columns
columns array An array of columns with options object for each column. First column should be define as a unique key for each records.
columns[ColName].field string Required. The field name of column.
Sample
field: 'ColumnName'
columns[ColName].title string Required. The title name and will be displayed as header or footer.
Sample
title: 'Column Name'
columns[ColName].sortable boolean Enable/disable sort feature for the column.
Sample
sortable: false
columns[ColName].width number The width size of cells under this column.
Sample
width: 40
columns[ColName].textAlign string The alignment of cells text under this column.
Sample
textAlign: 'center'
columns[ColName].template function
string
A callback function support for column rendering and recieve a parameter object of current row's value. Can be also a string with placeholder and define with field name {{field}}.
Sample
template: function (row) {
  return '' + row.OrderID + '';
}
template: '{{OrderID}}'
columns[ColName].sortCallback function
string
A callback function support for custom sorting.
Input Parameters
Name Type Description
data object JSON string array of original data for sorting
sort string Sorting type of asc for ascending or desc for descending.
column object Column config object
Sample
sortCallback: function (data, sort, column) {
    var field = column['field'];
    return $(data).sort(function (a, b) {
        var aField = a[field];
        var bField = b[field];
        if (sort === 'asc') {
            return parseFloat(aField) > parseFloat(bField)
                ? 1 : parseFloat(aField) < parseFloat(bField)
                    ? -1
                    : 0;
        } else {
            return parseFloat(aField) < parseFloat(bField)
                ? 1 : parseFloat(aField) > parseFloat(bField)
                    ? -1
                    : 0;
        }
    });
}
columns[ColName].overflow string CSS overflow value.
Sample
overflow: 'visible'
columns[ColName].responsive object Set visible or invisible for each responsive breakpoint.
Sample
responsive: {
  visible: 'md',
  hidden: 'lg'
}
columns[ColName].selector object Enable column as selector (checkbox only with no text) and provide custom class name.
Sample
selector: {
  class: 'm-checkbox--solid'
}
columns[ColName].locked object Set the column to which side to be locked or static. Set object with which side left/right as key and the value is which responsive breakpoint to lock.
Sample
locked: {left: 'xl'}

Events

Method Description
m-datatable--on-init Initialization of table.
Input Parameters
Name Type Description
event object Default event object.
options object Datatable ID and initialized options.
m-datatable--on-destroy On datatable destroyed.
Input Parameters
Name Type Description
event object Default event object.
m-datatable--on-layout-updated Event that will be triggered on layout rendering update and resizing datatable.
Input Parameters
Name Type Description
event object Default event object.
args object Provide table parameters, eg. datatable ID attribute
m-datatable--on-ajax-done After ajax request is completed.
Input Parameters
Name Type Description
event object Default event object.
data object List of all records.
m-datatable--on-ajax-fail Ajax request is failed.
Input Parameters
Name Type Description
event object Default event object.
jqXHR object jQuery XMLHttpRequest from jQuery request, include error details.
m-datatable--on-goto-page Navigate to any page number.
Input Parameters
Name Type Description
event object Default event object.
args object Page details.
m-datatable--on-update-perpage Update page size.
Input Parameters
Name Type Description
event object Default event object.
args object Page details.
m-datatable--on-reloaded Reload datatable.
Input Parameters
Name Type Description
event object Default event object.
m-datatable--on-check On check checkbox selector.
Input Parameters
Name Type Description
event object Default event object.
args object Checked records details.
m-datatable--on-uncheck On uncheck checkbox selector.
Input Parameters
Name Type Description
event object Default event object.
args object Unchecked records details.
m-datatable--on-sort Sorting datatable.
Input Parameters
Name Type Description
event object Default event object.
args object Sorting details. Eg. field and sort type of asc or desc.

API Methods

Method Description
datatable.load() Load datatable datasource. Same function with datatable.reload().
datatable.reload() Reload datatable datasource and rerender the table.
datatable.destroy() Destroy the datatable instance and revert the HTML.
datatable.getRecord(id) Select record in the datatable by ID. ID is refers to the value of first column. Use with chaining methods datatable.getColumn(columnName)
Input Parameters
Name Type Description
id string ID is refers to the first columns value of each rows.
datatable.getColumn(columnName) Get column by column name. Use with chaining methods datatable.getValue() to get a cell value.
Input Parameters
Name Type Description
columnName string Column name as defined in datatable options init columns[ColName].field
datatable.getValue() Get selected records values as string.
Returns
string
Sample
datatable.getRecord(1).getColumn('columnName').getValue();
datatable.sort(columnName, sort) Sort datatable by columnName field. Sort by ascending or descending.
Input Parameters
Name Type Description
columnName string Column name as defined in datatable options init columns[ColName].field
sort string Sort type to ascending or descending, can accept value asc and desc.
datatable.setActive(cell) Set datatable selector checkbox to active state.
Input Parameters
Name Type Description
cell string Cell is a string of selector checkbox value.
datatable.setInactive(cell) Set datatable selector checkbox to inactive state.
Input Parameters
Name Type Description
cell string Cell is a string of checkbox value.
datatable.setActiveAll(active) Set datatable selector checkbox active/inactive for all records.
Input Parameters
Name Type Description
active boolean Set records selector active or inactive state by pass the boolean true or false.
datatable.setSelectedRecords()

Deprecated in v5.0.6

Set selected selector checkbox.
datatable.getSelectedRecords() Get selected records.
Returns
jQuery element of selected record rows.
datatable.search(value, column) Execute search method to filter datatable records.
Input Parameters
Name Type Description
value string Value to filter.
column string Column field name which defined in options config.
datatable.setDataSourceParam(param, value) Modify the datasource parameters and save it in datatable state. Must be call datatable.load() to load new modified datasource and rerender table.
Input Parameters
Name Type Description
param string Param key value. Can accept pagination, sort, query.
value string The string value of param.
datatable.getDataSourceParam(param) Get current datasource parameters by param type of pagination, sort, or query.
Input Parameters
Name Type Description
param string Param key value. Can accept pagination, sort, query.
datatable.getDataSourceQuery() A helper function shortcut to datatable.getDataSourceParam('query'). Get current query datasource parameter.
Returns
{
  pagination: {
    field: "ShipDate",
    page: 1,
    pages: 18,
    perpage: 20,
    sort: "asc",
    total: 350
  },
  query: {
  },
  sort: {
    sort: "asc",
    field: "ShipDate"
  }
}
datatable.getCurrentPage() Get current selected page number
Returns
number
datatable.getPageSize() Get current selected page size number.
Returns
number
datatable.getTotalRows() Get total rows of record.
Returns
number
datatable.hideColumn(columnName)

Deprecated in v5.0.6

Hide column by column's field name.
Input Parameters
Name Type Description
fieldName string Field name of the column defined in initialized options.
datatable.showColumn(columnName)

Deprecated in v5.0.6

Show column by column's field name.
Input Parameters
Name Type Description
fieldName string Field name of the column defined in initialized options.
datatable.table() Return the jQuery element of the table
datatable.row(selector) Select a single row from the table by css selector. The method return datatable instance.
Input Parameters
Name Type Description
selector string Class name, id attribute or tag name.
datatable.rows(selector) Select multiple rows from the table by css selector. The method return datatable instance.
Input Parameters
Name Type Description
selector string Class name, id attribute or tag name.
datatable.column(index) Select a single column from the table index. The method return datatable instance.
Input Parameters
Name Type Description
index number Zero-based index number.
datatable.columns(selector) Select multiple columns from the table by css selector. The method return datatable instance.
Input Parameters
Name Type Description
selector string Class name, id attribute or tag name.
datatable.remove() Delete selected a single row or multiples rows.
Can be used after selector methods row(selector) or rows(selector).
datatable.visible(visibility) Set the visibility of selected rows or columns.
Can be used after selector methods row(selector) or rows(selector).
Input Parameters
Name Type Description
visibility boolean Set true to visible, and false to hide.
datatable.nodes() Return nodes of the selected rows or columns.
Can be used after selector methods row(selector) or rows(selector).

Ajax Response

Below is the sample ajax response from back-end for the remote source datatable.

{
    "meta": {
        "page": 1,
        "pages": 35,
        "perpage": 10,
        "total": 350,
        "sort": "asc",
        "field": "ShipDate"
    },
    "data": [
        {
            "RecordID": 10,
            "OrderID": "55154-5393",
            "ShipCountry": "NG",
            "ShipCity": "Sapele",
            "ShipName": "Moen, Kertzmann and Mills",
            "ShipAddress": "1 Nancy Junction",
            "CompanyEmail": "epere9@sina.com.cn",
            "CompanyAgent": "Ely Pere",
            "CompanyName": "Jacobi, O'Conner and Kuhlman",
            "Currency": "NGN",
            "Notes": "adipiscing molestie hendrerit at vulputate vitae nisl aenean lectus pellentesque eget nunc donec quis orci eget orci vehicula",
            "Department": "Shoes",
            "Website": "whitehouse.gov",
            "Latitude": 5.8750769,
            "Longitude": 5.6931356,
            "ShipDate": "1\/1\/2016",
            "PaymentDate": "2017-06-20 10:42:35",
            "TimeZone": "Africa\/Lagos",
            "Status": 3,
            "Type": 1,
            "TotalPayment": "88,211.68 NGN"
        },
        {
            "RecordID": 263,
            "OrderID": "43406-0032",
            "ShipCountry": "US",
            "ShipCity": "Fort Pierce",
            "ShipName": "Moore-Schaden",
            "ShipAddress": "451 Fuller Junction",
            "CompanyEmail": "tdefau7a@google.pl",
            "CompanyAgent": "Tristan Defau",
            "CompanyName": "Mayer and Sons",
            "Currency": "USD",
            "Notes": "mauris enim leo rhoncus sed vestibulum sit amet cursus id turpis integer aliquet massa id lobortis convallis tortor risus",
            "Department": "Music",
            "Website": "cornell.edu",
            "Latitude": 27.3980151,
            "Longitude": -80.3714326,
            "ShipDate": "1\/1\/2017",
            "PaymentDate": "2017-05-21 01:45:57",
            "TimeZone": "America\/New_York",
            "Status": 2,
            "Type": 2,
            "TotalPayment": "7,105.23 USD"
        },
        {
            "RecordID": 77,
            "OrderID": "68016-527",
            "ShipCountry": "PH",
            "ShipCity": "Batarasa",
            "ShipName": "Gibson Inc",
            "ShipAddress": "948 Roxbury Center",
            "CompanyEmail": "smatitiaho24@dailymotion.com",
            "CompanyAgent": "Skippy Matitiaho",
            "CompanyName": "Monahan, Haley and Murphy",
            "Currency": "PHP",
            "Notes": "sit amet consectetuer adipiscing elit proin risus praesent lectus vestibulum quam sapien varius",
            "Department": "Jewelery",
            "Website": "printfriendly.com",
            "Latitude": 8.5015747,
            "Longitude": 117.3557854,
            "ShipDate": "1\/12\/2017",
            "PaymentDate": "2016-09-07 16:34:55",
            "TimeZone": "Asia\/Manila",
            "Status": 1,
            "Type": 3,
            "TotalPayment": "9,541.82 PHP"
        },
        {
            "RecordID": 330,
            "OrderID": "54868-5303",
            "ShipCountry": "PH",
            "ShipCity": "Sillon",
            "ShipName": "Balistreri Group",
            "ShipAddress": "8203 Truax Center",
            "CompanyEmail": "kvickarman95@storify.com",
            "CompanyAgent": "Kipp Vickarman",
            "CompanyName": "Kerluke and Sons",
            "Currency": "PHP",
            "Notes": "lobortis ligula sit amet eleifend pede libero quis orci nullam molestie",
            "Department": "Clothing",
            "Website": "vkontakte.ru",
            "Latitude": 11.186148,
            "Longitude": 123.7487563,
            "ShipDate": "1\/14\/2017",
            "PaymentDate": "2017-05-16 18:29:45",
            "TimeZone": "Asia\/Manila",
            "Status": 6,
            "Type": 1,
            "TotalPayment": "8,300.97 PHP"
        },
        {
            "RecordID": 51,
            "OrderID": "49884-659",
            "ShipCountry": "ID",
            "ShipCity": "Atap",
            "ShipName": "Blanda Group",
            "ShipAddress": "1 Monica Alley",
            "CompanyEmail": "sjackes1e@reuters.com",
            "CompanyAgent": "Shelagh Jackes",
            "CompanyName": "Schiller Inc",
            "Currency": "IDR",
            "Notes": "iaculis justo in hac habitasse platea dictumst etiam faucibus cursus",
            "Department": "Jewelery",
            "Website": "forbes.com",
            "Latitude": 3.8152026,
            "Longitude": 117.1147095,
            "ShipDate": "1\/15\/2016",
            "PaymentDate": "2016-06-24 03:01:19",
            "TimeZone": "Asia\/Makassar",
            "Status": 2,
            "Type": 1,
            "TotalPayment": "8,397.18 IDR"
        },
        {
            "RecordID": 313,
            "OrderID": "23155-179",
            "ShipCountry": "PA",
            "ShipCity": "Potrero Grande",
            "ShipName": "Olson, Schmeler and Little",
            "ShipAddress": "3 Bartillon Place",
            "CompanyEmail": "cgrandison8o@auda.org.au",
            "CompanyAgent": "Corliss Grandison",
            "CompanyName": "Mills-Beatty",
            "Currency": "PAB",
            "Notes": "egestas metus aenean fermentum donec ut mauris eget massa tempor convallis nulla neque libero convallis eget eleifend",
            "Department": "Clothing",
            "Website": "mlb.com",
            "Latitude": 8.881634,
            "Longitude": -79.8268729,
            "ShipDate": "1\/16\/2016",
            "PaymentDate": "2017-12-06 10:30:59",
            "TimeZone": "America\/Panama",
            "Status": 3,
            "Type": 2,
            "TotalPayment": "85,706.89 PAB"
        },
        {
            "RecordID": 153,
            "OrderID": "53341-515",
            "ShipCountry": "MD",
            "ShipCity": "Saharna",
            "ShipName": "Leffler, Sawayn and Denesik",
            "ShipAddress": "07247 Del Sol Hill",
            "CompanyEmail": "fshank48@spotify.com",
            "CompanyAgent": "Findley Shank",
            "CompanyName": "Reilly LLC",
            "Currency": "MDL",
            "Notes": "dui nec nisi volutpat eleifend donec ut dolor morbi vel lectus in quam fringilla rhoncus mauris enim leo",
            "Department": "Industrial",
            "Website": "discuz.net",
            "Latitude": 47.6949791,
            "Longitude": 28.9654659,
            "ShipDate": "1\/17\/2016",
            "PaymentDate": "2017-01-05 15:53:50",
            "TimeZone": "Europe\/Chisinau",
            "Status": 6,
            "Type": 1,
            "TotalPayment": "993,295.17 MDL"
        },
        {
            "RecordID": 112,
            "OrderID": "50580-198",
            "ShipCountry": "PT",
            "ShipCity": "Loureiro",
            "ShipName": "Labadie, Hegmann and Jones",
            "ShipAddress": "9986 Arapahoe Place",
            "CompanyEmail": "bglaister33@bbb.org",
            "CompanyAgent": "Baxie Glaister",
            "CompanyName": "Stark, Haley and Koepp",
            "Currency": "EUR",
            "Notes": "suspendisse potenti in eleifend quam a odio in hac habitasse platea dictumst maecenas",
            "Department": "Tools",
            "Website": "apple.com",
            "Latitude": 41.4808684,
            "Longitude": -8.3624629,
            "ShipDate": "1\/17\/2016",
            "PaymentDate": "2016-04-24 01:53:42",
            "TimeZone": "Europe\/Lisbon",
            "Status": 3,
            "Type": 3,
            "TotalPayment": "9,705.78 EUR"
        },
        {
            "RecordID": 29,
            "OrderID": "30142-106",
            "ShipCountry": "RU",
            "ShipCity": "Loukhi",
            "ShipName": "Klein-Streich",
            "ShipAddress": "61 Cascade Plaza",
            "CompanyEmail": "mgallamores@businesswire.com",
            "CompanyAgent": "Minor Gallamore",
            "CompanyName": "Huels-Strosin",
            "Currency": "RUB",
            "Notes": "sollicitudin ut suscipit a feugiat et eros vestibulum ac est lacinia nisi venenatis tristique",
            "Department": "Beauty",
            "Website": "epa.gov",
            "Latitude": 66.0733463,
            "Longitude": 33.0544476,
            "ShipDate": "1\/17\/2016",
            "PaymentDate": "2016-03-09 04:40:38",
            "TimeZone": "Europe\/Moscow",
            "Status": 2,
            "Type": 2,
            "TotalPayment": "931,956.17 RUB"
        },
        {
            "RecordID": 135,
            "OrderID": "49348-387",
            "ShipCountry": "FR",
            "ShipCity": "Sens",
            "ShipName": "Collins, Hackett and Vandervort",
            "ShipAddress": "594 Hanover Crossing",
            "CompanyEmail": "tkiezler3q@live.com",
            "CompanyAgent": "Tommy Kiezler",
            "CompanyName": "Eichmann and Sons",
            "Currency": "EUR",
            "Notes": "etiam faucibus cursus urna ut tellus nulla ut erat id mauris vulputate elementum nullam varius nulla facilisi",
            "Department": "Toys",
            "Website": "instagram.com",
            "Latitude": 48.1903349,
            "Longitude": 3.2995005,
            "ShipDate": "1\/18\/2017",
            "PaymentDate": "2016-12-28 03:56:57",
            "TimeZone": "Europe\/Paris",
            "Status": 2,
            "Type": 2,
            "TotalPayment": "811,814.44 EUR"
        }
    ]
}
Field Type Description
meta object Meta object should contain the metadata that required for the datatable pagination to work.
meta.page number The current page number.
meta.pages number Total number of pages available in the server.
meta.perpage number Total records per page.
meta.total number Total all records number available in the server
meta.sort string Sort type asc for ascending and desc for descending.
meta.field string Field name which the sort should be applied to.
data array Array of objects.

Angular Datatable

Datatable has no full native Angular directive at the moment. But you can initilize it by jQuery.

To initialize Datatable in Angular, init under ngAfterViewInit or ngOnInit Angular hook function and cast jQuery element object with <any>.

ngAfterViewInit() {
    let datatable = (<any>$('#m_datatable')).mDatatable(options);
}
ngOnInit() {
    let datatable = (<any>$('#m_datatable')).mDatatable(options);
}

Extensions

The datatable can be enhanced by extensions, which give new user interaction and configuration options.
Checkbox
Checkbox extension is use for the checkbox selector logic. Below is the default options.
var datatableOptions = {
   ...
   extensions: {
      checkbox: {
         vars: {
           selectedAllRows: 'selectedAllRows',
           requestIds: 'requestIds',
           rowIds: 'meta.rowIds',
         },
      },
   }
   ...
};
Field Type Description
vars.selectedAllRows string Flag params for selected all rows, to be sent to the server in the request.
vars.requestIds string Enable to request the all rows IDs from server.
vars.rowIds string Response path for all rows IDs in the server response.

mMenu

Overview

mMenu is a Metronic's custom plugin defined in src/js/framework/components/general/menu.js.

The Metronic's Menu components allows to manage both horizontal and vertical multi level menus for both desktop and mobile modes.

Initialization

The below code shows the basic vertical menu initialization with accordion submenu mode:

var menu = new mMenu('m_ver_menu', {
    // submenu setup
    submenu: {
        desktop: {
            // by default the menu mode set to accordion in desktop mode
            default: 'accordion,
            // whenever body has this class switch the menu mode to dropdown
            state: {
                body: 'm-aside-left--minimize',
                mode: 'dropdown'
            }
        },
        tablet: 'accordion', // menu set to accordion in tablet mode
        mobile: 'accordion'  // menu set to accordion in mobile mode
    },

    //accordion setup
    accordion: {
        autoScroll: true,
        expandAll: false
    }
});

The below code shows the basic vertical menu initialization with hoverable dropdown submenu mode:

var menu = new mMenu('m_ver_menu', {
    // submenu setup
    submenu: {
        desktop: {
            // by default the menu mode set to accordion in desktop mode
            default: 'dropdown',
            // whenever body has this class switch the menu mode to dropdown
            state: {
                body: 'm-aside-left--minimize',
                mode: 'dropdown'
            }
        },
        tablet: 'accordion', // menu set to accordion in tablet mode
        mobile: 'accordion'  // menu set to accordion in mobile mode
    },

    //accordion setup
    accordion: {
        autoScroll: true,
        expandAll: false
    }
});

The below code shows the basic horizontal menu initialization:

var menu = new mMenu('m_header_menu', {
    submenu: {
        desktop: 'dropdown',
        tablet: 'accordion',
        mobile: 'accordion'
    },
    accordion: {
        slideSpeed: 200,  // accordion toggle slide speed in milliseconds
        autoScroll: true, // enable auto scrolling(focus) to the clicked menu item
        expandAll: false   // allow having multiple expanded accordions in the menu
    }
});

Options

Field Type Description
autoscroll.speed number

Autoscroll on accordion submenu tag

Sample
autoscroll: {
    speed: 1200
},
accordion.slideSpeed number

Accordion toggle slide speed in milliseconds

Sample
accordion: {
    slideSpeed: 200
},
accordion.autoScroll boolean

Enable auto scrolling(focus) to the clicked menu item

Sample
accordion: {
    autoScroll: true
},
accordion.autoScrollSpeed number

Enable auto scrolling(focus) to the clicked menu item

Sample
accordion: {
    autoScrollSpeed: 1200
},
accordion.expandAll boolean

Allow having multiple expanded accordions in the menu

Sample
accordion: {
    expandAll: true
},
dropdown.timeout number

Timeout in milliseconds to show and hide the hoverable submenu dropdown

Sample
dropdown: {
    timeout: 500
},
submenu.desktop object|string

Submenu setup for desktop. Set default for the menu mode in desktop mode. Whenever any element in HTML has desktop.state.body class switch the menu mode to desktop.state.mode

In the sample below scenario. By default the menu mode set to accordion in desktop mode. Whenever body tag has this class switch the menu mode to dropdown

Sample
submenu: {
    desktop: {
        default: 'accordion',
        state: {
            body: 'm-aside-left--minimize',
            mode: 'dropdown'
        }
    },
},

Events

API Methods

Method Description
setDefaults(options)

Set default options

Input Parameters
Name Type Description
options object

A new options object for the menu

setActiveItem(item)

Set active menu item

Input Parameters
Name Type Description
item HTML object

Menu item HTML element object

getBreadcrumbs(item)

Get breadcrumb for menu item

Input Parameters
Name Type Description
item HTML object

Menu item HTML element object

getPageTitle(item)

Get page title for menu item

Input Parameters
Name Type Description
item HTML object

Menu item HTML element object

hideDropdown(item)

Hide dropdown submenu item

Input Parameters
Name Type Description
item HTML object

Menu item HTML element object

pauseDropdownHover(item)

Disable menu for given time

Input Parameters
Name Type Description
item HTML object

Menu item HTML element object

resumeDropdownHover(item)

Enable menu item back after being paused

Input Parameters
Name Type Description
item HTML object

Menu item HTML element object

getSubmenuMode()

Get submenu mode

reload()

Reload the menu

on(name, handler)

Register event

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

one(name, handler)

Register event to be run once

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

mDropdown

Overview

mDropdown is a Metronic's custom plugin defined in src/js/framework/components/general/dropdown.js.

Initialization

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

var dropdown1 = new mDropdown('m_dropdown_api_1', options);

Options

var options = {
    toggle: 'click',
    hoverTimeout: 300,
    skin: 'light',
    height: 'auto',
    maxHeight: false,
    minHeight: false,
    persistent: false,
    mobileOverlay: true
}
Field Type Description
toggle string

Dropdown toggle

Sample
toggle: 'click'
hoverTimeout number

Dropdown hover timeout in miliseconds

Sample
hoverTimeout: 300
skin string

Dropdown skin theme

Sample
skin: 'light'
height string

Dropdown height CSS in px.

Sample
height: 'auto'
maxHeight string

Dropdown maximum height. Set false to disable.

Sample
maxHeight: false
minHeight string

Dropdown minumum height. Set false to disable.

Sample
minHeight: false
persistent boolean

Enable/disable dropdown persistent.

Sample
persistent: false
mobileOverlay boolean

Enable/disable dropdown overlay in mobile mode.

Sample
mobileOverlay: true

Events

API Methods

Method Description
setDefaults(options)

Set default options

Input Parameters
Name Type Description
options object

A new options object for the menu

setContent(contents)

Set dropdown content

Input Parameters
Name Type Description
contents string

Inner HTML to be placed in the dropdown content

show()

Set show dropdown

hide()

Set hide dropdown

toggle()

Set toggle dropdown

isPersistent()

Check dropdown persistent is enabled or disabled

isShown()

Check dropdown is shown or hidden

on(name, handler)

Register event

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

one(name, handler)

Register event to be run once

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

mHeader

Overview

mHeader is a Metronic's custom plugin defined in src/js/framework/components/general/header.js.

Initialization

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

var header = new mHeader('m_header', options);

Options

var options = {
    classic: false,
    offset: {
        mobile: 150,
        desktop: 200
    },
    minimize: {
        mobile: false,
        desktop: false
    }
}
Field Type Description
classic boolean

Header type

Sample
classic: false
offset object

Set header top offset for both desktop and mobile mode

Sample
offset: {
    mobile: 150,
    desktop: 200
}
minimize object

Set header minimize for both desktop and mobile mode

Sample
offset: {
    mobile: false,
    desktop: false
}

Events

API Methods

Method Description
setDefaults(options)

Set default options

Input Parameters
Name Type Description
options object

A new options object for the menu

on(name, handler)

Register event

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

one(name, handler)

Register event to be run once

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

mOffcanvas

Overview

mOffcanvas is a Metronic's custom plugin defined in src/js/framework/components/general/offcanvas.jsjs.

Initialization

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

horMenuOffcanvas = new mOffcanvas('m_header_menu', {
    baseClass: 'm-aside-left--offcanvas-default',
    overlay: true,
    closeBy: 'm_aside_left_close_btn',
    toggleBy: {
        target: 'm_aside_left_offcanvas_toggle',
        state: 'm-brand__toggler--active'
    }
});

Options

var options = {
    baseClass: 'm-aside-left--offcanvas-default',
    overlay: true,
    closeBy: 'm_aside_left_close_btn',
    toggleBy: {
        target: 'm_aside_left_offcanvas_toggle',
        state: 'm-brand__toggler--active'
    }
}
Field Type Description
overlay boolean

Enable/disable offcanvas overlay

Sample
overlay: true
baseClass string

Set the base class for the offcanvas

Sample
baseClass: 'm-aside-header-menu-mobile'
closeBy string

Define the element for the off canvas to be cloased when this element is clicked

Sample
closeBy: 'm_aside_header_menu_mobile_close_btn'
toggleBy object

Define which element for the toggle and set the active state class name

Sample
toggleBy: {
    target: 'm_aside_header_menu_mobile_toggle',
    state: 'm-brand__toggler--active'
}

Events

API Methods

Method Description
setDefaults(options)

Set default options

Input Parameters
Name Type Description
options object

A new options object for the menu

show()

Set show dropdown

hide()

Set hide dropdown

on(name, handler)

Register event

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

one(name, handler)

Register event to be run once

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

mPortlet

Overview

mHeader is a Metronic's custom plugin defined in src/js/framework/components/general/portlet.js.

Initialization

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

 var portlet = new mPortlet('m_portlet_tools_1', options);

Options

var options = {
    bodyToggleSpeed: 400,
    tooltips: true,
    tools: {
        toggle: {
            collapse: 'Collapse',
            expand: 'Expand'
        },
        reload: 'Reload',
        remove: 'Remove',
        fullscreen: {
            on: 'Fullscreen',
            off: 'Exit Fullscreen'
        }
    }
};
Field Type Description
bodyToggleSpeed number

Set the portlet body toggle speed in miliseconds

Sample
bodyToggleSpeed: 400
tooltips boolean

Enable/disable portlet tooltips

Sample
tooltips: true
tooltips boolean

Enable/disable portlet tooltips

Sample
tooltips: true
tools.toggle object

Portlet toggle tools options. Set the title for the collapse and expand toggle.

Sample
tools: {
    toggle: {
        collapse: 'Collapse',
        expand: 'Expand'
    }
}
tools.reload string

Set portlet reload title in the tools.

Sample
tools: {
    reload: 'Reload',
}
tools.remove string

Set portlet remove title in the tools.

Sample
tools: {
    remove: 'Remove',
}
tools.fullscreen object

Set portlet fullscreen title in the tools.

Sample
tools: {
    fullscreen: {
        on: 'Fullscreen',
        off: 'Exit Fullscreen'
    }
}

Events

API Methods

Method Description
setDefaults(options)

Set default options

Input Parameters
Name Type Description
options object

A new options object for the menu

setContent(contents)

Set dropdown content

Input Parameters
Name Type Description
contents string

Inner HTML to be placed in the dropdown content

remove()

Remove the portlet

reload()

Reload the portlet

toggle()

Toggle the portlet to collapse or expand

collapse()

Set portlet to collapse

expand()

Set portlet to expand

fullcreen()

Set portlet to fullscreen

unFullcreen()

Set portlet to default minimize

getBody()

Get the portlet body as HTML object

getSelf()

Get the portlet as HTML object

on(name, handler)

Register event

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

one(name, handler)

Register event to be run once

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

mQuicksearch

Overview

mQuicksearch is a Metronic's custom plugin defined in src/js/framework/components/general/quicksearch.js.

Initialization

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

var quicksearch = new mQuicksearch('m_quicksearch', options);

Options

var options = {
    mode: 'default', //'default/dropdown'
    minLength: 1,
    maxHeight: 300,
    requestTimeout: 200, // ajax request fire timeout in milliseconds
    inputTarget: 'm_quicksearch_input',
    iconCloseTarget: 'm_quicksearch_close',
    iconCancelTarget: 'm_quicksearch_cancel',
    iconSearchTarget: 'm_quicksearch_search',

    spinnerClass: 'm-loader m-loader--skin-light m-loader--right',
    hasResultClass: 'm-list-search--has-result',

    templates: {
        error: '<div class="m-search-results m-search-results--skin-light"><span class="m-search-result__message">{{message}}</div></div>'
    }
};
Field Type Description
mode string

Quick search mode. Accepted values are default and dropdown

Sample
mode: 'default'
minLength number

Minimum length of records to be displayed

Sample
minLength: 1
maxHeight number

Maximum height of result to be displayed

Sample
maxHeight: 300
requestTimeout number

The timeout in miliseconds for the request

Sample
requestTimeout: 200
inputTarget string

The target of input textbox where the search action to be triggered

Sample
inputTarget: 'm_quicksearch_input'
iconCloseTarget string

Set the icon for the search close

Sample
iconCloseTarget: 'm_quicksearch_close'
iconCancelTarget string

Set the icon for the search cancel

Sample
iconCancelTarget: 'm_quicksearch_cancel'
iconSearchTarget string

Set the icon for the search

Sample
iconSearchTarget: 'm_quicksearch_search'
spinnerClass string

Set spinner icon class name to be displayed during search action

Sample
spinnerClass: 'm-loader m-loader--skin-light m-loader--right'
hasResultClass string

Set search result class name when the search has result

Sample
hasResultClass: 'm-list-search--has-result'
templates.error string

The error template in HTML format, to be displayed when the search result has error. Add the placeholder {{message}} in the template, and it will be replaced by showError(message) API method.

Sample
templates: {
    error: '<div class="m-search-results m-search-results--skin-light"><span class="m-search-result__message">{{message}}</div></div>'
}

Events

API Methods

Method Description
setDefaults(options)

Set default options

Input Parameters
Name Type Description
options object

A new options object for the menu

showResult(response)

Show the result of the search

Input Parameters
Name Type Description
response string

The search result response to be displayed

showError(message)

Show the error based of the template error defined in the options. {{message}} placeholder in the error template will be replaced by the message parameter.

Input Parameters
Name Type Description
message string

The text for the error

showProgress()

Show the search progress bar

hideProgress()

Hide the search progress bar

search()

Trigger search manually

on(name, handler)

Register event

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

one(name, handler)

Register event to be run once

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

mScrolltop

Overview

mScrolltop is a Metronic's custom plugin defined in src/js/framework/components/general/scroll-top.js.

Initialization

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

var scrollTop = new mScrollTop('m_scroll_top', options);

Options

var options = {
    offset: 300,
    speed: 600
};
Field Type Description
offset number

Bottom offset for the scroll top button icon

Sample
offset: 300
speed number

Speed of scroll to the top page

Sample
speed: 600

Events

API Methods

Method Description
setDefaults(options)

Set default options

Input Parameters
Name Type Description
options object

A new options object for the menu

on(name, handler)

Register event

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

one(name, handler)

Register event to be run once

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

mToggle

Overview

mToggle is a Metronic's custom plugin defined in src/js/framework/components/general/toggle.js.

Initialization

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

var asideLeftToggle = new mToggle('m_aside_left_minimize_toggle', options);

Options

var options = {
    target: 'body',
    targetState: 'm-brand--minimize m-aside-left--minimize',
    togglerState: 'm-brand__toggler--active'
}; 
Field Type Description
target string

The target for the class name changed

Sample
target: 'body'
targetState string

The state class name to be added to the target

Sample
targetState: 'm-brand--minimize m-aside-left--minimize'
togglerState string

The active state for the toggler

Sample
togglerState: 'm-brand__toggler--active'

Events

API Methods

Method Description
setDefaults(options)

Set default options

Input Parameters
Name Type Description
options object

A new options object for the menu

getState()

Get toggler state

toggle()

Toggle the toggler

toggleOn()

Set the toggler on

toggleOff()

Set the toggler off

on(name, handler)

Register event

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

one(name, handler)

Register event to be run once

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

mWizard

Overview

mWizard is a Metronic's custom plugin defined in src/js/framework/components/general/wizard.js.

Initialization

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

var wizard = new mWizard('m_wizard',options);

Options

var options = {
    startStep: 1,
    manualStepForward: false
};
Field Type Description
startStep number

The page number of step to start at the initial load

Sample
startStep: 1
manualStepForward boolean

Set enable/disable to manually step forward

Sample
manualStepForward: false

Events

API Methods

Method Description
setDefaults(options)

Set default options

Input Parameters
Name Type Description
options object

A new options object for the menu

goNext()

Go to the next step

goPrev()

Go to the previous step

goLast()

Go to the last step

goFirst()

Go to the first step

getStep()

Get current step page number

isLastStep()

Check if the current step number is the last step

isFirstStep()

Check if the current step number is the first step

goTo(number)

Jump the step page into the specified step number

Input Parameters
Name Type Description
number number

Number of step to jump

on(name, handler)

Register event

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

one(name, handler)

Register event to be run once

Input Parameters
Name Type Description
name string

Unique event name

handler function

Callback function handler for the event

Angular

Overview

Angular is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser.

Files Structure

Angular source code can be found in [root]/dist/[demo_id]/.
Below the list of demo file structure in Angular app.
Path Description
app The final build of Angular
node_modules The node_modules/ directory is only for build tools. The package.json file in the app root defines what libraries will be installed into node_modules/ when you run npm install.
src Main source folder
app Main app folder
_directives Contains directive for HTML modification
_services Services for script lazy loader
auth Authentication module for registration, login, and forgot password.
theme This is where theme partials is located.
app.component.html Main app template
app.component.ts Main app typescript
app.module.ts Main app module. The place where to import and declare required components.
app-routing.module.ts Base routing for the app. More routes can be found in theme folder
helpers.ts Helper functions
assets This folder will contain all the assets needed for app that are not related to Angular code.
environments This folder contains one file for each of destination environments, each exporting simple configuration variables to use in application
index.html The index.html lives at the root of front-end structure. The index.html file will primarily handle loading in all the libraries and Angular elements.
main.ts The main entry point for your app.
polyfills.ts

Angular is built on the latest standards of the web platform. A particular browser may require at least one polyfill to run any Angular application. You may need additional polyfills for specific features.

IE9, IE10 and IE11 requires to enable polyfills. Read more angular.io/guide/browser-support

styles.ts Global styles go here which styles that affect all of your app need to be in a central place.
tsconfig.app.ts TypeScript compiler configuration for the Angular app.
typings.ts TypeScript adds static typing to JavaScript.
.angular-cli.json Angular CLI loads its configuration from .angular-cli.json
package.json A package.json file contains meta data about app or module. Most importantly, it includes the list of dependencies to install from npm when running npm install.
tsconfig.json tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.

Installation

Please build the theme first at Tasks section before start to build the Angular app.

Angular CLI

Angular CLI is a command line interface for the latest Angular. Please install it before start with the Angular app.

npm install --global @angular/cli@latest

If you have Angular CLI installed previously, please update it to the latest Angular CLI. Remove the older version and re-install it.

npm uninstall --global @angular/cli
npm install --global @angular/cli@latest

Angular for production

Run this command line in the Angular demo directory. This build process will use method of ahead-of-time (AOT) compilation. The ahead-of-time (AOT) compiler can catch template errors early and improve performance by compiling at build time.
The compiled Angular app will be in the folder [root]/dist/[demo_id]/.

ng build --prod

With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.

ng build --prod --op=app

--op=app to specify which folder to output. If not set, dist folder will be the default.
For demo, please run build with --op=app for the Angular demo links in the documentation to work.

If you're serving the app out of a subfolder, edit a version of index.html to set the base href appropriately. For example, if the URL to index.html is www.mysite.com/my/app/index.html, set the base href to:

<base href="/my/app/">

You also can set the base href right in the ng build command

ng build --prod --base-href="/my/app/"

Ahead-of-time (AOT) vs just-in-time (JIT)

There is actually only one Angular compiler. The difference between AOT and JIT is a matter of timing and tooling. With AOT, the compiler runs once at build time using one set of libraries; with JIT it runs every time for every user at runtime using a different set of libraries. To use JIT build, run this command line to build.

ng build --prod --aot=false

Possible issues with Angular build

AOT build process can be failed due to JavaScript heap out of memory error. This is a known issue of Angular-cli. For the the temporary solution of this issue, you can use this workaround to increase allowed memory for node process.

For Windows users:

node --max_old_space_size=8192 "node_modules\@angular\cli\bin\ng" build --prod

For Linux and Mac users:

node --max_old_space_size=8192 ./node_modules/.bin/ng build --prod

Polyfills

Angular is built on the latest standards of the web platform. Targeting such a wide range of browsers is challenging because they do not support all features of modern browsers. A particular browser may require at least one polyfill to run any Angular application. You may need additional polyfills for specific features.

To support Angular in IE, open this file [root]/dist/[demo_id]/src/polyfills.ts. Uncomment all the imports under Browser Polyfills list and classlist.js

Read more about browser support here https://angular.io/guide/browser-support

Tools

Build Angular project

After generating Angular version layout from the builder, the generated Angular source code can be found in [root]/dist/. Each demo will generate different Angular app.

To setup Angular app, go to Angular app root and install Angular dependencies by this command line.

npm install

Start node development server for Angular by this command line, then you can access it at http://localhost:4200 via browser.

npm start

This is optional tool for formatting Angular source code which is Typescript. When you run npm install, formatting will be done automatically. But, everytime you generate a new Angular app, you will need to run this manually to reformat the source code.

npm run tsformat

Sample Codes

How to use Metronic mApp and mUtil

mApp and mUtil are the Metronic base utilize class that privide helper functions. The source files are located at [root]/src/js/framework/base/

Declare mApp or mUtil at the top of the component.

declare let mApp: any;
declare let mUtil: any;

Sample code

mApp.blockPage();
mApp.unblockPage();

Online Layout Builder

You can use the Metronic online layout builder for the latest theme version using following URL:
https://keenthemes.com/metronic/preview/?page=builder&demo=default

You can switch to a specific demo by spesifing the demo ID in the URL:
https://keenthemes.com/metronic/preview/?page=builder&demo=[demo_id]

API Reference

Sample API in theme demos are included for user references. [root]/docs/api_reference. These server side scrips and json files are used by datatable, dropzone, jstree, typeahead and other plugin demos.

The sample API is built using PHP code. Please check the section Config and Tasks above for updating the API URL in the source to our demo site.

.NET Integration

ASP.NET Zero - Metronic .NET Integration

ASP.NET Zero is a starting point for new web projects based on our Metronic Theme UI. For more info please visit the product website.

Get it as your base application and directly start to develop your business code with:

  • SOLID architecture
  • Material design UI
  • Cross-cutting concerns implemented
  • Built with best practices
  • Well documented
  • Full source code included

For more info please check Full List Of Features.



Mecons - .NET Tag Helpers Library For Metronic

Mecons is the Most complete & trusted Tag Helper Library for Metronic. Mecons comes with Metronic 5, the most completed & trusted Admin Theme and UI Framework:

  • 30+ Components and Controls for Metronic
  • Validation States for Data Binding
  • Intellisense Support in Visual Studio
  • Provisioning over Bower and NuGet
  • Free and up-to-date Online Documentation
  • Full source code included

For more info please check Full List Of Features.

More Resources

Keenthemes Freebies

Our collection of bootstrap themes and templates are totally free and you may use them for your private or commercial projects at absolutely no cost.


Hire Us

If you need theme customization or custom web development, please provide your project details using this form and one of our well established development partners will get back to you with a free quote.


JANGO - The Powerful HTML5 Component Based Bootstrap Frontend Theme

JANGO is a multi-purpose Bootstrap HTML5 component based theme. JANGO is incredibly robust and flexible that will easily be able to support every site development such as corporate, portfolio, blogs, product showcases, landing / one-page sites and much more to power any starting point for new web projects based on our Metronic Theme UI. For more info please visit the product page.


JANGO Drupal - The Ultimate Drupal 7/8 Theme With Layout Builder

JANGO Drupal is an ever expanding, fully responsive and multi-purpose Drupal 7/8 theme powered by Visual Shortcodes and Layout Builder. For more info please visit the product page.

References

Term Link
Node.js https://nodejs.org/en/
NPM https://www.npmjs.com/
Gulp https://gulpjs.com/
Angular https://angular.io/
Ahead-of-Time (AOT) https://angular.io/guide/aot-compiler
jQuery https://jquery.com/
Bootstrap http://getbootstrap.com/
Popper.js https://popper.js.org/
JavaScript Cookie https://github.com/js-cookie/js-cookie
SweetAlert2 https://limonte.github.io/sweetalert2/
JQuery Smooth Scroll https://www.npmjs.com/package/jquery-smooth-scroll
jQuery Form Plugin http://malsup.com/jquery/form/
jQuery custom content scroller http://manos.malihu.gr/jquery-custom-content-scroller/
jQuery BlockUI Plugin http://malsup.com/jquery/block/
Prism http://prismjs.com/
Bootstrap Datepicker https://bootstrap-datepicker.readthedocs.io/en/latest/
DateTime Picker http://www.malot.fr/bootstrap-datetimepicker/
Moment.js https://momentjs.com/
Bootstrap Timepicker https://github.com/jdewit/bootstrap-timepicker
Date Range Picker http://www.daterangepicker.com/
Bootstrap TouchSpin https://www.virtuosoft.eu/code/bootstrap-touchspin/
Bootstrap Maxlength http://mimo84.github.io/bootstrap-maxlength/
Bootstrap Switch http://bootstrapswitch.com/
Bootstrap Selectsplitter https://github.com/xavierfaucon/bootstrap-selectsplitter
Bootstrap Select http://silviomoreto.github.io/bootstrap-select/
Select2 https://select2.github.io/
typeahead.js https://twitter.github.io/typeahead.js/
jQuery Input Mask plugin http://robinherbots.github.io/Inputmask/
Autosize http://www.jacklmoore.com/autosize
clipboard.js https://clipboardjs.com/
Ion.RangeSlider http://ionden.com/a/plugins/ion.rangeSlider/en.html
DropzoneJS http://www.dropzonejs.com/
Summernote http://summernote.org
Bootstrap Markdown http://www.codingdrama.com/bootstrap-markdown/
jQuery Validation Plugin https://jqueryvalidation.org/
Bootstrap Notify http://bootstrap-notify.remabledesigns.com/
Animate.css https://daneden.github.io/animate.css/
Toastr https://github.com/CodeSeven/toastr
jsTree http://jstree.com/
morris.js http://morrisjs.github.io/morris.js/
Chartist.js https://gionkunz.github.io/chartist-js/
Chart.js http://www.chartjs.org
Bootstrap Session Timeout https://github.com/orangehill/bootstrap-session-timeout
Jquery Idletimer https://github.com/thorst/jquery-idletimer
Counter-Up http://bfintal.github.io/Counter-Up/demo/demo.html
Waypoints http://imakewebthings.com/waypoints/
Socicon http://www.socicon.com/
Font Awesome http://fontawesome.io/
Flaticon https://www.flaticon.com/
Gmaps.js http://hpneo.github.io/gmaps/
jQuery Vector Maps https://jqvmap.com/
Flot http://www.flotcharts.org/
Owl Carousel 2 https://owlcarousel2.github.io/OwlCarousel2/
Popper.js https://popper.js.org/popper-documentation.html
Tooltip.js https://popper.js.org/tooltip-examples.html

The Ultimate Bootstrap Admin Theme Trusted By Over 50,000 Developers World Wide