@witchcraft/ui 0.3.14 → 0.3.15

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.3.14",
+  "version": "0.3.15",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/assets/utils.css

@@ -1 +1 @@
-@custom-variant dark (&:where(.dark, .dark *));@utility focus-outline-within{@apply outlined-within:outline-2 outlined-within:outline-accent-500 outlined-within:outline-offset-2}@utility focus-outline{@apply outlined:outline-2 outlined:outline-accent-500 outlined:outline-offset-2}@utility focus-outline-no-offset{@apply outlined:outline-2 outlined:outline-accent-500}@utility focus-outline-hidden{@apply outlined:outline-none}@utility bg-squares-gradient{--_square:var(--squareSize,5px);--_double_square:calc(var(--_square)*2);--_light_square:var(--lightSquare,var(--color-white));--_dark_square:var(--darkSquare,var(--color-black));background-color:var(--_light_square);background:repeating-conic-gradient(var(--_dark_square) 0 25%,var(--_light_square) 0 50%) 50% /var(--_double_square) var(--_double_square)}@utility square-light-*{--lightSquare:--value(--color- *)}@utility square-dark-*{--darkSquare:--value(--color- *)}@utility square-size-*{--squareSize:calc(--value(integer) * 1px)}@utility bg-bars-gradient{--_bg_color:var(--bars-bg-color,var(--color-accent-700));--_fg_color:var(--bars-fg-color,var(--color-accent-800));--_angle:var(--bars-angle,45deg);--_fg_width:var(--bars-fg-width,50%);--_bg_width:calc(100% - var(--_fg_width));background-color:var(--_bg_color);--_pos_1:calc(var(--_bg_width)/2);--_pos_2:calc(var(--_bg_width)/2 + var(--_fg_width)/2);--_pos_3:calc(var(--_bg_width) + var(--_fg_width)/2);background-image:repeating-linear-gradient(var(--_angle),var(--_bg_color),var(--_bg_color) var(--_pos_1),var(--_fg_color) var(--_pos_1),var(--_fg_color) var(--_pos_2),var(--_bg_color) var(--_pos_2),var(--_bg_color) var(--_pos_3),var(--_fg_color) var(--_pos_3),var(--_fg_color))}@utility bars-angle-*{--bars-angle:var(--value(integer) * 1deg)}@utility bars-fg-*{--bars-fg-color:--value(--color-*)}@utility bars-bg-*{--bars-bg-color:--value(--color-*)}@utility bars-w-*{--bars-fg-width:calc(--value(integer) * 1%, 50%)}@utility scrollbar-hidden{-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}}@utility styled-scrollbar{--_scrollbar_width:var(--scrollbar-width,calc(var(--spacing)*3));--_scrollbar_border_width:var(--scrollbar-border-width,calc(var(--spacing)/2));--_scrollbar_color:var(--scrollbar-color,--alpha(var(--color-accent-500)/40%));--_scrollbar_hover_color:var(--scrollbar-hover-color,--alpha(var(--color-accent-500)/80%));--_scrollbar_bg_color:var(--scrollbar-bg-color,var(--color-bg));.dark &{--_scrollbar_bg_color:var(--scrollbar-bg-color,var(--color-fg))}&::-webkit-scrollbar{height:var(--_scrollbar_width);width:var(--_scrollbar_width)}&::-webkit-scrollbar-corner,&::-webkit-scrollbar-track{background-color:transparent}&::-webkit-scrollbar-thumb,&::-webkit-scrollbar-track{border-radius:var(--_scrollbar_width)}&::-webkit-scrollbar-thumb{background-color:var(--_scrollbar_color);border:var(--_scrollbar_border_width) solid var(--_scrollbar_bg_color)}&::-webkit-scrollbar-thumb:hover{cursor:pointer}&::-webkit-scrollbar-thumb:active,&::-webkit-scrollbar-thumb:hover{background-color:var(--_scrollbar_hover_color);border-radius:var(--_scrollbar_width)}}@utility styled-scrollbar-w-*{--scrollbar-width:--value(integer)}@utility styled-scrollbar-border-w-*{--scrollbar-border-width:--value(integer)}@utility styled-scrollbar-*{--scrollbar-color:--value(--color-*)}@utility styled-scrollbar-bg-*{--scrollbar-bg-color:--value(--color-*)}@utility styled-resizer{--_resizer_width:var(--resizer-width,8px);--_resizer_color:var(--resizer-color,var(--color-neutral-300));.dark &{--_resizer_color:var(--resizer-color,var(--color-neutral-700))}&::-webkit-resizer{border-bottom-color:var(--_resizer_color);border-left-color:transparent;border-right-color:var(--_resizer_color);border-style:solid;border-top-color:transparent;border-width:var(--_resizer_width)}}@utility styled-resizer-w-*{--resizer-width:--value(integer)}@utility styled-resizer-color-*{--resizer-color:--value(--color-*)}@utility content-vertical-holder{--tw-content:"\200b";content:var(--tw-content)}@utility no-touch-action{touch-action:none}@utility bg-transparency-squares{@apply bg-squares-gradient square-light-white square-dark-neutral-300 square-size-6}@utility link-like{@apply cursor-pointer hover:text-accent-500}
+@custom-variant dark (&:where(.dark, .dark *));@utility focus-outline-within{@apply outlined-within:outline-2 outlined-within:outline-accent-500 outlined-within:outline-offset-2}@utility focus-outline{@apply outlined:outline-2 outlined:outline-accent-500 outlined:outline-offset-2}@utility focus-outline-no-offset{@apply outlined:outline-2 outlined:outline-accent-500}@utility focus-outline-hidden{@apply outlined:outline-none}@utility bg-squares-gradient{--_square:var(--squareSize,5px);--_double_square:calc(var(--_square)*2);--_light_square:var(--lightSquare,var(--color-white));--_dark_square:var(--darkSquare,var(--color-black));background-color:var(--_light_square);background:repeating-conic-gradient(var(--_dark_square) 0 25%,var(--_light_square) 0 50%) 50% /var(--_double_square) var(--_double_square)}@utility square-light-*{--lightSquare:--value(--color- *)}@utility square-dark-*{--darkSquare:--value(--color- *)}@utility square-size-*{--squareSize:calc(--value(integer) * 1px)}@utility bg-bars-gradient{--_bg_color:var(--bars-bg-color,var(--color-accent-700));--_fg_color:var(--bars-fg-color,var(--color-accent-800));--_angle:var(--bars-angle,45deg);--_fg_width:var(--bars-fg-width,50%);--_bg_width:calc(100% - var(--_fg_width));background-color:var(--_bg_color);--_pos_1:calc(var(--_bg_width)/2);--_pos_2:calc(var(--_bg_width)/2 + var(--_fg_width)/2);--_pos_3:calc(var(--_bg_width) + var(--_fg_width)/2);background-image:repeating-linear-gradient(var(--_angle),var(--_bg_color),var(--_bg_color) var(--_pos_1),var(--_fg_color) var(--_pos_1),var(--_fg_color) var(--_pos_2),var(--_bg_color) var(--_pos_2),var(--_bg_color) var(--_pos_3),var(--_fg_color) var(--_pos_3),var(--_fg_color))}@utility bars-angle-*{--bars-angle:var(--value(integer) * 1deg)}@utility bars-fg-*{--bars-fg-color:--value(--color-*)}@utility bars-bg-*{--bars-bg-color:--value(--color-*)}@utility bars-w-*{--bars-fg-width:calc(--value(integer) * 1%, 50%)}@utility scrollbar-hidden{-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}}@utility styled-scrollbar{--_scrollbar_width:var(--scrollbar-width,calc(var(--spacing)*3));--_scrollbar_border_width:var(--scrollbar-border-width,calc(var(--spacing)/2));--_scrollbar_color:var(--scrollbar-color,--alpha(var(--color-accent-500)/40%));--_scrollbar_hover_color:var(--scrollbar-hover-color,--alpha(var(--color-accent-500)/80%));--_scrollbar_bg_color:var(--scrollbar-bg-color,var(--color-bg));.dark &{--_scrollbar_bg_color:var(--scrollbar-bg-color,var(--color-fg))}&::-webkit-scrollbar{height:var(--_scrollbar_width);width:var(--_scrollbar_width)}&::-webkit-scrollbar-corner,&::-webkit-scrollbar-track{background-color:transparent}&::-webkit-scrollbar-thumb,&::-webkit-scrollbar-track{border-radius:var(--_scrollbar_width)}&::-webkit-scrollbar-thumb{background-color:var(--_scrollbar_color);border:var(--_scrollbar_border_width) solid var(--_scrollbar_bg_color)}&::-webkit-scrollbar-thumb:hover{cursor:pointer}&::-webkit-scrollbar-thumb:active,&::-webkit-scrollbar-thumb:hover{background-color:var(--_scrollbar_hover_color);border-radius:var(--_scrollbar_width)}}@utility styled-scrollbar-w-*{--scrollbar-width:--value(integer)}@utility styled-scrollbar-border-w-*{--scrollbar-border-width:--value(integer)}@utility styled-scrollbar-*{--scrollbar-color:--value(--color-*)}@utility styled-scrollbar-bg-*{--scrollbar-bg-color:--value(--color-*)}@utility styled-resizer{--_resizer_width:var(--resizer-width,8px);--_resizer_color:var(--resizer-color,var(--color-neutral-300));.dark &{--_resizer_color:var(--resizer-color,var(--color-neutral-700))}&::-webkit-resizer{border-bottom-color:var(--_resizer_color);border-left-color:transparent;border-right-color:var(--_resizer_color);border-style:solid;border-top-color:transparent;border-width:var(--_resizer_width)}}@utility styled-resizer-w-*{--resizer-width:--value(integer)}@utility styled-resizer-color-*{--resizer-color:--value(--color-*)}@utility content-vertical-holder{--tw-content:"\200b";content:var(--tw-content)}@utility no-touch-action{touch-action:none}@utility bg-transparency-squares{@apply bg-squares-gradient square-light-white square-dark-neutral-300 square-size-6}@utility link-like{@apply cursor-pointer hover:text-accent-500}@utility no-truncate{overflow:visible;text-overflow:unset;white-space:normal}

