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. Extract zip file. Extracted zip file will have 2 folders.
    • docs
    • theme
  3. Download and install Node.js from nodejs.org/en/download/
  4. Start command prompt window or terminal and change directory to [metronic_dir]/theme/[version_package]/tools/
    cd theme/angular/tools
    cd theme/default/tools
  5. Install the latest version of npm.
    npm install --global npm@latest
  6. Install the latest version of yarn.
    npm install --global yarn
  7. Install gulp.
    npm install --global gulp-cli
  8. Install yarn dependencies. Must execute in [metronic_dir]/theme/[version_package]/tools/ folder.
    yarn install
  9. Compile scss and javascript using gulp. You need to run this command everytime scripts under [metronic_dir]/theme/[version_package]/src has been changed. This command must execute in the [metronic_dir]/theme/[version_package]/tools folder.
    gulp --prod
  10. Run Angular application
    cd [metronic_dir]/theme/angular/dist/demo/[demo_id]
    npm install
    ng serve
  11. Default static HTML location
    cd [metronic_dir]/theme/default/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

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 [metronic_dir]/theme/[version_package]/tools/ directory, remove the old bower_components folder. Run yarn install command to install dependencies using yarn.

yarn install

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.

Please note that [metronic_dir] in the path introduce in this documentation, referred to the root folder where you will unzip/unpack the Metronic theme location.

[version_package] is refers to the package type version.

  • default is the default HTML version
  • angular is the Angular app
Path Description
docs The theme documentation
theme The theme folder
[version_package] Theme version package folders, either default or angular
dist Theme versions folder
angular Theme angular version.
default The angular version of the defult demo.
.. Other demos
html Theme classic version
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: [metronic_dir]/theme/[version_package]/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: [metronic_dir]/theme/[version_package]/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 [metronic_dir]/theme/[version_package]/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.angular & config.dist.html 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/[version_package]/src",
            "node_modules": "./node_modules",
            "demo_api_url": "http://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/[version_package]/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 [metronic_dir]/theme/[version_package]/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 [metronic_dir]/theme/[version_package]/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 [metronic_dir]/theme/[version_package]/tools/

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

yarn install

For the first time or after every modification in [metronic_dir]/theme/[version_package]/src/, run below task to compile the assets as defined in [metronic_dir]/theme/[version_package]/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 directory, gulp command may not work. Please use gulp --angular for the assets compilation.

gulp --angular

Base theme CSS & JS in [metronic_dir]/theme/[version_package]/src/. When you run gulp, all CSS & JS from [metronic_dir]/theme/[version_package]/src/ will be compiled and place into several demo locations, for Angular and HTML static. The compile output folder is defined in [metronic_dir]/theme/[version_package]/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 [metronic_dir]/theme/[version_package]/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 [metronic_dir]/theme/[version_package]/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 [metronic_dir]/theme/[version_package]/src/sass/framework/_config.scss by the demo level config [metronic_dir]/theme/[version_package]/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.

Menu Component

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

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

