@nuvui/table 0.0.0-stage → 0.1.0

package/dist/styles.css

@@ -0,0 +1,441 @@
+@layer tokens, base, components;
+@layer components {
+  .nuv-table-container {
+    position: relative;
+    max-inline-size: 100%;
+    max-block-size: var(--nuv-table-container-max-height, none);
+    overflow: auto;
+    border: var(--nuv-table-container-border-width, var(--nuv-border-width)) solid var(--nuv-table-border, var(--color-border));
+    border-radius: var(--nuv-table-container-radius, var(--radius-lg));
+    background-color: var(--nuv-table-bg, var(--color-surface));
+  }
+  .nuv-table-container:focus-visible {
+    outline: var(--nuv-focus-ring-width, 2px) solid var(--nuv-focus-ring-color, var(--color-ring));
+    outline-offset: var(--nuv-focus-ring-offset, -2px);
+  }
+  .nuv-table {
+    inline-size: 100%;
+    border-spacing: 0;
+    border-collapse: separate;
+    color: var(--nuv-table-fg, var(--color-surface-foreground));
+    font-size: var(--nuv-table-font-size, var(--text-sm));
+    line-height: var(--text-sm--line-height);
+    font-variant-numeric: tabular-nums;
+    text-align: start;
+  }
+  .nuv-table--fixed {
+    table-layout: fixed;
+  }
+  .nuv-table--fixed .nuv-table__head {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .nuv-table--fixed .nuv-table__cell {
+    overflow-wrap: anywhere;
+  }
+  .nuv-table__caption {
+    padding: var(--nuv-table-cell-padding-y, calc(var(--spacing) * 1.5)) var(--nuv-table-cell-padding-x, calc(var(--spacing) * 3));
+    color: var(--nuv-table-caption-fg, var(--color-muted-foreground));
+    text-align: start;
+    caption-side: var(--nuv-table-caption-side, bottom);
+  }
+  .nuv-table__caption--hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .nuv-table__row {
+    background-color: var(--nuv-table-row-bg, var(--nuv-table-bg, var(--color-surface)));
+  }
+  .nuv-table__head,
+  .nuv-table__cell {
+    block-size: var(--nuv-table-row-height, var(--nuv-touch-size));
+  }
+  @media (pointer: fine) {
+    .nuv-table__head,
+    .nuv-table__cell {
+      block-size: var(--nuv-table-row-height, var(--nuv-control-height-md));
+    }
+  }
+  .nuv-table__head,
+  .nuv-table__cell {
+    padding: var(--nuv-table-cell-padding-y, calc(var(--spacing) * 1.5)) var(--nuv-table-cell-padding-x, calc(var(--spacing) * 3));
+    border-block-end: var(--nuv-border-width) solid var(--nuv-table-border, var(--color-border));
+    background-color: inherit;
+    vertical-align: middle;
+  }
+  .nuv-table__head {
+    background-color: var(--nuv-table-header-bg, var(--color-muted));
+    color: var(--nuv-table-header-fg, var(--color-muted-foreground));
+    font-weight: var(--font-weight-medium);
+    text-align: start;
+    white-space: nowrap;
+  }
+  .nuv-table__cell--row-header {
+    font-weight: var(--font-weight-medium);
+    text-align: start;
+  }
+  .nuv-table__head--align-center {
+    text-align: center;
+  }
+  .nuv-table__head--align-end {
+    text-align: end;
+  }
+  .nuv-table__cell--align-center {
+    text-align: center;
+  }
+  .nuv-table__cell--align-end {
+    text-align: end;
+  }
+  .nuv-table__head--pinned-start,
+  .nuv-table__head--pinned-end {
+    position: sticky;
+    z-index: 1;
+  }
+  .nuv-table__head--pinned-start {
+    inset-inline-start: 0;
+  }
+  .nuv-table__head--pinned-end {
+    inset-inline-end: 0;
+  }
+  .nuv-table__head--pinned-start.nuv-table__head--pinned-edge {
+    border-inline-end: var(--nuv-border-width) solid var(--nuv-table-border, var(--color-border));
+  }
+  .nuv-table__head--pinned-end.nuv-table__head--pinned-edge {
+    border-inline-start: var(--nuv-border-width) solid var(--nuv-table-border, var(--color-border));
+  }
+  .nuv-table__cell--pinned-start,
+  .nuv-table__cell--pinned-end {
+    position: sticky;
+    z-index: 1;
+  }
+  .nuv-table__cell--pinned-start {
+    inset-inline-start: 0;
+  }
+  .nuv-table__cell--pinned-end {
+    inset-inline-end: 0;
+  }
+  .nuv-table__cell--pinned-start.nuv-table__cell--pinned-edge {
+    border-inline-end: var(--nuv-border-width) solid var(--nuv-table-border, var(--color-border));
+  }
+  .nuv-table__cell--pinned-end.nuv-table__cell--pinned-edge {
+    border-inline-start: var(--nuv-border-width) solid var(--nuv-table-border, var(--color-border));
+  }
+  .nuv-table__row:last-child > .nuv-table__cell {
+    border-block-end-width: var(--nuv-table-last-row-border-width, 0);
+  }
+  .nuv-table__footer > .nuv-table__row {
+    background-color: var(--nuv-table-footer-bg, var(--color-muted));
+    font-weight: var(--font-weight-medium);
+  }
+  .nuv-table__footer .nuv-table__cell {
+    border-block-start: var(--nuv-border-width) solid var(--nuv-table-border, var(--color-border));
+  }
+  .nuv-table__body--striped > .nuv-table__row:nth-child(even) {
+    background-color: var(--nuv-table-stripe-bg, var(--color-muted));
+  }
+  @media (hover: hover) {
+    .nuv-table__body > .nuv-table__row:hover {
+      background-color: var(--nuv-table-row-hover-bg, var(--color-muted));
+    }
+  }
+  .nuv-table__body > .nuv-table__row[data-state=selected] {
+    background-color: var(--nuv-table-row-selected-bg, color-mix(in oklab, var(--color-primary) 12%, var(--color-surface)));
+  }
+  .nuv-table--sticky-header .nuv-table__head {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 2;
+  }
+  .nuv-table--sticky-header .nuv-table__head--pinned-start,
+  .nuv-table--sticky-header .nuv-table__head--pinned-end {
+    z-index: 3;
+  }
+  @media (forced-colors: active) {
+    .nuv-table__row[data-state=selected] > :first-child {
+      border-inline-start: calc(var(--spacing) * 1) solid Highlight;
+    }
+  }
+}
+@layer components {
+  .nuv-data-table {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nuv-data-table-gap, calc(var(--spacing) * 3));
+    min-inline-size: 0;
+    color: var(--nuv-data-table-fg, var(--color-foreground));
+    font-size: var(--text-sm);
+    line-height: var(--text-sm--line-height);
+  }
+  .nuv-data-table__status {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .nuv-data-table__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--spacing) * 2);
+    align-items: center;
+  }
+  .nuv-data-table__toolbar-gap {
+    flex: 1 1 0;
+  }
+  .nuv-data-table__filter {
+    flex: 1 1 100%;
+  }
+  @media (width >= 40rem) {
+    .nuv-data-table__filter {
+      flex: 0 1 var(--nuv-data-table-filter-width, 16rem);
+    }
+  }
+  .nuv-data-table__column-filter {
+    inline-size: 100%;
+    min-inline-size: var(--nuv-data-table-column-filter-min-width, 6rem);
+  }
+  .nuv-data-table__bulk {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--spacing) * 2);
+    align-items: center;
+    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
+    border: var(--nuv-border-width) solid var(--nuv-data-table-bulk-border, var(--color-border));
+    border-radius: var(--nuv-data-table-bulk-radius, var(--radius-lg));
+    background-color: var(--nuv-data-table-bulk-bg, var(--color-muted));
+  }
+  .nuv-data-table__bulk[hidden] {
+    display: none;
+  }
+  .nuv-data-table__bulk-count {
+    font-weight: var(--font-weight-medium);
+  }
+  .nuv-data-table__bulk-actions {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    gap: calc(var(--spacing) * 2);
+    align-items: center;
+  }
+  .nuv-data-table__heading {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .nuv-data-table__sort {
+    display: inline-flex;
+    max-inline-size: 100%;
+    gap: calc(var(--spacing) * 1);
+    align-items: center;
+    min-block-size: var(--nuv-touch-size);
+    margin-block: calc(var(--spacing) * -1);
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-sm);
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .nuv-data-table__sort:focus-visible {
+    outline: var(--nuv-focus-ring-width, 2px) solid var(--nuv-focus-ring-color, var(--color-ring));
+    outline-offset: var(--nuv-focus-ring-offset, 2px);
+  }
+  @media (pointer: fine) {
+    .nuv-data-table__sort {
+      min-block-size: var(--nuv-control-height-sm);
+    }
+  }
+  @media (hover: hover) {
+    .nuv-data-table__sort:hover {
+      color: var(--nuv-data-table-sort-hover-fg, var(--color-foreground));
+    }
+  }
+  .nuv-data-table__sort[data-sorted] {
+    color: var(--nuv-data-table-sorted-fg, var(--color-foreground));
+  }
+  .nuv-data-table__sort-icon {
+    flex: none;
+    opacity: 0.6;
+  }
+  .nuv-data-table__sort-icon[data-direction] {
+    opacity: 1;
+  }
+  .nuv-data-table__sort-index {
+    font-size: var(--text-xs);
+  }
+  .nuv-data-table__head--resizable {
+    position: relative;
+  }
+  .nuv-data-table__resize {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    inline-size: calc(var(--spacing) * 4);
+    cursor: col-resize;
+    touch-action: none;
+    user-select: none;
+  }
+  .nuv-data-table__resize:focus-visible {
+    outline: var(--nuv-focus-ring-width, 2px) solid var(--nuv-focus-ring-color, var(--color-ring));
+    outline-offset: var(--nuv-focus-ring-offset, -2px);
+  }
+  @media (pointer: fine) {
+    .nuv-data-table__resize {
+      inline-size: calc(var(--spacing) * 2);
+    }
+  }
+  .nuv-data-table__resize::after {
+    position: absolute;
+    inset-block: 25%;
+    inset-inline-end: 0;
+    inline-size: 2px;
+    background-color: var(--nuv-data-table-resize-color, var(--color-border-strong));
+    content: "";
+  }
+  .nuv-data-table__resize[data-resizing]::after {
+    inset-block: 0;
+    background-color: var(--nuv-data-table-resize-active-color, var(--color-primary));
+  }
+  @media (hover: hover) {
+    .nuv-data-table__resize:hover::after {
+      inset-block: 0;
+      background-color: var(--nuv-data-table-resize-active-color, var(--color-primary));
+    }
+  }
+  .nuv-data-table__cell--control {
+    inline-size: 1%;
+    white-space: nowrap;
+  }
+  .nuv-data-table__expand,
+  .nuv-data-table__expand-gap {
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--nuv-data-table-expand-size, 1.5rem);
+    block-size: var(--nuv-data-table-expand-size, 1.5rem);
+    margin-inline-start: calc(var(--nuv-data-table-indent, 1.25rem) * var(--nuv-data-table-depth, 0));
+    vertical-align: middle;
+  }
+  .nuv-data-table__expand {
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-sm);
+    background: none;
+    color: var(--nuv-data-table-expand-fg, var(--color-muted-foreground));
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .nuv-data-table__expand::after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    inline-size: max(100%, var(--nuv-touch-size, 2.75rem));
+    block-size: max(100%, var(--nuv-touch-size, 2.75rem));
+    transform: translate(-50%, -50%);
+    content: "";
+  }
+  @media (pointer: fine) {
+    .nuv-data-table__expand::after {
+      content: none;
+    }
+  }
+  .nuv-data-table__expand:focus-visible {
+    outline: var(--nuv-focus-ring-width, 2px) solid var(--nuv-focus-ring-color, var(--color-ring));
+    outline-offset: var(--nuv-focus-ring-offset, 2px);
+  }
+  @media (hover: hover) {
+    .nuv-data-table__expand:hover {
+      color: var(--color-foreground);
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .nuv-data-table__expand-icon {
+      transition: transform var(--nuv-duration-fast) var(--ease-out);
+    }
+  }
+  .nuv-data-table__expand-icon:dir(rtl) {
+    transform: scaleX(-1);
+  }
+  .nuv-data-table__expand[aria-expanded=true] > .nuv-data-table__expand-icon {
+    transform: rotate(90deg);
+  }
+  .nuv-data-table__detail-row {
+    --nuv-table-row-bg: var(--nuv-data-table-detail-bg, var(--color-background));
+    --nuv-table-row-hover-bg: var(--nuv-data-table-detail-bg, var(--color-background));
+  }
+  .nuv-data-table__message-row,
+  .nuv-data-table__loading-row {
+    --nuv-table-row-hover-bg: var(--nuv-table-bg, var(--color-surface));
+  }
+  .nuv-data-table__detail {
+    --nuv-table-cell-padding-x: var(--nuv-data-table-detail-padding, calc(var(--spacing) * 4));
+    --nuv-table-cell-padding-y: var(--nuv-data-table-detail-padding, calc(var(--spacing) * 4));
+  }
+  .nuv-data-table__message {
+    --nuv-table-cell-padding-y: var(--nuv-data-table-message-padding, calc(var(--spacing) * 10));
+    color: var(--nuv-data-table-message-fg, var(--color-muted-foreground));
+    text-align: center;
+  }
+  .nuv-data-table__message > * + * {
+    margin-inline-start: calc(var(--spacing) * 3);
+  }
+  .nuv-data-table__pagination {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
+    align-items: center;
+    justify-content: space-between;
+    color: var(--nuv-data-table-pagination-fg, var(--color-muted-foreground));
+  }
+  @media (width >= 40rem) {
+    .nuv-data-table__pagination {
+      justify-content: flex-end;
+    }
+  }
+  .nuv-data-table__page-size {
+    display: flex;
+    white-space: nowrap;
+    gap: calc(var(--spacing) * 2);
+    align-items: center;
+  }
+  .nuv-data-table__page-range,
+  .nuv-data-table__page {
+    white-space: nowrap;
+  }
+  .nuv-data-table__pages {
+    display: flex;
+    flex: 1 1 100%;
+    gap: calc(var(--spacing) * 1);
+    align-items: center;
+    justify-content: space-between;
+  }
+  @media (width >= 40rem) {
+    .nuv-data-table__pages {
+      flex: none;
+      justify-content: flex-start;
+    }
+  }
+  .nuv-data-table__page-button {
+    --nuv-button-padding-inline: 0;
+  }
+  .nuv-data-table__page-button[aria-disabled=true] {
+    opacity: var(--nuv-disabled-opacity);
+    cursor: not-allowed;
+  }
+  .nuv-data-table__page-icon:dir(rtl) {
+    transform: scaleX(-1);
+  }
+}

