@meistrari/tela-build 1.42.1 → 1.43.0

package/components/tela/badge/badge.vue

@@ -22,7 +22,7 @@ const tag = computed(() => props.to ? NuxtLink : 'div')
         v-bind="props.to ? { to: props.to, target: props.target } : {}"
         :class="cn(
             'inline-block px-[5px] py-[3px] rounded-[5px] select-none',
-            variant === 'outline' && 'border-[0.5px] border-border',
+            variant === 'outline' && 'bg-background border-[0.5px] border-border',
             variant === 'filled' && 'bg-lowered',
             props.class,
         )"

package/components/tela/complex-table/complex-table-fallback-skeleton.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineOptions({
+    name: 'TelaComplexTableFallbackSkeleton',
+})
+
+const props = withDefaults(defineProps<{
+    rowHeight?: number
+    rows?: number
+    height?: number | string
+}>(), {
+    rowHeight: 64,
+    rows: 1,
+})
+
+const skeletonStyle = computed(() => ({
+    '--complex-table-fallback-row-height': `${props.rowHeight}px`,
+    'height': typeof props.height === 'number' ? `${props.height}px` : props.height ?? `${props.rows * props.rowHeight}px`,
+}))
+</script>
+
+<template>
+    <div
+        aria-hidden="true"
+        class="complex-table-fallback-skeleton"
+        :style="skeletonStyle"
+    />
+</template>
+
+<style scoped>
+.complex-table-fallback-skeleton {
+    width: 100%;
+    min-height: var(--complex-table-fallback-row-height);
+    background-color: white;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1380' height='64' viewBox='0 0 1380 64'%3E%3Cg fill='%23EFF1F3'%3E%3Crect x='100' y='28' width='34' height='8' rx='4'/%3E%3Crect x='146' y='28' width='48' height='8' rx='4'/%3E%3Crect x='206' y='28' width='200' height='8' rx='4'/%3E%3Crect x='418' y='28' width='90' height='8' rx='4'/%3E%3Crect x='520' y='28' width='180' height='8' rx='4'/%3E%3Crect x='808' y='28' width='80' height='8' rx='4'/%3E%3Crect x='1012' y='28' width='80' height='8' rx='4'/%3E%3Crect x='1156' y='28' width='80' height='8' rx='4'/%3E%3Crect x='1300' y='28' width='80' height='8' rx='4'/%3E%3C/g%3E%3C/svg%3E");
+    background-position: -100px 0;
+    background-repeat: repeat-y;
+    background-size: 1380px var(--complex-table-fallback-row-height);
+}
+</style>

package/components/tela/complex-table/complex-table-header.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Column, Row } from './types'
 import TelaTableHeaderCell from './complex-table-header-cell.vue'
