Metronic Extension
Production-ready UI components, validators, and utilities that supercharge Metronic-based applications.
---
## 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/](https://shumatsumonobu.github.io/metronic-extension/demo/)**
---
## Documentation
Full API reference with live examples: **[shumatsumonobu.github.io/metronic-extension](https://shumatsumonobu.github.io/metronic-extension/)**
---
## Installation
```sh
npm install metronic-extension
```
### ESM
```js
import {components} from 'metronic-extension';
const {DataTable, BarChart, Modal} = components;
```
### UMD (Script Tag)
```html
```
---
## Quick Start
```js
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](CHANGELOG.md) for release history.
## Author
**shumatsumonobu**
* [github/shumatsumonobu](https://github.com/shumatsumonobu)
* [X/shumatsumonobu](https://x.com/shumatsumonobu)
* [facebook/takuya.motoshima.7](https://www.facebook.com/takuya.motoshima.7)
## License
[MIT](LICENSE)