@octane-xplat/table 0.0.1 → 0.11.0

package/src/DataGrid.web.test.tsrx

@@ -0,0 +1,277 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act, createRoot, useState } from 'octane'
+import { DataGrid } from './DataGrid.tsrx'
+
+// Windowing has its own integration suite; keep these control regressions
+// independent of jsdom's absent layout and ResizeObserver implementation.
+vi.mock('@octane-xplat/ui', async (original) => {
+	const ui = await original<any>()
+	return {
+		...ui,
+		VirtualList: (props: any) => (
+			<ui.View>
+				{props.items.length
+					? props.items.map((item: any, index: number) => (
+							<ui.View key={props.keyExtractor(item, index)}>
+								{props.renderItem(item, index)}
+							</ui.View>
+						))
+					: props.renderEmpty?.()}
+			</ui.View>
+		),
+	}
+})
+
+vi.stubGlobal('matchMedia', () => ({
+	matches: false,
+	addEventListener() {},
+	removeEventListener() {},
+}))
+
+const roots: any[] = []
+const data = [
+	{ id: 'a', name: 'Alice', count: 1 },
+	{ id: 'b', name: 'Bob', count: 2 },
+	{ id: 'c', name: 'Charlie', count: 3 },
+]
+
+const columns = [
+	{
+		accessorKey: 'name',
+		header: 'Name',
+		size: 140,
+		minSize: 100,
+		maxSize: 180,
+		enableHiding: false,
+	},
+	{ accessorKey: 'count', header: 'Count', size: 100 },
+]
+
+function mount(extra: any = {}) {
+	const el = document.createElement('div')
+	document.body.append(el)
+	const root = createRoot(el)
+	roots.push(root)
+	act(() =>
+		root.render(
+			<DataGrid id="grid" data={data} columns={columns} getRowId={(row) => row.id} {...extra} />,
+		),
+	)
+
+	return el
+}
+
+const click = (id: string) =>
+	act(() => document.getElementById(id)!.dispatchEvent(new MouseEvent('click', { bubbles: true })))
+
+const input = (id: string, text: string) =>
+	act(() => {
+		const el = document.getElementById(id) as HTMLInputElement
+		el.value = text
+		el.dispatchEvent(new Event('input', { bubbles: true }))
+	})
+
+const pan = (id: string, type: string, x: number) =>
+	act(() => {
+		const event = new Event(type, { bubbles: true })
+		Object.assign(event, { clientX: x, clientY: 0, pointerId: 1 })
+		document.getElementById(id)!.dispatchEvent(event)
+	})
+
+const names = () => [...document.querySelectorAll('[id^="grid-row-"]')].map((el) => el.textContent)
+
+afterEach(() => {
+	for (const root of roots.splice(0)) act(() => root.unmount())
+	document.body.innerHTML = ''
+})
+
+describe('DataGrid controls', () => {
+	it('filters and resets to the first page, pages results and changes page size', () => {
+		mount({
+			showGlobalFilter: true,
+			showColumnFilters: true,
+			showPagination: true,
+			initialState: { pagination: { pageIndex: 1, pageSize: 1 } },
+		})
+
+		expect(names()).toEqual(['Bob2'])
+		input('grid-search', 'ali')
+		expect(names()).toEqual(['Alice1'])
+		expect(document.getElementById('grid-page')!.textContent).toBe('Page 1 of 1')
+		input('grid-search', '')
+		click('grid-next')
+		expect(names()).toEqual(['Bob2'])
+		input('grid-th-name-filter', 'char')
+		expect(names()).toEqual(['Charlie3'])
+		input('grid-th-name-filter', '')
+		click('grid-size-10')
+		expect(names()).toHaveLength(3)
+		input('grid-th-count-filter', '2')
+		expect(names()).toEqual(['Bob2'])
+	})
+
+	it('selects only selectable page rows, preserves off-page IDs, and does not activate a row', () => {
+		const press = vi.fn()
+		mount({
+			showRowSelection: true,
+			showPagination: true,
+			onRowPress: press,
+			options: { enableRowSelection: (row: any) => row.id !== 'b' },
+			initialState: { pagination: { pageIndex: 0, pageSize: 2 } },
+		})
+
+		click('grid-select-a')
+		expect(document.getElementById('grid-select-page')!.getAttribute('aria-checked')).toBe('true')
+		expect(press).not.toHaveBeenCalled()
+		expect(document.getElementById('grid-select-b')!.getAttribute('aria-disabled')).toBe('true')
+		click('grid-next')
+		click('grid-select-page')
+		expect(document.getElementById('grid-selected-count')!.textContent).toBe('2 selected')
+		click('grid-clear-selection')
+		expect(document.getElementById('grid-selected-count')!.textContent).toBe('0 selected')
+	})
+
+	it('protects non-hideable columns, moves columns and resets settings', () => {
+		mount({ showColumnSettings: true })
+		click('grid-settings')
+		expect(document.getElementById('grid-visible-name')!.getAttribute('aria-disabled')).toBe('true')
+		click('grid-visible-count')
+		expect(document.getElementById('grid-th-count')).toBeNull()
+		click('grid-visible-count')
+		click('grid-earlier-count')
+		expect(names()[0]).toBe('1Alice')
+		click('grid-reset-columns')
+		expect(names()[0]).toBe('Alice1')
+	})
+
+	it('resizes within bounds with matching row widths and rolls back cancelled pans', () => {
+		mount({ resizableColumns: true })
+		const width = () =>
+			(document.getElementById('grid-th-name')!.parentElement as HTMLElement).style.width
+
+		click('grid-th-name-widen')
+		expect(width()).toBe('150px')
+		expect((document.querySelector('#grid-row-a .vx-table-cell') as HTMLElement).style.width).toBe(
+			'150px',
+		)
+
+		pan('grid-th-name-resize', 'pointerdown', 0)
+		pan('grid-th-name-resize', 'pointermove', 200)
+		expect(width()).toBe('180px')
+		pan('grid-th-name-resize', 'pointercancel', 200)
+		expect(width()).toBe('150px')
+	})
+
+	it('reorders on release and preserves order on cancellation', () => {
+		mount({ reorderableColumns: true })
+		pan('grid-th-name-drag', 'pointerdown', 0)
+		pan('grid-th-name-drag', 'pointermove', 200)
+		pan('grid-th-name-drag', 'pointercancel', 200)
+		expect(names()[0]).toBe('Alice1')
+		pan('grid-th-name-drag', 'pointerdown', 0)
+		pan('grid-th-name-drag', 'pointerup', 200)
+		expect(names()[0]).toBe('1Alice')
+	})
+
+	it('forwards controlled callbacks without changing the owner snapshot', () => {
+		const changed = vi.fn()
+		mount({ state: { sorting: [] }, options: { onSortingChange: changed } })
+		click('grid-th-name')
+		expect(changed).toHaveBeenCalledOnce()
+		expect(changed.mock.calls[0][0]([])).toEqual([{ id: 'name', desc: false }])
+		expect(names()[0]).toBe('Alice1')
+	})
+})
+
+
+describe('DataGrid selection and row accessibility', () => {
+	it('announces mixed page selection, supports Space, and disables an empty filtered page', () => {
+		mount({ showRowSelection: true, showGlobalFilter: true, getRowLabel: (row: any) => row.original.name })
+		const page = () => document.getElementById('grid-select-page')!
+		const alice = document.getElementById('grid-select-a')!
+		expect(alice.getAttribute('aria-label')).toBe('Select Alice')
+		expect(alice.getAttribute('aria-description')).toBe('Row 1 of 3')
+		act(() => alice.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true })))
+		expect(page().getAttribute('aria-checked')).toBe('mixed')
+		click('grid-select-page')
+		expect(page().getAttribute('aria-checked')).toBe('true')
+		click('grid-select-page')
+		expect(page().getAttribute('aria-checked')).toBe('false')
+		input('grid-search', 'missing')
+		expect(page().getAttribute('aria-disabled')).toBe('true')
+		click('grid-select-page')
+		expect(document.getElementById('grid-selected-count')!.textContent).toBe('0 selected')
+	})
+
+	it('uses sorted filtered ordinals with a page offset and excludes controls from the table', () => {
+		mount({ showRowSelection: true, showPagination: true, showGlobalFilter: true,
+			initialState: { pagination: { pageIndex: 1, pageSize: 1 }, sorting: [{ id: 'name', desc: true }] } })
+
+		const table = document.getElementById('grid-table')!
+		expect(table.getAttribute('role')).toBe('table')
+		expect(table.getAttribute('aria-rowcount')).toBe('4')
+		expect(table.getAttribute('aria-colcount')).toBe('3')
+		expect(document.getElementById('grid-row-b')!.getAttribute('aria-rowindex')).toBe('3')
+		expect(table.querySelectorAll('[role="columnheader"]')).toHaveLength(3)
+		expect(table.querySelectorAll('[role="cell"]')).toHaveLength(3)
+		expect(table.contains(document.getElementById('grid-clear-selection'))).toBe(false)
+		input('grid-search', 'ali')
+		expect(document.getElementById('grid-row-a')!.getAttribute('aria-rowindex')).toBe('2')
+		expect(table.getAttribute('aria-rowcount')).toBe('2')
+	})
+
+	it('preserves caller-owned IDs through filtering, paging and data replacement, then clears them', () => {
+		const changes = vi.fn()
+		const el = document.createElement('div')
+		document.body.append(el)
+		const root = createRoot(el)
+		roots.push(root)
+		function Owner() {
+			const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({ absent: true })
+			const [rows, setRows] = useState(data)
+			return <>
+				<button id="replace" onClick={() => setRows([...data].reverse())}>Replace</button>
+				<DataGrid id="grid" data={rows} columns={columns} getRowId={(row) => row.id}
+					showRowSelection showGlobalFilter showPagination
+					initialState={{ pagination: { pageIndex: 0, pageSize: 2 } }}
+					state={{ rowSelection }} options={{ enableRowSelection: (row) => row.id !== 'b',
+						onRowSelectionChange: (updater) => { changes(updater); setRowSelection(updater) } }} />
+			</>
+		}
+
+		act(() => root.render(<Owner />))
+		click('grid-select-page')
+		expect(document.getElementById('grid-selected-count')!.textContent).toBe('2 selected')
+		input('grid-search', 'char')
+		click('grid-select-page')
+		expect(document.getElementById('grid-selected-count')!.textContent).toBe('3 selected')
+		click('grid-select-page')
+		expect(document.getElementById('grid-selected-count')!.textContent).toBe('2 selected')
+		input('grid-search', '')
+		click('grid-next')
+		click('replace')
+		click('grid-previous')
+		expect(document.getElementById('grid-select-b')!.getAttribute('aria-checked')).toBe('false')
+		click('grid-clear-selection')
+		expect(document.getElementById('grid-selected-count')!.textContent).toBe('0 selected')
+		expect(changes).toHaveBeenCalledTimes(4)
+	})
+
+	it('keeps a controlled snapshot read-only until its owner publishes the updater', () => {
+		const changed = vi.fn()
+		mount({ showRowSelection: true, state: { rowSelection: {} }, options: { onRowSelectionChange: changed } })
+		click('grid-select-a')
+		expect(changed.mock.calls[0][0]({})).toEqual({ a: true })
+		expect(document.getElementById('grid-select-a')!.getAttribute('aria-checked')).toBe('false')
+	})
+
+	it.each([[-1, undefined], [101, 100]])('describes manual server pages with total %s', (expected, rowCount) => {
+		mount({ showRowSelection: true, state: { pagination: { pageIndex: 3, pageSize: 10 } },
+			options: { manualPagination: true, rowCount, pageCount: -1 } })
+
+		expect(document.getElementById('grid-table')!.getAttribute('aria-rowcount')).toBe(String(expected))
+		expect(document.getElementById('grid-row-a')!.getAttribute('aria-rowindex')).toBe('32')
+		expect(document.getElementById('grid-select-a')!.getAttribute('aria-description')).toBe(rowCount == null ? 'Row 31' : 'Row 31 of 100')
+	})
+})

