@octane-xplat/table 0.0.1 → 0.10.0

package/src/ColumnDrag.tsrx

@@ -0,0 +1,123 @@
+import { useRef } from 'octane'
+import { Pressable, HStack as Row, Text, View } from '@octane-xplat/ui'
+import { dragTarget, moveColumn, resizedWidth } from './grid-layout'
+
+/** Pan handlers use shared gesture payloads; no browser resize listeners. */
+export function ColumnDrag(props: {
+	table: any
+	column: any
+	resize?: boolean
+	reorder?: boolean
+	direction?: 'ltr' | 'rtl'
+	id?: string
+	state: any
+}) {
+	void props.state
+	const drag = useRef<{
+		size: number
+		sizing: Record<string, number>
+		order: string[]
+		columns: any[]
+	} | null>(null)
+
+	const begin = () => {
+		drag.current = {
+			size: props.column.getSize(),
+			sizing: { ...props.table.store.get().columnSizing },
+			order: props.table.getAllLeafColumns().map((column: any) => column.id),
+			columns: props.table.getVisibleLeafColumns().map((column: any) => {
+				const size = column.getSize()
+				return { id: column.id, getSize: () => size }
+			}),
+		}
+	}
+
+	const onPan = (event: any, resize: boolean) => {
+		if (event.state === 'began') {
+			begin()
+			return
+		}
+
+		const start = drag.current
+		if (!start) return
+		if (event.state === 'cancelled') {
+			if (resize)
+				props.table.setColumnSizing((old: Record<string, number>) => {
+					const next = { ...old }
+					if (start.sizing[props.column.id] == null) delete next[props.column.id]
+					else next[props.column.id] = start.sizing[props.column.id]
+
+					return next
+				})
+
+			drag.current = null
+			return
+		}
+
+		const dx = event.dx * (props.direction === 'rtl' ? -1 : 1)
+		if (resize && Number.isFinite(dx)) {
+			props.table.setColumnSizing((old: any) => ({
+				...old,
+				[props.column.id]: resizedWidth(props.column, start.size + dx),
+			}))
+		}
+
+		if (event.state === 'ended') {
+			if (!resize) {
+				const target = dragTarget(start.columns, props.column.id, dx)
+				props.table.setColumnOrder(moveColumn(start.order, props.column.id, target))
+			}
+
+			drag.current = null
+		}
+	}
+
+	const adjust = (delta: number) =>
+		props.table.setColumnSizing((old: any) => ({
+			...old,
+			[props.column.id]: resizedWidth(props.column, props.column.getSize() + delta),
+		}))
+
+	return (
+		<Row className="vx-datagrid-handles">
+			{props.reorder ? (
+				<View
+					id={props.id ? `${props.id}-drag` : undefined}
+					className="vx-datagrid-handle"
+					onPan={(event) => onPan(event, false)}
+					accessibilityLabel={`Drag ${props.column.id} to reorder`}
+				>
+					<Text>↔</Text>
+				</View>
+			) : null}
+			{props.resize ? (
+				<>
+					<Pressable
+						id={props.id ? `${props.id}-narrow` : undefined}
+						className="vx-datagrid-handle"
+						onPress={() => adjust(-10)}
+						accessibilityLabel={`Narrow ${props.column.id}`}
+					>
+						<Text>−</Text>
+					</Pressable>
+					<View
+						id={props.id ? `${props.id}-resize` : undefined}
+						className="vx-datagrid-handle"
+						onPan={(event) => onPan(event, true)}
+						accessibilityLabel={`Drag to resize ${props.column.id}`}
+					>
+						<Text>│</Text>
+					</View>
+					<Pressable
+						id={props.id ? `${props.id}-widen` : undefined}
+						className="vx-datagrid-handle"
+						onPress={() => adjust(10)}
+						accessibilityLabel={`Widen ${props.column.id}`}
+					>
+						<Text>+</Text>
+					</Pressable>
+				</>
+			) : null}
+		</Row>
+	)
+}

package/src/DataGrid.mobile.test.tsrx

