@octane-xplat/table 0.0.1 → 0.10.0

package/dist/web/DataGrid.tsrx.js

@@ -0,0 +1,242 @@
+import { useTable } from "./useTable.tsrx.js";
+import { columnStyle } from "./grid-layout.js";
+import { gridRowPosition } from "./grid-accessibility.js";
+import { ColumnDrag } from "./ColumnDrag.tsrx.js";
+import { GridControls, GridPagination } from "./GridControls.tsrx.js";
+import { Fragment, createScopedElement, createScopedValue, hookSlots, positionalChildren, withSlot } from "octane";
+import { createElementFromConfig, deferRecord, isRenderCall } from "octane/internal/client";
+import { CheckboxInput, HStack, Pressable, Text, TextInput, View, VirtualList } from "@octane-xplat/ui";
+//#region src/DataGrid.tsrx
+function DataGridHeaderCell$record(canSort, cls, column, header, inner, props) {
+	return createScopedElement(View, {
+		className: cls,
+		web: { role: "columnheader" },
+		style: columnStyle(column, Boolean(props.resize || props.reorder), props.state.columnSizing)
+	}, () => positionalChildren([
+		canSort ? createScopedValue(() => createScopedElement(Pressable, {
+			id: props.id,
+			className: "vx-table-th--sortable",
+			onPress: () => column.toggleSorting(),
+			accessibilityLabel: `Sort ${column.id}, ${column.getIsSorted() || "unsorted"}`
+		}, () => createScopedElement(Fragment, {}, () => positionalChildren([inner])), "c:9c774b76")) : createScopedValue(() => createScopedElement(View, { id: props.id }, () => inner, "c:8dd2c3bd")),
+		!header.isPlaceholder && props.filters && column.getCanFilter() ? createScopedValue(() => createElementFromConfig("c:262f383b", TextInput, {
+			id: props.id ? `${props.id}-filter` : void 0,
+			value: String(column.getFilterValue() ?? ""),
+			placeholder: `Filter ${column.id}`,
+			accessibilityLabel: `Filter ${column.id}`,
+			onChange: (value) => {
+				column.setFilterValue(value);
+				props.table.setPageIndex(0);
+			}
+		})) : null,
+		!header.isPlaceholder && column.columns.length === 0 && (props.resize || props.reorder) ? createScopedValue(() => createElementFromConfig("c:9ccad299", ColumnDrag, {
+			id: props.id,
+			table: props.table,
+			column,
+			resize: props.resize,
+			reorder: props.reorder,
+			direction: props.direction,
+			state: props.state
+		})) : null
+	]), "c:b6406c85");
+}
+function DataGridBodyRow$record(cls, content, id, props, row) {
+	return createScopedElement(HStack, {
+		id: props.selection || !props.onRowPress ? id : void 0,
+		className: cls,
+		web: {
+			role: "row",
+			"aria-rowindex": props.position.ariaIndex
+		},
+		accessibilityHint: props.position.label,
+		accessibilityState: { selected: row.getIsSelected?.() || void 0 }
+	}, () => positionalChildren([props.selection ? createScopedValue(() => createScopedElement(View, {
+		className: "vx-datagrid-selection",
+		web: { role: "cell" }
+	}, () => createScopedValue(() => createElementFromConfig("c:a819c8d2", CheckboxInput, {
+		id: props.idPrefix ? `${props.idPrefix}-select-${row.id}` : void 0,
+		checked: row.getIsSelected(),
+		isDisabled: !row.getCanSelect(),
+		accessibilityLabel: `Select ${props.getRowLabel?.(row) ?? row.id}`,
+		accessibilityHint: props.position.label,
+		onCheckedChange: (checked) => row.toggleSelected(checked)
+	})), "c:3d3ff402")) : null, content]), "c:75c97115");
+}
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+function DataGrid$record(ariaRowCount, headerGroups, props, rowCount, rows, state, table) {
+	return createScopedElement(View, {
+		id: props.id,
+		className: [
+			"vx-table",
+			"vx-datagrid",
+			props.className
+		],
+		style: props.style,
+		flexGrow: props.flexGrow ?? 1,
+		flexShrink: props.flexShrink,
+		alignSelf: props.alignSelf,
+		row: props.row,
+		col: props.col,
+		rowSpan: props.rowSpan,
+		colSpan: props.colSpan,
+		ios: props.ios,
+		android: props.android,
+		web: props.web,
+		accessible: props.accessible,
+		accessibilityHint: props.accessibilityHint,
+		accessibilityState: props.accessibilityState,
+		accessibilityRole: props.accessibilityRole,
+		accessibilityLabel: props.accessibilityLabel
+	}, () => positionalChildren([
+		props.showGlobalFilter || props.showColumnSettings ? createScopedValue(() => createElementFromConfig("c:c46c08f0", GridControls, {
+			id: props.id,
+			table,
+			state,
+			search: props.showGlobalFilter,
+			settings: props.showColumnSettings
+		})) : null,
+		props.showRowSelection ? createScopedElement(HStack, { className: "vx-datagrid-controls" }, () => positionalChildren([
+			createScopedValue(() => createScopedElement(Text, { id: props.id ? `${props.id}-selected-count` : void 0 }, () => positionalChildren([Object.values(state.rowSelection).filter(Boolean).length, " selected"]), "c:884ce760")),
+			createScopedValue(() => createScopedElement(Pressable, {
+				id: props.id ? `${props.id}-clear-selection` : void 0,
+				className: "vx-datagrid-action",
+				onPress: () => table.resetRowSelection(true),
+				accessibilityLabel: "Clear selection"
+			}, () => createElementFromConfig("c:382b9cf3", Text, {}, ["Clear selection"]), "c:fe7db179")),
+			props.renderSelectionActions?.(table)
+		]), "c:1e3c09a4") : null,
+		createScopedValue(() => createScopedElement(View, {
+			id: props.id ? `${props.id}-table` : void 0,
+			flexGrow: 1,
+			web: {
+				role: "table",
+				"aria-label": props.accessibilityLabel,
+				"aria-rowcount": ariaRowCount,
+				"aria-colcount": table.getVisibleLeafColumns().length + (props.showRowSelection ? 1 : 0)
+			}
+		}, () => positionalChildren([createScopedValue(() => createScopedElement(View, {
+			id: props.id ? `${props.id}-header` : void 0,
+			flexShrink: 0
+		}, () => headerGroups.map((group) => createScopedElement(HStack, {
+			key: group.id,
+			className: "vx-table-head",
+			web: {
+				role: "row",
+				"aria-rowindex": group.depth + 1
+			}
+		}, () => positionalChildren([props.showRowSelection ? createScopedValue(() => createScopedElement(View, {
+			className: "vx-datagrid-selection",
+			web: { role: "columnheader" }
+		}, () => group.depth === 0 ? createScopedValue(() => createElementFromConfig("c:7f7ed838", CheckboxInput, {
+			id: props.id ? `${props.id}-select-page` : void 0,
+			checked: table.getIsAllPageRowsSelected(),
+			indeterminate: !table.getIsAllPageRowsSelected() && table.getIsSomePageRowsSelected(),
+			isDisabled: !rows.some((row) => row.getCanSelect()),
+			accessibilityLabel: "Select current page",
+			onCheckedChange: (checked) => table.toggleAllPageRowsSelected(checked)
+		})) : null, "c:9005f88e")) : null, group.headers.map((header) => createElementFromConfig("c:ec2568e0", DataGridHeaderCell, {
+			key: header.id,
+			header,
+			render: props.renderHeader,
+			id: props.id ? `${props.id}-th-${header.column.id}` : void 0,
+			state,
+			table,
+			filters: props.showColumnFilters,
+			resize: props.resizableColumns,
+			reorder: props.reorderableColumns,
+			direction: props.direction
+		}))]), "c:f0882298")), "c:f76ea045")), createScopedValue(() => createElementFromConfig("c:1fe3bf49", VirtualList, {
+			flexGrow: 1,
+			className: "vx-datagrid-body",
+			id: props.id ? `${props.id}-body` : void 0,
+			items: rows,
+			keyExtractor: (row) => row.id,
+			renderItem: (row, index) => createScopedValue(() => createElementFromConfig("c:c17292e4", DataGridBodyRow, {
+				row,
+				position: gridRowPosition(index, state.pagination, headerGroups.length, rowCount),
+				renderCell: props.renderCell,
+				onRowPress: props.onRowPress,
+				idPrefix: props.id,
+				state,
+				selection: props.showRowSelection,
+				getRowLabel: props.getRowLabel,
+				fixed: Boolean(props.resizableColumns || props.reorderableColumns)
+			})),
+			renderEmpty: props.renderEmpty
+		}))]), "c:75a1e8c3")),
+		props.showPagination ? createScopedValue(() => createElementFromConfig("c:cb40f9c9", GridPagination, {
+			id: props.id,
+			table,
+			state,
+			sizes: props.pageSizeOptions
+		})) : null
+	]), "c:38b91cee");
+}
+function renderTemplate(template, ctx) {
+	if (template == null) return null;
+	return typeof template === "function" ? template(ctx) : template;
+}
+function TemplateContent(props) {
+	const content = props.content;
+	if (content == null || content === false) return null;
+	if (typeof content === "string" || typeof content === "number" || typeof content === "bigint") return createScopedElement(Text, {}, () => String(content), "c:0e8d5bed");
+	return content ?? null;
+}
+function sortIndicator(column) {
+	const dir = column.getIsSorted?.();
+	return dir === "asc" ? " ↑" : dir === "desc" ? " ↓" : "";
+}
+function DataGridHeaderCell(props, __renderScope = void 0) {
+	const { header } = props;
+	props.state;
+	const column = header.column;
+	const canSort = !header.isPlaceholder && column.getCanSort?.() === true;
+	const content = props.render ? props.render(header) : renderTemplate(column.columnDef.header, header.getContext()) ?? column.id;
+	const inner = typeof content === "string" || typeof content === "number" || typeof content === "bigint" ? createScopedElement(Text, {}, () => positionalChildren([String(content), canSort ? sortIndicator(column) : ""]), "c:9e661db7") : createScopedElement(Fragment, {}, () => positionalChildren([createScopedValue(() => createElementFromConfig("c:2b569bb4", TemplateContent, { content })), canSort ? createScopedElement(Text, {}, () => sortIndicator(column), "c:79b94a0c") : null]));
+	const cls = "vx-table-cell vx-table-th";
+	return isRenderCall(__renderScope) ? DataGridHeaderCell$record(canSort, cls, column, header, inner, props) : deferRecord(DataGridHeaderCell$record, canSort, cls, column, header, inner, props);
+}
+function DataGridBodyRow(props, __renderScope$ = void 0) {
+	const { row } = props;
+	props.state;
+	const cells = row.getVisibleCells();
+	const inner = createScopedElement(Fragment, {}, () => positionalChildren([cells.map((cell) => createScopedElement(View, {
+		key: cell.id,
+		className: "vx-table-cell",
+		web: { role: "cell" },
+		style: columnStyle(cell.column, Boolean(props.fixed), props.state.columnSizing)
+	}, () => createScopedValue(() => createElementFromConfig("c:f46b58dc", TemplateContent, { content: props.renderCell ? props.renderCell(cell) : renderTemplate(cell.column.columnDef.cell, cell.getContext()) ?? cell.renderValue?.() })), "c:355196b8"))]));
+	const cls = "vx-table-row" + (props.onRowPress ? " vx-table-row--pressable" : "") + (row.getIsSelected?.() ? " vx-table-row--selected" : "");
+	const id = props.idPrefix ? `${props.idPrefix}-row-${row.id}` : void 0;
+	const content = props.onRowPress ? createScopedValue(() => createScopedElement(Pressable, {
+		id: props.selection ? void 0 : id,
+		className: "vx-datagrid-row-action",
+		onPress: () => props.onRowPress(row),
+		accessibilityLabel: props.getRowLabel?.(row) ?? row.id,
+		accessibilityHint: props.position.label,
+		accessibilityState: { selected: row.getIsSelected?.() || void 0 }
+	}, () => inner, "c:738701a6")) : inner;
+	return isRenderCall(__renderScope$) ? DataGridBodyRow$record(cls, content, id, props, row) : deferRecord(DataGridBodyRow$record, cls, content, id, props, row);
+}
+function DataGrid(props, __renderScope$2 = void 0) {
+	const { table, state } = withSlot(_h$0, useTable, {
+		...props.options,
+		defaultColumn: props.showColumnFilters ? {
+			filterFn: "includesString",
+			...props.options?.defaultColumn
+		} : props.options?.defaultColumn,
+		data: props.data,
+		columns: props.columns,
+		features: props.features,
+		initialState: props.initialState,
+		state: props.state,
+		getRowId: props.getRowId
+	});
+	const headerGroups = table.getHeaderGroups();
+	const rows = table.getRowModel().rows;
+	const rowCount = props.options?.manualPagination && props.options.rowCount == null ? -1 : table.getRowCount();
+	const ariaRowCount = rowCount < 0 ? -1 : headerGroups.length + rowCount;
+	return isRenderCall(__renderScope$2) ? DataGrid$record(ariaRowCount, headerGroups, props, rowCount, rows, state, table) : deferRecord(DataGrid$record, ariaRowCount, headerGroups, props, rowCount, rows, state, table);
+}
+//#endregion
+export { DataGrid };