package/src/GridControls.tsrx

@@ -0,0 +1,157 @@
+import { useState } from 'octane'
+import {
+	CheckboxInput as Checkbox,
+	Pressable,
+	HStack as Row,
+	Text,
+	TextInput,
+	View,
+} from '@octane-xplat/ui'
+
+import { moveColumn } from './grid-layout'
+
+function Action(props: { id?: string; label: string; disabled?: boolean; onPress: () => void }) {
+	return (
+		<Pressable
+			id={props.id}
+			className="vx-datagrid-action"
+			disabled={props.disabled}
+			onPress={props.onPress}
+			accessibilityLabel={props.label}
+		>
+			<Text>{props.label}</Text>
+		</Pressable>
+	)
+}
+
+/** Controls subscribe through their parent's state snapshot on native too. */
+export function GridControls(props: {
+	table: any
+	state: any
+	id?: string
+	settings?: boolean
+	search?: boolean
+}) {
+	const [settingsOpen, setSettingsOpen] = useState(false)
+	void props.state
+	const table = props.table
+	const columns = table.getAllLeafColumns()
+	const order = columns.map((column: any) => column.id)
+	const move = (id: string, index: number) =>
+		table.setColumnOrder(moveColumn(order, id, order[index]))
+
+	return (
+		<View>
+			<Row className="vx-datagrid-controls">
+				{props.search ? (
+					<TextInput
+						id={props.id ? `${props.id}-search` : undefined}
+						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 ? (
+					<Action
+						id={props.id ? `${props.id}-settings` : undefined}
+						label="Columns"
+						onPress={() => setSettingsOpen(!settingsOpen)}
+					/>
+				) : null}
+			</Row>
+			{props.settings && settingsOpen ? (
+				<View className="vx-datagrid-settings">
+					{columns.map((column: any, index: number) => (
+						<Row key={column.id} className="vx-datagrid-controls">
+							<Checkbox
+								id={props.id ? `${props.id}-visible-${column.id}` : undefined}
+								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)}
+							/>
+							<Action
+								id={props.id ? `${props.id}-earlier-${column.id}` : undefined}
+								label={`Move ${column.id} earlier`}
+								disabled={index === 0}
+								onPress={() => move(column.id, index - 1)}
+							/>
+							<Action
+								id={props.id ? `${props.id}-later-${column.id}` : undefined}
+								label={`Move ${column.id} later`}
+								disabled={index === columns.length - 1}
+								onPress={() => move(column.id, index + 1)}
+							/>
+						</Row>
+					))}
+					<Action
+						id={props.id ? `${props.id}-reset-columns` : undefined}
+						label="Reset columns"
+						onPress={() => {
+							table.resetColumnVisibility()
+							table.resetColumnOrder()
+							table.resetColumnSizing()
+						}}
+					/>
+				</View>
+			) : null}
+		</View>
+	)
+}
+
+export function GridPagination(props: {
+	table: any
+	state: any
+	id?: string
+	sizes?: readonly number[]
+}) {
+	void 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 (
+		<Row className="vx-datagrid-controls" accessibilityLabel="Pagination">
+			<Action
+				id={props.id ? `${props.id}-previous` : undefined}
+				label="Previous page"
+				disabled={!table.getCanPreviousPage()}
+				onPress={() => table.previousPage()}
+			/>
+			<Text id={props.id ? `${props.id}-page` : undefined}>
+				{count < 0
+					? `Page ${pageIndex + 1}`
+					: `Page ${count === 0 ? 0 : pageIndex + 1} of ${count}`}
+			</Text>
+			<Action
+				id={props.id ? `${props.id}-next` : undefined}
+				label="Next page"
+				disabled={!table.getCanNextPage()}
+				onPress={() => table.nextPage()}
+			/>
+			{sizes.map((size) => (
+				<Action
+					key={size}
+					id={props.id ? `${props.id}-size-${size}` : undefined}
+					label={`${size} per page`}
+					disabled={pageSize === size}
+					onPress={() => {
+						table.setPageSize(size)
+						table.setPageIndex(0)
+					}}
+				/>
+			))}
+		</Row>
+	)
+}