+import { isHorizontalSpacerColumn } from './composables/horizontal-virtual-columns'
 
 defineOptions({
     name: 'TelaComplexTableHeader',
@@ -43,7 +44,8 @@ const emit = defineEmits(['selectAll'])
                 :class="headerClass"
                 :style="column.style"
             >
-                <slot v-if="column.key && $slots[`header-${column.key}`] !== undefined" :name="`header-${column.key}`" :column="column" />
+                <div v-if="isHorizontalSpacerColumn(column)" h-56px bg-white border-b-0.5px border-gray-200 />
+                <slot v-else-if="column.key && $slots[`header-${column.key}`] !== undefined" :name="`header-${column.key}`" :column="column" />
                 <TelaTableHeaderCell v-else :column="column" type="default" />
             </th>
             <th v-for="(_, idx) in (rows?.length ? 0 : 3)" :key="idx" sticky top-0px p-0px />

package/components/tela/complex-table/complex-table-row.vue

@@ -2,6 +2,7 @@
 import type { Column, Row, HoverMechanism } from './types'
 import { HoverMechanismTypes } from './types'
 import TelaTableCell from './complex-table-cell.vue'
+import { isHorizontalSpacerColumn } from './composables/horizontal-virtual-columns'
 import { isLoading, hasContent, hasError, getRowTitle, readRowPath } from './utils'
 
 const props = defineProps<{
@@ -15,7 +16,6 @@ const props = defineProps<{
     loading?: boolean
     disableRowClick?: boolean
     hoverMechanism?: HoverMechanism
-    hoveredRowIndex?: number | null
     rowClass?: string | ((row: Row) => string)
     rowIndexClass?: string
     rowTitlePath?: string
@@ -26,12 +26,13 @@ const props = defineProps<{
     totalRows?: number
     hideError?: boolean
     selectClass?: string
+    showBorder?: boolean
+    borderMode?: 'default' | 'visible'
 }>()
 
 const emit = defineEmits<{
     select: [id: string]
     open: [id: string]
-    hover: [index: number | null]
 }>()
 
 const slots = useSlots()
@@ -42,23 +43,27 @@ const computedRowClass = computed(() => {
     // Base classes
     classes.push('bg-white')
 
-    // Border classes
-    if (props.isFirstRow && props.totalRows && props.totalRows > 1) {
-        classes.push('b-b-0.5px b-t-0px b-gray-200!')
+    if (props.borderMode === 'visible') {
+        classes.push('b-b-0.5px! b-t-0px!', props.showBorder === false ? 'b-transparent!' : 'b-gray-200!')
     }
-    if (props.rowIndex % 2 !== 0 && props.rowIndex > 0) {
-        classes.push('b-y-0.5px b-gray-200!')
-    }
-    if (props.isLastRow) {
-        classes.push('b-b-0px!')
+    else {
+        if (props.showBorder !== false) {
+            // Border classes
+            if (props.isFirstRow && props.totalRows && props.totalRows > 1) {
+                classes.push('b-b-0.5px b-t-0px b-gray-200!')
+            }
+            if (props.rowIndex % 2 !== 0 && props.rowIndex > 0) {
+                classes.push('b-y-0.5px b-gray-200!')
+            }
+            if (props.isLastRow) {
+                classes.push('b-b-0px!')
+            }
+        }
     }
 
     // Hover classes
     if (props.hoverMechanism === HoverMechanismTypes.Row) {
-        classes.push('cursor-pointer')
-        if (props.hoveredRowIndex === props.rowIndex) {
-            classes.push('bg-gray-50!')
-        }
+        classes.push('cursor-pointer', 'hover:bg-gray-50!')
     }
 
     // Custom row class
@@ -93,15 +98,21 @@ function handleCheckboxChange() {
     <tr
         h-64px
         :class="computedRowClass"
-        @mouseenter="emit('hover', rowIndex)"
-        @mouseleave="emit('hover', null)"
         @click.stop="handleRowClick"
     >
         <td v-if="allowSelect" class="sticky left-0 bg-white z-9" :class="[selectClass]" @click.stop>
             <div
                 flex="~" h-px items-center justify-center w-32px relative z-0
             >
+                <TelaSkeleton
+                    v-if="isLoading(row, loading || false) && !row.id"
+                    h-16px
+                    rounded="2px"
+                    w-16px
+                    bg="#E9ECEF"
+                />
                 <TelaCheckbox
+                    v-else
                     :model-value="isSelected || false"
                     @update:model-value="handleCheckboxChange"
                 />
@@ -148,7 +159,8 @@ function handleCheckboxChange() {
             :key="columnIdx"
             :style="column.style"
         >
-            <div v-if="isLoading(row, loading || false)" flex="~ col" gap-4px pl-12px h-64px justify-center :class="rowClass">
+            <div v-if="isHorizontalSpacerColumn(column)" h-64px :class="rowClass" />
+            <div v-else-if="isLoading(row, loading || false)" flex="~ col" gap-4px pl-12px h-64px justify-center :class="rowClass">
                 <TelaSkeleton w="70%" h-8px />
             </div>
             <template v-else>

package/components/tela/complex-table/complex-table-virtualized.vue

@@ -1,8 +1,16 @@
 <script setup lang="ts">
-import type { Column, Row, ComplexTableType } from './types'
+import type { Column, ComplexTableType } from './types'
 import { HoverMechanismTypes } from './types'
 import TelaTableHeader from './complex-table-header.vue'
 import TelaTableRow from './complex-table-row.vue'
+import TelaComplexTableFallbackSkeleton from './complex-table-fallback-skeleton.vue'
+import {
+    createHorizontalSpacerColumn,
+    getColumnVirtualWidth,
+    getHorizontalVirtualColumns,
+    HORIZONTAL_LEFT_SPACER_COLUMN_KEY,
+    HORIZONTAL_RIGHT_SPACER_COLUMN_KEY,
+} from './composables/horizontal-virtual-columns'
 import { useTableSelection } from './composables/table-selection'
 import { useTableCommon } from './composables/table-common'
 import { useVirtualScroll } from './composables/virtual-scroll'
@@ -36,13 +44,11 @@ const {
 const selectedRows = computed(() => props.selectedRows ?? internalSelectedRows.value)
 
 const {
-    hoveredRowIndex,
     hasHorizontalScroll,
     handleRowSelect,
     handleSelectAllRows,
     handleScroll,
     updateScrollButtonsState,
-    handleRowHover,
 } = useTableCommon({
     props,
     emit,
@@ -54,8 +60,44 @@ const {
 })
 
 const hoverMechanism = computed(() => props.hoverMechanism || HoverMechanismTypes.Cell)
-const columnsWithHeaders: ComputedRef<Column[]> = computed(() => props.columns.filter((column: Column) => slots[`header-${column.key}`] !== undefined))
+const horizontalScrollLeft = ref(0)
+const horizontalViewportWidth = ref(0)
+const defaultFixedColumnsWidth = computed(() => {
+    const selectWidth = props.allowSelect && props.rows.length ? 32 : 0
+    const rowIndexWidth = props.allowRowIndex ? 48 : 0
+    return selectWidth + rowIndexWidth
+})
+const fixedColumnsWidth = computed(() => props.virtualizedFixedColumnsWidth ?? defaultFixedColumnsWidth.value)
+const horizontalVirtualColumns = computed(() => getHorizontalVirtualColumns({
+    columns: props.columns,
+    getColumnWidth: column => getColumnVirtualWidth(column, props.virtualizedDefaultColumnWidth ?? 200),
+    scrollLeft: horizontalScrollLeft.value,
+    viewportWidth: horizontalViewportWidth.value,
+    fixedWidth: fixedColumnsWidth.value,
+    overscanPx: props.virtualizedColumnOverscan ?? 480,
+}))
+const renderedColumns = computed<Column[]>(() => {
+    if (!props.virtualizedColumns) {
+        return props.columns
+    }
+
+    const result: Column[] = []
+
+    if (horizontalVirtualColumns.value.leftSpacerWidth > 0) {
+        result.push(createHorizontalSpacerColumn(HORIZONTAL_LEFT_SPACER_COLUMN_KEY, horizontalVirtualColumns.value.leftSpacerWidth))
+    }
+
+    result.push(...horizontalVirtualColumns.value.visibleColumns)
+
+    if (horizontalVirtualColumns.value.rightSpacerWidth > 0) {
+        result.push(createHorizontalSpacerColumn(HORIZONTAL_RIGHT_SPACER_COLUMN_KEY, horizontalVirtualColumns.value.rightSpacerWidth))
+    }
+
+    return result
+})
+const columnsWithHeaders: ComputedRef<Column[]> = computed(() => renderedColumns.value.filter((column: Column) => slots[`header-${column.key}`] !== undefined))
 const shouldHideScrollbar = computed(() => props.hideScrollbar || (!hasHorizontalScroll.value && !props.showVerticalScrollbar))
+const rowHeight = computed(() => props.virtualizedRowHeight ?? 64)
 
 // Track if we're currently loading more data to prevent duplicate requests
 const isLoadingMore = ref(false)
@@ -65,35 +107,56 @@ const virtualScroll = props.useVirtualization !== false
     ? useVirtualScroll({
             count: computed(() => props.rows.length),
             getScrollElement: () => mainTableEl.value || null,
-            estimateSize: props.virtualizedRowHeight ?? 64,
+            estimateSize: rowHeight.value,
             overscan: props.virtualizedOverscan ?? 5,
+            maxScrollItemsPerEvent: props.virtualizedMaxScrollRowsPerEvent,
             initialBatchSize: props.virtualizedInitialBatchSize ?? 30,
         })
     : null
 
+const spacerColspan = computed(() => renderedColumns.value.length + (props.allowSelect ? 1 : 0) + (props.allowRowIndex ? 1 : 0) + 2)
+const shouldShowVirtualFallbackBackground = computed(() => Boolean(virtualScroll && props.virtualizedShowBlankStateLoading && props.rows.length))
+const isVirtualFallbackBackgroundVisible = computed(() => shouldShowVirtualFallbackBackground.value && Boolean(virtualScroll?.isScrollingFast.value))
+const virtualTableContainerStyle = computed(() => ({
+    maxHeight: `${props.maxHeight || 462.5}px`,
+}))
+const visibleRange = computed(() => virtualScroll?.visibleRange.value)
+
+function isRowVisible(index: number) {
+    const range = visibleRange.value
+    return !range || (index >= range.startIndex && index <= range.endIndex)
+}
+
 const displayRows = computed(() => {
     if (!virtualScroll) {
-        return props.rows.map((row, index) => ({ row, index }))
+        return props.rows.map((row, index) => ({ row, index, isVisible: true }))
     }
 
-    return virtualScroll.virtualItems.value.map(virtualItem => ({
-        row: props.rows[virtualItem.index] || {} as Row,
-        index: virtualItem.index,
-    }))
+    return virtualScroll.virtualItems.value.flatMap((virtualItem) => {
+        const row = props.rows[virtualItem.index]
+
+        return row
+            ? [{
+                    row,
+                    index: virtualItem.index,
+                    isVisible: isRowVisible(virtualItem.index),
+                }]
+            : []
+    })
 })
 
 const topSpacerHeight = computed(() => {
     if (!virtualScroll)
         return 0
     const startIndex = virtualScroll.range.value.startIndex
-    return startIndex * (props.virtualizedRowHeight ?? 64)
+    return startIndex * rowHeight.value
 })
 
 const bottomSpacerHeight = computed(() => {
     if (!virtualScroll)
         return 0
     const endIndex = virtualScroll.range.value.endIndex
-    return (props.rows.length - endIndex - 1) * (props.virtualizedRowHeight ?? 64)
+    return (props.rows.length - endIndex - 1) * rowHeight.value
 })
 
 const shouldShowTopSpacer = computed(() => {
@@ -104,11 +167,41 @@ const shouldShowBottomSpacer = computed(() => {
     return virtualScroll && bottomSpacerHeight.value > 0
 })
 
-// Infinite scroll with virtualization support
+function updateTableMeasurements() {
+    updateScrollButtonsState()
+    updateHorizontalScrollState(mainTableEl.value)
+}
+
+function updateHorizontalScrollState(el?: HTMLElement) {
+    if (!el)
+        return
+
+    if (horizontalScrollLeft.value !== el.scrollLeft) {
+        horizontalScrollLeft.value = el.scrollLeft
+    }
+
+    if (horizontalViewportWidth.value !== el.clientWidth) {
+        horizontalViewportWidth.value = el.clientWidth
+    }
+}
+
+function handleTableScroll(event: Event) {
+    updateHorizontalScrollState(event.target as HTMLElement)
+    handleScroll(event)
+}
+
 let lastLoadMoreTriggeredAt = 0
+// Infinite scroll with virtualization support
 watch(() => virtualScroll?.range.value, async (newRange) => {
-    if (!newRange || !virtualScroll || isLoadingMore.value)
+    if (!newRange || !virtualScroll)
+        return
+
+    if (!mainTableEl.value?.clientHeight)
+        return
+
+    if (isLoadingMore.value)
         return
+
     // Check if we're near the end and haven't recently triggered a load
     const now = Date.now()
     if (newRange.endIndex >= props.rows.length - 10 && now - lastLoadMoreTriggeredAt > 500) {
@@ -127,7 +220,7 @@ watch(() => virtualScroll?.range.value, async (newRange) => {
             emit('error', error instanceof Error ? error : new Error(String(error)))
         }
     }
-}, { deep: true })
+})
 
 // Fallback for non-virtualized mode
 if (!virtualScroll) {
@@ -142,20 +235,27 @@ if (!virtualScroll) {
 }
 
 onMounted(() => {
-    updateScrollButtonsState()
-    window.addEventListener('resize', updateScrollButtonsState)
+    updateTableMeasurements()
+    window.addEventListener('resize', updateTableMeasurements)
     virtualScroll?.init()
 })
 
 onUnmounted(() => {
-    window.removeEventListener('resize', updateScrollButtonsState)
+    window.removeEventListener('resize', updateTableMeasurements)
     virtualScroll?.destroy()
 })
 
 watch(() => props.columns, () => {
-    nextTick(updateScrollButtonsState)
+    nextTick(updateTableMeasurements)
 }, { deep: true })
 
+useResizeObserver(mainTableEl, (entries) => {
+    const width = entries[0]?.contentRect.width
+    if (width && horizontalViewportWidth.value !== width) {
+        horizontalViewportWidth.value = width
+    }
+})
+
 const hasRowIndex = computed(() => props.allowRowIndex && props.rows.length)
 const hasSelect = computed(() => props.allowSelect && props.rows.length)
 
@@ -180,6 +280,7 @@ watch([hasRowIndex, hasSelect, mainTableEl], () => {
 
 <template>
     <div
+        class="relative"
         rounded-12px flex="~"
         b="0.5px gray-300"
         overflow-hidden
@@ -188,18 +289,28 @@ watch([hasRowIndex, hasSelect, mainTableEl], () => {
             boxShadow: '0px 2px 5px 0px #677F940D, 0px 3px 16px 0px #677F940A',
         }"
     >
+        <TelaComplexTableFallbackSkeleton
+            v-if="shouldShowVirtualFallbackBackground"
+            v-show="isVirtualFallbackBackgroundVisible"
+            class="virtual-scroll-fallback-skeleton"
+            :row-height="rowHeight"
+            height="100%"
+        />
         <div
             ref="mainTableEl"
             w-full
             class="main-table-container overflow-auto"
             relative
-            :class="{ 'hide-scrollbar': shouldHideScrollbar, 'show-vertical-scrollbar': props.showVerticalScrollbar }"
-            :style="{ maxHeight: `${props.maxHeight || 462.5}px` }"
-            @scroll="handleScroll"
+            :class="{
+                'hide-scrollbar': shouldHideScrollbar,
+                'show-vertical-scrollbar': props.showVerticalScrollbar,
+            }"
+            :style="virtualTableContainerStyle"
+            @scroll.passive="handleTableScroll"
         >
             <table z-2 class="relative w-full min-w-full">
                 <TelaTableHeader
-                    :columns="columns"
+                    :columns="renderedColumns"
                     :rows="rows"
                     :selected-rows="selectedRows"
                     :allow-select="allowSelect"
@@ -223,15 +334,15 @@ watch([hasRowIndex, hasSelect, mainTableEl], () => {
 
                 <tbody v-if="rows.length">
                     <tr v-if="shouldShowTopSpacer" :style="{ height: `${topSpacerHeight}px` }">
-                        <td :colspan="columns.length + (allowSelect ? 1 : 0) + (allowRowIndex ? 1 : 0) + 2" />
+                        <td :colspan="spacerColspan" />
                     </tr>
 
                     <TelaTableRow
-                        v-for="{ row: rowData, index: idx } in displayRows"
+                        v-for="{ row: rowData, index: idx, isVisible } in displayRows"
                         :key="rowData.id || idx"
                         :row="rowData"
                         :row-index="idx"
-                        :columns="columns"
+                        :columns="renderedColumns"
                         :allow-select="allowSelect"
                         :allow-row-index="allowRowIndex"
                         :allow-row-action="$slots['row-action'] !== undefined"
@@ -239,7 +350,6 @@ watch([hasRowIndex, hasSelect, mainTableEl], () => {
                         :loading="props.loading"
                         :disable-row-click="props.disableRowClick?.(rowData)"
                         :hover-mechanism="hoverMechanism"
-                        :hovered-row-index="hoveredRowIndex"
                         :row-class="props.rowClass"
                         :row-index-class="props.rowIndexClass"
                         :row-title-path="props.rowTitlePath"
@@ -249,15 +359,16 @@ watch([hasRowIndex, hasSelect, mainTableEl], () => {
                         :is-last-row="idx === rows.length - 1"
                         :hide-error="props.hideError"
                         :total-rows="rows.length"
+                        :show-border="isVisible"
+                        :border-mode="virtualScroll ? 'visible' : 'default'"
                         @select="handleRowSelect"
                         @open="(id: string) => emit('open', id)"
-                        @hover="handleRowHover"
                     >
                         <template #leading="slotProps">
                             <slot name="leading" v-bind="slotProps" />
                         </template>
 
-                        <template v-for="column in columns" :key="column.key" #[column.key!]="slotProps">
+                        <template v-for="column in renderedColumns" :key="column.key" #[column.key!]="slotProps">
                             <slot v-if="column.key" :name="column.key" v-bind="slotProps" />
                         </template>
 
@@ -267,11 +378,11 @@ watch([hasRowIndex, hasSelect, mainTableEl], () => {
                     </TelaTableRow>
 
                     <tr v-if="shouldShowBottomSpacer" :style="{ height: `${bottomSpacerHeight}px` }">
-                        <td :colspan="columns.length + (allowSelect ? 1 : 0) + (allowRowIndex ? 1 : 0) + 2" />
+                        <td :colspan="spacerColspan" />
                     </tr>
 
                     <tr v-if="$slots.footer && !virtualScroll" b="b-0.5px gray-200">
-                        <td :colspan="columns.length + 2">
+                        <td :colspan="renderedColumns.length + 2">
                             <div flex items-center h-64px b="t-0.5px gray-200" :class="props.rowClass">
                                 <slot name="footer" />
                             </div>
@@ -319,4 +430,11 @@ thead th[style*="left"] {
 thead th.bg-white {
     background-color: white !important;
 }
+
+.virtual-scroll-fallback-skeleton {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+}
 </style>

package/components/tela/complex-table/complex-table.mdx

@@ -361,6 +361,7 @@ const handleError = (error) => {
 interface Column {
   key?: string
   title: string
+  width?: number
   isDefault?: boolean
   icon?: {
     name: string
@@ -375,6 +376,7 @@ interface Column {
 interface Row {
   id?: string
   index?: number
+  renderKey?: string | number
   status: string
   name: string
   errorMessage?: string
@@ -414,6 +416,12 @@ type ComplexTableProps = {
   virtualizedOverscan?: number
   virtualizedRowHeight?: number
   virtualizedInitialBatchSize?: number
+  virtualizedMaxScrollRowsPerEvent?: number
+  virtualizedShowBlankStateLoading?: boolean
+  virtualizedColumns?: boolean
+  virtualizedColumnOverscan?: number
+  virtualizedFixedColumnsWidth?: number
+  virtualizedDefaultColumnWidth?: number
 }
 ```
 
@@ -436,6 +444,7 @@ The ComplexTable system consists of these sub-components:
 - `TelaComplexTableRow` - Individual row component
 - `TelaComplexTableCell` - Default cell component
 - `TelaComplexTableHeaderCell` - Header cell component
+- `TelaComplexTableFallbackSkeleton` - Table-shaped skeleton fallback for virtual blank states and loading empty states
 
 ## Features
 
@@ -446,6 +455,7 @@ The ComplexTable system consists of these sub-components:
 - **Status Indicators**: Built-in support for loading, success, and error states
 - **Custom Rendering**: Slot-based customization for headers, cells, and rows
 - **Virtualization**: Automatic virtualization for large datasets with configurable options
+- **Column Virtualization**: Optional horizontal virtualization for tables with many columns
 - **Infinite Scroll**: Built-in infinite scroll support for lazy loading
 - **Error Handling**: Display error messages for failed rows
 - **Empty States**: Customizable empty state when no data is available
@@ -479,6 +489,12 @@ When `useVirtualization` is enabled, the table automatically switches to a virtu
 - `virtualizedRowHeight` - Height of each row in pixels (default: 64)
 - `virtualizedOverscan` - Number of rows to render outside the visible area (default: 5)
 - `virtualizedInitialBatchSize` - Initial number of rows to render (default: 30)
+- `virtualizedMaxScrollRowsPerEvent` - Maximum estimated rows a single scroll event can move before the offset is clamped (default: unlimited)
+- `virtualizedShowBlankStateLoading` - Shows a table-shaped skeleton background in blank virtualized areas while rows are being repainted during fast scrolling (default: false)
+- `virtualizedColumns` - Enables horizontal column virtualization for the `columns` array (default: false)
+- `virtualizedColumnOverscan` - Horizontal overscan in pixels for keeping nearby columns mounted (default: 480)
+- `virtualizedFixedColumnsWidth` - Total width before the virtualized columns start, including select/index/leading columns when those areas should remain mounted (default: select + index width)
+- `virtualizedDefaultColumnWidth` - Width used when a column does not provide `width` or a pixel `style` width (default: 200)
 
 ## Accessibility
 
@@ -487,4 +503,3 @@ When `useVirtualization` is enabled, the table automatically switches to a virtu
 - ARIA attributes for screen readers
 - Focus management
 - Proper table headers and relationships
-

package/components/tela/complex-table/complex-table.stories.ts

@@ -150,15 +150,11 @@ export const WithRowHover: Story = {
     render: args => ({
         components: { TelaComplexTable },
         setup() {
-            return {
-                args,
-                onHover: (rowData: any) => console.log('Hovering row:', rowData),
-            }
+            return { args }
         },
         template: `
             <TelaComplexTable 
                 v-bind="args"
-                @hover="onHover"
             />
         `,
     }),