package/dist/web/GridControls.tsrx.js

@@ -0,0 +1,114 @@
+import { moveColumn } from "./grid-layout.js";
+import { createScopedElement, createScopedValue, hookSlots, positionalChildren, useState } from "octane";
+import { createElementFromConfig, deferRecord, isRenderCall } from "octane/internal/client";
+import { CheckboxInput, HStack, Pressable, Text, TextInput, View } from "@octane-xplat/ui";
+//#region src/GridControls.tsrx
+function Action$record(props) {
+	return createScopedElement(Pressable, {
+		id: props.id,
+		className: "vx-datagrid-action",
+		disabled: props.disabled,
+		onPress: props.onPress,
+		accessibilityLabel: props.label
+	}, () => createScopedElement(Text, {}, () => props.label, "c:17360d36"), "c:a39c0448");
+}
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+function Action(props, __renderScope = void 0) {
+	return isRenderCall(__renderScope) ? Action$record(props) : deferRecord(Action$record, props);
+}
+function GridControls(props) {
+	const [settingsOpen, setSettingsOpen] = useState(false, _h$0);
+	props.state;
+	const table = props.table;
+	const columns = table.getAllLeafColumns();
+	const order = columns.map((column) => column.id);
+	const move = (id, index) => table.setColumnOrder(moveColumn(order, id, order[index]));
+	return createScopedElement(View, {}, () => positionalChildren([createScopedElement(HStack, { className: "vx-datagrid-controls" }, () => positionalChildren([props.search ? createScopedValue(() => createElementFromConfig("c:60d66d67", TextInput, {
+		id: props.id ? `${props.id}-search` : void 0,
+		className: "flex-1",
+		value: String(props.state.globalFilter ?? ""),
+		placeholder: "Filter rows",
+		accessibilityLabel: "Filter rows",
+		onChange: (value) => {
+			table.setGlobalFilter(value);
+			table.setPageIndex(0);
+		}
+	})) : null, props.settings ? createScopedValue(() => createElementFromConfig("c:a0627d7f", Action, {
+		id: props.id ? `${props.id}-settings` : void 0,
+		label: "Columns",
+		onPress: () => setSettingsOpen(!settingsOpen)
+	})) : null]), "c:295b44ae"), props.settings && settingsOpen ? createScopedElement(View, { className: "vx-datagrid-settings" }, () => positionalChildren([columns.map((column, index) => createScopedElement(HStack, {
+		key: column.id,
+		className: "vx-datagrid-controls"
+	}, () => positionalChildren([
+		createScopedValue(() => createElementFromConfig("c:f756b0c1", CheckboxInput, {
+			id: props.id ? `${props.id}-visible-${column.id}` : void 0,
+			checked: column.getIsVisible(),
+			isDisabled: !column.getCanHide(),
+			label: typeof column.columnDef.header === "string" ? column.columnDef.header : column.id,
+			accessibilityLabel: `Show ${column.id}`,
+			onCheckedChange: (checked) => column.toggleVisibility(checked)
+		})),
+		createScopedValue(() => createElementFromConfig("c:c0929303", Action, {
+			id: props.id ? `${props.id}-earlier-${column.id}` : void 0,
+			label: `Move ${column.id} earlier`,
+			disabled: index === 0,
+			onPress: () => move(column.id, index - 1)
+		})),
+		createScopedValue(() => createElementFromConfig("c:40890231", Action, {
+			id: props.id ? `${props.id}-later-${column.id}` : void 0,
+			label: `Move ${column.id} later`,
+			disabled: index === columns.length - 1,
+			onPress: () => move(column.id, index + 1)
+		}))
+	]), "c:e5e4c754")), createScopedValue(() => createElementFromConfig("c:b982f7a4", Action, {
+		id: props.id ? `${props.id}-reset-columns` : void 0,
+		label: "Reset columns",
+		onPress: () => {
+			table.resetColumnVisibility();
+			table.resetColumnOrder();
+			table.resetColumnSizing();
+		}
+	}))]), "c:ec8b36b6") : null]), "c:fb4e7949");
+}
+function GridPagination(props) {
+	props.state;
+	const table = props.table;
+	const { pageIndex, pageSize } = props.state.pagination;
+	const count = table.getPageCount();
+	const sizes = [...new Set((props.sizes ?? [
+		10,
+		25,
+		50
+	]).filter((size) => Number.isInteger(size) && size > 0))];
+	return createScopedElement(HStack, {
+		className: "vx-datagrid-controls",
+		accessibilityLabel: "Pagination"
+	}, () => positionalChildren([
+		createScopedValue(() => createElementFromConfig("c:5836f3a5", Action, {
+			id: props.id ? `${props.id}-previous` : void 0,
+			label: "Previous page",
+			disabled: !table.getCanPreviousPage(),
+			onPress: () => table.previousPage()
+		})),
+		createScopedValue(() => createScopedElement(Text, { id: props.id ? `${props.id}-page` : void 0 }, () => count < 0 ? `Page ${pageIndex + 1}` : `Page ${count === 0 ? 0 : pageIndex + 1} of ${count}`, "c:2afe0489")),
+		createScopedValue(() => createElementFromConfig("c:e9944f84", Action, {
+			id: props.id ? `${props.id}-next` : void 0,
+			label: "Next page",
+			disabled: !table.getCanNextPage(),
+			onPress: () => table.nextPage()
+		})),
+		sizes.map((size) => createElementFromConfig("c:6ba759f0", Action, {
+			key: size,
+			id: props.id ? `${props.id}-size-${size}` : void 0,
+			label: `${size} per page`,
+			disabled: pageSize === size,
+			onPress: () => {
+				table.setPageSize(size);
+				table.setPageIndex(0);
+			}
+		}))
+	]), "c:efde622a");
+}
+//#endregion
+export { GridControls, GridPagination };