package/dist/utils/cx.js

@@ -0,0 +1,6 @@
+//#region src/utils/cx.ts
+function cx(...classes) {
+	return classes.filter(Boolean).join(" ");
+}
+//#endregion
+export { cx };

package/dist/utils/use-shift-click.js

@@ -0,0 +1,32 @@
+import { useRef } from "react";
+//#region src/utils/use-shift-click.ts
+/**
+* Whether Shift was held for a click, including a click made with the
+* keyboard.
+*
+* Space or Enter on a button gives a click event. Chromium and WebKit mark
+* that event with the Shift that was held. Firefox doesn't, so Shift and
+* Space would never select a range there. The key that's about to make the
+* click is watched, and its Shift is used for the click that follows.
+*/
+function useShiftClick() {
+	const held = useRef(false);
+	return {
+		props: {
+			onKeyDown(event) {
+				if (event.key === " " || event.key === "Enter") held.current = event.shiftKey;
+			},
+			onBlur() {
+				held.current = false;
+			}
+		},
+		/** Call it once, in the click handler. */
+		shift(event) {
+			const shift = event.shiftKey || held.current;
+			held.current = false;
+			return shift;
+		}
+	};
+}
+//#endregion
+export { useShiftClick };

package/dist/virtual.d.ts

@@ -0,0 +1,42 @@
+import { DataTableContentOwnProps, DataTableName } from "./components/data-table/content.js";
+import { DataTableProps } from "./components/data-table/data-table.js";
+import { RowData, TableFeatures } from "@tanstack/react-table";
+//#region src/virtual.d.ts
+export interface DataTableVirtualOwnProps {
+  /**
+   * How tall the table may get before its rows scroll. A number is pixels.
+   * The window of rows is cut to this, so it has to be set.
+   * @default 480
+   */
+  height?: number | string;
+  /**
+   * A guess at a row's height in pixels, used for rows that haven't been
+   * drawn yet. Each row is measured when it is.
+   * @default 40
+   */
+  estimateRowHeight?: number;
+  /**
+   * How many rows to draw beyond each edge of what's in view.
+   * @default 10
+   */
+  overscan?: number;
+}
+export type DataTableVirtualContentProps<TFeatures extends TableFeatures = any, TData extends RowData = any> = DataTableContentOwnProps<TFeatures, TData> & DataTableVirtualOwnProps & DataTableName;
+/**
+ * The table with only the rows in view drawn, for thousands of rows at
+ * once. It takes what `DataTableContent` takes, and a height to scroll in.
+ * The header stays in view unless `stickyHeader` is `false`.
+ *
+ * A screen reader is told how many rows there are and where each one is,
+ * since it can't count the ones that aren't in the page.
+ */
+export declare function DataTableVirtualContent<TFeatures extends TableFeatures = any, TData extends RowData = any>({ height, estimateRowHeight, overscan, stickyHeader, ...props }: DataTableVirtualContentProps<TFeatures, TData>): import("react").JSX.Element;
+export type DataTableVirtualProps<TFeatures extends TableFeatures, TData extends RowData> = DataTableProps<TFeatures, TData> & DataTableVirtualOwnProps;
+/**
+ * `DataTable` with only the rows in view drawn. Use it for a table of
+ * thousands of rows that are all loaded. It usually goes without
+ * pagination: leave `rowPaginationFeature` out, or pass
+ * `pagination={false}`.
+ */
+export declare function DataTableVirtual<TFeatures extends TableFeatures, TData extends RowData>(props: DataTableVirtualProps<TFeatures, TData>): import("react").JSX.Element;
+//#endregion