package/dist/runtime/components/LibTable/LibTable.d.vue.ts

@@ -1,3 +1,4 @@
+import { type VirtualizerOptions } from "@tanstack/vue-virtual";
 import { type TableHTMLAttributes } from "vue";
 import type { ResizableOptions, TableColConfig } from "../../types/index.js";
 import type { TailwindClassProp } from "../shared/props.js";
@@ -5,7 +6,6 @@ type T = any;
 type RealProps = {
     resizable?: Partial<ResizableOptions>;
     values?: T[];
-    itemKey?: keyof T | ((item: T) => string);
     /** Let's the table know the shape of the data since values might be empty. */
     cols?: (keyof T)[];
     rounded?: boolean;
@@ -13,6 +13,56 @@ type RealProps = {
     cellBorder?: boolean;
     header?: boolean;
     colConfig?: TableColConfig<T>;
+    /**
+     * See tanstack/vue-virtual {@link https://tanstack.com/virtual/latest/docs/api/virtualizer}
+     *
+     * The defaults are:
+     *
+     * - enabled: false
+     * - method: "fixed"
+     * - overscan: (50 if fixed, 10 if dynamic)
+     * - estimateSize: () => { return 33 }
+     *
+     * This also has an additional option, `method`, which can be set to `fixed` or `dynamic` (experimental).
+     *
+     * Notes:
+     *
+     * - Because of how virtualization works, initial layout (before .resizable-cols-setup class is applied) will only have access to the headers and not the rows. This can cause cols to look very small, especially if using resizable.fitWidth false.
+     *
+     * ### Fixed
+     *
+     * `fixed` is the default and will set the height of ALL items to the height of the first item onMounted (tanstack does not do this and if your estimateSize if off, the scrolling is weird).
+     *
+     * Since the table now truncates rows by default, they will always be the same height unless you change the inner styling. In fixed mode, `forceRecalculateFixedVirtualizer` is exposed if you need to force re-calculation.
+     *
+     * If using slots, be sure to at least pass the `class` slot prop to the td element. `style` with width is also supplied but is not required if you're displaying the table as a table.
+     *
+     * ### Dynamic (experimental)
+     *
+     * In `dynamic` mode we use tanstack's measureElement method. This is more expensive, but it will work with any heights.
+     *
+     * Dynamic mode also requires the table displays itself using grid and flex post setup as otherwise dynamic mode doesn't work.
+     *
+     * You don't need to do anything unless using slots. If using slots, pass the given `ref` slot prop to ref (internally this is tanstack's measureElement) and the class and style slot props at the very least:
+     * ```vue
+     * <template #[`${colName}`]="slotProps">
+     * 	<td
+     * 		:ref="slotProps.ref"
+     * 		:class="slotProps.class"
+     * 		:style="slotProps.style"
+     * 	>
+     * 		{{ slotProps.value }}
+     * 	</td>
+     * </template>
+     * ```
+     */
+    virtualizerOptions?: Partial<VirtualizerOptions<any, any>> & {
+        method?: "fixed" | "dynamic";
+    };
+    /** Whether to enable sticky header styles. This requires `border:false`. This moves the border to the wrapper and styles a straight border between the scroll bar and the rounded border. */
+    stickyHeader?: boolean;
+    /** Which key to use for the rows (only if not using virtualization). */
+    itemKey?: keyof T | ((item: T) => string);
 };
 interface Props extends 
 /** @vue-ignore */
@@ -20,18 +70,25 @@ Partial<Omit<TableHTMLAttributes, "class" | "readonly" | "disabled"> & TailwindC
 }
 declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & Props & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        forceRecalculateFixedVirtualizer: () => void;
