@kikiloaw/simple-table 1.0.3 → 1.0.5

package/README.md

@@ -459,9 +459,9 @@ SimpleTable supports three data modes:
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `queryParams` | Object | `{}` | Additional parameters for every request |
-| `oddRowColor` | String | `'bg-background'` | Tailwind class for odd rows |
-| `evenRowColor` | String | `'bg-background'` | Tailwind class for even rows |
-| `hoverColor` | String | `'hover:bg-muted/50'` | Tailwind class for row hover |
+| `oddRowColor` | String | `'bg-white'` | Tailwind class for odd rows |
+| `evenRowColor` | String | `'bg-stone-100'` | Tailwind class for even rows |
+| `hoverColor` | String | `'hover:bg-stone-200'` | Tailwind class for row hover |
 
 ---
 
@@ -1055,28 +1055,74 @@ const beforeRender = (rows) => {
 
 ### Custom Cell Rendering
 
-**Customize how data is displayed in specific columns:**
+**Customize how data is displayed in any column using named slots.**
+
+**Slot Syntax:** `#cell-{columnKey}="{ row }"`
+
+#### 1. Conditional Styling & Badges
 
 ```vue
-<SimpleTable :columns="columns" fetch-url="/api/users">
-  <!-- Custom status badge -->
-  <template #cell-status="{ row }">
+<SimpleTable :columns="columns" :data="data">
+  <!-- Status Badge with Conditional Color -->
+  <template #cell-is_active="{ row }">
     <span 
-      :class="row.status === 'active' ? 'badge-success' : 'badge-danger'"
+      v-if="!row._isGroupHeader"
+      :class="row.is_active ? 'text-green-600 font-bold' : 'text-red-600'"
     >
-      {{ row.status }}
+      {{ row.is_active ? 'Active' : 'Inactive' }}
     </span>
   </template>
-  
-  <!-- Custom actions column -->
+</SimpleTable>
+```
+
+#### 2. Rendering Lists/Tags
+
+```vue
+<SimpleTable :columns="columns" :data="data">
+  <!-- Loop through array data in a cell -->
+  <template #cell-tags="{ row }">
+    <div v-if="!row._isGroupHeader" class="flex gap-1 flex-wrap">
+      <span 
+        v-for="tag in row.tags" 
+        :key="tag.id"
+        class="bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded"
+      >
+        {{ tag.name }}
+      </span>
+    </div>
+  </template>
+</SimpleTable>
+```
+
+#### 3. Action Buttons
+
+```vue
+<SimpleTable :columns="
+" :data="data">
   <template #cell-actions="{ row }">
-    <button @click="edit(row)" class="btn-sm">Edit</button>
-    <button @click="delete(row)" class="btn-sm btn-danger">Delete</button>
+    <div v-if="!row._isGroupHeader" class="flex gap-2">
+      <Button variant="outline" size="sm" @click="edit(row)">Edit</Button>
+      <Button variant="destructive" size="sm" @click="remove(row)">Delete</Button>
+    </div>
   </template>
 </SimpleTable>
 ```
 
-**Slot Naming:** `#cell-{columnKey}`
+#### ⚠️ Important: Handling Group Headers
+
+If you use **Group Headers**, your custom slots will technically be available for the header row too (though hidden by the colspan). To avoid errors accessing properties that don't exist on the header row, **always check `!row._isGroupHeader`**.
+
+```vue
+<template #cell-price="{ row }">
+  <!-- ❌ Bad: Might crash on header row where row.price is undefined -->
+  ${{ row.price.toFixed(2) }}
+  
+  <!-- ✅ Good: Safe check -->
+  <span v-if="!row._isGroupHeader">
+    ${{ row.price?.toFixed(2) }}
+  </span>
+</template>
+```
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kikiloaw/simple-table",
-    "version": "1.0.3",
+    "version": "1.0.5",
     "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

@@ -62,9 +62,9 @@ const props = withDefaults(defineProps<Props>(), {
   perPage: 10,
   pageSizes: () => [10, 20, 30, 50, 100],
   rowHeight: 38,
-  oddRowColor: 'bg-background',
-  evenRowColor: 'bg-background',
-  hoverColor: 'hover:bg-muted/50'
+  oddRowColor: 'bg-white',
+  evenRowColor: 'bg-stone-100',
+  hoverColor: 'hover:bg-stone-200'
 })
 
 // ...
@@ -720,7 +720,7 @@ function getCellStyle(col: any) {
                 <select 
                     :value="currentPerPage" 
                     @change="(e: any) => handlePageSizeChange(e.target.value)"
-                    class="h-10 w-[80px] appearance-none rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
+                    class="h-10 w-[80px] appearance-none border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
                 >
                     <option 
                         v-for="pageSize in normalizedPageSizes" 
@@ -741,7 +741,7 @@ function getCellStyle(col: any) {
                 v-model="searchQuery"
                 type="text"
                 placeholder="Search..."
-                class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pl-8 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                class="flex h-10 w-full border border-input bg-background px-3 py-2 pl-8 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
             />
         </div>
       </div>
@@ -751,7 +751,7 @@ function getCellStyle(col: any) {
     </div>
 
     <!-- Table -->
-    <div class="rounded-md border bg-background overflow-x-auto relative">
+    <div class="border bg-background overflow-x-auto relative">
       <!-- We add min-w-full to Table to ensure it stretches -->
       <Table class="min-w-full table-fixed"> 
         <TableHeader>

package/src/components/table/TableHead.vue

@@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
       cn(
         props.height || 'h-[38px]',
         props.padding || 'px-2',
-        'text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+        'text-left align-middle font-bold text-muted-foreground [&:has([role=checkbox])]:pr-0',
         props.class,
       )
     "

package/src/components/table/TableRow.vue

@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
   <tr
     :class="
       cn(
-        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+        'border-b border-stone-300 transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
         props.class,
       )
     "