package/src/grid-accessibility.ts

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

package/src/grid-layout.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import { dragTarget, moveColumn, resizedWidth } from './grid-layout'
+
+describe('column gesture geometry', () => {
+	it('moves across variable-width midpoints in either direction', () => {
+		const columns = [
+			{ id: 'a', getSize: () => 100 },
+			{ id: 'b', getSize: () => 200 },
+			{ id: 'c', getSize: () => 80 },
+		]
+
+		expect(dragTarget(columns, 'a', 149)).toBe('a')
+		expect(dragTarget(columns, 'a', 150)).toBe('b')
+		expect(dragTarget(columns, 'a', 290)).toBe('c')
+		expect(dragTarget(columns, 'c', -140)).toBe('b')
+		expect(dragTarget(columns, 'c', -290)).toBe('a')
+		expect(dragTarget(columns, 'a', Number.NaN)).toBe('a')
+	})
+
+	it('keeps hidden IDs in the complete order and rejects missing targets', () => {
+		const order = ['a', 'hidden', 'b']
+		expect(moveColumn(order, 'a', 'b')).toEqual(['hidden', 'b', 'a'])
+		expect(order).toEqual(['a', 'hidden', 'b'])
+		expect(moveColumn(order, 'missing', 'b')).toBe(order)
+	})
+
+	it('clamps to both configured size bounds', () => {
+		const column = { columnDef: { minSize: 80, maxSize: 180 } }
+		expect(resizedWidth(column, 10)).toBe(80)
+		expect(resizedWidth(column, 500)).toBe(180)
+	})
+})

