@lostgradient/cinder 0.2.0 → 0.4.0

package/dist/server/components/data-table/index.js

@@ -1,40 +1,10 @@
 import { createRequire } from "node:module";
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
-        enumerable: true
-      });
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
 // src/components/data-table/data-table.svelte
-import * as $7 from "svelte/internal/server";
+import * as $8 from "svelte/internal/server";
+import { tick } from "svelte";
 
 // src/components/table-body/table-body.svelte
 import * as $ from "svelte/internal/server";
@@ -123,10 +93,12 @@ function Table_header_cell($$renderer, $$props) {
     const table = getTableContext();
     const isSortable = $3.derived(() => sortable && !!column);
     const ariaSort = $3.derived(() => isSortable() && table.sort?.column === column ? table.sort?.direction : isSortable() ? "none" : undefined);
+    const nextSortDescription = $3.derived(() => ariaSort() === "ascending" ? "Activate to sort descending" : "Activate to sort ascending");
+    const sortButtonDescriptionAttributes = $3.derived(() => ({ "aria-description": nextSortDescription() }));
     function handleClick() {
       if (!sortable || !column)
         return;
-      table.onSortChange(column);
+      table.onsortchange(column);
     }
     $$renderer2.push(`<th${$3.attributes({
       ...rest,
@@ -138,7 +110,11 @@ function Table_header_cell($$renderer, $$props) {
     })}>`);
     if (isSortable()) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<button type="button" class="cinder-table__sort-button">`);
+      $$renderer2.push(`<button${$3.attributes({
+        ...sortButtonDescriptionAttributes(),
+        type: "button",
+        class: "cinder-table__sort-button"
+      })}>`);
       children($$renderer2);
       $$renderer2.push(`<!----> <span class="cinder-table__sort-indicator" aria-hidden="true"${$3.attr("data-cinder-direction", ariaSort())}><svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline class="cinder-table__sort-chevron-up" points="4 7 8 4 12 7"></polyline><polyline class="cinder-table__sort-chevron-down" points="4 9 8 12 12 9"></polyline></svg></span></button>`);
     } else {
@@ -160,13 +136,13 @@ function Table_header($$renderer, $$props) {
       children,
       allSelected,
       someSelected,
-      onSelectAll,
+      onselectall,
       selectAllLabel = "Select all rows"
     } = $$props;
     const table = tryGetTableContext();
     const selectionEnabled = table?.selectionEnabled ?? false;
-    if (selectionEnabled && untrack(() => allSelected === undefined || someSelected === undefined || !onSelectAll)) {
-      throw new Error("[Cinder] TableHeader: `allSelected`, `someSelected`, and `onSelectAll` are required when Table.selectable is true.");
+    if (selectionEnabled && untrack(() => allSelected === undefined || someSelected === undefined || !onselectall)) {
+      throw new Error("[Cinder] TableHeader: `allSelected`, `someSelected`, and `onselectall` are required when Table.selectable is true.");
     }
     let hasSelectionHeaderCell = false;
     function claimSelectionHeaderCell() {
@@ -183,8 +159,8 @@ function Table_header($$renderer, $$props) {
       get someSelected() {
         return someSelected ?? false;
       },
-      get onSelectAll() {
-        return onSelectAll ?? (() => {});
+      get onselectall() {
+        return onselectall ?? (() => {});
       },
       get selectAllLabel() {
         return selectAllLabel;
@@ -219,9 +195,12 @@ function Table_row($$renderer, $$props) {
       class: className,
       children,
       selected,
-      onSelectedChange,
+      onselectedchange,
       selectionLabel,
-      selectionDisabled
+      selectionDisabled,
+      $$slots,
+      $$events,
+      ...rest
     } = $$props;
     const table = tryGetTableContext();
     const selectionEnabled = table?.selectionEnabled ?? false;
@@ -232,12 +211,12 @@ function Table_row($$renderer, $$props) {
         const hasDisabled = selectionDisabled === true;
         if (!hasDisabled) {
           const hasSelected = selected !== undefined;
-          const hasOnChange = onSelectedChange !== undefined;
+          const hasOnChange = onselectedchange !== undefined;
           const hasLabel = selectionLabel !== undefined;
           if (!hasSelected || !hasOnChange || !hasLabel) {
-            throw new Error("[Cinder] TableRow: when Table.selectable is true, each body row must supply " + "selected + onSelectedChange + selectionLabel together, or set selectionDisabled={true}. " + `Missing: ${[
+            throw new Error("[Cinder] TableRow: when Table.selectable is true, each body row must supply " + "selected + onselectedchange + selectionLabel together, or set selectionDisabled={true}. " + `Missing: ${[
               !hasSelected && "selected",
-              !hasOnChange && "onSelectedChange",
+              !hasOnChange && "onselectedchange",
               !hasLabel && "selectionLabel"
             ].filter(Boolean).join(", ")}.`);
           }
@@ -249,17 +228,20 @@ function Table_row($$renderer, $$props) {
     }
     function handleSelectAllChange(event) {
       const input = event.currentTarget;
-      headerSelection?.onSelectAll(input.checked);
+      headerSelection?.onselectall(input.checked);
     }
     function handleRowChange(event) {
       const input = event.currentTarget;
-      onSelectedChange?.(input.checked);
+      onselectedchange?.(input.checked);
     }
     const shouldRenderHeaderSelectionCell = selectionEnabled && section === "header" && headerSelection !== undefined;
     if (shouldRenderHeaderSelectionCell) {
       headerSelection?.claimSelectionHeaderCell();
     }
-    $$renderer2.push(`<tr${$5.attr_class($5.clsx(classNames("cinder-table__row", className)))}>`);
+    $$renderer2.push(`<tr${$5.attributes({
+      ...rest,
+      class: $5.clsx(classNames("cinder-table__row", className))
+    })}>`);
     if (shouldRenderHeaderSelectionCell && headerSelection) {
       $$renderer2.push("<!--[0-->");
       $$renderer2.push(`<th scope="col" class="cinder-table__header-cell cinder-table__header-cell--selection"><input type="checkbox" class="cinder-table__selection-checkbox"${$5.attr("checked", headerSelection.allSelected, true)}${$5.attr("aria-label", headerSelection.selectAllLabel)}/></th>`);
@@ -287,7 +269,28 @@ function Table_row($$renderer, $$props) {
 }
 
 // src/components/table/table.svelte
+import * as $7 from "svelte/internal/server";
+
+// src/utilities/use-resize-observer.svelte.ts
 import * as $6 from "svelte/internal/server";
+function useResizeObserver(onResize, options = {}) {
+  const { box, enabled = () => true } = options;
+  return (node) => {
+    if (typeof ResizeObserver === "undefined") {
+      return () => {};
+    }
+    let observer = null;
+    const disconnectObserver = () => {
+      observer?.disconnect();
+      observer = null;
+    };
+    return () => {
+      disconnectObserver();
+    };
+  };
+}
+
+// src/components/table/table.svelte
 function Table($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let {
@@ -297,9 +300,19 @@ function Table($$renderer, $$props) {
       density = "comfortable",
       selectable = false,
       class: className,
-      children
+      children,
+      $$slots,
+      $$events,
+      ...rest
     } = $$props;
-    function onSortChange(column) {
+    let captionHeight = 0;
+    const measureCaption = useResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry)
+        return;
+      captionHeight = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
+    }, { box: "border-box", enabled: () => stickyHeader });
+    function onsortchange(column) {
       if (!sort || sort.column !== column) {
         sort = { column, direction: "ascending" };
         return;
@@ -316,20 +329,99 @@ function Table($$renderer, $$props) {
       get selectionEnabled() {
         return selectable;
       },
-      onSortChange
+      onsortchange
     });
-    $$renderer2.push(`<table${$6.attr_class($6.clsx(classNames("cinder-table", className)))}${$6.attr("data-cinder-sticky-header", stickyHeader || undefined)}${$6.attr("data-cinder-density", density)}${$6.attr("data-cinder-selectable", selectable || undefined)}>`);
+    $$renderer2.push(`<table${$7.attributes({
+      ...rest,
+      class: $7.clsx(classNames("cinder-table", className)),
+      "data-cinder-sticky-header": stickyHeader || undefined,
+      "data-cinder-density": density,
+      "data-cinder-selectable": selectable || undefined
+    }, undefined, undefined, {
+      "--cinder-table-caption-height": caption ? `${captionHeight}px` : undefined
+    })}>`);
     if (caption) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<caption class="cinder-table__caption">${$6.escape(caption)}</caption>`);
+      $$renderer2.push(`<caption class="cinder-table__caption">${$7.escape(caption)}</caption>`);
     } else {
       $$renderer2.push("<!--[-1-->");
     }
     $$renderer2.push(`<!--]-->`);
     children($$renderer2);
     $$renderer2.push(`<!----></table>`);
-    $6.bind_props($$props, { sort });
+    $7.bind_props($$props, { sort });
+  });
+}
+
+// src/utilities/fixed-virtual-window.ts
+function resolveVirtualItemHeight(itemHeight, fallback = 1) {
+  if (Number.isFinite(itemHeight) && itemHeight > 0)
+    return itemHeight;
+  return fallback;
+}
+function resolveVirtualOverscan(overscan) {
+  if (!Number.isFinite(overscan) || overscan === undefined)
+    return 0;
+  return Math.max(0, Math.floor(overscan));
+}
+function parsePixelLength(value) {
+  if (value === undefined)
+    return;
+  const match = /^([0-9]+(?:\.[0-9]+)?)px$/.exec(value.trim());
+  if (!match)
+    return;
+  return Number(match[1]);
+}
+function getFixedVirtualWindow({
+  itemCount,
+  itemHeight,
+  scrollOffset,
+  viewportHeight,
+  overscan,
+  getKey
+}) {
+  const count = Math.max(0, Math.floor(itemCount));
+  const size = resolveVirtualItemHeight(itemHeight);
+  const totalSize = count * size;
+  if (count === 0) {
+    return {
+      items: [],
+      totalSize,
+      leadingSize: 0,
+      trailingSize: 0,
+      startIndex: 0,
+      endIndex: 0
+    };
+  }
+  const resolvedViewportHeight = Number.isFinite(viewportHeight) && viewportHeight > 0 ? viewportHeight : size * 10;
+  const resolvedOverscan = resolveVirtualOverscan(overscan);
+  const maxScrollOffset = Math.max(0, totalSize - resolvedViewportHeight);
+  const offset = Math.min(Math.max(0, scrollOffset), maxScrollOffset);
+  const visibleStartIndex = Math.min(count - 1, Math.floor(offset / size));
+  const visibleCount = Math.max(1, Math.ceil(resolvedViewportHeight / size));
+  const startIndex = Math.max(0, visibleStartIndex - resolvedOverscan);
+  const endIndex = Math.min(count, startIndex + visibleCount + resolvedOverscan * 2);
+  const items = Array.from({ length: endIndex - startIndex }, (_, indexOffset) => {
+    const index = startIndex + indexOffset;
+    return {
+      index,
+      key: getKey?.(index) ?? index,
+      start: index * size,
+      size
+    };
   });
+  const firstItem = items[0];
+  const lastItem = items.at(-1);
+  const leadingSize = firstItem?.start ?? 0;
+  const trailingSize = lastItem ? Math.max(0, totalSize - (lastItem.start + lastItem.size)) : 0;
+  return {
+    items,
+    totalSize,
+    leadingSize,
+    trailingSize,
+    startIndex,
+    endIndex
+  };
 }
 
 // src/components/data-table/data-table.svelte
@@ -343,9 +435,49 @@ function Data_table($$renderer, $$props) {
       stickyHeader = false,
       density = "comfortable",
       scrollable = false,
-      class: className
+      virtualized = false,
+      rowHeight = 44,
+      overscan = 5,
+      height = "24rem",
+      stickToBottom = false,
+      onscroll: onScroll,
+      class: className,
+      $$slots,
+      $$events,
+      ...rest
     } = $$props;
-    const rowHeaderKey = $7.derived(() => (columns.find((column) => column.rowHeader === true) ?? columns[0])?.key);
+    let wrapperElement = undefined;
+    let scrollOffset = 0;
+    let measuredViewportHeight = 0;
+    let captionHeight = 0;
+    let headerHeight = 0;
+    let activeRowIndex = 0;
+    let previousRowCount = 0;
+    let hasObservedRowCount = false;
+    let shouldStickAfterAppend = false;
+    const rowHeaderKey = $8.derived(() => (columns.find((column) => column.rowHeader === true) ?? columns[0])?.key);
+    const shouldVirtualizeRows = $8.derived(() => virtualized);
+    const resolvedRowHeight = $8.derived(() => resolveVirtualItemHeight(rowHeight, 44));
+    const resolvedOverscan = $8.derived(() => resolveVirtualOverscan(overscan));
+    const viewportHeight = $8.derived(() => measuredViewportHeight || estimateViewportHeight(height, resolvedRowHeight()));
+    const virtualWindow = $8.derived(() => getFixedVirtualWindow({
+      itemCount: rows.length,
+      itemHeight: resolvedRowHeight(),
+      scrollOffset,
+      viewportHeight: viewportHeight(),
+      overscan: resolvedOverscan()
+    }));
+    const virtualRows = $8.derived(() => shouldVirtualizeRows() ? virtualWindow().items.flatMap((virtualItem) => {
+      const row = rows[virtualItem.index];
+      return row === undefined ? [] : [{ ...virtualItem, row }];
+    }) : rows.map((row, index) => ({
+      row,
+      index,
+      key: index,
+      start: index * resolvedRowHeight(),
+      size: resolvedRowHeight()
+    })));
+    const tabbableRowIndex = $8.derived(getTabbableRowIndex);
     function mapAlign(align) {
       if (align === "start")
         return "left";
@@ -355,9 +487,113 @@ function Data_table($$renderer, $$props) {
         return "center";
       return;
     }
+    const observeWrapperResize = useResizeObserver(() => {
+      if (wrapperElement && shouldVirtualizeRows())
+        syncScrollMetrics(wrapperElement);
+    });
+    function estimateViewportHeight(value, fallbackRowHeight) {
+      return parsePixelLength(value) ?? fallbackRowHeight * 10;
+    }
+    function getCaptionHeight(element2) {
+      const captionElement = element2.querySelector("caption");
+      if (!captionElement)
+        return 0;
+      const rect = captionElement.getBoundingClientRect();
+      return rect.height || captionElement.offsetHeight || 0;
+    }
+    function getHeaderHeight(element2) {
+      const header = element2.querySelector("thead");
+      if (!header)
+        return 0;
+      const rect = header.getBoundingClientRect();
+      return rect.height || header.offsetHeight || 0;
+    }
+    function syncScrollMetrics(element2) {
+      const rect = element2.getBoundingClientRect();
+      const nextCaptionHeight = getCaptionHeight(element2);
+      const nextHeaderHeight = getHeaderHeight(element2);
+      measuredViewportHeight = rect.height || element2.clientHeight || parsePixelLength(height) || resolvedRowHeight() * 10;
+      captionHeight = nextCaptionHeight;
+      headerHeight = nextHeaderHeight;
+      scrollOffset = Math.max(0, element2.scrollTop - getBodyScrollOrigin(nextCaptionHeight, nextHeaderHeight));
+    }
+    function handleWrapperScroll(event) {
+      if (typeof onScroll === "function")
+        onScroll(event);
+      if (!shouldVirtualizeRows())
+        return;
+      syncScrollMetrics(event.currentTarget);
+    }
+    function maxScrollTop(totalBodyHeight, visibleHeight, chromeBlockSize) {
+      return Math.max(0, chromeBlockSize + totalBodyHeight - visibleHeight);
+    }
+    function getTableChromeHeight(captionBlockSize, headerBlockSize) {
+      return captionBlockSize + headerBlockSize;
+    }
+    function getBodyScrollOrigin(captionBlockSize, headerBlockSize) {
+      return stickyHeader ? captionBlockSize : getTableChromeHeight(captionBlockSize, headerBlockSize);
+    }
+    function getTabbableRowIndex() {
+      if (!shouldVirtualizeRows())
+        return activeRowIndex;
+      if (virtualRows().some((virtualRow) => virtualRow.index === activeRowIndex)) {
+        return activeRowIndex;
+      }
+      return virtualRows()[0]?.index ?? activeRowIndex;
+    }
+    function isAtBottom(element2, totalBodyHeight, visibleHeight, chromeBlockSize) {
+      return element2.scrollTop >= maxScrollTop(totalBodyHeight, visibleHeight, chromeBlockSize) - 1;
+    }
+    function clampRowIndex(index) {
+      return Math.min(Math.max(0, index), Math.max(0, rows.length - 1));
+    }
+    function scrollToRow(index) {
+      const element2 = wrapperElement;
+      if (!element2)
+        return;
+      const rowScrollTop = index === 0 ? 0 : getBodyScrollOrigin(captionHeight, headerHeight) + index * resolvedRowHeight();
+      element2.scrollTop = Math.min(maxScrollTop(rows.length * resolvedRowHeight(), viewportHeight(), getTableChromeHeight(captionHeight, headerHeight)), rowScrollTop);
+      syncScrollMetrics(element2);
+    }
+    function focusRow(index) {
+      const nextIndex = clampRowIndex(index);
+      activeRowIndex = nextIndex;
+      scrollToRow(nextIndex);
+      tick().then(() => {
+        const row = wrapperElement?.querySelector(`[data-cinder-data-table-row-index="${nextIndex}"]`);
+        row?.focus({ preventScroll: true });
+      });
+    }
+    function handleRowFocus(index) {
+      activeRowIndex = clampRowIndex(index);
+    }
+    function handleRowKeydown(event, index) {
+      if (!shouldVirtualizeRows())
+        return;
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        focusRow(index + 1);
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        focusRow(index - 1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        focusRow(0);
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        focusRow(rows.length - 1);
+      }
+    }
     function table($$renderer3) {
-      Table($$renderer3, $7.spread_props([
+      Table($$renderer3, $8.spread_props([
         caption !== undefined ? { caption } : {},
+        shouldVirtualizeRows() ? { "aria-rowcount": rows.length + 1 } : {},
         {
           stickyHeader,
           density,
@@ -374,16 +610,16 @@ function Data_table($$renderer, $$props) {
                 Table_row($$renderer5, {
                   children: ($$renderer6) => {
                     $$renderer6.push(`<!--[-->`);
-                    const each_array = $7.ensure_array_like(columns);
+                    const each_array = $8.ensure_array_like(columns);
                     for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
                       let column = each_array[$$index];
-                      Table_header_cell($$renderer6, $7.spread_props([
+                      Table_header_cell($$renderer6, $8.spread_props([
                         column.sortable ? { column: column.key } : {},
                         {
                           sortable: column.sortable ?? false,
                           align: mapAlign(column.align) ?? "left",
                           children: ($$renderer7) => {
-                            $$renderer7.push(`<!---->${$7.escape(column.label)}`);
+                            $$renderer7.push(`<!---->${$8.escape(column.label)}`);
                           },
                           $$slots: { default: true }
                         }
@@ -399,29 +635,52 @@ function Data_table($$renderer, $$props) {
             $$renderer4.push(`<!----> `);
             Table_body($$renderer4, {
               children: ($$renderer5) => {
-                $$renderer5.push(`<!--[-->`);
-                const each_array_1 = $7.ensure_array_like(rows);
-                for (let rowIndex = 0, $$length = each_array_1.length;rowIndex < $$length; rowIndex++) {
-                  let row = each_array_1[rowIndex];
-                  Table_row($$renderer5, {
-                    children: ($$renderer6) => {
-                      $$renderer6.push(`<!--[-->`);
-                      const each_array_2 = $7.ensure_array_like(columns);
-                      for (let $$index_1 = 0, $$length2 = each_array_2.length;$$index_1 < $$length2; $$index_1++) {
-                        let column = each_array_2[$$index_1];
-                        Table_cell($$renderer6, {
-                          as: column.key === rowHeaderKey() ? "th" : "td",
-                          align: mapAlign(column.align) ?? "left",
-                          children: ($$renderer7) => {
-                            $$renderer7.push(`<!---->${$7.escape(row[column.key])}`);
-                          },
-                          $$slots: { default: true }
-                        });
-                      }
-                      $$renderer6.push(`<!--]-->`);
-                    },
-                    $$slots: { default: true }
-                  });
+                if (shouldVirtualizeRows() && virtualWindow().leadingSize > 0) {
+                  $$renderer5.push("<!--[0-->");
+                  $$renderer5.push(`<tr class="cinder-data-table__virtual-spacer" aria-hidden="true"><td class="cinder-data-table__virtual-spacer-cell"${$8.attr("colspan", columns.length)}${$8.attr_style("", { height: `${virtualWindow().leadingSize}px` })}></td></tr>`);
+                } else {
+                  $$renderer5.push("<!--[-1-->");
+                }
+                $$renderer5.push(`<!--]--> <!--[-->`);
+                const each_array_1 = $8.ensure_array_like(virtualRows());
+                for (let $$index_2 = 0, $$length = each_array_1.length;$$index_2 < $$length; $$index_2++) {
+                  let virtualRow = each_array_1[$$index_2];
+                  Table_row($$renderer5, $8.spread_props([
+                    shouldVirtualizeRows() ? {
+                      "aria-rowindex": virtualRow.index + 2,
+                      tabindex: tabbableRowIndex() === virtualRow.index ? 0 : -1,
+                      "data-cinder-virtual-row": "true",
+                      "data-cinder-data-table-row-index": virtualRow.index,
+                      onfocus: () => handleRowFocus(virtualRow.index),
+                      onkeydown: (event) => handleRowKeydown(event, virtualRow.index)
+                    } : {},
+                    {
+                      children: ($$renderer6) => {
+                        $$renderer6.push(`<!--[-->`);
+                        const each_array_2 = $8.ensure_array_like(columns);
+                        for (let $$index_1 = 0, $$length2 = each_array_2.length;$$index_1 < $$length2; $$index_1++) {
+                          let column = each_array_2[$$index_1];
+                          Table_cell($$renderer6, {
+                            as: column.key === rowHeaderKey() ? "th" : "td",
+                            align: mapAlign(column.align) ?? "left",
+                            children: ($$renderer7) => {
+                              $$renderer7.push(`<!---->${$8.escape(virtualRow.row[column.key])}`);
+                            },
+                            $$slots: { default: true }
+                          });
+                        }
+                        $$renderer6.push(`<!--]-->`);
+                      },
+                      $$slots: { default: true }
+                    }
+                  ]));
+                }
+                $$renderer5.push(`<!--]--> `);
+                if (shouldVirtualizeRows() && virtualWindow().trailingSize > 0) {
+                  $$renderer5.push("<!--[0-->");
+                  $$renderer5.push(`<tr class="cinder-data-table__virtual-spacer" aria-hidden="true"><td class="cinder-data-table__virtual-spacer-cell"${$8.attr("colspan", columns.length)}${$8.attr_style("", { height: `${virtualWindow().trailingSize}px` })}></td></tr>`);
+                } else {
+                  $$renderer5.push("<!--[-1-->");
                 }
                 $$renderer5.push(`<!--]-->`);
               },
@@ -436,18 +695,16 @@ function Data_table($$renderer, $$props) {
     let $$settled = true;
     let $$inner_renderer;
     function $$render_inner($$renderer3) {
-      if (scrollable) {
-        $$renderer3.push("<!--[0-->");
-        $$renderer3.push(`<div${$7.attr_class($7.clsx(classNames("cinder-data-table", "cinder-table-scroll", className)))}>`);
-        table($$renderer3);
-        $$renderer3.push(`<!----></div>`);
-      } else {
-        $$renderer3.push("<!--[-1-->");
-        $$renderer3.push(`<div${$7.attr_class($7.clsx(classNames("cinder-data-table", className)))}>`);
-        table($$renderer3);
-        $$renderer3.push(`<!----></div>`);
-      }
-      $$renderer3.push(`<!--]-->`);
+      $$renderer3.push(`<div${$8.attributes({
+        ...rest,
+        class: $8.clsx(classNames("cinder-data-table", scrollable || shouldVirtualizeRows() ? "cinder-table-scroll" : undefined, className)),
+        "data-cinder-virtualized": shouldVirtualizeRows() ? "true" : undefined
+      }, undefined, undefined, {
+        "--cinder-data-table-height": shouldVirtualizeRows() ? height : undefined,
+        "--_cinder-data-table-row-height": shouldVirtualizeRows() ? `${resolvedRowHeight()}px` : undefined
+      })}>`);
+      table($$renderer3);
+      $$renderer3.push(`<!----></div>`);
     }
     do {
       $$settled = true;
@@ -455,7 +712,7 @@ function Data_table($$renderer, $$props) {
       $$render_inner($$inner_renderer);
     } while (!$$settled);
     $$renderer2.subsume($$inner_renderer);
-    $7.bind_props($$props, { sort });
+    $8.bind_props($$props, { sort });
   });
 }
 
@@ -466,4 +723,4 @@ export {
   Data_table as DataTable
 };
 
-//# debugId=167DB1CF20881E7D64756E2164756E21
+//# debugId=4B628CD59DDF2ADA64756E2164756E21