package/dist/web/grid-accessibility.js

@@ -0,0 +1,12 @@
+//#region src/grid-accessibility.ts
+/** Positions describe the final flat row model, before VirtualList windowing.
+* Header rows count toward ARIA indices, but not the spoken data-row ordinal. */
+function gridRowPosition(index, pagination, headerRows, rowCount) {
+	const ordinal = pagination.pageIndex * pagination.pageSize + index + 1;
+	return {
+		ariaIndex: headerRows + ordinal,
+		label: rowCount < 0 ? `Row ${ordinal}` : `Row ${ordinal} of ${rowCount}`
+	};
+}
+//#endregion
+export { gridRowPosition };

package/dist/web/grid-layout.js

@@ -0,0 +1,43 @@
+//#region src/grid-layout.ts
+/** Resolve the displayed width without changing flexible legacy columns. */
+function columnStyle(column, fixed, sizing) {
+	return fixed || column.columnDef.size != null || sizing[column.id] != null ? {
+		width: column.getSize(),
+		flexGrow: 0,
+		flexShrink: 0
+	} : {
+		flexGrow: 1,
+		flexShrink: 1
+	};
+}
+/** Move a column within the complete order, preserving hidden columns. */
+function moveColumn(order, source, target) {
+	const from = order.indexOf(source);
+	const to = order.indexOf(target);
+	if (from < 0 || to < 0 || from === to) return order;
+	const next = [...order];
+	next.splice(from, 1);
+	next.splice(to, 0, source);
+	return next;
+}
+/** Find the visible column whose midpoint a horizontal drag has crossed. */
+function dragTarget(columns, id, dx) {
+	const from = columns.findIndex((column) => column.id === id);
+	if (from < 0 || !Number.isFinite(dx)) return id;
+	let distance = columns[from].getSize() / 2;
+	let target = id;
+	const direction = dx < 0 ? -1 : 1;
+	for (let i = from + direction; i >= 0 && i < columns.length; i += direction) {
+		distance += columns[i].getSize() / 2;
+		if (Math.abs(dx) < distance) break;
+		target = columns[i].id;
+		distance += columns[i].getSize() / 2;
+	}
+	return target;
+}
+/** Clamp interactive widths to the column's configured bounds. */
+function resizedWidth(column, width) {
+	return Math.max(column.columnDef.minSize ?? 20, Math.min(column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER, width));
+}
+//#endregion
+export { columnStyle, dragTarget, moveColumn, resizedWidth };

