@gemafajarramadhan/dynamic-ui 1.1.24 → 1.1.25

package/README.md

@@ -547,6 +547,7 @@ Setelah library di-import, dua custom element berikut akan terdaftar secara glob
 | ------------------------- | ----------------------------------------------------------- |
 | `<micro-dynamic-form>`    | Render form dinamis berdasarkan JSON config `config` prop.  |
 | `<micro-dynamic-datatable>` | Render tabel dinamis berdasarkan JSON config `config` prop. |
+| `<micro-data-table>`      | Render Data Table base component secara independen. Menerima props seperti `columns`, `data`, `apiUrl`. |
 
 #### Properties (set via JavaScript/DOM)
 
@@ -607,8 +608,11 @@ Cara paling sederhana. Import library dari bundler, lalu gunakan custom element
     <!-- Dynamic Form -->
     <micro-dynamic-form id="myForm"></micro-dynamic-form>
 
-    <!-- Dynamic DataTable -->
-    <micro-dynamic-datatable id="myTable"></micro-dynamic-datatable>
+    <!-- Dynamic DataTable (AutoLayout version) -->
+    <micro-dynamic-datatable id="myAutoTable"></micro-dynamic-datatable>
+
+    <!-- Base DataTable (Stand-alone version) -->
+    <micro-data-table id="myBaseTable"></micro-data-table>
 
     <!-- Import library (registrasi Web Components otomatis) -->
     <script type="module">
@@ -653,8 +657,8 @@ Cara paling sederhana. Import library dari bundler, lalu gunakan custom element
       })
 
       // --- Setup DataTable ---
-      const table = document.querySelector('#myTable')
-      table.config = {
+      const autoTable = document.querySelector('#myAutoTable')
+      autoTable.config = {
         titleID: 'Daftar User',
         headers: [
           { text: 'Nama', value: 'name' },
@@ -662,9 +666,26 @@ Cara paling sederhana. Import library dari bundler, lalu gunakan custom element
         ],
       }
 
-      table.addEventListener('action', (e) => {
+      autoTable.addEventListener('action', (e) => {
         console.log('Action:', e.detail)
       })
+
+      // --- Setup Base MicroDataTable ---
+      const baseTable = document.querySelector('#myBaseTable')
+      // Untuk MicroDataTable (base component), Anda bisa mengirimkan prop langsung:
+      baseTable.columns = [
+        { key: 'name', label: 'Nama', sortable: true },
+        { key: 'email', label: 'Email' }
+      ]
+      // Memberikan data secara statis
+      baseTable.data = [
+        { name: 'John Doe', email: 'john@example.com' },
+        { name: 'Jane Smith', email: 'jane@example.com' }
+      ]
+      
+      // Atau bisa diset melalui API:
+      // baseTable.apiUrl = '/api/users'
+      // baseTable.apiMethod = 'GET'
     </script>
 
   </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemafajarramadhan/dynamic-ui",
-  "version": "1.1.24",
+  "version": "1.1.25",
   "description": "Vue 3 Dynamic UI Component Library - Compatible with Vue, React, Angular, and any other framework via Web Components",
   "type": "module",
   "license": "MIT",