@kikiloaw/simple-table 1.0.4 → 1.0.6

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 |
 
 ---
 
@@ -475,7 +475,7 @@ SimpleTable supports three data modes:
   label: 'Name',         // Required: Column header text
   sortable: true,        // Optional: Enable sorting
   width: '200px',        // Optional: Fixed column width
-  fixed: true,           // Optional: Sticky column (useful for actions)
+  fixed: true,           // Optional: Sticky column (left for first, right for last, others left). **Requires `width` to be set.**
   class: 'text-center'   // Optional: Additional CSS classes
 }
 ```
@@ -1097,7 +1097,8 @@ const beforeRender = (rows) => {
 #### 3. Action Buttons
 
 ```vue
-<SimpleTable :columns="columns" :data="data">
+<SimpleTable :columns="
+" :data="data">
   <template #cell-actions="{ row }">
     <div v-if="!row._isGroupHeader" class="flex gap-2">
       <Button variant="outline" size="sm" @click="edit(row)">Edit</Button>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kikiloaw/simple-table",
-    "version": "1.0.4",
+    "version": "1.0.6",
     "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'
 })
 
 // ...
@@ -653,15 +653,13 @@ function getCellClass(col: any, index: number, totalCols: number, rowIndex: numb
     
     if (col.fixed) {
         // Sticky logic
-        const isLast = index === totalCols - 1
-        
-        let stickyClass = ''
-        if (isLast) {
-             // Right sticky: Stronger shadow to the left, and a left border
-             stickyClass = ' sticky right-0 z-10 shadow-[-4px_0_8px_-2px_rgba(0,0,0,0.1)] border-l border-border/50'
+        let stickyClass = ' whitespace-nowrap' // Prevent content wrapping in sticky columns
+        if (index === totalCols - 1) {
+             // Last Column -> Right Sticky
+             stickyClass = ' sticky right-0 z-10 shadow-[-4px_0_8px_-2px_rgba(0,0,0,0.1)] border-l border-stone-300'
         } else {
-            // Left sticky: Stronger shadow to the right, and a right border
-            stickyClass = ' sticky left-0 z-10 shadow-[4px_0_8px_-2px_rgba(0,0,0,0.1)] border-r border-border/50'
+            // All other fixed columns -> Left Sticky
+            stickyClass = ' sticky left-0 z-10 shadow-[4px_0_8px_-2px_rgba(0,0,0,0.1)] border-r border-stone-300'
         }
 
         // Determine background
@@ -670,8 +668,8 @@ function getCellClass(col: any, index: number, totalCols: number, rowIndex: numb
         
         if (rowIndex !== -1) {
             // Body Row
-            const isEven = rowIndex % 2 === 0
-            bgClass = isEven ? props.evenRowColor : props.oddRowColor
+            const isOdd = rowIndex % 2 === 0
+            bgClass = isOdd ? props.oddRowColor : props.evenRowColor
             
             // Should also match hover
             // If the row has a hover class (like hover:bg-muted), the sticky cell needs group-hover:bg-muted to match.
@@ -702,6 +700,10 @@ function getCellStyle(col: any) {
     if (col.width) {
         return { width: col.width, minWidth: col.width, maxWidth: col.width }
     }
+    // Smart default: If fixed but no width, force a safe width (e.g. 100px) to ensure background covers content
+    if (col.fixed) {
+        return { width: '100px', minWidth: '100px' }
+    }
     return {}
 }
 
@@ -720,7 +722,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 +743,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,9 +753,9 @@ 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"> 
+      <Table class="min-w-full table-auto"> 
         <TableHeader>
           <TableRow :style="{ height: densityConfig.cellHeight }">
             <TableHead

package/src/components/table/Table.vue

@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
 <template>
   <div class="relative w-full overflow-auto">
     <table
-      :class="cn('w-full caption-bottom text-sm', props.class)"
+      :class="cn('w-full caption-bottom text-sm border-separate border-spacing-0', props.class)"
       v-bind="delegatedProps"
     >
       <slot />

package/src/components/table/TableCell.vue

@@ -25,7 +25,7 @@ const cellStyle = computed(() => {
 
 <template>
   <td
-    :class="cn(props.padding || 'p-2', 'align-middle [&:has([role=checkbox])]:pr-0', props.class)"
+    :class="cn(props.padding || 'p-2', 'border-b border-stone-300 align-middle [&:has([role=checkbox])]:pr-0', props.class)"
     :style="cellStyle"
     v-bind="delegatedProps"
   >

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',
+        'border-b border-stone-300 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',
+        'transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
         props.class,
       )
     "