package/dist/web/index.js

@@ -0,0 +1,4 @@
+import { createTable, dataGridFeatures } from "./table.js";
+import { useTable } from "./useTable.tsrx.js";
+import { DataGrid } from "./DataGrid.tsrx.js";
+export { DataGrid, createTable, dataGridFeatures, useTable };

package/dist/web/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "68b032a6-82e9-429a-a3f0-e40fb7c4e27d",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/web/table.js

@@ -0,0 +1,56 @@
+import { aggregationFns, columnFacetingFeature, columnFilteringFeature, columnGroupingFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnVisibilityFeature, constructTable, createExpandedRowModel, createFacetedMinMaxValues, createFacetedRowModel, createFacetedUniqueValues, createFilteredRowModel, createGroupedRowModel, createPaginatedRowModel, createSortedRowModel, filterFns, globalFilteringFeature, rowAggregationFeature, rowExpandingFeature, rowPaginationFeature, rowPinningFeature, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures } from "@tanstack/table-core";
+import { storeReactivityBindings } from "@tanstack/table-core/store-reactivity-bindings";
+//#region src/table.ts
+/** DataGrid's default feature slots: every stock feature whose machinery is
+*  DOM-free — sorting, filtering, grouping, expanding, pagination, pinning,
+*  selection, column ordering/visibility/sizing, faceting, global filtering,
+*  aggregation — plus the row-model factories and builtin fn registries that
+*  v9 keeps as separate slots. Omitted: `columnResizingFeature` (its drag
+*  handler installs global event listeners — web-only; resize gesture UI
+*  belongs to platform leaves) and `cellSelectionFeature`/`cellSpanningFeature`
+*  (range-selection UX is web-spreadsheet-shaped, not a v1 xplat idiom). Pass
+*  `features` to add them where a platform leaf supports them. */
+var dataGridFeatures = tableFeatures({
+	columnFacetingFeature,
+	columnFilteringFeature,
+	columnGroupingFeature,
+	columnOrderingFeature,
+	columnPinningFeature,
+	columnSizingFeature,
+	columnVisibilityFeature,
+	globalFilteringFeature,
+	rowAggregationFeature,
+	rowExpandingFeature,
+	rowPaginationFeature,
+	rowPinningFeature,
+	rowSelectionFeature,
+	rowSortingFeature,
+	sortedRowModel: createSortedRowModel(),
+	filteredRowModel: createFilteredRowModel(),
+	groupedRowModel: createGroupedRowModel(),
+	expandedRowModel: createExpandedRowModel(),
+	paginatedRowModel: createPaginatedRowModel(),
+	facetedRowModel: createFacetedRowModel(),
+	facetedMinMaxValues: createFacetedMinMaxValues(),
+	facetedUniqueValues: createFacetedUniqueValues(),
+	sortFns,
+	filterFns,
+	aggregationFns
+});
+/** Construct a table instance bound to TanStack Store reactivity — the
+*  vanilla/non-framework binding (`table.optionsStore` subscribable, atoms
+*  from `@tanstack/store`, `queueMicrotask` scheduling — all DOM-free). Wrap
+*  with `useTable` inside a component; call directly for non-rendering
+*  consumers (tests, headless row models). */
+function createTable(options) {
+	return constructTable({
+		...options,
+		features: {
+			coreReactivityFeature: storeReactivityBindings(),
+			...dataGridFeatures,
+			...options.features
+		}
+	});
+}
+//#endregion
+export { createTable, dataGridFeatures };