+    }>): void;
     attrs: any;
     slots: {
         [x: string]: ((props: {
             colKey: any;
             config: any;
-            style: string;
-            class: string;
+            style: {
+                width: any;
+            };
+            class: any;
         }) => any) | undefined;
     } & {
         [x: string]: ((props: {
-            class: string;
+            class: any;
+            style: {
+                width: any;
+            };
             item: any;
             value: any;
         }) => any) | undefined;

package/dist/runtime/components/LibTable/LibTable.vue

@@ -1,135 +1,321 @@
 <template>
-<!-- Assumes no scrollbars on children -->
-<table
+<!--
+	- moving the border to the wrapper is to hide the little bits of border sticking out
+	added back the right straight border otherwise the scrollbar looks ass
+	this is ever so slightly visible if there is no scrollbar
+
+	- relative is for the sticky header in dynamic mode
+
+	- dynamic mode REQUIRES grid since otherwise the transforms don't work because of how tanstack calculates them
+	- tried pre-calculating the transforms to take into account the previous elements (e.g. virtual.start - (height of previous rows)) but this was way to slow and buggy
+-->
+<div
 	:class="twMerge(
-  `table
-		table-fixed
-		border-separate
-		border-spacing-0
-		overflow-x-scroll
-		scrollbar-hidden
-		[&_.grip]:w-[5px]
-		relative
-		w-full
-		box-content
-		[&_thead]:font-bold
-		[&_td]:p-1
-		[&_td]:overflow-x-hidden
-		[&.resizable-cols-error]:cursor-not-allowed
-		[&.resizable-cols-error]:user-select-none
-		`,
-  cellBorder && `
-			[&_td]:border-neutral-500
-			[&_td:not(.last-row)]:border-b
-			[&_td:not(.first-col)]:border-l
-		`,
+  `
+		table--container
+		overflow-auto
+	`,
+  hasScrollbar.vertical && `has-scrollbar-vertical`,
+  hasScrollbar.horizontal && `has-scrollbar-horizontal`,
+  stickyHeader && `
+		[&_thead]:sticky
+		[&_thead]:top-0
+		[&_thead]:z-1
+		[&_.grip]:z-2
+	`,
+  isPostSetup && `resizable-cols-setup`,
   border && `
-			[&_thead_td]:bg-neutral-200
-			[&_td]:border-neutral-500
-			dark:[&_thead_td]:bg-neutral-800
-			dark:[&_td]:border-neutral-500
-			[&_td.first-row]:border-t
-			[&_td.last-row]:border-b
-			[&_td.last-col]:border-r
-			[&_td.first-col]:border-l
-		`,
+		border
+		border-neutral-500
+	`,
+  border && cellBorder && `
+		[&.has-scrollbar-horizontal_.last-row]:border-b
+		[&.has-scrollbar-horizontal_.last-row]:border-neutral-500
+		[&.has-scrollbar-vertical_.last-col]:border-r
+		[&.has-scrollbar-vertical_.last-col]:border-neutral-500
+	`,
+  (!resizableOptions.fitWidth || stickyHeader) && `
+		[&_td.tr]:rounded-tr-none!
+		[&_td.br]:rounded-br-none!
+	`,
+  // this combo prevents the x-scrollbar from showing up when it shouldn\'t
+  // and max-w-fit allows the border to shrink with the table columns
+  resizableOptions.fitWidth === false && `
+		[&_.grip]:last:translate-x-[-5px]
+		mr-1
+		max-w-fit
+	`,
   rounded && `
-			[&_td.br]:rounded-br-sm
-			[&_td.bl]:rounded-bl-sm
-			[&_td.tr]:rounded-tr-sm
-			[&_td.tl]:rounded-tl-sm
+		rounded-md
+	`,
+  mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' && `
+		relative
 		`,
-  $attrs.class
+  $attrs.wrapperClass
 )"
-	v-resizable-cols="resizableOptions"
+	ref="parentRef"
 >
-	<thead
-		v-if="header"
-		class="table--header"
+	<div
+		class="table--inner-container"
+		:style="{
+  ...mergedVirtualizerOpts.enabled ? { height: `${totalSize}px` } : {}
+}"
 	>
-		<tr class="table--row">
-			<template
-				v-for="col, i of cols"
-				:key="col"
+		<!-- https://github.com/TanStack/virtual/issues/640#issuecomment-2795731690 -->
+		<table
+			:style="{
+  ...stickyHeader && mergedVirtualizerOpts.enabled ? { '--table-sticky-fix': `${totalSize - tableHeight}px` } : {},
+  ...$attrs.style ?? {}
+}"
+			:class="twMerge(
+  `
+				table
+				table-fixed
+				border-separate
+				border-spacing-0
+				scrollbar-hidden
+				[&_.grip]:w-[5px]
+				relative
+				w-full
+				box-content
+				[&_thead]:font-bold
+				[&_td]:p-1
+				[&_th]:p-1
+				[&.resizable-cols-error]:cursor-not-allowed
+				[&.resizable-cols-error]:user-select-none
+				[&_thead_th]:bg-neutral-200
+				dark:[&_thead_th]:bg-neutral-800
+			`,
+  isPostSetup && mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' && `
+				grid
+			`,
+  stickyHeader && mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'fixed' && `
+				after:inline-block
+				after:h-(--table-sticky-fix)
+			`,
+  cellBorder && `
+				[&_td]:border-neutral-500
+				[&_td:not(.last-row)]:border-b
+				[&_td:not(.first-col)]:border-l
+				[&_th]:border-neutral-500
+				[&_th:not(.last-row)]:border-b
+				[&_th:not(.first-col)]:border-l
+			`,
+  !cellBorder && `
+				[&_.grip]:hover:bg-neutral-300
+				dark:[&_.grip]:hover:bg-neutral-700
+			`,
+  $attrs.class
+)"
+			v-resizable-cols="resizableOptions"
+		>
+			<thead
+				v-if="header"
+				:class="twMerge(
+  `table--header`,
+  isPostSetup && mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' && `
+						grid
+						top-0
+					`
+)"
 			>
-				<slot
-					:name="`header-${col.toString()}`"
-					:class="[
-  extraClasses[`-1-${i}`],
-  'cell table--header-cell',
-  colConfig[col]?.resizable === false ? 'no-resize' : ''
-].join(' ')"
-					:style="`width:${widths.length > 0 ? widths[i] : ``}; `"
-					:col-key="col"
-					:config="colConfig[col]"
+				<tr
+					:class="twMerge(
+  `table--row`,
+  isPostSetup && mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' && `flex w-full`
+)"
 				>
-					<td
-						:class="[
-  extraClasses[`-1-${i}`],
-  'cell table--header-cell',
-  colConfig[col]?.resizable === false ? 'no-resize' : ''
-].join(' ')"
-						:style="`width:${widths.length > 0 ? widths[i] : ``}; `"
+					<template
+						v-for="col, i of cols"
+						:key="col"
 					>
-						{{ colConfig[col]?.name ?? col }}
-					</td>
-				</slot>
-			</template>
-		</tr>
-	</thead>
-	<tbody class="table--body">
-		<template
-			v-for="item, i of values"
-			:key="typeof itemKey === 'function' ? itemKey(item) : item[itemKey]"
-		>
-			<tr class="table--row">
+						<slot
+							:name="`header-${col.toString()}`"
+							:class="classes[`-1-${i}`]"
+							:style="{ width: widths[i] }"
+							:col-key="col"
+							:config="colConfig[col]"
+						>
+							<th
+								:class="classes[`-1-${i}`]"
+								:style="{ width: widths[i] }"
+							>
+								{{ colConfig[col]?.name ?? col }}
+							</th>
+						</slot>
+					</template>
+				</tr>
+			</thead>
+			<tbody
+				:class="twMerge(
+  `table--body`,
+  isPostSetup && mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' && `grid relative`
+)"
+				:style="{
+  ...mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' ? { height: `${totalSize}px` } : {}
+}"
+			>
 				<template
-					v-for="col, j of cols"
-					:key="(typeof itemKey === 'function' ? itemKey(item) : item[itemKey]) + col.toString()"
+					v-for="(virtual, index) in virtualList"
+					:key="virtual.key"
 				>
-					<slot
-						:name="col"
-						:item="item"
-						:value="item[col]"
-						:class="extraClasses[`${i}-${j}`] + 'table--cell cell'"
+					<tr
+						:class="twMerge(
+  `
+							table--row
+						`,
+  isPostSetup && mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' && `flex absolute w-full`
+)"
+						:style="{
+  ...mergedVirtualizerOpts.enabled ? {
+    transform: mergedVirtualizerOpts.method === 'fixed' ? `translateY(${virtual.start - index * virtual.size}px)` : `translateY(${virtual.start}px)`,
+    height: virtual.size
+  } : {}
+}"
+						:data-index="virtual.index"
+						:ref="measureElement"
 					>
-						<td :class="extraClasses[`${i}-${j}`] + 'table--cell cell'">
-							{{ item[col] }}
-						</td>
-					</slot>
+						<template
+							v-for="col, j of cols"
+							:key="virtual.key + '-' + col.toString()"
+						>
+							<slot
+								:name="col"
+								:item="values[virtual.index]"
+								:value="values[virtual.index][col]"
+								:style="{ width: widths[j] }"
+								:class="classes[`${virtual.index}-${j}`]"
+							>
+								<td
+									:style="{ width: widths[j] }"
+									:class="classes[`${virtual.index}-${j}`]"
+								>
+									{{ values[virtual.index][col] }}
+								</td>
+							</slot>
+						</template>
+					</tr>
 				</template>
-			</tr>
-		</template>
-	</tbody>
-</table>
+			</tbody>
+		</table>
+	</div>
+</div>
 </template>
 
 <script setup>
 import { keys } from "@alanscodelog/utils/keys";
-import { computed, ref } from "vue";
+import { throttle } from "@alanscodelog/utils/throttle";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { computed, onMounted, ref } from "vue";
+import { useGlobalResizeObserver } from "../../composables/useGlobalResizeObserver.js";
 import { vResizableCols } from "../../directives/vResizableCols.js";
 import { twMerge } from "../../utils/twMerge.js";
 defineOptions({
-  name: "LibTable"
+  name: "LibTable",
+  inheritAttrs: false
 });
 const props = defineProps({
   resizable: { type: Object, required: false, default: () => ({}) },
   values: { type: Array, required: false, default: () => [] },
-  itemKey: { type: [String, Number, Symbol, Function], required: false, default: "" },
   cols: { type: Array, required: false, default: () => [] },
   rounded: { type: Boolean, required: false, default: true },
   border: { type: Boolean, required: false, default: true },
   cellBorder: { type: Boolean, required: false, default: true },
   header: { type: Boolean, required: false, default: true },
-  colConfig: { type: Object, required: false, default: () => ({}) }
+  colConfig: { type: Object, required: false, default: () => ({}) },
+  virtualizerOptions: { type: Object, required: false, default: () => ({}) },
+  stickyHeader: { type: Boolean, required: false },
+  itemKey: { type: [String, Number, Symbol, Function], required: false, default: "" }
 });
 const widths = ref([]);
+const isPostSetup = ref(false);
 const resizableOptions = computed(() => ({
   colCount: props.cols.length,
   widths,
   selector: ".cell",
-  ...props.resizable
+  ...props.resizable,
+  onSetup: (el) => {
+    isPostSetup.value = true;
+    if (props.resizable.onSetup) {
+      props.resizable.onSetup(el);
+    }
+  },
+  onTeardown: (el) => {
+    isPostSetup.value = false;
+    if (props.resizable.onTeardown) {
+      props.resizable.onTeardown(el);
+    }
+  }
 }));
+const parentRef = ref(null);
+const mergedVirtualizerOpts = computed(() => {
+  return {
+    // we have to put the defaults here as they can't reference local variables
+    count: props.values.length,
+    getScrollElement: () => parentRef.value,
+    estimateSize: () => {
+      return 33;
+    },
+    overscan: props.virtualizerOptions?.overscan ?? (props.virtualizerOptions?.method === "dynamic" ? 10 : 50),
+    method: "fixed",
+    enabled: false,
+    ...props.virtualizerOptions
+  };
+});
+const rowVirtualizer = useVirtualizer(mergedVirtualizerOpts);
+const virtualList = computed(() => {
+  return mergedVirtualizerOpts.value.enabled ? rowVirtualizer.value.getVirtualItems() : props.values.map((_, i) => ({
+    index: i,
+    size: void 0,
+    start: 0,
+    end: 0,
+    key: typeof props.itemKey === "function" ? props.itemKey(_) : props.itemKey ? props.values[props.itemKey] : i
+  }));
+});
+const totalSize = computed(() => rowVirtualizer.value.getTotalSize());
+function measureElement(el) {
+  if (!el || !mergedVirtualizerOpts.value.enabled) return;
+  if (mergedVirtualizerOpts.value?.method === "dynamic") {
+    rowVirtualizer.value.measureElement(el);
+  }
+}
+function forceRecalculateFixedVirtualizer() {
+  if (mergedVirtualizerOpts.value?.method === "dynamic" || !mergedVirtualizerOpts.value.enabled) return;
+  if (!parentRef.value) {
+    throw new Error("forceRecalculateFixedVirtualizer cannot be called before the table is mounted.");
+  }
+  const height = parentRef.value.querySelector("td")?.getBoundingClientRect().height;
+  if (!height) return;
+  for (let i = 0; i < props.values.length; i++) {
+    rowVirtualizer.value.resizeItem(i, height);
+  }
+}
+const tableHeight = ref(0);
+function updateTableHeight() {
+  if (!parentRef.value) return;
+  const el = parentRef.value.querySelector("tbody");
+  if (!el) return;
+  if (tableHeight.value === el.getBoundingClientRect().height) return;
+  tableHeight.value = el.getBoundingClientRect().height;
+}
+const throttledUpdateTableHeight = throttle(updateTableHeight, 100, { leading: true });
+onMounted(() => {
+  throttledUpdateTableHeight();
+  forceRecalculateFixedVirtualizer();
+  useGlobalResizeObserver(parentRef, onResize);
+});
+const hasScrollbar = ref({ vertical: false, horizontal: false });
+function onResize() {
+  const el = parentRef.value;
+  if (!el) return;
+  hasScrollbar.value = {
+    vertical: el.scrollHeight > el.clientHeight,
+    horizontal: el.scrollWidth > el.clientWidth
+  };
+  if (hasScrollbar.value.vertical) {
+    throttledUpdateTableHeight();
+  }
+}
 const getExtraClasses = (row, col, isHeader) => {
   const res = {
     bl: !isHeader && row === props.values.length - 1 && col === 0,
@@ -143,12 +329,28 @@ const getExtraClasses = (row, col, isHeader) => {
   };
   return keys(res).filter((key) => res[key]);
 };
-const extraClasses = computed(() => Object.fromEntries(
-  [...Array(props.values.length + 1).keys()].map((row) => [...Array(props.cols.length).keys()].map((col) => [
-    `${row - 1}-${col}`,
-    " " + getExtraClasses(row <= 0 ? 0 : row - 1, col, row === 0).join(" ") + " "
-  ])).flat()
-));
+const classes = computed(() => {
+  const res = {};
+  const headerTdClass = `table--header-cell cell truncate`;
+  const bodyTdClass = `table--cell cell truncate`;
+  for (let i = -1; i < props.values.length + 1; i++) {
+    for (let j = 0; j < props.cols.length; j++) {
+      const col = props.cols[j];
+      const colConfig = props.colConfig[col];
+      const key = `${i}-${j}`;
+      res[key] = twMerge(
+        getExtraClasses(i, j, i === -1).join(" "),
+        i === -1 ? headerTdClass : bodyTdClass,
+        i === -1 ? colConfig?.resizable === false && `no-resize` : void 0,
+        i !== -1 && mergedVirtualizerOpts.value.enabled && mergedVirtualizerOpts.value.method === "dynamic" && `flex`
+      );
+    }
+  }
+  return res;
+});
+defineExpose({
+  forceRecalculateFixedVirtualizer
+});
 </script>
 
 <script>