What's Inside

Components

| Component | Description | |-----------|-------------| | DataTable | Server-side processing, column visibility, subtables, and more | | BarChart / LineChart / PieChart | ApexCharts wrappers with AJAX data loading | | Modal | Subclassable modal with lifecycle hooks and form integration | | Dialog | SweetAlert2-based confirm/alert dialogs styled for Metronic | | Validation | Declarative form validation with custom rules | | Dropzone | Drag & drop file upload with preview | | ImageInput | Avatar / image upload with crop and preview | | Tagify | Tag input with single-select mode support | | Tree | jsTree wrapper with context menu and CRUD | | BlockUI | Loading overlay for any element | | Toast | Notification toasts | | APIClient | Axios wrapper with error handling |

Utilities & Validators

Format bytes, escape HTML, number formatting, type checks, and 15+ validators including IP, FQDN, URL, phone number (JP), data URI, and more.

Demo

Live demo: shumatsumonobu.github.io/metronic-extension/demo/

Documentation

Full API reference with live examples: shumatsumonobu.github.io/metronic-extension

Installation

npm install metronic-extension

ESM

import {components} from 'metronic-extension';

const {DataTable, BarChart, Modal} = components;

UMD (Script Tag)

<script src="metronic-extension.bundle.js"></script>
<script>
  const {DataTable, BarChart, Modal} = metronicExtension.components;
</script>

Quick Start

import {components} from 'metronic-extension';

// Data Table with server-side processing
new components.DataTable(document.getElementById('myTable'), {
  ajax: {url: '/api/users'},
  columnDefs: [
    {targets: 0, data: 'name'},
    {targets: 1, data: 'email'},
    {targets: 2, data: 'role'},
  ],
});

// Bar Chart
new components.BarChart(document.getElementById('myChart'), {
  ajax: {url: '/api/revenue'},
});

// Confirm Dialog
const confirmed = await components.Dialog.confirm('Are you sure?');

Changelog

See CHANGELOG.md for release history.

Author

shumatsumonobu

• github/shumatsumonobu
• X/shumatsumonobu
• facebook/takuya.motoshima.7

License

MIT