@kikiloaw/simple-table 1.0.1 → 1.0.3

package/README.md

@@ -87,6 +87,307 @@ public function getData(Request $request)
 
 ---
 
+## 📦 Using Predefined/Static Data
+
+**Want to use static data instead of an API?** SimpleTable handles this perfectly in client-side mode!
+
+### Basic Setup
+
+```vue
+<script setup lang="ts">
+import SimpleTable from '@kikiloaw/simple-table'
+
+// Define your static data
+const data = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', status: 'active' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'active' },
+  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', status: 'inactive' },
+  // ... more rows
+]
+
+const columns = [
+  { key: 'id', label: '#', sortable: true, width: '80px' },
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+  { key: 'status', label: 'Status', width: '120px' }
+]
+
+const pageSizes = [
+  { label: '50 Rows', value: 50 },
+  { label: '100 Rows', value: 100 },
+]
+</script>
+
+<template>
+  <SimpleTable 
+    :data="data"
+    :columns="columns" 
+    :page-sizes="pageSizes"
+    :per-page="50"
+    mode="client"
+    searchable
+  />
+</template>
+```
+
+### Key Props for Static Data
+
+| Prop | Required | Default | Description |
+|------|----------|---------|-------------|
+| `:data` | **Yes** | `[]` | Your static array of objects |
+| `mode` | **Yes** | `'auto'` | Set to `"client"` for static data |
+| `:per-page` | Recommended | `10` | Initial page size (should match first option in pageSizes) |
+| `:page-sizes` | Optional | `[10,20,30,50,100]` | Available page size options |
+
+### ⚠️ Common Pitfalls
+
+#### 1. **Don't Mix Static Data with `fetch-url`**
+
+❌ **Wrong:**
+```vue
+<!-- This will ignore your static data! -->
+<SimpleTable 
+  :data="myData"
+  fetch-url="/api/users"  <!-- ❌ Conflicts with :data -->
+/>
+```
+
+✅ **Correct:**
+```vue
+<!-- Remove fetch-url when using static data -->
+<SimpleTable 
+  :data="myData"
+  mode="client"
+/>
+```
+
+#### 2. **Set Initial Page Size to Match Your Options**
+
+❌ **Wrong:**
+```vue
+<!-- Component defaults to 10, but you only have 50/100 options -->
+<SimpleTable 
+  :data="data"
+  :page-sizes="[{ label: '50 Rows', value: 50 }, { label: '100 Rows', value: 100 }]"
+  <!-- ❌ Will show "10 Rows" which doesn't exist in dropdown -->
+/>
+```
+
+✅ **Correct:**
+```vue
+<SimpleTable 
+  :data="data"
+  :page-sizes="[50, 100]"
+  :per-page="50"  <!-- ✅ Matches first option -->
+/>
+```
+
+#### 3. **Columns Must Match Your Data Structure**
+
+❌ **Wrong:**
+```vue
+<script setup>
+const data = [
+  { CourseCode: 'CS101', Description: 'Intro to CS', Units: 3 }
+]
+
+const columns = [
+  { key: 'course_code', label: 'Code' },  // ❌ Wrong key!
+  { key: 'description', label: 'Name' },  // ❌ Wrong key!
+]
+</script>
+```
+
+✅ **Correct:**
+```vue
+<script setup>
+const data = [
+  { CourseCode: 'CS101', Description: 'Intro to CS', Units: 3 }
+]
+
+const columns = [
+  { key: 'CourseCode', label: 'Code' },    // ✅ Matches data
+  { key: 'Description', label: 'Name' },   // ✅ Matches data
+  { key: 'Units', label: 'Units' },
+]
+</script>
+```
+
+### Features Available in Client-Side Mode
+
+✅ **Works:**
+- Client-side searching (filters through your data array)
+- Client-side sorting (by sortable columns)
+- Client-side pagination (chunks your data into pages)
+- Data transformation via `beforeRender`
+- Custom cell rendering
+- Group headers
+- Auto-numbering
+
+❌ **Not Available:**
+- Server-side sorting (data is sorted locally)
+- API caching (no API calls)
+- Query parameters (no server to send them to)
+
+### Complete Example with Group Headers
+
+```vue
+<script setup lang="ts">
+import SimpleTable from '@kikiloaw/simple-table'
+
+// Static course data
+const data = [
+  { 
+    CourseCode: 'CS101', 
+    Description: 'Intro to Computer Science', 
+    Units: 3,
+    Grade: 'A',
+    semester: '1st Semester, 2023-2024'
+  },
+  { 
+    CourseCode: 'MATH101', 
+    Description: 'Calculus I', 
+    Units: 4,
+    Grade: 'B+',
+    semester: '1st Semester, 2023-2024'
+  },
+  { 
+    CourseCode: 'CS102', 
+    Description: 'Data Structures', 
+    Units: 3,
+    Grade: 'A-',
+    semester: '2nd Semester, 2023-2024'
+  },
+]
+
+const columns = [
+  { key: 'CourseCode', label: 'Course Code', sortable: true, width: '150px' },
+  { key: 'Description', label: 'Description', sortable: true, width: '300px' },
+  { key: 'Units', label: 'Units', width: '80px' },
+  { key: 'Grade', label: 'Grade', sortable: true, width: '80px' },
+]
+
+// Add group headers by semester
+const addGroupHeaders = (rows) => {
+  // DON'T sort here if your data is already in the correct order!
+  // Sorting will override your predefined order
+  
+  const result = []
+  let currentSemester = null
+  
+  rows.forEach(row => {
+    const semester = row.semester || 'No Semester'
+    
+    // When semester changes, add a header row
+    if (semester !== currentSemester) {
+      result.push({
+        _isGroupHeader: true,
+        _groupTitle: semester,
+        // Empty values for all columns
+        CourseCode: '',
+        Description: semester,
+        Units: '',
+        Grade: '',
+      })
+      currentSemester = semester
+    }
+    
+    result.push(row)
+  })
+  
+  return result
+}
+</script>
+
+<template>
+  <SimpleTable 
+    :data="data"
+    :columns="columns" 
+    :page-sizes="[50, 100]"
+    :per-page="50"
+    :before-render="addGroupHeaders"
+    mode="client"
+    searchable
+    odd-row-color="bg-gray-50"
+    even-row-color="bg-white"
+    hover-color="hover:bg-green-100"
+  />
+</template>
+
+### 📏 Row Height Control
+
+Control the exact height of your table rows with the `rowHeight` prop:
+
+```vue
+<template>
+  <SimpleTable 
+    :data="data"
+    :columns="columns"
+    :row-height="38"  <!-- Rows will be exactly 38px tall -->
+  />
+</template>
+```
+
+**How it works:**
+- Sets the `height` style on both header and data rows
+- Automatically adjusts cell padding based on the height
+- Default: `38px` (compact and readable)
+
+**Recommended Values:**
+
+| Height | Padding | Use Case |
+|--------|---------|----------|
+| `30-36px` | `p-2` (8px) | **Extra compact** - Maximum rows visible, dense data |
+| `38-42px` | `p-2` (8px) | **Standard** - Good balance (default: 38px) |
+| `44-55px` | `p-3` (12px) | **Comfortable** - Easy to read, spacious |
+| `56px+` | `p-4` (16px) | **Very spacious** - Accessibility-friendly, large text |
+
+**Examples:**
+
+```vue
+<!-- Ultra compact for dashboards -->
+<SimpleTable :row-height="32" />
+
+<!-- Default - balanced -->
+<SimpleTable :row-height="38" />  <!-- or omit for default -->
+
+<!-- Comfortable reading -->
+<SimpleTable :row-height="48" />
+
+<!-- Accessibility-friendly -->
+<SimpleTable :row-height="60" />
+
+<!-- No prop = uses default 38px -->
+<SimpleTable :data="data" :columns="columns" />
+```
+
+**Padding Auto-Adjustment:**
+
+The component automatically adjusts internal padding:
+- **< 44px**: Uses `p-2` (8px) - Compact
+- **44-55px**: Uses `p-3` (12px) - Normal  
+- **56px+**: Uses `p-4` (16px) - Comfortable
+
+### 💡 Best Practices
+
+1. **Data Order Preservation**
+   - If your data is already sorted correctly, **don't sort it again** in `beforeRender`
+   - Let users sort by clicking column headers if needed
+
+2. **Performance**
+   - Client-side mode works great for **< 1,000 rows**
+   - For larger datasets, consider server-side mode with `fetch-url`
+
+3. **Reactivity**
+   - Use `ref()` or `reactive()` if your data changes
+   - The table will automatically update when data changes
+
+4. **Page Size Options**
+   - Keep options reasonable: `[10, 25, 50, 100]`
+   - Set `:per-page` to match your first option
+
+---
+
 ## 📖 Table of Contents
 
 - [Core Concepts](#-core-concepts)
@@ -212,6 +513,14 @@ const columns = [
     label: 'Email' 
   },
   
+  // Auto-numbering (row numbers instead of data)
+  {
+    key: 'id',
+    label: '#',
+    autonumber: true,
+    width: '80px'
+  },
+  
   // Sticky actions column (always visible)
   { 
     key: 'actions', 
@@ -233,6 +542,50 @@ Use custom sort keys when:
 
 ## 🎨 Features
 
+### Auto-Numbering
+
+**Display sequential row numbers instead of actual data:**
+
+```vue
+const columns = [
+  { 
+    key: 'id', 
+    label: '#', 
+    autonumber: true,
+    width: '80px'
+  },
+  // ... other columns
+]
+```
+
+**Features:**
+- ✅ Displays 1, 2, 3, 4... for each data row
+- ✅ Skips group headers (only counts data rows)
+- ✅ Pagination-aware: Page 2 shows 11, 12, 13... (with 10 per page)
+- ✅ Overrides actual column data
+- ✅ Works with both server-side and client-side modes
+
+**Example:**
+```
+┌────┬──────────────────┬─────────┐
+│ #  │ Name             │ Status  │
+├────┼──────────────────┼─────────┤
+│ ACTIVE USERS                    │ ← Header (not counted)
+│ 1  │ John Doe         │ Active  │
+│ 2  │ Jane Smith       │ Active  │
+├────┴──────────────────┴─────────┤
+│ INACTIVE USERS                  │ ← Header (not counted)
+│ 3  │ Bob Johnson      │ Inactive│
+```
+
+**Perfect for:**
+- Sequential numbering regardless of actual IDs
+- User-friendly row references
+- Tables with group headers
+- Paginated lists with continuous numbering
+
+---
+
 ### Custom Sort Keys
 
 **Problem:** You want to display `department.name` but sort by `department_id`.
@@ -456,6 +809,248 @@ const downloadCSV = (content, filename) => {
 - ✅ Integration with third-party libraries
 
 
+---
+
+### Group Headers
+
+**Organize your table data with full-width group headers:**
+
+```vue
+<script setup>
+const addGroupHeaders = (rows) => {
+  // Sort by category first
+  const sorted = [...rows].sort((a, b) => 
+    (a.category || '').localeCompare(b.category || '')
+  )
+  
+  const result = []
+  let currentCategory = null
+  
+  sorted.forEach(row => {
+    const category = row.category || 'Uncategorized'
+    
+    // When category changes, add a header row
+    if (category !== currentCategory) {
+      result.push({
+        _isGroupHeader: true,      // Special flag
+        _groupTitle: category,      // Header text
+        // Add empty values for all columns
+        ...Object.fromEntries(
+          Object.keys(row).map(key => [key, ''])
+        )
+      })
+      currentCategory = category
+    }
+    
+    result.push(row)
+  })
+  
+  return result
+}
+</script>
+
+<template>
+  <SimpleTable 
+    :columns="columns"
+    :before-render="addGroupHeaders"
+    odd-row-color="bg-gray-50"
+    even-row-color="bg-white"
+    fetch-url="/api/data"
+  />
+</template>
+```
+
+**Result:**
+```
+┌────────────────────────────────────────┐
+│ CATEGORY A                             │  ← Full-width header
+├─────┬──────────┬──────────┬────────────┤
+│ 1   │ Item 1   │ $100     │ Active     │
+│ 2   │ Item 2   │ $200     │ Active     │
+├─────┴──────────┴──────────┴────────────┤
+│ CATEGORY B                             │  ← Full-width header
+├─────┬──────────┬──────────┬────────────┤
+│ 3   │ Item 3   │ $150     │ Inactive   │
+```
+
+**How It Works:**
+1. Use `beforeRender` callback to transform data
+2. Insert rows with `_isGroupHeader: true` flag
+3. Component renders these as full-width cells with `colspan`
+4. Striping continues correctly across all rows
+
+**Grouping Examples:**
+
+```vue
+// Group by first letter
+const groupByLetter = (rows) => {
+  const sorted = [...rows].sort((a, b) => 
+    a.name.localeCompare(b.name)
+  )
+  
+  const result = []
+  let currentLetter = null
+  
+  sorted.forEach(row => {
+    const letter = row.name.charAt(0).toUpperCase()
+    
+    if (letter !== currentLetter) {
+      result.push({
+        _isGroupHeader: true,
+        _groupTitle: letter,
+      })
+      currentLetter = letter
+    }
+    
+    result.push(row)
+  })
+  
+  return result
+}
+
+// Group by date range
+const groupByDate = (rows) => {
+  const sorted = [...rows].sort((a, b) => 
+    new Date(b.created_at) - new Date(a.created_at)
+  )
+  
+  const result = []
+  let currentMonth = null
+  
+  sorted.forEach(row => {
+    const month = new Date(row.created_at).toLocaleDateString('en', { 
+      year: 'numeric', 
+      month: 'long' 
+    })
+    
+    if (month !== currentMonth) {
+      result.push({
+        _isGroupHeader: true,
+        _groupTitle: month,
+      })
+      currentMonth = month
+    }
+    
+    result.push(row)
+  })
+  
+  return result
+}
+
+// Group by status
+const groupByStatus = (rows) => {
+  const active = rows.filter(r => r.is_active)
+  const inactive = rows.filter(r => !r.is_active)
+  
+  return [
+    { _isGroupHeader: true, _groupTitle: 'Active Items' },
+    ...active,
+    { _isGroupHeader: true, _groupTitle: 'Inactive Items' },
+    ...inactive
+  ]
+}
+```
+
+**Styling Group Headers:**
+
+The component applies these classes to group header rows:
+- `border-b border-gray-200` - Bottom border
+- Font styling via the inner div
+- Row striping colors (odd-row-color / even-row-color)
+
+You can customize by overriding row colors:
+```vue
+<SimpleTable 
+  :before-render="addGroupHeaders"
+  odd-row-color="bg-blue-50"
+  even-row-color="bg-white"
+/>
+```
+
+---
+
+### Data Transformation (beforeRender)
+
+**Transform data before it's rendered in the table:**
+
+```vue
+<script setup>
+import dayjs from 'dayjs'
+
+const transformData = (rows) => {
+  return rows.map(row => ({
+    ...row,
+    // Add computed properties
+    full_name: `${row.first_name} ${row.last_name}`,
+    
+    // Format dates
+    created_at_formatted: dayjs(row.created_at).format('MMM D, YYYY'),
+    
+    // Add status badge classes
+    status_class: row.status === 'active' ? 'text-green-600' : 'text-red-600',
+    
+    // Transform arrays
+    tags_joined: row.tags?.join(', ') || 'No tags',
+    
+    // Add custom logic
+    is_urgent: row.priority > 8,
+    days_since_created: dayjs().diff(dayjs(row.created_at), 'days')
+  }))
+}
+</script>
+
+<template>
+  <SimpleTable 
+    :columns="columns" 
+    fetch-url="/api/users"
+    :before-render="transformData"
+  />
+</template>
+```
+
+**When to Use:**
+- ✅ Format dates, numbers, or currencies
+- ✅ Combine multiple fields into one
+- ✅ Add computed properties
+- ✅ Transform nested objects to flat properties
+- ✅ Add CSS classes based on data
+- ✅ Filter unwanted rows (return modified array)
+
+**Example - Adding Full Names:**
+```vue
+<script setup>
+const columns = [
+  { key: 'full_name', label: 'Name' },  // Not in API response
+  { key: 'email', label: 'Email' },
+  { key: 'created_at_formatted', label: 'Joined' }
+]
+
+const beforeRender = (rows) => {
+  return rows.map(row => ({
+    ...row,
+    full_name: `${row.first_name} ${row.last_name}`,
+    created_at_formatted: new Date(row.created_at).toLocaleDateString()
+  }))
+}
+</script>
+
+<template>
+  <SimpleTable 
+    :columns="columns" 
+    :before-render="beforeRender"
+    fetch-url="/api/users" 
+  />
+</template>
+```
+
+**Execution Order:**
+1. Data fetched from API
+2. Filtering & Searching (client-side only)
+3. Sorting (client-side only)
+4. Pagination (client-side only)
+5. **`beforeRender` called** ← Your transformation here
+6. Rows rendered in table
+
 ---
 
 ### Custom Cell Rendering

package/package.json

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

@@ -26,6 +26,7 @@ interface Props {
     class?: string
     fixed?: boolean // 'left' or 'right' could be added later, assuming 'right' for actions usually
     width?: string
+    autonumber?: boolean // If true, display auto-incremented row numbers instead of data
   }[]
   mode?: 'auto' | 'server' | 'client'
   protocol?: 'laravel' | 'datatables' // API request/response format
@@ -34,6 +35,9 @@ interface Props {
   pageSizes?: any[] // number[] or { label: string, value: number }[]
   fetchUrl?: string
   
+  // Callbacks
+  beforeRender?: (rows: any[]) => any[] // Transform data before rendering
+  
   // Cache Props
   enableCache?: boolean // If true, cache responses by page/search/sort to avoid redundant requests
   
@@ -41,6 +45,7 @@ interface Props {
   queryParams?: Record<string, any> // Additional parameters to send with every request (e.g., filters, user context)
   
   // Style Props
+  rowHeight?: number // Table row height in pixels (default: 38)
   oddRowColor?: string  // Tailwind color class, e.g. 'bg-white'
   evenRowColor?: string // Tailwind color class, e.g. 'bg-gray-50'
   hoverColor?: string   // Tailwind color class for hover, e.g. 'hover:bg-gray-100'. If passed, we'll try to apply group-hover for fixed cols.
@@ -56,6 +61,7 @@ const props = withDefaults(defineProps<Props>(), {
   queryParams: () => ({}),
   perPage: 10,
   pageSizes: () => [10, 20, 30, 50, 100],
+  rowHeight: 38,
   oddRowColor: 'bg-background',
   evenRowColor: 'bg-background',
   hoverColor: 'hover:bg-muted/50'
@@ -84,6 +90,37 @@ const normalizedPageSizes = computed(() => {
     return []
 })
 
+// -- Computed: Row height-based sizing --
+const densityConfig = computed(() => {
+  const height = props.rowHeight || 38
+  
+  // Calculate padding based on height
+  // For 38px height: use p-2 (8px)
+  // For 48px height: use p-3 (12px)  
+  // For 56px+ height: use p-4 (16px)
+  let cellPadding = 'p-2'
+  let headerPadding = 'px-2'
+  let groupHeaderPadding = 'py-1'
+  
+  if (height >= 56) {
+    cellPadding = 'p-4'
+    headerPadding = 'px-4'
+    groupHeaderPadding = 'py-2'
+  } else if (height >= 44) {
+    cellPadding = 'p-3'
+    headerPadding = 'px-3'
+    groupHeaderPadding = 'py-1.5'
+  }
+  
+  return {
+    cellPadding,
+    cellHeight: `${height}px`,
+    headerHeight: `h-[${height}px]`,
+    headerPadding,
+    groupHeaderPadding
+  }
+})
+
 
 
 // <template>
@@ -189,6 +226,7 @@ const serverMeta = computed(() => {
     return {
         current_page: meta.current_page ?? 1,
         last_page: meta.last_page ?? 1,
+        per_page: meta.per_page ?? currentPerPage.value,
         from: meta.from ?? 0,
         to: meta.to ?? 0,
         total: meta.total ?? 0,
@@ -198,39 +236,52 @@ const serverMeta = computed(() => {
 
 // -- Computed: Data Normalization --
 const tableData = computed(() => {
+  let result: any[] = []
+  
   if (isServerSide.value) {
     const d = internalData.value as any
-    return d.data || []
-  }
-  
-  // Client Side Processing
-  let items = [...(internalData.value as any[])]
+    result = d.data || []
+  } else {
+    // Client Side Processing
+    let items = [...(internalData.value as any[])]
 
-  // 1. Filter
-  if (searchQuery.value) {
-    const lowerQuery = searchQuery.value.toLowerCase()
-    items = items.filter((item) =>
-      Object.values(item).some((val) =>
-        String(val).toLowerCase().includes(lowerQuery)
+    // 1. Filter
+    if (searchQuery.value) {
+      const lowerQuery = searchQuery.value.toLowerCase()
+      items = items.filter((item) =>
+        Object.values(item).some((val) =>
+          String(val).toLowerCase().includes(lowerQuery)
+        )
       )
-    )
-  }
+    }
 
-  // 2. Sort
-  if (sortColumn.value) {
-    items.sort((a, b) => {
-      const valA = a[sortColumn.value]
-      const valB = b[sortColumn.value]
-      if (valA === valB) return 0
-      const comparison = valA > valB ? 1 : -1
-      return sortDirection.value === 'asc' ? comparison : -comparison
-    })
-  }
+    // 2. Sort
+    if (sortColumn.value) {
+      items.sort((a, b) => {
+        const valA = a[sortColumn.value]
+        const valB = b[sortColumn.value]
+        if (valA === valB) return 0
+        const comparison = valA > valB ? 1 : -1
+        return sortDirection.value === 'asc' ? comparison : -comparison
+      })
+    }
 
-  // 3. Paginate
-  const start = (currentPage.value - 1) * currentPerPage.value
-  const end = start + currentPerPage.value
-  return items.slice(start, end)
+    // 3. Paginate
+    const start = (currentPage.value - 1) * currentPerPage.value
+    const end = start + currentPerPage.value
+    result = items.slice(start, end)
+  }
+  
+  // Apply beforeRender callback if provided
+  if (props.beforeRender && typeof props.beforeRender === 'function') {
+    const transformed = props.beforeRender(result)
+    // Ensure callback returns an array
+    if (Array.isArray(transformed)) {
+      result = transformed
+    }
+  }
+  
+  return result
 })
 
 const totalPages = computed(() => {
@@ -532,6 +583,38 @@ function handlePageSizeChange(size: any) {
     fetchData()
 }
 
+// Get row class with simple alternating stripes (all rows)
+function getRowClass(row: any, idx: number) {
+  // Alternate: index 0 = white, index 1 = gray, index 2 = white, etc.
+  const isOdd = idx % 2 === 0  // Changed: even index = odd color (white)
+  return [
+    { [props.oddRowColor]: isOdd, [props.evenRowColor]: !isOdd },
+    row._isGroupHeader ? '' : props.hoverColor  // No hover on headers
+  ]
+}
+
+// Get row number for auto-numbering (excluding group headers)
+function getRowNumber(idx: number): number {
+  // Count only data rows before this index
+  let dataRowCount = 0
+  for (let i = 0; i <= idx; i++) {
+    if (!tableData.value[i]?._isGroupHeader) {
+      dataRowCount++
+    }
+  }
+  
+  // Add offset for pagination
+  if (isServerSide.value) {
+    const currentPage = serverMeta.value?.current_page || 1
+    const perPage = serverMeta.value?.per_page || currentPerPage.value
+    const offset = (currentPage - 1) * perPage
+    return offset + dataRowCount
+  }
+  
+  // Client-side: just return the count
+  return dataRowCount
+}
+
 function handlePageChange(page: number) {
   if (page < 1 || page > totalPages.value) return
   
@@ -672,12 +755,14 @@ function getCellStyle(col: any) {
       <!-- We add min-w-full to Table to ensure it stretches -->
       <Table class="min-w-full table-fixed"> 
         <TableHeader>
-          <TableRow>
+          <TableRow :style="{ height: densityConfig.cellHeight }">
             <TableHead
               v-for="(col, idx) in columns"
               :key="col.key"
               :class="getCellClass(col, idx, columns.length)"
               :style="getCellStyle(col)"
+              :height="densityConfig.headerHeight"
+              :padding="densityConfig.headerPadding"
             >
               <div
                 v-if="col.sortable"
@@ -706,24 +791,44 @@ function getCellStyle(col: any) {
                 v-for="(row, idx) in tableData" 
                 :key="idx"
                 class="group"
-                :class="[{ [evenRowColor]: Number(idx) % 2 === 0, [oddRowColor]: Number(idx) % 2 !== 0 }, hoverColor]"
+                :class="getRowClass(row, idx)"
+                :style="{ height: densityConfig.cellHeight }"
             >
-              <TableCell
-                v-for="(col, cIdx) in columns"
-                :key="col.key"
-                :class="getCellClass(col, cIdx, columns.length, Number(idx))"
-                :style="getCellStyle(col)"
-              >
-                <!-- Scoped Slot for custom cell rendering -->
-                 <div>
-                    <slot :name="`cell-${col.key}`" :row="row">
-                    {{ row[col.key] }}
-                    </slot>
-                 </div>
-              </TableCell>
+              <!-- 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']">
+                    {{ row._groupTitle }}
+                  </div>
+                </TableCell>
+              </template>
+              
+              <!-- Regular Data Row: Individual cells -->
+              <template v-else>
+                <TableCell
+                  v-for="(col, cIdx) in columns"
+                  :key="col.key"
+                  :class="getCellClass(col, cIdx, columns.length, idx)"
+                  :style="getCellStyle(col)"
+                  :padding="densityConfig.cellPadding"
+                  :height="densityConfig.cellHeight"
+                >
+                  <!-- Auto-numbering or custom cell rendering -->
+                   <div>
+                      <template v-if="col.autonumber">
+                        {{ getRowNumber(idx) }}
+                      </template>
+                      <template v-else>
+                        <slot :name="`cell-${col.key}`" :row="row">
+                        {{ row[col.key] }}
+                        </slot>
+                      </template>
+                   </div>
+                </TableCell>
+              </template>
             </TableRow>
           </template>
-          <TableRow v-else>
+          <TableRow v-else :style="{ height: densityConfig.cellHeight }">
             <TableCell :colspan="columns.length" class="h-24 text-center">
               No results.
             </TableCell>

package/src/components/table/TableCell.vue

@@ -4,18 +4,29 @@ import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
+  style?: any
+  padding?: string
+  height?: string
 }>()
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, padding: __, height: ___, style: ____, ...delegated } = props
 
   return delegated
 })
+
+const cellStyle = computed(() => {
+  const baseStyle = (props as any).style || {}
+  const heightStyle = props.height ? { minHeight: props.height } : {}
+  
+  return { ...baseStyle, ...heightStyle }
+})
 </script>
 
 <template>
   <td
-    :class="cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', props.class)"
+    :class="cn(props.padding || 'p-2', 'align-middle [&:has([role=checkbox])]:pr-0', props.class)"
+    :style="cellStyle"
     v-bind="delegatedProps"
   >
     <slot />

package/src/components/table/TableHead.vue

@@ -4,10 +4,12 @@ import { cn } from '@/lib/utils'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
+  height?: string
+  padding?: string
 }>()
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, height: __, padding: ___, ...delegated } = props
 
   return delegated
 })
@@ -17,7 +19,9 @@ const delegatedProps = computed(() => {
   <th
     :class="
       cn(
-        'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+        props.height || 'h-[38px]',
+        props.padding || 'px-2',
+        'text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
         props.class,
       )
     "