@@ -0,0 +1,55 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { describe, expect, it, vi } from 'vitest'
+import { createObjectContainer, createObjectDriver, createUniversalRoot, flushUniversalSync } from 'octane/universal/native'
+import { useState } from 'octane'
+
+vi.mock('@nativescript/core', () => ({ isIOS: false, isAndroid: true, Application: {} }))
+vi.mock('../../ui/src/pan.tsrx', () => ({ usePan: () => undefined }))
+vi.mock('@octane-xplat/ui', () => import('../tests/native-controls.mobile.tsrx'))
+import { DataGrid } from './DataGrid.tsrx'
+
+const data = [{ id: 'a', name: 'Alice' }, { id: 'b', name: 'Bob' }, { id: 'c', name: 'Charlie' }]
+const columns = [{ accessorKey: 'name', header: 'Name' }]
+
+function find(nodes: any[], id: string): any {
+	for (const node of nodes) {
+		if (node.props?.id === id) return node
+		const child = find(node.children ?? [], id)
+		if (child) return child
+	}
+}
+
+function Controlled() {
+	const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({})
+	return <DataGrid id="grid" data={data} columns={columns} getRowId={(row) => row.id}
+		getRowLabel={(row) => row.original.name} showRowSelection showPagination
+		state={{ rowSelection }} options={{ onRowSelectionChange: setRowSelection }}
+		initialState={{ pagination: { pageIndex: 0, pageSize: 2 } }} />
+}
+
+describe('native DataGrid selection integration', () => {
+	it('updates retained controls for caller state, mixed selection and off-page ordinals', () => {
+		const container = createObjectContainer('nativescript')
+		const root = createUniversalRoot(container, createObjectDriver('nativescript'))
+		root.render(Controlled as any, {})
+		const get = (id: string) => find(container.children, id)
+		const press = (id: string) => flushUniversalSync(() => container.dispatchEvent(get(id), 'tap', {}))
+		const page = get('grid-select-page')
+		expect(get('grid-select-a').props.accessibilityLabel).toBe('Select Alice')
+		expect(get('grid-select-a').props.accessibilityHint).toBe('Row 1 of 3')
+		press('grid-select-a')
+		expect(get('grid-select-page')).toBe(page)
+		expect(page.props.accessibilityValue).toBe('Partially selected')
+		expect(page.props.accessibilityState).toBeUndefined()
+		press('grid-select-page')
+		expect(page.props.accessibilityValue).toBeUndefined()
+		expect(page.props.accessibilityState).toBe('checked')
+		press('grid-next')
+		expect(get('grid-select-c').props.accessibilityHint).toBe('Row 3 of 3')
+		expect(page.props.accessibilityState).toBe('unchecked')
+		press('grid-clear-selection')
+		press('grid-previous')
+		expect(get('grid-select-a').props.accessibilityState).toBe('unchecked')
+		root.unmount()
+	})
+})

package/src/DataGrid.tsrx