package/dist/web/useTable.tsrx.js

@@ -0,0 +1,26 @@
+import { createTable } from "./table.js";
+import { hookSlots, useState, useSyncExternalStore } from "octane";
+import { memoPublish, memoSlot, memoTake1 } from "octane/internal/client";
+//#region src/useTable.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(3);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+function useTable(options) {
+	let __hks, __hkd0, __hke;
+	const [{ table }] = useState(() => ({ table: createTable(options) }), _h$0);
+	table.setOptions((prev) => ({
+		...prev,
+		...options
+	}));
+	const subscribe = (__hkd0 = table, __hks = memoSlot(_h$1, "useCallback"), __hke = memoTake1(__hks, __hkd0), __hke === null ? memoPublish(__hks, (notify) => {
+		const sub = table.store.subscribe(() => notify());
+		return () => sub.unsubscribe();
+	}, __hkd0) : __hke.value);
+	return {
+		table,
+		state: useSyncExternalStore(subscribe, () => table.store.get(), _h$2)
+	};
+}
+//#endregion
+export { useTable };

package/package.json

@@ -1,11 +1,83 @@
 {
   "name": "@octane-xplat/table",
-  "version": "0.0.1",
-  "description": "Placeholder stub for @octane-xplat/table — no supported API yet.",
+  "version": "0.10.0",
+  "description": "Headless data grid for Octane xplat — @tanstack/table-core row model (sorting, filtering, pagination, selection, grouping) rendered through shared VirtualList on web, iOS, Android, and macOS",
+  "keywords": [
+    "android",
+    "cross-platform",
+    "data-grid",
+    "datagrid",
+    "ios",
+    "nativescript",
+    "octane",
+    "table",
+    "tanstack",
+    "web",
+    "xplat"
+  ],
+  "homepage": "https://github.com/octane-xplat/octane-xplat/tree/main/packages/table",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/octane-xplat/octane-xplat",
     "directory": "packages/table"
+  },
+  "files": [
+    "dist",
+    "types",
+    "src"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "macos": {
+        "types": "./types/index.macos.d.ts",
+        "default": "./src/index.macos.ts"
+      },
+      "types": "./types/index.d.ts",
+      "web": "./dist/web/index.js",
+      "native": "./dist/native/index.js",
+      "default": "./dist/native/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tanstack/table-core": "9.2.4"
+  },
+  "devDependencies": {
+    "@nativescript-community/octane": "0.2.4",
+    "@nativescript/core": "9.1.2",
+    "@octane-xplat/ui": "0.10.0",
+    "@octanejs/vite-plugin": "0.1.61",
+    "octane": "0.6.3",
+    "tsrx-typegen": "0.2.2",
+    "typescript": "5.9.3",
+    "vite": "8.3.0",
+    "vitest": "5.0.1"
+  },
+  "peerDependencies": {
+    "@nativescript-community/octane": ">=0.2.1 <1",
+    "@nativescript/core": ">=9.1.0 <10",
+    "@octane-xplat/ui": ">=0.6.0 <1",
+    "octane": ">=0.6.3 <1"
+  },
+  "peerDependenciesMeta": {
+    "@nativescript-community/octane": {
+      "optional": true
+    },
+    "@nativescript/core": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "vite build && vite build --mode native && pnpm typegen && node ../../scripts/check-native-dist.mjs",
+    "test": "vitest run",
+    "test:native": "vitest run --config vitest.native.config.mts",
+    "typegen": "tsc -p tsconfig.types.json",
+    "test:packed": "node tests/packed-consumer.mjs",
+    "pack:check": "tsrx-typegen --pack-check",
+    "typecheck": "tsrx-tsc --noEmit -p tsconfig.web.json && tsrx-tsc --noEmit -p tsconfig.native.json"
   }
-}
+}