@kikiloaw/simple-table 1.0.6 → 1.1.0

package/README.md

@@ -6,6 +6,8 @@
 [![Vue 3](https://img.shields.io/badge/Vue-3.x-brightgreen.svg)](https://vuejs.org/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
 
+> **🚀 Explore the Demo**: Check out the [SimpleTable Demo Repository](https://github.com/kikiloaw/simple-table-demo.git) for a complete documentation site with live server-side examples, seeding, and source code.
+
 ---
 
 ## ✨ Why SimpleTable?

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kikiloaw/simple-table",
-    "version": "1.0.6",
+    "version": "1.1.0",
     "description": "A lightweight, dependency-light DataTable component for Vue 3 with Tailwind CSS",
     "main": "src/index.js",
     "module": "src/index.js",

package/src/SimpleTable.vue

@@ -67,6 +67,8 @@ const props = withDefaults(defineProps<Props>(), {
   hoverColor: 'hover:bg-stone-200'
 })
 
+
+
 // ...
 
 // -- Computed: Page Sizes Normalization --
@@ -163,7 +165,7 @@ const densityConfig = computed(() => {
       </div>
 */
 
-const emit = defineEmits(['update:search', 'update:sort', 'page-change'])
+const emit = defineEmits(['update:search', 'update:sort', 'page-change', 'fetched'])
 
 // -- State --
 const searchQuery = ref('')
@@ -464,6 +466,7 @@ async function fetchData(params: any = {}) {
             }
             
             internalData.value = data
+            emit('fetched', data)
             
             // Store in cache if enabled
             if (props.enableCache) {
@@ -644,6 +647,8 @@ defineExpose({
     clearCache // expose cache clearing method
 })
 
+
+
 // -- Helper Styles --
 function getCellClass(col: any, index: number, totalCols: number, rowIndex: number = -1) {
     let classes = col.class || ''
@@ -799,7 +804,12 @@ function getCellStyle(col: any) {
               <!-- Group Header Row: Single cell spanning all columns -->
               <template v-if="row._isGroupHeader">
                 <TableCell :colspan="columns.length" class="border-b border-gray-200">
-                  <div :class="['px-2', densityConfig.groupHeaderPadding, 'font-semibold text-gray-700 text-sm uppercase tracking-wide']">
+                  <div :class="[
+                    'px-2', 
+                    densityConfig.groupHeaderPadding, 
+                    'font-semibold text-sm uppercase tracking-wide',
+                    row._groupTitleClass || 'text-gray-700'
+                  ]">
                     {{ row._groupTitle }}
                   </div>
                 </TableCell>

package/src/components/table/TableCell.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
   style?: any
   padding?: string
   height?: string
+  colspan?: number | string
 }>()
 
 const delegatedProps = computed(() => {