@@ -0,0 +1,350 @@
+import type { Cell, Header, Row, RowData } from '@tanstack/table-core'
+import {
+	CheckboxInput as Checkbox,
+	Pressable,
+	HStack as GridRow,
+	Text,
+	TextInput,
+	View,
+	VirtualList,
+} from '@octane-xplat/ui'
+
+import { useTable } from './useTable.tsrx'
+import type { DataGridProps, UseTable } from './props'
+import type { DataGridFeatures } from './table'
+import { columnStyle } from './grid-layout'
+import { gridRowPosition } from './grid-accessibility'
+import { ColumnDrag } from './ColumnDrag.tsrx'
+import { GridControls, GridPagination } from './GridControls.tsrx'
+
+/** Evaluates a column `cell`/`header` template (string | fn → node) — the
+ *  DOM-free half of table-core's `flexRender`. */
+function renderTemplate(template: any, ctx: any) {
+	if (template == null) return null
+	return typeof template === 'function' ? template(ctx) : template
+}
+
+/** Primitive template results draw as Text; nodes pass through. */
+function TemplateContent(props: { content: any }) {
+	const content = props.content
+	if (content == null || content === false) return null
+	if (typeof content === 'string' || typeof content === 'number' || typeof content === 'bigint') {
+		return <Text>{String(content)}</Text>
+	}
+
+	return content
+}
+
+function sortIndicator(column: any) {
+	const dir = column.getIsSorted?.()
+	return dir === 'asc' ? ' ↑' : dir === 'desc' ? ' ↓' : ''
+}
+
+function DataGridHeaderCell<TData extends RowData>(props: {
+	header: Header<DataGridFeatures, TData, any>
+	render?: DataGridProps<TData>['renderHeader']
+	id?: string
+	/** Flat TableState — prop identity forces re-eval of derived reads
+	 *  (`getIsSorted`) on native, where unchanged-prop children are retained. */
+	state: any
+	table: any
+	filters?: boolean
+	resize?: boolean
+	reorder?: boolean
+	direction?: 'ltr' | 'rtl'
+}) {
+	const { header } = props
+	void props.state
+	const column = header.column as any
+	const canSort = !header.isPlaceholder && column.getCanSort?.() === true
+	const content = props.render
+		? props.render(header)
+		: (renderTemplate(column.columnDef.header, header.getContext()) ?? column.id)
+
+	const isPrimitive =
+		typeof content === 'string' || typeof content === 'number' || typeof content === 'bigint'
+
+	// Native Labels can't host span/element children — primitives join the
+	// indicator text inside one Text; nodes become siblings of it.
+	const inner = isPrimitive ? (
+		<Text>
+			{String(content)}
+			{canSort ? sortIndicator(column) : ''}
+		</Text>
+	) : (
+		<>
+			<TemplateContent content={content} />
+			{canSort ? <Text>{sortIndicator(column)}</Text> : null}
+		</>
+	)
+
+	const cls = 'vx-table-cell vx-table-th'
+	return (
+		<View
+			className={cls}
+			web={{ role: 'columnheader' }}
+			style={columnStyle(column, Boolean(props.resize || props.reorder), props.state.columnSizing)}
+		>
+			{canSort ? (
+				<Pressable
+					id={props.id}
+					className="vx-table-th--sortable"
+					onPress={() => column.toggleSorting()}
+					accessibilityLabel={`Sort ${column.id}, ${column.getIsSorted() || 'unsorted'}`}
+				>
+					<>{inner}</>
+				</Pressable>
+			) : (
+				<View id={props.id}>{inner}</View>
+			)}
+			{!header.isPlaceholder && props.filters && column.getCanFilter() ? (
+				<TextInput
+					id={props.id ? `${props.id}-filter` : undefined}
+					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) ? (
+				<ColumnDrag
+					id={props.id}
+					table={props.table}
+					column={column}
+					resize={props.resize}
+					reorder={props.reorder}
+					direction={props.direction}
+					state={props.state}
+				/>
+			) : null}
+		</View>
+	)
+}
+
+function DataGridBodyRow<TData extends RowData>(props: {
+	row: Row<DataGridFeatures, TData>
+	renderCell?: DataGridProps<TData>['renderCell']
+	onRowPress?: DataGridProps<TData>['onRowPress']
+	idPrefix?: string
+	/** See DataGridHeaderCell.state — forces re-eval of `getIsSelected`. */
+	state: any
+	position: { ariaIndex: number; label: string }
+	selection?: boolean
+	fixed?: boolean
+	getRowLabel?: (row: any) => string
+}) {
+	const { row } = props
+	void props.state
+	const cells = row.getVisibleCells()
+	const inner = (
+		<>
+			{cells.map((cell: Cell<DataGridFeatures, TData, any>) => (
+				<View
+					key={cell.id}
+					className="vx-table-cell"
+					web={{ role: 'cell' }}
+					style={columnStyle(cell.column, Boolean(props.fixed), props.state.columnSizing)}
+				>
+					<TemplateContent
+						content={
+							props.renderCell
+								? props.renderCell(cell)
+								: (renderTemplate(cell.column.columnDef.cell, cell.getContext()) ??
+									cell.renderValue?.())
+						}
+					/>
+				</View>
+			))}
+		</>
+	)
+
+	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}` : undefined
+	const content = props.onRowPress ? (
+		<Pressable
+			id={props.selection ? undefined : id}
+			className="vx-datagrid-row-action"
+			onPress={() => props.onRowPress!(row)}
+			accessibilityLabel={props.getRowLabel?.(row) ?? row.id}
+			accessibilityHint={props.position.label}
+			accessibilityState={{ selected: row.getIsSelected?.() || undefined }}
+		>
+			{inner}
+		</Pressable>
+	) : (
+		inner
+	)
+
+	return (
+		<GridRow
+			id={props.selection || !props.onRowPress ? id : undefined}
+			className={cls}
+			web={{ role: 'row', 'aria-rowindex': props.position.ariaIndex }}
+			accessibilityHint={props.position.label}
+			accessibilityState={{ selected: row.getIsSelected?.() || undefined }}
+		>
+			{props.selection ? (
+				<View className="vx-datagrid-selection" web={{ role: 'cell' }}>
+					<Checkbox
+						id={props.idPrefix ? `${props.idPrefix}-select-${row.id}` : undefined}
+						checked={row.getIsSelected()}
+						isDisabled={!row.getCanSelect()}
+						accessibilityLabel={`Select ${props.getRowLabel?.(row) ?? row.id}`}
+						accessibilityHint={props.position.label}
+						onCheckedChange={(checked) => row.toggleSelected(checked)}
+					/>
+				</View>
+			) : null}
+			{content}
+		</GridRow>
+	)
+}
+
+/** DataGrid — headless `@tanstack/table-core` row model (sorting, filtering,
+ *  pagination, selection, grouping, expanding) over shared `VirtualList`
+ *  windowing. One structure on every target; the columns/state contract is
+ *  the library's `ColumnDef`s plus `TableState` slices. Large-column or
+ *  platform-recycler presentations belong to platform subpaths. */
+export function DataGrid<TData extends RowData = any>(props: DataGridProps<TData>) {
+	const { table, state }: UseTable<DataGridFeatures, TData> = useTable<TData, DataGridFeatures>({
+		...props.options,
+		defaultColumn: props.showColumnFilters
+			? { filterFn: 'includesString', ...props.options?.defaultColumn }
+			: props.options?.defaultColumn,
+		data: props.data,
+		columns: props.columns as any,
+		features: props.features as any,
+		initialState: props.initialState as any,
+		state: props.state as any,
+		getRowId: props.getRowId,
+	})
+
+	const headerGroups = table.getHeaderGroups()
+	const rows = table.getRowModel().rows
+	// getRowCount uses the filtered pre-pagination model for client data.
+	// An unknown manual total must not masquerade as the loaded page length.
+	const rowCount = props.options?.manualPagination && props.options.rowCount == null
+		? -1
+		: table.getRowCount()
+
+	const ariaRowCount = rowCount < 0 ? -1 : headerGroups.length + rowCount
+	return (
+		<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 as any}
+			accessibilityLabel={props.accessibilityLabel}
+		>
+			{props.showGlobalFilter || props.showColumnSettings ? (
+				<GridControls
+					id={props.id}
+					table={table}
+					state={state}
+					search={props.showGlobalFilter}
+					settings={props.showColumnSettings}
+				/>
+			) : null}
+			{props.showRowSelection ? (
+				<GridRow className="vx-datagrid-controls">
+					<Text id={props.id ? `${props.id}-selected-count` : undefined}>
+						{Object.values(state.rowSelection).filter(Boolean).length} selected
+					</Text>
+					<Pressable
+						id={props.id ? `${props.id}-clear-selection` : undefined}
+						className="vx-datagrid-action"
+						onPress={() => table.resetRowSelection(true)}
+						accessibilityLabel="Clear selection"
+					>
+						<Text>Clear selection</Text>
+					</Pressable>
+					{props.renderSelectionActions?.(table)}
+				</GridRow>
+			) : null}
+			<View
+				id={props.id ? `${props.id}-table` : undefined}
+				flexGrow={1}
+				web={{ role: 'table', 'aria-label': props.accessibilityLabel, 'aria-rowcount': ariaRowCount, 'aria-colcount': table.getVisibleLeafColumns().length + (props.showRowSelection ? 1 : 0) }}
+			>
+				<View id={props.id ? `${props.id}-header` : undefined} flexShrink={0}>
+					{headerGroups.map((group) => (
+						<GridRow key={group.id} className="vx-table-head" web={{ role: 'row', 'aria-rowindex': group.depth + 1 }}>
+							{props.showRowSelection ? (
+								<View className="vx-datagrid-selection" web={{ role: 'columnheader' }}>
+									{group.depth === 0 ? (
+										<Checkbox
+											id={props.id ? `${props.id}-select-page` : undefined}
+											checked={table.getIsAllPageRowsSelected()}
+											indeterminate={!table.getIsAllPageRowsSelected() && table.getIsSomePageRowsSelected()}
+											isDisabled={!rows.some((row) => row.getCanSelect())}
+											accessibilityLabel="Select current page"
+											onCheckedChange={(checked) => table.toggleAllPageRowsSelected(checked)}
+										/>
+									) : null}
+								</View>
+							) : null}
+							{group.headers.map((header: Header<DataGridFeatures, TData, any>) => (
+								<DataGridHeaderCell
+									key={header.id}
+									header={header}
+									render={props.renderHeader}
+									id={props.id ? `${props.id}-th-${header.column.id}` : undefined}
+									state={state}
+									table={table}
+									filters={props.showColumnFilters}
+									resize={props.resizableColumns}
+									reorder={props.reorderableColumns}
+									direction={props.direction}
+								/>
+							))}
+						</GridRow>
+					))}
+				</View>
+				<VirtualList
+					flexGrow={1}
+					className="vx-datagrid-body"
+					id={props.id ? `${props.id}-body` : undefined}
+					items={rows}
+					keyExtractor={(row: Row<DataGridFeatures, TData>) => row.id}
+					renderItem={(row: Row<DataGridFeatures, TData>, index: number) => (
+						<DataGridBodyRow
+							row={row}
+							position={gridRowPosition(index, state.pagination, headerGroups.length, rowCount)}
+							renderCell={props.renderCell}
+							onRowPress={props.onRowPress}
+							idPrefix={props.id}
+							state={state}
+							selection={props.showRowSelection}
+							getRowLabel={props.getRowLabel}
+							fixed={Boolean(props.resizableColumns || props.reorderableColumns)}
+						/>
+					)}
+					renderEmpty={props.renderEmpty}
+				/>
+			</View>
+			{props.showPagination ? (
+				<GridPagination id={props.id} table={table} state={state} sizes={props.pageSizeOptions} />
+			) : null}
+		</View>
+	)
+}