New
bootstrap-datepicker
and bootstrap-datetimepicker
locale example.Updates & Improvements
typeahead.js
.Fixes
KTDatatable
on screen change (resize, orientation change, etc.)KTDatatable
multiple search request on every button's keyup. Eg. arrow keys, F4, ESC, etc.datatables.net
API undefined function in webpack build.AuthPage
component.KtContent
component.KTUtil.scrollTo()
from scrolling back to the top.KTDatatable
JS error on page initialize.KTDatatable
perpage dropdown wrong position.New
ReactJS
version for Demo3
. Live PreviewReactJS
version for Demo4
. Live PreviewLaravel + Metronic
integration manual. Live PreviewBreadCrumbs
component for React version.Updates & Improvements
Bootstrap v4.4.1
update.type="text"
react
version; v16.12.0
.formik
version; v2.0.6
@material-ui/core
version; v4.7.0
Fixes
KTDatatable
pagination size container in Child data table.Flaticon
icon's position in button for RTL.KTDatatable
active row count.Dual-Listbox
duplicates item in the list.Bootstrap-Touchspin
wrong increment/decrement.DropdownToggle React.forwardRef
issue.Layout components multi re-render
issue.KTDatatable
to set start page 0 if the is no records. eg. Showing 0 - 0 of 0Fixes
Dual-Listbox
duplicate items.demo4
PHP warning errors.Updates & Improvements
v8.2.13
ng-bootstrap
version; v5.1.2
v4.0.2
Fixes
Aside
display issue for all demos on window resize.Angular Demo2
header dropdown issue.KTDatatable
responsiveness during screen orientation change.KTDatatable
horizontal scrollbar in mobile screen mode for table with child.KTDatatable
inifinite scroll on Edge browser.New
React
- Add routing code-splitting example.Figma
pages for:
Country Flags
in SVG format.Updates & Improvements
React
- Updated react-router behaviour. (After login user will redirect to the last location).React
- Upgrade react version (to v16.10.2).React
- Upgrade create-react-app version (to v3.2.0).React
- Upgrade MaterialUI version (to v4.5.1).Angular
update version 8.2.11
Fixes
Demo 3
mobile user bar and dropdown menu position issue.Login Page
animate issue when build using webpack.KTDatatable
date sorting issue on dashboard page.noUiSlider
style when compile using webpack.KTWizard
get index.Dragging Scrollbar
issue in RTL.webpack
check for existing folder on creating new folder.New
ReactJS
version for Demo2
. Live PreviewKanban Board
plugin integration. Live PreviewUpdates & Improvements
mouseEnter
and mouseLeave
function from React MenuHorizontalComponent
. Use KTMenu
dropdown timeout option to handle hover.React Demo1
search control updates.Classic Version
of the theme has been excluded from the original download package due to increasing size of the theme.
It still can be provided for the latest available version of the theme upon request via support@keenthemes.com.
We highly recommend everyone to use the buildable version(gulp or webpack) instead for more efficient development.
Fixes
React Demo 1 Header
Dropdown Menu delayed hover issue.Dual-Listbox
plugin issue in the latest version and use v1.1.0.KTDatatable
sample page "Cross-Origin Resource Sharing (CORS)" error.Dual-Listbox
. Removed $this.empty()
to fix empty previously selected option when saving.Login-3
page javascript error.New
ReactJS
version for Demo1
.CKEditor
plugin integration. Live Preview.TinyMCE
plugin integration. Live Preview.Updates & Improvements
Datatables.net
plugin update to the latest version.Fixes
KTDatatable
horizontal scroll demo page.Sweetalert2
page text description.KTDatatable
horizontal scrolling.KTUtil.scrollUpdate()
.bootstrap-select
error icon's alignment.KTWizard.goTo()
method call inside beforeNext
and beforePrev
events.KTWizard
Plugin.getFirstStep is not a function error.New
Sticky-js
plugin integrating for Sticky Panels examples. Live PreviewUpdates & Improvements
Font-family
variables to include fallback list of similar default fonts.Metronic Avatar
custom plugin. Live PreviewFixes
New
Todo
app. Live Preview20+ Figma
design pages.Updates & Improvements
Angular
verison. Learn more.Fixes
Bootstrap Switch
default checked state issue by downgrading it to v3.3.4Default
version.Angular
production build error.Angular Demo4
during scroll up and down.KTDatatable
visibility. The hidden columns will be reappeared on switching screen between desktop and mobile view.Angular
dropdown toggle arrow.jquery-validation
and jquery-form
plugin to the webpack build.Updates & Improvements
default
and classic
version demos into stand-alone demos with independent templates, assets and build tools.build.json
to gulp.config.json
in default version.vendors
folder to the new folder plugins
.vendors.bundle.css
and vendors.bundle.js
files to plugins.bundle.css
and plugins.bundle.js
accordingly.v8.2.5
v6.5.3
New
Dark Header
layout skin for Demo 1
. Live PreviewLight Aside
layout skin for Demo 1
. Live PreviewDemo 1
layout builder. Live PreviewUpdates & Improvements
HttpHeaders.append()
to HttpHeaders.set()
in auth service getUserByToken()
functionimg
to images
.Fixes
components
menu items.gulp
assets' path rewrite for nested assets folder.jquery-form
include in webpack
.New
Webpack
version of the bulding tools. Learn moreMail Inbox
app. Live PreviewTagify
plugin integration to support advanced tags inputs. Live previewGmail Like Multipe File Upload
using DropzoneJs
with manual and auto uploading of individual files. Live previewUppy File Upload
sleek, modular open source JavaScript file uploader plugin. Live previewDual Listbox
plugin to make multi select pretty and easy to use. Live previewUpdates & Improvements
gulp
build tool from the Angular and now use the Metronic's core assets source (SCSS, JS, etc.) directly.assets/sass/theme/demos/
to assets/sass/theme/layout/
minHeight: 500
from KTDatatable default option and make it as optional option.Fixes
Demo 7
JS error on aside submenu toggle.Demo 4
subheader layout issue on mobile view.Demo 4
missing aside menu's mobile toggle button in user profile pages.KTDatatable
columns visibility in hide mode when in mobile view.Angular Splash Screen
position issue on the first page load.tagify
polyfills issue in IE11.jstree
missing context menu separator.Angular Portlet
options does not update the portlet layout.KTApp.progress()
size option issue.gulp
compile missing SVG in css path rewriter.minlength
and maxlength
validation in Angular registration & login page.New
demo6
. Live Previewdemo7
. Live Previewdemo8
. Live Previewdemo9
. Live Previewdemo10
. Live PreviewWizard 1
page. Live PreviewWizard 2
page. Live PreviewWizard 3
page. Live PreviewWizard 4
page. Live PreviewProjects
app:
List Columns 1
template. Live PreviewList Columns 2
template. Live PreviewList Columns 3
template. Live PreviewList Columns 4
template. Live PreviewList Datatable
template. Live PreviewView Project
template. Live PreviewAdd Project
template. Live PreviewEdit Project
template. Live PreviewSupport Center
app:
Home 1
template. Live PreviewHome 2
template. Live PreviewFAQ 1
template. Live PreviewFAQ 2
template. Live PreviewFAQ 3
template. Live PreviewFeedback
template. Live PreviewLicense
template. Live PreviewIconbox
component. Live PreviewInfobox
template. Live PreviewCallout
template. Live PreviewRibbon
template. Live PreviewAccordion
options. Live PreviewUpdates & Improvements
Invoice 1
and Invoice 2
improvements.Fullcalendar v4
update.kt-container
base component to handle the content elements width for all demos. All demos subheader and content layout parts must be updated with the latest markup.tools/build.json
from {$config.output}
to {$config.dist}.
kt-container
as similar with the default
HTML version.KTMenu
item link click event handler. Check documentation.Fixes
Summernote
z-index issue.Demo 2
scroll top icon z-index issue.Demo 10
dashboard switcher menu for mobile view.KTDatatable
height.KTDatatable
column visibility function datatable.visible()
to allow hide column at the initial.DataTable
dropdown z-index in the grid.jQueryUI Datepicker
and Bootstrap Datepicker
conflict./?id=1
New
Chat
box that can be opened on the right center toolbar chat icon click. Live previewPrivate Chat
page. Live previewGroup Chat
page. Live previewModal Popuo Chat
page. Live previewNotes
component. Live previewUser Pics
component. Live previewSearchbar
component. Live previewFlaticon
set. Live previewUpdates & Improvements
tools/build.json
from {$config.output}
to {$config.dist}.
KTApp.initScroll()
method to support desktop native scrolling(instead of perfect scrollbar).Fixes
New
Users List - Default
page. Live previewUsers List - Datatable
page. Live previewUsers List - Columns - 1
page. Live previewUsers List - Columns - 2
page. Live previewAdd User
page. Live previewEdit User
page. Live previewUser Profile 1
page. Live previewUser Profile Personal Information
page. Live previewUser Profile Account Information
page. Live previewUser's Change Password
page. Live previewUser's Email Settings
page. Live previewUser Profile Account Information
page. Live previewUser Profile 2
page. Live previewUser Profile 3
page. Live previewUser Profile 4
page. Live previewContact List - Column
page. Live previewContact List - Datatable
page. Live previewView Contact
page. Live previewAdd Contact
page. Live previewEdit Contact
page. Live previewDemo 3
Angular version. Live previewDemo 4
Angular version. Live previewDemo 5
Angular version. Live previewAngular Portlet
component.gulp build --js
, gulp build --sass
, gulp build --media
Updates & Improvements
default
demo ID has been renamed to demo1
.src
folder has been fully reconstructed to provide more clean and elegand file structure for SASS
, JS
and Media
files.assets
folder has been slightly reconstructed to separate the assets versions per working demo.dist
folder does not exist and it will be generated only after running gulp task.Fixes
Demo 2
fixed aside menu height issue on scroll.summernote
z-index issue.gotoPage(pageNumber)
API.Demo 12
.Demo 8
responsive layout issue in mobile mode.Demo 10
responsive layout issue in mobile mode.Demo 4
topbar icon color issue on header minimize mode.Sweetalert2
plugin demo page JS errors.KTMenu.setActiveItem()
function.select2
arrow icon for longer text.input-group-lg-group
to input-group-lg
.New
Updates & Improvements
Demo4
header menu icons changed to SVG iconsFixes
Demo2
header dropdown menu z-index issue when fixed aside menu is enabled.demo4
background image not full width on the larger screen.KTDatatable
javascript errorSweetAlert2
with new API function swal.fire()
.Angular
version Daterange HTML issue in subheader.New
Classic
version without build tools. For this version npm, gulp, yarn and sass are not required.Updates & Improvements
mUtil.find()
and mUtil.findAll()
, to check undefined element.Fixes
New
eCommerce
moduleUpdates & Improvements
Fixes
Aside Menu
Fontawesome
sizing classes(e.g: fa-2x,fa-2x)SweetAlert2
body auto height issueSpinner
and Loader
animation issue on IE11mDatatable
checkbox bug (freeze and crash) in iOSheadOverflay?: boolean;
to headOverlay?: boolean;
New
Demo 2
demo.Updates & Improvements
isMockEnabled
switcher to /src/environments/environment.ts
file for easy switching from 'Fake' to 'Real' REST API. Doc is here.Fixes
typeahead
page showing warning error.mDatatable
sorting does not initialize with asynchronous JS.mDatatable
sorting icon not appear using HTML table.mat-table
examples.Updates & Improvements
Fixes
mPortlet
header on the responsive mobile mode.mDatatable
checkbox selection should be removed after calling datatable API reload()
gulp
compiler error when RTL and CSS source map is enabled..Updates & Improvements
Fixes
New
Default
demo.Updates & Improvements
Bootstrap
v4.1.3 Update.mDatatable
nested searching & filter for local data sourceFixes
mDatatable
select all checkbox API.mDatatable
primary key check.Demo 3
fixed aside mode issue.Demo 2
and Demo 5
header z-index issue.New
Fixes
mDatatable
checkbox selection should be removed after datatable reload()
call.Owl Carousel
missing images.mUtil.scrollTo
API function issue.Sticky Form Actions
on Aside toggle.mWizard
Form Wizard JS error on form validation.Custom Scroller
height issue on mobile.Demo3
fixed aside mode issue.Demo2
subheader margin issue on tablet and mobile modes.New
Sticky Portlet
. Preview it here.Sticky Action Bar
.Preview it here.Type
typography component. Preview it here.Updates & Improvements
Bootstrap
v4.1.1 Update.Fontawesome5
Update.Sweetalert2
v7.22.0 UpdatemCustomScrollbar
to Perfect Scrollbar
plugin. For data-scrollable=true
change data-min-height
to
data-height
.
autoprefixer
to the Gulp compiler.Aside Menu
submenu accordion animation.Page Smooth Scrolling
.Portlet
responsiveness.IE10
and IE11
support.Aside Menu
hover mode.layout.customScrollbar
in mDatatable option to enable/disable custom scrollbar.Fixes
mDatatable
issue.Line Tabs
click issue on Safari.Content Wrapper
overflow issue for all demos.Left Aside
z-index issue for all demos.Smooth Scrolling
on iOS devices.Popover
dark skin arrow color issue.Demo 12
header bg issue on boxed layout.Topbar
profile menu's user pic border radius issue.Content Scroll
issue for all demos.Wizard 4
navigation issue on smaller width.Fontawesome5
icons custom sizing classes.mDatatable
auto scroll to top when click empty link in Edge and IE browser.mDatatable
API for checkbox not clear when setActiveAll(false) and then reload().mDatatable
pagination meta to integer if string privided.mDatatable
reload() for remote JSON not updated.mDatatable
local search does not find value other than string.Gulp Compiler
to compile by demo option.mDatatable
checkbox to be cleared after refresh.mDatatable
unnecessary loading spinner.SweetAlert2
deprecated function warning.Updates & Improvements
4.1.0
update.row.getDatatable()
and row.getIndex()
in template callback.mWizard.stop()
and mWizard.start()
API methods instead of retruing boolean value from Event handler function to cancel wizard step.
Fixes
animateClass
.revenueChange();
to initialize script at dashboard.js
.dashboard.js
.gulp
command for Angular to allow without flag --angular-jquery
.m-menu-scrollable
.New
Updates & Improvements
mMenu
mDropdown
mHeader
mOffcanvas
mPortlet
mQuicksearch
mScrolltop
mToggle
mWizard
data
to m
. Eg: m-dropdown-toggle="hover"
, m-dropdown-persistent="hover"
.Bootstrap Select
to the latest version v1.13.0-beta
.Lineawesome
to the latest version.mDatatable
local data source search
method now support multi values by passing array: datatable.search(['search', 'values'], ColumnName);
.mDatatable
add class
option to the individual column.mDatatable
inherit row <tr>
properties from HTML table.mDatatable
add option for remote data request timeout.tools/conf/angular.json
has been renamed to tools/conf/angular-jquery.json.
manualStepForward
parameter for mWizard
plugin to control step forward on step number click.requestTimeout
for mQuicksearch
plugin.Fixes
mDatatable
width overflow issue for demo 2
, demo 5
, demo 8
and demo 10
mDatatable
fix local sort not working at initial load.mDatatable
fix getPageSize API returning not correct selected value.mDatatable
fix hidden locked columns.mDatatable
fix resize after hide columns.mDatatable
fix sort API, missing param sort type.mDatatable
fix from calling remote when server filtering is disabled.mDatatable
fix sort arrow not displayed for right aligned column.mDatatable
fix auto hide column with wrong header title.mDatatable
layout.gulp
fix jquery-ui to include missing assets in the bundle.Bootstrap Select
's data-size
HTML parameter issue.New
PSD
filesSketch
filesNew
Demo 8
. Preview here.Demo 9
. Preview here.Demo 10
. Preview here.Invoice v1
. Preview here.Invoice v2
. Preview here.Updates & Improvements
Bootstrap
4 Stable. See the changelog for more info.Fixes
fullcalendar
plugin in Angular.Demo2
and Demo 5
.Summernote
editor toolbar's z-index issue.Summernote
font styles(bold, italic) do not work.mDatatable
reset scroll position after content changed.mDatatable
fix local HTML table search by column name.mDatatable
for local HTML table, removed span
tag from data source.mDatatable
display spinner on every AJAX request.mDatatable
fix error message position display.mDatatable
fix row details does not show the correct title on expand.mDatatable
Disable autoHide for locked columns table.mDatatable
trim extracted html-table values.New
Fixes
mDatatable
fix exclude empty parameters from request.New
Updates & Improvements
Bootstrap
4 Beta 3. See the changelog for more info.mDatatable
data.source.read.params
option will be sent as parameters to backend API service.mDatatable
ajax parameter namespace datatable
is deprecated.Summernote v0.8.9.
Default Demo
.Fixes
mDatatable
local and server datasource filter conflict.Demo 4
layout z-index issue when modal window opened.Demo 4
layout content container overflow issue.Portlet
collapse API function works inverse.Quicksidebar
messanges component's message aligment issue on wider width container.Quick search
input spinner icon position issue in all demos.Bootstrap Datetimepicker
form validation does not change state after value selection.Fixes
Markdown
plugin preview issueDemo 7
mobile header background color issue.gulp --prod
empty css file and minification issue.New
rows.beforeTemplate
and rows.afterTemplate
.search.onEnter
, for search on Enter
button keyup.checkbox
extension for records selection.minHeight
option.Changes & Improvements
bower
dependencies manager and replaced with yarn
.datatable.methodName(args)
or $(datatable).mDatatable(methodName, args);
rows.callback
option was deprecated.addRemoveLinks: true
for the link to remove the uploaded file.employees
to customers
Fixes
m-datatable--on-init
to be triggered on last initilizing process.pageSizeSelect
option cannot be changed by options.New
hideColumn
and showColumn
.getDataSet
to get all data in the grid.Changes & Improvements
html
to default
.fullJsonData
to originalDataSet
.Fixes
Fixes
Fixes
New
Changes & Improvements
GET
or POST
.searchDelay:400
option node changed to search:{delay:400}
Fixes
New
Metronic Datatable
.Metronic Datatable
.Metronic Datatable
.Metronic Datatable
new public API getTotalRows()
.Metronic Datatable
new option for searchDelay
default to 400ms.demo5
Changes & Improvements
GET
or POST
.Metronic Datatable
.Metronic Datatable
.Metronic Datatable
.Fixes
Metronic Datatable
plugin.Metronic Datatable
always perform request data from remote when window resized.Fixes
Demo 4
horizontal menu's submenu z-index issue.If you need the theme customization or custom development services please contact us to get a free quote:
Hire UsA single license can be used only for one domain or client. Each use of the theme requires a separate license. We hope you will follow the rules as it will help us to continue supporting our themes and providing a free future updates.
GET A NEW LICENSEASP.NET Zero is a starting point for new web projects based on our Metronic Theme UI.
Learn ModeMecons is the Most complete & trusted Tag Helper Library for Metronic.
Learn ModePlease ensure that your support subscription is active to receive any further support. To check your support subscription status here.
Renew SubscriptionYou can support our theme by referring a new users from your site or blog and earn with themeforest's affiliate program.
Get More InfoLike all HTML templates, you will need to manually handle all updates that we provide after purchase for free. Before updating your project with the new version of Metronic please do check out our tips for handling the updates efficiently.
Read more...I run a team of 20 product managers, developers, QA and UX resources. Previously we designed everything ourselves. For our newest platform we tried out Metronic. I cannot overestimate the impact Metronic has had. It's accelerated development 3x and reduced QA issues by 50%. If you add up the reduced need for design time/resources, the increase in dev speed and the reduction in QA, it's probably saved us $100,000 on this project alone, and I plan to use it for all platforms moving forward.
The flexibility of the design has also allowed us to put out a better looking & working platform and reduced my headaches by 90%. Thank you KeenThemes! Jonathan Bartlett, Metronic Customer
Everything within Metronic is customizable globally to provide limitless unique styled projects
Choose a perfect design for your next project among hundreds of demos
A huge collection of components to power your application with the latest UI/UX trands
Enterprise ready Angular and React integration with built-in authentication module and many more
Metronic deeply customizes Bootstrap with native look and feel
Our super sleek and intuitive Datatable comes packed with all advanced CRUD features
Metronic is the only theme trusted by over 70,000 developers world wide
Lifetime updates with new demos and features is guaranteed
Metronic is written with a code structure that all developers will be able to pick up easily and fall in love