@vueye-table/headless 3.0.0-alpha.3 → 3.0.0-alpha.5

package/dist/index.js

@@ -1,5 +1,5 @@
-import { injectDataGrid, injectDataTable, provideDataGrid, provideDataTable, useDataGrid } from "@vueye-table/vue";
-import { defineComponent, h, inject, nextTick, onMounted, onScopeDispose, provide, ref, useId, watch } from "vue";
+import { injectDataGrid, injectDataTable, provideDataGrid, provideDataTable, useDataGrid, useVirtualColumns, useVirtualRows } from "@vueye-table/vue";
+import { Fragment, computed, defineComponent, h, inject, nextTick, onMounted, onScopeDispose, provide, ref, shallowRef, useId, watch } from "vue";
 
 //#region src/shared.ts
 /** The element a component renders. Every headless component accepts `as`. */
@@ -271,6 +271,234 @@ const DataTableStatus = defineComponent({
 	}
 });
 
+//#endregion
+//#region src/virtual.ts
+/** Shared opt-in renderer props. Options are applied when the virtual renderer is created. */
+const virtualProps = {
+	virtual: {
+		type: [Boolean, Object],
+		default: false
+	},
+	height: {
+		type: String,
+		default: void 0
+	},
+	rowHeight: {
+		type: Number,
+		default: 40
+	},
+	overscan: {
+		type: Number,
+		default: 5
+	},
+	virtualColumns: {
+		type: Boolean,
+		default: false
+	},
+	columnWidth: {
+		type: Number,
+		default: 120
+	}
+};
+function virtualOptions(props) {
+	return {
+		rowHeight: props.rowHeight,
+		overscan: props.overscan,
+		columnWidth: props.columnWidth,
+		...typeof props.virtual === "object" ? props.virtual : {}
+	};
+}
+const viewportKey = Symbol("vt-viewport");
+const virtualKey = Symbol("vt-virtual-renderer");
+function injectVirtual() {
+	return inject(virtualKey, void 0);
+}
+/** A scroll container for a headless table/grid. It supplies its element without global reads. */
+const DataTableViewport = defineComponent({
+	name: "DataTableViewport",
+	slots: Object,
+	props: {
+		as: asProp("div"),
+		height: {
+			type: String,
+			default: "24rem"
+		}
+	},
+	setup(props, { slots, expose }) {
+		const element = shallowRef(null);
+		provide(viewportKey, element);
+		expose({ element });
+		return () => h(props.as, {
+			ref: element,
+			"data-virtual-viewport": "",
+			style: {
+				height: props.height,
+				overflow: "auto",
+				overflowAnchor: "none"
+			}
+		}, slots.default?.());
+	}
+});
+function createComponentVirtual(table, options, tableElement, grid, virtualColumns = false, gutter = 0) {
+	const scrollElement = inject(viewportKey, shallowRef(null));
+	const rows = useVirtualRows(table, {
+		scrollElement,
+		estimateRowHeight: options.rowHeight,
+		overscan: options.overscan,
+		initialCount: options.initialCount,
+		grid,
+		scrollMargin: () => tableElement()?.querySelector("thead")?.getBoundingClientRect().height ?? 0
+	});
+	const columns = grid && virtualColumns ? useVirtualColumns(grid, {
+		scrollElement,
+		estimateColumnWidth: (index) => table.columns[index]?.width ?? options.columnWidth ?? 120,
+		overscan: options.columnOverscan ?? 1,
+		initialCount: options.initialColumnCount ?? 5,
+		scrollMargin: gutter
+	}) : void 0;
+	const pinnedRows = computed(() => {
+		const result = [...rows.items];
+		const positions = /* @__PURE__ */ new Set([grid?.selection?.focus.row, grid?.editor?.position.row]);
+		for (const position of positions) {
+			if (position === void 0 || result.some((item) => item.renderItem.kind === "row" && item.renderItem.rowIndex === position)) continue;
+			const direct = table.renderItems[position];
+			const index = direct?.kind === "row" && direct.rowIndex === position ? position : table.renderItems.findIndex((item) => item.kind === "row" && item.rowIndex === position);
+			const item = rows.getItem(index);
+			if (item) result.push(item);
+		}
+		return result.sort((a, b) => a.index - b.index);
+	});
+	const pinnedColumns = computed(() => {
+		if (!columns) return void 0;
+		const result = [...columns.items];
+		const positions = /* @__PURE__ */ new Set([grid?.selection?.focus.column, grid?.editor?.position.column]);
+		for (const position of positions) {
+			if (position === void 0 || result.some((item) => item.index === position)) continue;
+			const item = columns.getItem(position);
+			if (item) result.push(item);
+		}
+		return result.sort((a, b) => a.index - b.index);
+	});
+	const binding = {
+		rows,
+		columns,
+		gutter,
+		get rowItems() {
+			return pinnedRows.value;
+		},
+		get columnItems() {
+			return pinnedColumns.value;
+		}
+	};
+	provide(virtualKey, binding);
+	return binding;
+}
+/** Create composables only for an enabled renderer, preserving the ordinary component path. */
+const VirtualContent = defineComponent({
+	name: "DataTableVirtualContent",
+	props: {
+		table: {
+			type: Object,
+			required: true
+		},
+		options: {
+			type: Object,
+			required: true
+		},
+		tableElement: {
+			type: Function,
+			required: true
+		},
+		grid: {
+			type: Object,
+			default: void 0
+		},
+		virtualColumns: {
+			type: Boolean,
+			default: false
+		},
+		gutter: {
+			type: Number,
+			default: 0
+		},
+		render: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(props) {
+		const binding = createComponentVirtual(props.table, props.options, props.tableElement, props.grid, props.virtualColumns, props.gutter);
+		return () => props.render(binding);
+	}
+});
+function rowSpacer(size, colspan, key) {
+	return size > 0 ? h("tr", {
+		key,
+		"aria-hidden": "true",
+		role: "presentation",
+		"data-virtual-spacer": "",
+		style: { height: `${size}px` }
+	}, [h("td", {
+		colspan: Math.max(1, colspan),
+		style: {
+			height: `${size}px`,
+			padding: "0",
+			border: "0",
+			lineHeight: "0"
+		}
+	})]) : null;
+}
+function columnSpacer(size, tag, key) {
+	return size > 0 ? h(tag, {
+		key,
+		"aria-hidden": "true",
+		role: "presentation",
+		"data-virtual-spacer": "",
+		style: {
+			width: `${size}px`,
+			minWidth: `${size}px`,
+			padding: "0",
+			border: "0"
+		}
+	}) : null;
+}
+function renderColumns(tableColumns, binding, render, tag) {
+	if (!binding?.columns || !binding.columnItems) return tableColumns.map(render);
+	const result = [];
+	let end = 0;
+	for (const item of binding.columnItems) {
+		result.push(columnSpacer(item.start - end, tag, `gap-${item.index}`), render(item.column, item.index));
+		end = item.start + item.size;
+	}
+	result.push(columnSpacer(binding.columns.totalSize - end, tag, "gap-end"));
+	return result;
+}
+function renderRows(binding, colspan, render) {
+	const result = [];
+	let end = 0;
+	for (const item of binding.rowItems) {
+		result.push(rowSpacer(item.start - end, colspan, `gap-${item.index}`), render(item));
+		end = item.start + item.size;
+	}
+	result.push(rowSpacer(binding.rows.totalSize - end, colspan, "gap-end"));
+	return result;
+}
+function virtualColgroup(tableColumns, binding) {
+	if (!binding.columns || !binding.columnItems) return null;
+	const cols = binding.gutter ? [h("col", { style: { width: `${binding.gutter}px` } })] : [];
+	let end = 0;
+	for (const item of binding.columnItems) {
+		if (item.start > end) cols.push(h("col", { style: { width: `${item.start - end}px` } }));
+		cols.push(h("col", { style: { width: `${item.size}px` } }));
+		end = item.start + item.size;
+	}
+	if (binding.columns.totalSize > end) cols.push(h("col", { style: { width: `${binding.columns.totalSize - end}px` } }));
+	return h("colgroup", cols);
+}
+function virtualRow(binding, row) {
+	return binding.rowItems.find((item) => item.renderItem.kind === "row" && item.renderItem.row.key === row.key);
+}
+
 //#endregion
 //#region src/table.ts
 /**
@@ -285,15 +513,27 @@ const DataTableRoot = defineComponent({
 			type: Object,
 			required: true
 		},
-		as: asProp("table")
+		as: asProp("table"),
+		...virtualProps
 	},
 	setup(props, { slots }) {
 		provideDataTable(props.table);
-		return () => h(props.as, {
+		const element = shallowRef();
+		const render = (virtual) => h(props.as, {
 			"aria-rowcount": props.table.rowCount + 1,
 			"aria-colcount": props.table.columns.length,
-			"data-empty": flag(props.table.rowCount === 0)
+			"data-empty": flag(props.table.rowCount === 0),
+			...virtual ? {
+				ref: element,
+				"data-virtual": ""
+			} : {}
 		}, slots.default?.({ table: props.table }) ?? [h(DataTableHeader), h(DataTableBody)]);
+		return () => props.virtual ? h(VirtualContent, {
+			table: props.table,
+			options: virtualOptions(props),
+			tableElement: () => element.value,
+			render
+		}) : render();
 	}
 });
 const DataTableCaption = defineComponent({
@@ -311,7 +551,11 @@ const DataTableHeader = defineComponent({
 	props: { as: asProp("thead") },
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableHeader>");
-		return () => h(props.as, slots.default?.({ columns: table.columns }) ?? h(DataTableHeaderRow, () => table.columns.map((column) => h(DataTableHeaderCell, {
+		const virtual = injectVirtual();
+		return () => h(props.as, slots.default?.({ columns: table.columns }) ?? h(DataTableHeaderRow, () => virtual?.columns ? h(DataTableVirtualColumns, null, { default: ({ column }) => [h(DataTableHeaderCell, {
+			key: column.id,
+			column
+		})] }) : table.columns.map((column) => h(DataTableHeaderCell, {
 			key: column.id,
 			column
 		}))));
@@ -325,6 +569,23 @@ const DataTableHeaderRow = defineComponent({
 		return () => h(props.as, { "aria-rowindex": 1 }, slots.default?.());
 	}
 });
+/** Shared header/body column slice, with native spacer cells for omitted columns. */
+const DataTableVirtualColumns = defineComponent({
+	name: "DataTableVirtualColumns",
+	slots: Object,
+	props: { as: {
+		type: String,
+		default: "th"
+	} },
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableVirtualColumns>");
+		const virtual = injectVirtual();
+		return () => h(Fragment, renderColumns(table.columns, virtual, (column, index) => slots.default?.({
+			column,
+			index
+		}), props.as));
+	}
+});
 /**
 * A column header with `aria-sort`. Without a slot it shows the header text inside a sort button
 * for sortable columns.
@@ -338,6 +599,7 @@ const DataTableHeaderCell = defineComponent({
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableHeaderCell>");
+		const virtual = injectVirtual();
 		return () => {
 			const { column } = props;
 			const sort = table.getSort(column.id);
@@ -354,7 +616,8 @@ const DataTableHeaderCell = defineComponent({
 				"data-align": column.align,
 				"data-sortable": flag(column.sortable),
 				"data-sort": sort?.direction,
-				style: columnStyle(column)
+				style: columnStyle(column),
+				...virtual?.columns ? { "aria-colindex": table.columns.indexOf(column) + 1 } : {}
 			}, content);
 		};
 	}
@@ -397,10 +660,20 @@ const DataTableSortButton = defineComponent({
 const DataTableBody = defineComponent({
 	name: "DataTableBody",
 	slots: Object,
-	props: { as: asProp("tbody") },
+	props: {
+		as: asProp("tbody"),
+		...virtualProps,
+		colspan: {
+			type: Number,
+			default: void 0
+		}
+	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableBody>");
+		const virtual = injectVirtual();
 		return () => {
+			if (props.virtual && !virtual) return h(VirtualDataTableBody, props, slots);
+			if (virtual) return renderTableBody(table, virtual, props.as, props.colspan, slots);
 			let content = slots.default?.({ rows: table.rows });
 			if (!content) content = table.rows.length === 0 && slots.empty ? h("tr", { "data-empty": "" }, [h("td", { colspan: Math.max(1, table.columns.length) }, slots.empty())]) : table.rows.map((row) => h(DataTableRow, {
 				key: row.key,
@@ -410,25 +683,73 @@ const DataTableBody = defineComponent({
 		};
 	}
 });
+function renderTableBody(table, virtual, as, colspan, slots, element) {
+	const width = colspan ?? table.columns.length;
+	const attrs = element ? { ref: element } : {};
+	const content = slots.default?.({ rows: virtual.rowItems.filter((item) => item.renderItem.kind === "row").map((item) => item.renderItem.row) });
+	if (table.rows.length === 0 && slots.empty) return h(as, attrs, h("tr", { "data-empty": "" }, [h("td", { colspan: Math.max(1, width) }, slots.empty())]));
+	if (content) return h(as, attrs, [
+		rowSpacer(virtual.rows.paddingStart, width, "gap-start"),
+		...content,
+		rowSpacer(virtual.rows.paddingEnd, width, "gap-end")
+	]);
+	return h(as, attrs, renderRows(virtual, width, (item) => item.renderItem.kind === "row" ? h(DataTableRow, {
+		key: item.key,
+		row: item.renderItem.row,
+		rowIndex: item.renderItem.rowIndex
+	}) : h("tr", {
+		key: item.key,
+		"data-detail": "",
+		ref: (target) => virtual.rows.measureElement(target, item.key)
+	}, [h("td", { colspan: Math.max(1, width) }, slots.detail?.(item.renderItem))])));
+}
+const VirtualDataTableBody = defineComponent({
+	name: "DataTableVirtualBody",
+	props: {
+		as: asProp("tbody"),
+		...virtualProps,
+		colspan: {
+			type: Number,
+			default: void 0
+		}
+	},
+	slots: Object,
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableBody>");
+		const element = shallowRef();
+		const virtual = createComponentVirtual(table, virtualOptions(props), () => element.value?.closest("table"));
+		return () => renderTableBody(table, virtual, props.as, props.colspan, slots, element);
+	}
+});
 /** A body row; `aria-selected` and `data-selected` follow the selection. */
 const DataTableRow = defineComponent({
 	name: "DataTableRow",
 	slots: Object,
 	props: {
 		row: rowProp,
-		as: asProp("tr")
+		as: asProp("tr"),
+		rowIndex: {
+			type: Number,
+			default: void 0
+		}
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataTableRow>");
+		const virtual = injectVirtual();
 		return () => {
 			const { row } = props;
 			const selected = table.isSelected(row.key);
-			const position = table.rows.indexOf(row);
+			const item = virtual ? virtualRow(virtual, row) : void 0;
+			const position = props.rowIndex ?? item?.renderItem.rowIndex ?? table.rows.indexOf(row);
 			return h(props.as, {
 				"aria-rowindex": position === -1 ? void 0 : table.pageStart + position + 1,
 				"aria-selected": table.selectionMode === "none" ? void 0 : String(selected),
 				"data-selected": flag(selected),
-				"data-key": String(row.key)
+				"data-key": String(row.key),
+				...virtual && item ? {
+					ref: (element) => virtual.rows.measureElement(element, item.key),
+					"data-virtual-row": ""
+				} : {}
 			}, slots.default?.({
 				row,
 				selected,
@@ -510,6 +831,12 @@ const DataGridRoot = defineComponent({
 		label: {
 			type: String,
 			default: void 0
+		},
+		...virtualProps,
+		/** Width reserved before data columns, for a row-number/header column. */
+		gutter: {
+			type: Number,
+			default: 0
 		}
 	},
 	setup(props, { slots, expose }) {
@@ -529,8 +856,34 @@ const DataGridRoot = defineComponent({
 			grid,
 			focus
 		});
+		let virtual;
 		const onKeydown = (event) => {
 			if (event.target !== element.value) return;
+			if (virtual && !grid.editor && (event.ctrlKey || event.metaKey) && (event.key === "Home" || event.key === "End")) {
+				grid.focusCell(event.key === "Home" ? {
+					row: 0,
+					column: 0
+				} : {
+					row: props.table.rows.length - 1,
+					column: props.table.columns.length - 1
+				}, { extend: event.shiftKey });
+				event.preventDefault();
+				return;
+			}
+			if (virtual && !grid.editor && (event.key === "PageUp" || event.key === "PageDown")) {
+				const current = grid.selection?.focus ?? {
+					row: 0,
+					column: 0
+				};
+				const item = virtual.rowItems.find((entry) => entry.renderItem.rowIndex === current.row);
+				const step = Math.max(1, Math.floor(virtual.rows.viewportSize / (item?.size ?? props.rowHeight)));
+				grid.focusCell({
+					row: current.row + (event.key === "PageDown" ? step : -step),
+					column: current.column
+				}, { extend: event.shiftKey });
+				event.preventDefault();
+				return;
+			}
 			if (grid.handleKey(event)) event.preventDefault();
 		};
 		const onCopy = (event, cut = false) => {
@@ -545,7 +898,8 @@ const DataGridRoot = defineComponent({
 			event.preventDefault();
 			grid.paste(text);
 		};
-		return () => {
+		const render = (binding) => {
+			virtual = binding;
 			const focusPosition = grid.selection?.focus;
 			return h(props.as, {
 				ref: element,
@@ -554,18 +908,37 @@ const DataGridRoot = defineComponent({
 				tabindex: 0,
 				"aria-label": props.label,
 				"aria-multiselectable": "true",
-				"aria-rowcount": props.table.rows.length + 1,
+				"aria-rowcount": (binding ? props.table.rowCount : props.table.rows.length) + 1,
 				"aria-colcount": props.table.columns.length,
 				"aria-activedescendant": focusPosition && !grid.editor ? cellId(id, focusPosition.row, focusPosition.column) : void 0,
 				onKeydown,
 				onCopy: (event) => onCopy(event),
 				onCut: (event) => onCopy(event, true),
-				onPaste
-			}, slots.default?.({
+				onPaste,
+				...binding ? {
+					"data-virtual": "",
+					style: binding.columns ? {
+						tableLayout: "fixed",
+						width: `${binding.columns.totalSize + binding.gutter}px`
+					} : void 0
+				} : {}
+			}, binding ? [virtualColgroup(props.table.columns, binding), slots.default?.({
+				table: props.table,
+				grid
+			}) ?? [h(DataTableHeader), h(DataGridBody)]] : slots.default?.({
 				table: props.table,
 				grid
 			}) ?? [h(DataTableHeader), h(DataGridBody)]);
 		};
+		return () => props.virtual ? h(VirtualContent, {
+			table: props.table,
+			grid,
+			options: virtualOptions(props),
+			virtualColumns: props.virtualColumns,
+			gutter: props.gutter,
+			tableElement: () => element.value,
+			render
+		}) : render();
 	}
 });
 /**
@@ -575,24 +948,74 @@ const DataGridRoot = defineComponent({
 const DataGridBody = defineComponent({
 	name: "DataGridBody",
 	slots: Object,
-	props: { as: asProp("tbody") },
+	props: {
+		as: asProp("tbody"),
+		...virtualProps,
+		colspan: {
+			type: Number,
+			default: void 0
+		}
+	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataGridBody>");
-		return () => h(props.as, slots.default?.({ rows: table.rows }) ?? table.rows.map((row, rowIndex) => h("tr", {
-			key: row.key,
-			role: "row",
-			"aria-rowindex": rowIndex + 2,
-			"data-key": String(row.key)
-		}, [slots.rowHeader?.({
-			row,
-			index: rowIndex
-		}), ...table.columns.map((column, columnIndex) => h(DataGridCell, {
-			key: column.id,
-			row,
-			column,
-			rowIndex,
-			columnIndex
-		}, slots.cell ? { default: (cellProps) => slots.cell?.(cellProps) } : void 0))])));
+		const { grid } = useGrid("<DataGridBody>");
+		const virtual = injectVirtual();
+		const element = ref();
+		const render = (binding) => {
+			if (binding && slots.default) return h(props.as, { ref: element }, slots.default({ rows: binding.rowItems.filter((item) => item.renderItem.kind === "row").map((item) => item.renderItem.row) }));
+			if (binding) return h(props.as, { ref: element }, renderRows(binding, props.colspan ?? table.columns.length + (slots.rowHeader ? 1 : 0), (item) => {
+				if (item.renderItem.kind !== "row") return h("tr", {
+					key: item.key,
+					"aria-hidden": "true",
+					"data-detail": "",
+					style: { height: `${item.size}px` }
+				}, [h("td", {
+					colspan: Math.max(1, table.columns.length),
+					style: { padding: "0" }
+				})]);
+				const { row, rowIndex } = item.renderItem;
+				const columns = renderColumns(table.columns, binding, (column, columnIndex) => h(DataGridCell, {
+					key: column.id,
+					row,
+					column,
+					rowIndex,
+					columnIndex
+				}, slots.cell ? { default: (cellProps) => slots.cell?.(cellProps) } : void 0), "td");
+				return h("tr", {
+					key: item.key,
+					role: "row",
+					"aria-rowindex": table.pageStart + rowIndex + 1,
+					"data-key": String(row.key),
+					"data-virtual-row": "",
+					ref: (target) => binding.rows.measureElement(target, item.key)
+				}, [slots.rowHeader?.({
+					row,
+					index: rowIndex
+				}), ...columns]);
+			}));
+			return h(props.as, slots.default?.({ rows: table.rows }) ?? table.rows.map((row, rowIndex) => h("tr", {
+				key: row.key,
+				role: "row",
+				"aria-rowindex": rowIndex + 2,
+				"data-key": String(row.key)
+			}, [slots.rowHeader?.({
+				row,
+				index: rowIndex
+			}), ...table.columns.map((column, columnIndex) => h(DataGridCell, {
+				key: column.id,
+				row,
+				column,
+				rowIndex,
+				columnIndex
+			}, slots.cell ? { default: (cellProps) => slots.cell?.(cellProps) } : void 0))])));
+		};
+		return () => props.virtual && !virtual ? h(VirtualContent, {
+			table,
+			grid,
+			options: virtualOptions(props),
+			tableElement: () => element.value?.closest("table"),
+			render
+		}) : render(virtual);
 	}
 });
 /** The text box shown in a cell while it is edited. */
@@ -666,13 +1089,14 @@ const DataGridCell = defineComponent({
 	setup(props, { slots }) {
 		const table = injectDataTable("<DataGridCell>");
 		const { grid, context } = useGrid("<DataGridCell>");
+		const virtual = injectVirtual();
 		const element = ref();
 		const position = () => ({
 			row: props.rowIndex ?? table.rows.indexOf(props.row),
 			column: props.columnIndex ?? table.columns.indexOf(props.column)
 		});
 		watch(() => grid.isFocused(position()), (focused) => {
-			if (focused) element.value?.scrollIntoView?.({
+			if (focused && !virtual) element.value?.scrollIntoView?.({
 				block: "nearest",
 				inline: "nearest"
 			});
@@ -730,5 +1154,5 @@ const DataGridCell = defineComponent({
 });
 
 //#endregion
-export { DataGridBody, DataGridCell, DataGridRoot, DataTableBody, DataTableCaption, DataTableCell, DataTableColumnVisibility, DataTableEmpty, DataTableHeader, DataTableHeaderCell, DataTableHeaderRow, DataTablePageSize, DataTablePagination, DataTableRoot, DataTableRow, DataTableSearch, DataTableSelectAll, DataTableSelectRow, DataTableSortButton, DataTableStatus, cellId, columnStyle };
+export { DataGridBody, DataGridCell, DataGridRoot, DataTableBody, DataTableCaption, DataTableCell, DataTableColumnVisibility, DataTableEmpty, DataTableHeader, DataTableHeaderCell, DataTableHeaderRow, DataTablePageSize, DataTablePagination, DataTableRoot, DataTableRow, DataTableSearch, DataTableSelectAll, DataTableSelectRow, DataTableSortButton, DataTableStatus, DataTableViewport, DataTableVirtualColumns, cellId, columnStyle, injectVirtual as injectVirtualRenderer, virtualProps };
 //# sourceMappingURL=index.js.map