package/src/grid-layout.ts

@@ -0,0 +1,52 @@
+/** Resolve the displayed width without changing flexible legacy columns. */
+export function columnStyle(column: any, fixed: boolean, sizing: Record<string, number>) {
+	const explicit = fixed || column.columnDef.size != null || sizing[column.id] != null
+	return explicit
+		? { width: column.getSize(), flexGrow: 0, flexShrink: 0 }
+		: { flexGrow: 1, flexShrink: 1 }
+}
+
+/** Move a column within the complete order, preserving hidden columns. */
+export function moveColumn(order: string[], source: string, target: string) {
+	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. */
+export function dragTarget(columns: { id: string; getSize(): number }[], id: string, dx: number) {
+	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. */
+export function resizedWidth(column: any, width: number) {
+	return Math.max(
+		column.columnDef.minSize ?? 20,
+		Math.min(column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER, width),
+	)
+}

package/src/index.macos.ts

@@ -0,0 +1,8 @@
+export { DataGrid } from './DataGrid.tsrx'
+export { useTable } from './useTable.tsrx'
+export { createTable, dataGridFeatures } from './table'
+export type { DataGridOptions, DataGridProps, UseTable } from './props'
+
+export type { Cell, ColumnDef, Header, Row, Table, TableState } from '@tanstack/table-core'
+
+export type { DataGridFeatures } from './table'

package/src/index.ts

@@ -0,0 +1,7 @@
+export { DataGrid } from './DataGrid.tsrx'
+export { useTable } from './useTable.tsrx'
+export { createTable, dataGridFeatures } from './table'
+export type { DataGridFeatures } from './table'
+export type { DataGridOptions, DataGridProps, UseTable } from './props'
+
+export type { Cell, ColumnDef, Header, Row, Table, TableState } from '@tanstack/table-core'

package/src/index.web.ts

@@ -0,0 +1,8 @@
+export { DataGrid } from './DataGrid.tsrx'
+export { useTable } from './useTable.tsrx'
+export { createTable, dataGridFeatures } from './table'
+export type { DataGridOptions, DataGridProps, UseTable } from './props'
+
+export type { Cell, ColumnDef, Header, Row, Table, TableState } from '@tanstack/table-core'
+
+export type { DataGridFeatures } from './table'

package/src/props.ts

@@ -0,0 +1,122 @@
+import type {
+	Cell,
+	ColumnDef,
+	Header,
+	Row,
+	RowData,
+	Table,
+	TableFeatures,
+	TableOptions,
+	TableState,
+} from '@tanstack/table-core'
+
+import type { DataGridFeatures } from './table'
+
+export interface LayoutChildProps {
+	row?: number
+	col?: number
+	rowSpan?: number
+	colSpan?: number
+	dock?: 'left' | 'top' | 'right' | 'bottom'
+	left?: number
+	top?: number
+	flexGrow?: number
+	flexShrink?: number
+	alignSelf?: string
+	order?: number
+}
+
+export interface AccessibilityProps {
+	accessible?: boolean
+	accessibilityLabel?: string
+	accessibilityHint?: string
+	accessibilityRole?: string
+	accessibilityState?: Record<string, any>
+	testID?: string
+}
+
+/** Options shared by `createTable`/`useTable`/`DataGrid`. Extends the
+ *  table-core options for the enabled feature set minus its reactivity slot
+ *  (owned by the adapter). */
+export type DataGridOptions<TFeatures extends TableFeatures, TData extends RowData> = Omit<
+	TableOptions<TFeatures, TData>,
+	'features' | 'coreReactivityFeature'
+> & {
+	/** Feature slots beyond the defaults — pass `tableFeatures({...})`
+	 *  output or merge onto `dataGridFeatures`. */
+	features?: Partial<TableFeatures>
+}
+
+/** `useTable` return — the live table instance plus the flat reactive state.
+ *  `state` re-reads on every slice change; row models come from
+ *  `table.getRowModel()` (memoized per state/option revision). */
+export interface UseTable<TFeatures extends TableFeatures, TData extends RowData> {
+	table: Table<TFeatures, TData>
+	state: TableState<TFeatures>
+}
+
+export interface DataGridProps<
+	TData extends RowData = any,
+	TFeatures extends TableFeatures = DataGridFeatures,
+>
+	extends LayoutChildProps, AccessibilityProps {
+	id?: string
+	className?: any
+	style?: any
+	/** Row data — pass a new array reference when data changes. */
+	data: TData[]
+	columns: ColumnDef<TFeatures, TData, any>[]
+	/** Feature overrides merged onto the defaults (see `dataGridFeatures`). */
+	features?: Partial<TableFeatures>
+	/** Core options (atoms, change callbacks, manual row models, selection
+	 * predicates). Data/columns and the explicit props below take precedence. */
+	options?: Omit<
+		DataGridOptions<TFeatures, TData>,
+		'data' | 'columns' | 'features' | 'state' | 'initialState' | 'getRowId'
+	>
+	/** Partial controlled state. Pair with options.atoms or per-slice
+	 * options callbacks; a state snapshot alone is read-only. */
+	state?: Partial<TableState<TFeatures>>
+	initialState?: Partial<TableState<TFeatures>>
+	getRowId?: (row: TData, index: number) => string
+	/** Per-cell content override. Defaults to the column's `cell` template,
+	 *  then `cell.getValue()`. */
+	renderCell?: (cell: Cell<TFeatures, TData, any>) => any
+	/** Per-header content override. Defaults to the column's `header`
+	 *  template plus a sort affordance when the column can sort. */
+	renderHeader?: (header: Header<TFeatures, TData, any>) => any
+	/** Row tap — marks rows pressable. */
+	onRowPress?: (row: Row<TFeatures, TData>) => void
+	renderEmpty?: () => any
+	/** Show a text query across globally filterable columns. */
+	showGlobalFilter?: boolean
+	/** Show text filters beneath filterable leaf-column headings. */
+	showColumnFilters?: boolean
+	/** Show previous/next and page-size controls. Client-side by default;
+	 * use options.manualPagination with pageCount/rowCount for server data. */
+	showPagination?: boolean
+	/** Positive integer page sizes offered by the pager. Defaults to [10, 25, 50]. */
+	pageSizeOptions?: readonly number[]
+	/** Show row checkboxes and a current-page select-all checkbox. Selection
+	 * survives filtering/pagination by ID; provide getRowId for mutable data. */
+	showRowSelection?: boolean
+	/** Optional label for each selection checkbox. */
+	getRowLabel?: (row: Row<TFeatures, TData>) => string
+	/** Show a column visibility/order panel, reset to initial state, and
+	 * keyboard/touch move buttons. Non-hideable columns stay visible. */
+	showColumnSettings?: boolean
+	/** Fixed-width columns with pan resize handles and accessible +/- actions.
+	 * Widths use column minSize/maxSize; cancellation restores prior state. */
+	resizableColumns?: boolean
+	/** Separate pan handles reorder leaf columns on release. Cancel preserves
+	 * order; settings move buttons provide a non-drag alternative. */
+	reorderableColumns?: boolean
+	/** Horizontal gesture direction. Defaults to ltr; use rtl for mirrored layouts. */
+	direction?: 'ltr' | 'rtl'
+	/** Caller-owned bulk actions; selected IDs include off-page selections. */
+	renderSelectionActions?: (table: Table<TFeatures, TData>) => any
+	/** Platform escape bags — applied after shared props on the root view. */
+	ios?: Record<string, any>
+	android?: Record<string, any>
+	web?: Record<string, any>
+}