var menu = $('#m_menu').mMenu({
  // submenu settings
  submenu: {
  	// breakpoints
    desktop: {
      default: 'accordion', // by default the submenu mode set to accordion
      state: {
        body: 'm-aside-left--minimize', // whenever the page body has this class switch the submenu mode to dropdown
        mode: 'dropdown'
      }
    },
    tablet: 'accordion', // the submenu mode set to accordion for tablet
    mobile: 'accordion' // the submenu mode set to accordion for mobile
  },

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

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

var menu = $('#m_menu').mMenu({
  // submenu settings
  submenu: {
  	// breakpoints
    desktop: 'dropdown', // the submenu mode set to dropdown for desktop
    tablet: 'accordion', // the submenu mode set to accordion for tablet
    mobile: 'accordion' // the submenu mode set to accordion for mobile
  },

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

The below code shows the basic horizontal menu initialization:

var menu = $('#m_menu').mMenu({
  // submenu modes
  submenu: {
    desktop: 'dropdown',
    tablet: 'accordion',
    mobile: 'accordion'
  },
  // resize menu on window resize
  resize: {
    desktop: function() {
      var headerNavWidth = $('#m_header_nav').width();
      var headerMenuWidth = $('#m_header_menu_container').width();
      var headerTopbarWidth = $('#m_header_topbar').width();
      var spareWidth = 20;

      if ((headerMenuWidth + headerTopbarWidth + spareWidth) > headerNavWidth) {
        return false;
      } else {
        return true;
      }
    }
  }
});

API Methods

Method Description
menu.setActiveItem(item) Sets given menu item(e.g LI tag with m-menu__item class) as active. item is jQuery element object.
menu.getBreadcrumbs(item) Gets breadcumbs path for the give item. item is jQuery element object. Returns array of parents of the given item.

Dropdown Component

Dropdown component used to display flexible dropdown content

The below examples code shows basic dropdown initialization:

var dropdown = $('#m_dropdown').mDropdown();
Method Description
dropdown.show() Shows the dropdown
dropdown.hide() Hides the shown dropdown
dropdown.isShown() Checkes whether the dropdown is shown.
Returns
boolean
dropdown.setContent(content) Replaces the dropdown inner content.
Input Parameters
Name Type Description
content string Content to replace
Returns
boolean
dropdown.on(event, handler) Registers the dropdown event handler.
Input Parameters
Name Type Description
event string Event type of available events:
beforeShow
afterShow
beforeHide
afterHide
handler function Event handler function
Sample
dropdown.on('afterShow', function(dropdown) {
	if (dropdown.isShown() == false) {
  		// do some action
 	}
});

Portlet Component

Portlet component used to display flexible portlet content

The below examples code shows basic portlet initialization:

var portlet = $('#m_portlet').mPortlet();
Method Description
portlet.remove() Remove portlet.
portlet.reload() Reload portlet.
portlet.setContent() Set portlet content.
portlet.collapse() Collapse portlet
portlet.expand() Expand portlet
portlet.fullscreen() Fullscreen portlet
portlet.unFullscreen() Unfullscreen portlet
portlet.getBody() Get portletbody
portlet.getSelf() Get portletbody
portlet.on(event, handler) Add event to portlet with callback
Input Parameters
Name Type Description
event string Event name
handler function Callback handler function
Returns
boolean
portlet.one(event, handler) Set portlet content
Input Parameters
Name Type Description
event string Event name
handler function Callback handler function
Returns
boolean

Wizard Component

Form wizard component presents a user with a sequence of form inputs group that lead the user through a well-defined steps.

The below examples code shows basic form wizard initialization:

var wizard = $('#m_wizard').mWizard();

Options

Field Type Description
startStep number Initial step number
Sample
startStep: 1

API

Method Description
wizard.goNext() Go to the next step.
wizard.goPrev() Go to the previous step.
wizard.goLast() Go to the last step.
wizard.goFirst() Go to the first step.
wizard.goTo() Go to a step specified by step number.
Input Parameters
Name Type Description
number number Step number.
Returns
boolean
wizard.getStep() Get current step number.
wizard.isLastStep() Check last step.
wizard.isFirstStep() Check first step.
wizard.on(event, handler) Attach event to wizard with callback
Input Parameters
Name Type Description
event string Event name
handler function Callback handler function
Returns
boolean
wizard.one(event, handler) Attach event that will be fired once
Input Parameters
Name Type Description
event string Event name
handler function Callback handler function
Returns
boolean

Datatable

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 query params
                    query: {
                        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: {
  query: {
    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.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.

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 [metronic_dir]/theme/angular/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 [metronic_dir]/theme/angular/dist/[demo_id]/dist/.

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 [metronic_dir]/theme/angular/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 [metronic_dir]/theme/angular/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 [metronic_dir]/theme/[version_package]/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();

Blank Project

Basic files/folders for Angular?

Take one of the Angular demo. Eg. [metronic_dir]/theme/angular/dist/default/.
Remove all files and folders under /src/app/theme/pages/. This is where the pages is located.
Please note that all files under /src/app/theme/layouts/ is required for the theme layout, like header, footer, menu templates, etc.
Remove demo pages routes from routing file /src/app/theme/theme-routing.module.ts.

Online Layout Builder

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

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

API Reference

Sample API in theme demos are included for user references. [metronic_dir]/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.

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/

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