@stonecrop/atable 0.13.12 → 0.14.0

package/src/components/ARowActions.vue

@@ -26,7 +26,8 @@
 					type="button"
 					class="row-action-menu-item"
 					role="menuitem"
-					@click.stop="executeAction(action.type)">
+					:disabled="action.disabled"
+					@click.stop="executeAction(action.type, $event)">
 					<span class="action-icon" v-html="action.icon" />
 					<span class="action-label">{{ action.label }}</span>
 				</button>
@@ -42,7 +43,8 @@
 				class="row-action-btn"
 				:title="action.label"
 				:aria-label="action.label"
-				@click.stop="executeAction(action.type)">
+				:disabled="action.disabled"
+				@click.stop="executeAction(action.type, $event)">
 				<span class="action-icon" v-html="action.icon" />
 			</button>
 		</div>
@@ -65,7 +67,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-	action: [type: RowActionType, rowIndex: number]
+	action: [type: RowActionType, rowIndex: number, event?: MouseEvent]
 }>()
 
 const actionsCellRef = useTemplateRef<HTMLTableCellElement>('actionsCell')
@@ -77,20 +79,33 @@ const menuPosition = ref({ top: 0, left: 0 })
 
 // Default labels for actions
 const defaultLabels: Record<RowActionType, string> = {
-	add: 'Add Row',
-	delete: 'Delete Row',
-	duplicate: 'Duplicate Row',
+	add: 'Add Record',
+	delete: 'Delete Record',
+	duplicate: 'Duplicate Record',
 	insertAbove: 'Insert Above',
 	insertBelow: 'Insert Below',
-	move: 'Move Row',
+	move: 'Move Record',
+	moveUp: 'Move Up',
+	moveDown: 'Move Down',
+	open: 'Open Record',
 }
 
 // Determine which actions are enabled
 const enabledActions = computed(() => {
-	const actions: Array<{ type: RowActionType; label: string; icon: string }> = []
+	const actions: Array<{ type: RowActionType; label: string; icon: string; disabled: boolean }> = []
 	const configActions = props.config.actions || {}
 
-	const actionTypes: RowActionType[] = ['add', 'delete', 'duplicate', 'insertAbove', 'insertBelow', 'move']
+	const actionTypes: RowActionType[] = [
+		'open',
+		'moveUp',
+		'moveDown',
+		'duplicate',
+		'insertAbove',
+		'insertBelow',
+		'add',
+		'delete',
+		'move',
+	]
 
 	for (const type of actionTypes) {
 		const actionConfig = configActions[type]
@@ -104,15 +119,18 @@ const enabledActions = computed(() => {
 		let enabled = true
 		let label = defaultLabels[type]
 		let icon = actionIcons[type]
+		let disabled = false
 
 		if (typeof actionConfig === 'object') {
 			enabled = actionConfig.enabled !== false
 			label = actionConfig.label || label
 			icon = actionConfig.icon || icon
+			// Per-row predicate; reading store state here keeps this computed reactive to row changes.
+			if (actionConfig.disabled) disabled = actionConfig.disabled(props.rowIndex, props.store)
 		}
 
 		if (enabled) {
-			actions.push({ type, label, icon })
+			actions.push({ type, label, icon, disabled })
 		}
 	}
 
@@ -171,7 +189,9 @@ const checkDropdownPosition = () => {
 
 	const buttonRect = toggleButtonRef.value.getBoundingClientRect()
 	const viewportHeight = window.innerHeight
+	const viewportWidth = window.innerWidth
 	const estimatedMenuHeight = enabledActions.value.length * 40 + 16 // ~40px per item + padding
+	const estimatedMenuWidth = 160 // matches min-width: 10rem
 
 	// Check if menu would extend beyond viewport bottom
 	const spaceBelow = viewportHeight - buttonRect.bottom
@@ -180,17 +200,17 @@ const checkDropdownPosition = () => {
 	// Flip if not enough space below but enough space above
 	dropdownFlipped.value = spaceBelow < estimatedMenuHeight && spaceAbove > estimatedMenuHeight
 
+	// Horizontal: anchor the menu's left edge to the button, but right-align it to the button when
+	// it would overflow the viewport's right edge (e.g. an end-positioned actions column).
+	let left = buttonRect.left
+	if (left + estimatedMenuWidth > viewportWidth) {
+		left = Math.max(0, buttonRect.right - estimatedMenuWidth)
+	}
+
 	// Calculate fixed position
-	if (dropdownFlipped.value) {
-		menuPosition.value = {
-			top: buttonRect.top,
-			left: buttonRect.left,
-		}
-	} else {
-		menuPosition.value = {
-			top: buttonRect.bottom,
-			left: buttonRect.left,
-		}
+	menuPosition.value = {
+		top: dropdownFlipped.value ? buttonRect.top : buttonRect.bottom,
+		left,
 	}
 }
 
@@ -199,7 +219,7 @@ onClickOutside(actionsCellRef, () => {
 })
 
 // Execute an action
-const executeAction = (actionType: RowActionType) => {
+const executeAction = (actionType: RowActionType, event?: MouseEvent) => {
 	dropdownOpen.value = false
 
 	// Check for custom handler
@@ -213,13 +233,11 @@ const executeAction = (actionType: RowActionType) => {
 	}
 
 	// Emit the action event for parent to handle
-	emit('action', actionType, props.rowIndex)
+	emit('action', actionType, props.rowIndex, event)
 }
 </script>
 
 <style>
-@import url('@stonecrop/themes/default.css');
-
 .atable-row-actions {
 	width: 2rem;
 	min-width: 2rem;
@@ -358,6 +376,17 @@ const executeAction = (actionType: RowActionType) => {
 	background-color: var(--sc-gray-10, #f5f5f5);
 }
 
+.row-action-menu-item:disabled,
+.row-action-btn:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+
+.row-action-menu-item:disabled:hover,
+.row-action-btn:disabled:hover {
+	background-color: transparent;
+}
+
 .row-action-menu-item .action-icon {
 	display: flex;
 	align-items: center;

package/src/components/ATable.vue

@@ -19,7 +19,8 @@
 						:row="row"
 						:row-index="row.originalIndex"
 						:store="store"
-						@row:action="handleRowAction">
+						@row:action="handleRowAction"
+						@row:click="handleRowClick">
 						<template v-for="(column, colIndex) in getProcessedColumnsForRow(row)" :key="column.name">
 							<component
 								:is="column.ganttComponent || 'AGanttCell'"
@@ -101,6 +102,7 @@ import type {
 	GanttDragEvent,
 	RowActionType,
 	RowAddEvent,
+	RowClickEvent,
 	RowDeleteEvent,
 	RowDuplicateEvent,
 	RowInsertEvent,
@@ -134,11 +136,13 @@ const emit = defineEmits<{
 	'connection:event': [event: ConnectionEvent]
 	'columns:update': [columns: TableColumn[]]
 	'row:add': [event: RowAddEvent]
+	'row:click': [event: RowClickEvent]
 	'row:delete': [event: RowDeleteEvent]
 	'row:duplicate': [event: RowDuplicateEvent]
 	'row:insert-above': [event: RowInsertEvent]
 	'row:insert-below': [event: RowInsertEvent]
 	'row:move': [event: RowMoveEvent]
+	'row:open': [event: RowClickEvent]
 }>()
 
 const tableRef = useTemplateRef<HTMLTableElement>('table')
@@ -200,10 +204,13 @@ watch(
 watch(
 	columns,
 	newColumns => {
+		// The model is optional, so it can be absent — there is nothing to sync from, and the store
+		// keeps the columns it resolved from the schema.
+		if (!newColumns) return
 		// Only update if the columns have actually changed (avoid infinite loops)
 		if (JSON.stringify(newColumns) !== JSON.stringify(store.columns)) {
 			store.columns = [...newColumns]
-			emit('columns:update', [...newColumns] as TableColumn[])
+			emit('columns:update', [...newColumns])
 		}
 	},
 	{ deep: true }
@@ -308,11 +315,19 @@ const handleConnectionDelete = (connection: ConnectionPath) => {
 	emit('connection:event', { type: 'delete', connection })
 }
 
+/**
+ * Handle row click events from ARow components.
+ */
+const handleRowClick = (rowIndex: number, event: MouseEvent) => {
+	const row = store.rows[rowIndex]
+	emit('row:click', { row, rowIndex, event })
+}
+
 /**
  * Handle row action events from ARow components.
  * Performs the default action and emits the appropriate event.
  */
-const handleRowAction = (actionType: RowActionType, rowIndex: number) => {
+const handleRowAction = (actionType: RowActionType, rowIndex: number, event?: MouseEvent) => {
 	switch (actionType) {
 		case 'add': {
 			// Add a new row after the current row
@@ -359,6 +374,25 @@ const handleRowAction = (actionType: RowActionType, rowIndex: number) => {
 			emit('row:move', { fromIndex: rowIndex, toIndex: -1 })
 			break
 		}
+		case 'moveUp': {
+			if (rowIndex > 0 && store.moveRow(rowIndex, rowIndex - 1)) {
+				rows.value = [...store.rows]
+				emit('row:move', { fromIndex: rowIndex, toIndex: rowIndex - 1 })
+			}
+			break
+		}
+		case 'moveDown': {
+			if (rowIndex < store.rows.length - 1 && store.moveRow(rowIndex, rowIndex + 1)) {
+				rows.value = [...store.rows]
+				emit('row:move', { fromIndex: rowIndex, toIndex: rowIndex + 1 })
+			}
+			break
+		}
+		case 'open': {
+			const row = store.rows[rowIndex]
+			emit('row:open', { row, rowIndex, event })
+			break
+		}
 	}
 }
 
@@ -408,7 +442,6 @@ td.sticky-index {
 </style>
 
 <style scoped>
-@import url('@stonecrop/themes/default.css');
 .atable {
 	position: relative;
 	font-family: var(--sc-atable-font-family);

package/src/components/ATableColumnFilter.vue

@@ -66,9 +66,24 @@
 
 <script setup lang="ts">
 import { ref, reactive, computed } from 'vue'
+import { componentCategory, type ComponentCategory } from '@stonecrop/schema'
+
 import { createTableStore } from '../stores/table'
 import type { TableColumn } from '../types'
 
+// The filter widget is chosen by the component's semantic category.
+const CATEGORY_FILTER: Record<ComponentCategory, 'text' | 'select' | 'number' | 'date' | 'dateRange' | 'checkbox'> = {
+	text: 'text',
+	number: 'number',
+	boolean: 'checkbox',
+	date: 'date',
+	datetime: 'dateRange',
+	select: 'select',
+	code: 'text',
+	link: 'text',
+	attach: 'text',
+}
+
 const { column, colIndex, store } = defineProps<{
 	column: TableColumn
 	colIndex: number
@@ -83,24 +98,10 @@ const dateFilter = reactive({
 
 const resolvedFilterType = computed(() => {
 	if (column.filterType) return column.filterType
-	switch (column.fieldtype) {
-		case 'Check':
-			return 'checkbox'
-		case 'Date':
-			return 'date'
-		case 'Datetime':
-			return 'dateRange'
-		case 'Select':
-			return 'select'
-		case 'Int':
-		case 'Float':
-		case 'Currency':
-		case 'Decimal':
-		case 'Quantity':
-			return 'number'
-		default:
-			return 'text'
-	}
+	const category = componentCategory(column.component)
+	if (category) return CATEGORY_FILTER[category]
+	// An unknown (custom) component gets the widget that can filter anything.
+	return 'text'
 })
 
 const getSelectOptions = (col: TableColumn): any[] => {

package/src/components/ATableHeader.vue

@@ -98,8 +98,6 @@ const onResize = (entries: ReadonlyArray<ResizeObserverEntry>) => {
 </script>
 
 <style>
-@import url('@stonecrop/themes/default.css');
-
 .atable-header-row th {
 	padding-left: 0.5ch !important;
 	font-weight: 700;

package/src/components/ATableModal.vue

@@ -44,8 +44,6 @@ const amodalStyles = computed((): StyleValue => {
 </script>
 
 <style>
-@import url('@stonecrop/themes/default.css');
-
 .amodal {
 	position: absolute;
 	background-color: var(--sc-row-color-zebra-dark);

package/src/icons/index.ts

@@ -10,8 +10,15 @@ import DuplicateIcon from './stonecrop-ui-icon-duplicate.svg?raw'
 import InsertAboveIcon from './stonecrop-ui-icon-insert-above.svg?raw'
 import InsertBelowIcon from './stonecrop-ui-icon-insert-below.svg?raw'
 import MoveIcon from './stonecrop-ui-icon-move.svg?raw'
+import OpenIcon from './stonecrop-ui-icon-open.svg?raw'
 
-export { AddIcon, DeleteIcon, DuplicateIcon, InsertAboveIcon, InsertBelowIcon, MoveIcon }
+// Directional move icons are inline (no dedicated SVG asset): simple up/down chevrons.
+const MoveUpIcon =
+	'<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 13V3.5M4.5 7 8 3.5 11.5 7" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+const MoveDownIcon =
+	'<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 3v9.5M4.5 9 8 12.5 11.5 9" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+
+export { AddIcon, DeleteIcon, DuplicateIcon, InsertAboveIcon, InsertBelowIcon, MoveIcon, OpenIcon }
 
 /**
  * Map of action types to their default icons.
@@ -25,4 +32,7 @@ export const actionIcons: Record<string, string> = {
 	insertAbove: InsertAboveIcon,
 	insertBelow: InsertBelowIcon,
 	move: MoveIcon,
+	moveUp: MoveUpIcon,
+	moveDown: MoveDownIcon,
+	open: OpenIcon,
 }

package/src/icons/stonecrop-ui-icon-open.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <path d="M32,64C14.35,64,0,49.65,0,32S14.35,0,32,0s32,14.35,32,32-14.35,32-32,32ZM32,4c-15.44,0-28,12.56-28,28s12.56,28,28,28,28-12.56,28-28S47.44,4,32,4Z" style="fill: #000; stroke-width: 0px;"/>
+  <polygon points="18,20 18,44 46,32" style="fill: #000; stroke-width: 0px;"/>
+</svg>

package/src/index.ts

@@ -1,7 +1,6 @@
 import { App } from 'vue'
 
 import ACell from './components/ACell.vue'
-import AExpansionRow from './components/AExpansionRow.vue'
 import AGanttCell from './components/AGanttCell.vue'
 import ARow from './components/ARow.vue'
 import ARowActions from './components/ARowActions.vue'
@@ -16,7 +15,16 @@ export type * from './types'
 export { schemaToColumns } from './schemaToColumns'
 
 // Icon exports
-export { AddIcon, DeleteIcon, DuplicateIcon, InsertAboveIcon, InsertBelowIcon, MoveIcon, actionIcons } from './icons'
+export {
+	AddIcon,
+	DeleteIcon,
+	DuplicateIcon,
+	InsertAboveIcon,
+	InsertBelowIcon,
+	MoveIcon,
+	OpenIcon,
+	actionIcons,
+} from './icons'
 
 /**
  * Install all ATable components
@@ -25,7 +33,6 @@ export { AddIcon, DeleteIcon, DuplicateIcon, InsertAboveIcon, InsertBelowIcon, M
  */
 function install(app: App /* options */) {
 	app.component('ACell', ACell)
-	app.component('AExpansionRow', AExpansionRow)
 	app.component('AGanttCell', AGanttCell)
 	app.component('ARow', ARow)
 	app.component('ARowActions', ARowActions)
@@ -38,7 +45,6 @@ function install(app: App /* options */) {
 
 export {
 	ACell,
-	AExpansionRow,
 	AGanttCell,
 	ARow,
 	ARowActions,

package/src/schemaToColumns.ts

@@ -7,12 +7,12 @@ import type { TableColumn } from './types'
  *
  * Fields are excluded when:
  * - `hidden: true` — field should not be visible in any view
- * - no `fieldtype` — non-scalar entry (nested table or fieldset), has no column equivalent
+ * - no `component` — non-scalar entry (nested table or fieldset), no column equivalent
  *
  * `fieldname` is renamed to `name`; `hidden` is stripped. All other `ColumnSchema` properties
  * spread through automatically.
  *
- * For `fieldtype: 'Link'` fields without an explicit `cellComponent`:
+ * For link fields (those carrying `doctype`) without an explicit `cellComponent`:
  * - `linkDoctype` is set from the field's `doctype` property (used by ACell's async resolver).
  * - A synchronous `format` function is added (unless the field already has one) that handles
  *   both bare ID strings and pre-resolved `{ id, displayText }` objects.
@@ -21,16 +21,14 @@ import type { TableColumn } from './types'
  */
 export function schemaToColumns(schema: ColumnSchema[]): TableColumn[] {
 	return schema
-		.filter(f => !f.hidden && f.fieldtype)
+		.filter(f => !f.hidden && f.component)
 		.map(({ fieldname, hidden: _hidden, ...rest }) => {
 			const col: TableColumn = Object.assign({ name: fieldname }, rest)
 
-			// Link fields: store the linked doctype for async resolution by ACell,
-			// and add a sync format that handles pre-resolved AFormLinkValue objects.
-			if (rest.fieldtype === 'Link' && !rest.cellComponent) {
-				const fields = rest as Record<string, unknown>
-				const linkedDoctype = typeof fields.doctype === 'string' ? fields.doctype : undefined
-				if (linkedDoctype) col.linkDoctype = linkedDoctype
+			// Link fields: store the linked doctype for async resolution by ACell, and add a sync
+			// format that handles pre-resolved AFormLinkValue objects.
+			if (rest.doctype && !rest.cellComponent) {
+				col.linkDoctype = rest.doctype
 
 				if (!rest.format) {
 					col.format = (v: any): string => {

package/src/stores/table.ts

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { componentCategory } from '@stonecrop/schema'
 import { type CSSProperties, computed, ref } from 'vue'
 
 import type {
@@ -127,7 +128,12 @@ function applyFilter(cellValue: any, filter: FilterState, column: TableColumn):
 	}
 }
 
-function getIndent(colIndex: number, indentLevel?: number): string {
+/**
+ * Compute the CSS indentation for a tree-table cell. Pure helper (captures no store state);
+ * imported directly by cell components rather than exposed on the store's public return.
+ * @internal
+ */
+export function getIndent(colIndex: number, indentLevel?: number): string {
 	if (indentLevel && colIndex === 0 && indentLevel > 0) {
 		return `${indentLevel}ch`
 	} else {
@@ -509,16 +515,13 @@ export const createTableStore = (initData: {
 			const format = column.format
 
 			if (!format) {
-				switch (column.fieldtype) {
-					case 'Check':
-						return value ? '✓' : '✗'
-					case 'Date':
-						return value != null ? new Date(String(value)).toLocaleDateString() : value
-					case 'Datetime':
-						return value != null ? new Date(String(value)).toLocaleString() : value
-					default:
-						return value
-				}
+				// Default cell formatting comes from the component's category; anything without an
+				// opinion (including an unknown component) renders the raw value.
+				const category = componentCategory(column.component)
+				if (category === 'boolean') return value ? '✓' : '✗'
+				if (category === 'date') return value != null ? new Date(String(value)).toLocaleDateString() : value
+				if (category === 'datetime') return value != null ? new Date(String(value)).toLocaleString() : value
+				return value
 			}
 
 			if (typeof format === 'function') {
@@ -922,7 +925,6 @@ export const createTableStore = (initData: {
 			getFormattedValue,
 			getHandlesForBar,
 			getHeaderCellStyle,
-			getIndent,
 			getRowExpandSymbol,
 			insertRowAbove,
 			insertRowBelow,

package/src/types/index.ts

@@ -8,7 +8,7 @@ import { createTableStore } from '../stores/table'
 /**
  * Runtime column definition for ATable.
  *
- * Extends `ColumnSchema` from `@stonecrop/schema` — all authoring properties (`label`, `fieldtype`, `width`,
+ * Extends `ColumnSchema` from `@stonecrop/schema` — all authoring properties (`label`, `component`, `width`,
  * `pinned`, filter config, cell/modal component names, etc.) are inherited. The overrides
  * below widen three properties for runtime use (live functions, broader alignment values)
  * and add two runtime-only additions (`mask`, `originalIndex`).
@@ -45,7 +45,7 @@ export interface TableColumn extends Omit<ColumnSchema, 'fieldname' | 'hidden' |
 	mask?: (value: any) => any
 
 	/**
-	 * For `fieldtype: 'Link'` columns: the target doctype slug used by the `linkResolver`
+	 * For link columns (those carrying `doctype`): the target doctype slug used by the `linkResolver`
 	 * to look up display text for bare ID values. Set automatically by `schemaToColumns`
 	 * from the field's `doctype` property.
 	 */
@@ -83,7 +83,8 @@ export interface CellContext {
  * Row action type identifiers.
  * @public
  */
-export type RowActionType = 'add' | 'delete' | 'duplicate' | 'insertAbove' | 'insertBelow' | 'move'
+export type RowActionType =
+	'open' | 'add' | 'delete' | 'duplicate' | 'insertAbove' | 'insertBelow' | 'move' | 'moveUp' | 'moveDown'
 
 /**
  * Options for configuring individual row actions.
@@ -115,6 +116,16 @@ export interface RowActionOptions {
 	 * @returns void or false to prevent default behavior
 	 */
 	handler?: (rowIndex: number, store: ReturnType<typeof createTableStore>) => void | boolean
+
+	/**
+	 * Per-row predicate to disable this action for specific rows (e.g. a lock-aware delete, or
+	 * move-up on the first row). Returns true to render the action disabled. Evaluated reactively
+	 * against the store, so it updates as rows change.
+	 *
+	 * @param rowIndex - The index of the row
+	 * @param store - The table store instance
+	 */
+	disabled?: (rowIndex: number, store: ReturnType<typeof createTableStore>) => boolean
 }
 
 /**
@@ -156,12 +167,15 @@ export interface RowActionsConfig {
 	 * false to disable, or provide RowActionOptions for custom configuration.
 	 */
 	actions?: {
+		open?: boolean | RowActionOptions
 		add?: boolean | RowActionOptions
 		delete?: boolean | RowActionOptions
 		duplicate?: boolean | RowActionOptions
 		insertAbove?: boolean | RowActionOptions
 		insertBelow?: boolean | RowActionOptions
 		move?: boolean | RowActionOptions
+		moveUp?: boolean | RowActionOptions
+		moveDown?: boolean | RowActionOptions
 	}
 }
 
@@ -177,6 +191,14 @@ export interface BaseTableConfig {
 	 */
 	fullWidth?: boolean
 
+	/**
+	 * When true, rows show a pointer cursor and a hover highlight, signalling they are
+	 * clickable. Emits `row:click` on every row click.
+	 *
+	 * @defaultValue false
+	 */
+	clickable?: boolean
+
 	/**
 	 * Configuration for row-level actions (add, delete, duplicate, etc.).
 	 */
@@ -692,9 +714,9 @@ export type ConnectionEvent = {
  * @public
  */
 export interface RowAddEvent {
-	/** The index at which the row was added */
+	/** The index of the newly added row. */
 	rowIndex: number
-	/** The row object that was added */
+	/** The data for the newly added row. */
 	row: TableRow
 }
 
@@ -703,9 +725,9 @@ export interface RowAddEvent {
  * @public
  */
 export interface RowDeleteEvent {
-	/** The index of the row that was deleted */
+	/** The index of the deleted row (before deletion). */
 	rowIndex: number
-	/** The row object that was deleted */
+	/** The data of the deleted row. */
 	row: TableRow
 }
 
@@ -714,11 +736,11 @@ export interface RowDeleteEvent {
  * @public
  */
 export interface RowDuplicateEvent {
-	/** The index of the original row that was duplicated */
+	/** The index of the original row that was duplicated. */
 	sourceIndex: number
-	/** The index of the newly created duplicate row */
+	/** The index of the newly created duplicate row. */
 	newIndex: number
-	/** The new duplicate row object */
+	/** The data of the newly created duplicate row. */
 	row: TableRow
 }
 
@@ -727,11 +749,11 @@ export interface RowDuplicateEvent {
  * @public
  */
 export interface RowInsertEvent {
-	/** The index of the row relative to which the insertion was made */
+	/** The index of the reference row relative to which the new row was inserted. */
 	targetIndex: number
-	/** The index of the newly inserted row */
+	/** The index at which the new row was inserted. */
 	newIndex: number
-	/** The newly inserted row object */
+	/** The data of the newly inserted row. */
 	row: TableRow
 }
 
@@ -740,8 +762,25 @@ export interface RowInsertEvent {
  * @public
  */
 export interface RowMoveEvent {
-	/** The original index of the row before the move */
+	/** The index the row was moved from. */
 	fromIndex: number
-	/** The destination index of the row after the move */
+	/** The index the row was moved to. */
 	toIndex: number
 }
+
+/**
+ * Event payload for row:click and row:open events.
+ * @public
+ */
+export interface RowClickEvent {
+	/** The data of the clicked row. */
+	row: TableRow
+	/** The index of the clicked row. */
+	rowIndex: number
+	/**
+	 * The originating DOM MouseEvent. Present for all real user interactions.
+	 * Inspect `event.ctrlKey` / `event.metaKey` for new-tab navigation,
+	 * `event.button === 1` for middle-click, etc.
+	 */
+	event?: MouseEvent
+}