package/dist/virtual.js

@@ -0,0 +1,133 @@
+"use client";
+import { useDataTableView } from "./components/data-table/context.js";
+import { ContentFrame } from "./components/data-table/content.js";
+import { DataTableLayout } from "./components/data-table/data-table.js";
+import { useCallback, useEffect, useLayoutEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
+//#region src/virtual.tsx
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function Spacer({ height, columns }) {
+	return /* @__PURE__ */ jsx("tr", {
+		"aria-hidden": "true",
+		className: "nuv-data-table__spacer",
+		children: /* @__PURE__ */ jsx("td", {
+			colSpan: columns,
+			style: {
+				blockSize: height,
+				padding: 0,
+				border: 0
+			}
+		})
+	});
+}
+function VirtualRows({ rows, renderRow, headerRows, container, estimateRowHeight, overscan }) {
+	const { table } = useDataTableView("DataTableVirtualContent");
+	const [headerHeight, setHeaderHeight] = useState(0);
+	const rangeExtractor = useCallback((range) => {
+		const indexes = defaultRangeExtractor(range);
+		const active = typeof document === "undefined" ? null : document.activeElement;
+		if (!active || !container?.contains(active)) return indexes;
+		const row = active.closest("tr[data-index]");
+		const focused = row ? Number(row.getAttribute("data-index")) : -1;
+		if (focused < 0 || focused >= range.count || indexes.includes(focused)) return indexes;
+		return [...indexes, focused].sort((a, b) => a - b);
+	}, [container]);
+	const virtualizer = useVirtualizer({
+		count: rows.length,
+		getScrollElement: () => container,
+		estimateSize: () => estimateRowHeight,
+		getItemKey: (index) => rows[index]?.id ?? index,
+		overscan,
+		rangeExtractor,
+		scrollMargin: headerHeight,
+		measureElement: (element) => {
+			const panel = element.nextElementSibling;
+			const extra = panel?.classList.contains("nuv-data-table__detail-row") ? panel.offsetHeight : 0;
+			return element.offsetHeight + extra;
+		}
+	});
+	useIsomorphicLayoutEffect(() => {
+		const head = container?.querySelector("thead");
+		if (!head) return;
+		const measure = () => setHeaderHeight(head.getBoundingClientRect().height);
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(head);
+		return () => observer.disconnect();
+	}, [container]);
+	const open = table.atoms.expanded?.get();
+	useEffect(() => {
+		const box = container;
+		if (!box) return;
+		for (const row of box.querySelectorAll("tr[data-index]")) virtualizer.measureElement(row);
+	}, [open]);
+	const items = virtualizer.getVirtualItems();
+	const span = 1e3;
+	const total = virtualizer.getTotalSize();
+	const parts = [];
+	let end = headerHeight;
+	for (const item of items) {
+		const row = rows[item.index];
+		if (!row) continue;
+		if (item.start > end) parts.push(/* @__PURE__ */ jsx(Spacer, {
+			height: item.start - end,
+			columns: span
+		}, `gap-${item.index}`));
+		parts.push(renderRow(row, { rowProps: {
+			ref: virtualizer.measureElement,
+			"data-index": item.index,
+			"aria-rowindex": headerRows + item.index + 1
+		} }));
+		end = item.end;
+	}
+	const rest = total + headerHeight - end;
+	if (rest > 0) parts.push(/* @__PURE__ */ jsx(Spacer, {
+		height: rest,
+		columns: span
+	}, "gap-end"));
+	return parts;
+}
+/**
+* The table with only the rows in view drawn, for thousands of rows at
+* once. It takes what `DataTableContent` takes, and a height to scroll in.
+* The header stays in view unless `stickyHeader` is `false`.
+*
+* A screen reader is told how many rows there are and where each one is,
+* since it can't count the ones that aren't in the page.
+*/
+function DataTableVirtualContent({ height = 480, estimateRowHeight = 40, overscan = 10, stickyHeader = true, ...props }) {
+	const { table } = useDataTableView("DataTableVirtualContent");
+	const [container, setContainer] = useState(null);
+	const headerRows = table.getHeaderGroups().length;
+	return /* @__PURE__ */ jsx(ContentFrame, {
+		...props,
+		stickyHeader,
+		containerRef: setContainer,
+		containerProps: { style: { maxBlockSize: height } },
+		tableProps: { "aria-rowcount": headerRows + table.getRowModel().rows.length },
+		children: (rows, renderRow) => /* @__PURE__ */ jsx(VirtualRows, {
+			rows,
+			renderRow,
+			headerRows,
+			container,
+			estimateRowHeight,
+			overscan
+		})
+	});
+}
+/**
+* `DataTable` with only the rows in view drawn. Use it for a table of
+* thousands of rows that are all loaded. It usually goes without
+* pagination: leave `rowPaginationFeature` out, or pass
+* `pagination={false}`.
+*/
+function DataTableVirtual(props) {
+	return /* @__PURE__ */ jsx(DataTableLayout, {
+		...props,
+		content: (content) => /* @__PURE__ */ jsx(DataTableVirtualContent, { ...content })
+	});
+}
+//#endregion
+export { DataTableVirtual, DataTableVirtualContent };