Components Demo

This page demonstrates all JavaScript components with live, interactive examples.

Note: Open your browser console (F12) to see component interactions.

1. Toast Notifications

Lightweight toast notifications using ToastComponent.

2. AppAlert (SweetAlert Wrapper)

Branded SweetAlert dialogs using AppAlert.

Confirmation Dialogs

Animations

3. Modal Component

Modal dialogs using ModalComponent.

4. Tooltip Component

Hover tooltips using TooltipComponent.

5. Dropdown Component

Click/hover dropdowns using DropdownComponent.

6. File Downloader

File downloads using FileDownloader.

(Note: This demo shows the loading indicator only)

7. AJAX Form

Form submission with AJAX using AjaxForm.

8. DataTable Component

Enhanced tables using DataTableComponent.

8.1 Basic DataTable

ID	Name	Email	Role
1	John Doe	john@example.com	Admin
2	Jane Smith	jane@example.com	Editor
3	Bob Wilson	bob@example.com	User

8.2 Grouped DataTable with Subtotals

Use data-grouped="true" with data-group-column and data-subtotal-columns.

NO	NAMA PELANGGAN	NAMA BARANG	KUANTITAS	PENJUALAN
1	AFCAR CELL (WKB)	GAJAH BARU KRETEK (12)	800	7.200.000
2	ALAM SUBUR (WTB)	ON BOLD FILTER (20)	200	4.870.000
3	ALAM SUBUR (WTB)	GAJAH BARU KRETEK (12)	800	7.200.000
4	BERKAH JAYA (WTC)	MARLBORO RED (20)	500	6.500.000
5	BERKAH JAYA (WTC)	SAMPOERNA MILD (16)	300	4.200.000

<table data-datatable 
       data-grouped="true" 
       data-group-column="1"
       data-subtotal-columns="[3,4]"
       data-collapsible="true"
       data-show-grand-total="true"
       data-grand-total-label="TOTAL SELURUH PENJUALAN">

9. Prefetch

Page prefetching using Prefetch.

Hover over these links to prefetch:

Architecture Modules Components

10. Sidebar Component

Collapsible sidebar using SidebarComponent.

(Works on admin layouts with sidebar)

11. Lightbox Component

Image galleries using LightboxComponent.

(Click images to open lightbox)

Quick Reference

// Toast
ToastComponent.success('Message');
ToastComponent.error('Message');

// AppAlert
AppAlert.success('Message');
AppAlert.confirm('Are you sure?').then(r => { if(r.isConfirmed) { ... } });
AppAlert.confirmDelete('This will be deleted');

// Modal
ModalComponent.open('modalId');
ModalComponent.close('modalId');

// FileDownloader
FileDownloader.download('/export/data', 'filename.xlsx');

// Prefetch
Prefetch.enable();
Prefetch.disable();
Prefetch.clearCache();