picocrank 1.32.0 → 1.34.0

package/vue/components/Table.vue

@@ -41,11 +41,38 @@
 
 						<span v-if="filterable && isHeaderFiltered(header)" class="filter-indicator" title="Filtered" aria-hidden="true">⧩</span>
 
+						<span
+							v-if="isHeaderGrouped(header)"
+							class="group-indicator"
+							title="Grouped"
+							aria-hidden="true"
+						>
+							<HugeiconsIcon
+								:icon="Group01Icon"
+								width="0.95em"
+								height="0.95em"
+								:strokeWidth="2"
+								aria-hidden="true"
+							/>
+						</span>
+
 						<span v-if="header.sortable" class="sort-indicator">
-							<span v-if="sortBy === header.key">
-								<span v-if="sortDir === 'asc'">▲</span>
-								<span v-else-if="sortDir === 'desc'">▼</span>
-							</span>
+							<HugeiconsIcon
+								v-if="sortBy === header.key && sortDir === 'asc'"
+								:icon="SortByUp02Icon"
+								width="0.95em"
+								height="0.95em"
+								:strokeWidth="2"
+								aria-hidden="true"
+							/>
+							<HugeiconsIcon
+								v-else-if="sortBy === header.key && sortDir === 'desc'"
+								:icon="SortByDown02Icon"
+								width="0.95em"
+								height="0.95em"
+								:strokeWidth="2"
+								aria-hidden="true"
+							/>
 						</span>
 					</th>
 					<th
@@ -74,59 +101,112 @@
 				</tr>
 			</thead>
 			<tbody v-if="hasRows">
-				<tr
-					v-for="(row, rowIndex) in displayRows"
-					:key="resolveRowKey(row, rowIndex)"
-					:class="{
-						'row-clickable': rowClickable,
-						'row-selected': selectable && isRowSelected(row, rowIndex),
-						'row-context-menu-active': isRowContextMenuTarget(row, rowIndex),
-					}"
-					@click="onRowClick(row, rowIndex, $event)"
-					@contextmenu="onRowContextMenu(row, rowIndex, $event)"
-				>
-					<td
-						v-if="selectable"
-						class="table-select-col"
-						data-row-click-ignore
-						@click.stop
+				<template v-for="(item, itemIndex) in displayBodyItems" :key="bodyItemKey(item, itemIndex)">
+					<tr
+						v-if="item.kind === 'group'"
+						class="table-group-row"
+						:class="{ 'table-group-row-collapsed': item.collapsed }"
 					>
-						<label class="table-select-label">
-							<input
-								type="checkbox"
-								:checked="isRowSelected(row, rowIndex)"
-								:aria-label="`Select row ${resolveRowKey(row, rowIndex)}`"
-								@change="toggleRowSelection(row, rowIndex)"
+						<td
+							v-if="selectable"
+							class="table-select-col table-group-cell"
+							data-row-click-ignore
+						/>
+						<td
+							:colspan="bodyGroupColspan"
+							class="table-group-cell"
+						>
+							<button
+								type="button"
+								class="table-group-toggle neutral"
+								:aria-expanded="item.collapsed ? 'false' : 'true'"
+								:aria-label="item.collapsed ? 'Expand group' : 'Collapse group'"
+								data-row-click-ignore
+								@click.stop="toggleGroupCollapsed(item.groupId)"
 							>
-						</label>
-					</td>
-					<td
-						v-for="(header, cellIndex) in visibleHeaders"
-						:key="header.key || cellIndex"
-						:colspan="bodyColumnColspan(cellIndex) || undefined"
+								<HugeiconsIcon
+									class="table-group-chevron"
+									:icon="ArrowDown01Icon"
+									width="1em"
+									height="1em"
+									aria-hidden="true"
+								/>
+							</button>
+							<span class="table-group-label">{{ formatGroupValue(item.value) }}</span>
+							<span class="table-group-count subtle">({{ item.count }})</span>
+						</td>
+					</tr>
+					<tr
+						v-else
 						:class="[
-							cellClasses(header),
-							header.class,
-							isLastColumnWithOptions(cellIndex) ? 'table-last-column-with-options' : null,
+							{
+								'row-clickable': rowClickable,
+								'row-selected': selectable && isRowSelected(item.row, item.displayIndex),
+								'row-context-menu-active': isRowContextMenuTarget(item.row, item.displayIndex),
+							},
+							resolveRowClass(item.row, item.displayIndex),
 						]"
+						:style="resolveRowStyle(item.row, item.displayIndex)"
+						@click="onRowClick(item.row, item.displayIndex, $event)"
+						@contextmenu="onRowContextMenu(item.row, item.displayIndex, $event)"
 					>
-						<slot
-							v-if="slots[`cell-${header.key}`]"
-							:name="`cell-${header.key}`"
-							:row="row"
-							:value="row[header.key]"
-						/>
-						<slot
-							v-else-if="slots.cell"
-							name="cell"
-							:row="row"
-							:value="row[header.key]"
-						/>
-						<span v-else>
-							{{ row[header.key] }}
-						</span>
-					</td>
-				</tr>
+						<td
+							v-if="selectable"
+							class="table-select-col"
+							data-row-click-ignore
+							@click.stop
+						>
+							<label class="table-select-label">
+								<input
+									type="checkbox"
+									:checked="isRowSelected(item.row, item.displayIndex)"
+									:aria-label="`Select row ${resolveRowKey(item.row, item.displayIndex)}`"
+									@click.stop="rememberSelectionCheckboxClick(item.row, item.displayIndex, $event)"
+									@change="onSelectionCheckboxChange(item.row, item.displayIndex)"
+								>
+							</label>
+						</td>
+						<td
+							v-for="(header, cellIndex) in visibleHeaders"
+							:key="header.key || cellIndex"
+							:ref="(element) => registerCellElement(element, item.row, header, item.displayIndex)"
+							v-bind="resolveCellAttrs(item.row, header, item.displayIndex)"
+							:colspan="bodyColumnColspan(cellIndex) || undefined"
+							:class="[
+								cellClasses(header),
+								header.class,
+								resolveCellClass(item.row, header, item.displayIndex),
+								{ 'table-active-cell': isActiveCell(item.row, header, item.displayIndex) },
+								isLastColumnWithOptions(cellIndex) ? 'table-last-column-with-options' : null,
+							]"
+							:style="resolveCellStyle(item.row, header, item.displayIndex)"
+							:tabindex="isActiveCell(item.row, header, item.displayIndex) ? 0 : -1"
+							@click="onCellClick(item.row, header, item.displayIndex, $event)"
+						>
+							<slot
+								v-if="slots[`cell-${header.key}`]"
+								:name="`cell-${header.key}`"
+								:row="item.row"
+								:value="item.row[header.key]"
+								:header="header"
+								:row-index="item.displayIndex"
+								:source-index="sourceRowIndex(item.row, item.displayIndex)"
+							/>
+							<slot
+								v-else-if="slots.cell"
+								name="cell"
+								:row="item.row"
+								:value="item.row[header.key]"
+								:header="header"
+								:row-index="item.displayIndex"
+								:source-index="sourceRowIndex(item.row, item.displayIndex)"
+							/>
+							<span v-else>
+								{{ item.row[header.key] }}
+							</span>
+						</td>
+					</tr>
+				</template>
 			</tbody>
 		</table>
 
@@ -156,10 +236,13 @@
 		:rows="props.data"
 		:select-options="activeSelectOptions"
 		:can-hide="canHideActiveFilterColumn"
+		:can-group-by="canGroupByActiveFilterColumn"
+		:is-grouped-column="isActiveFilterHeaderGrouped"
 		@apply="onFilterApply"
 		@clear="onFilterClear"
 		@cancel="onFilterCancel"
 		@hide="onFilterHideColumn"
+		@group-by="onFilterGroupBy"
 	/>
 
 	<TableColumnOptionsPopover
@@ -177,10 +260,13 @@
 		:presets="savedPresets"
 		:default-preset-id="defaultPresetId"
 		:save-layout-preset="onSavePreset"
+		:overwrite-layout-preset="onOverwritePreset"
 		:load-layout-preset="onLoadPreset"
 		:delete-layout-preset="onDeletePreset"
 		:set-default-layout-preset="onSetDefaultPreset"
 		:load-developer-defaults="loadDeveloperDefaults"
+		:group-by="activeGroupBy"
+		:groupable="props.groupable"
 		:anchor-el="columnOptionsButtonRef"
 		@apply="onColumnOptionsApply"
 		@cancel="onColumnOptionsCancel"
@@ -197,9 +283,15 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, onBeforeUnmount, useSlots, useAttrs } from 'vue'
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount, useSlots, useAttrs } from 'vue'
 import { HugeiconsIcon } from '@hugeicons/vue'
-import { LayoutGridIcon } from '@hugeicons/core-free-icons'
+import {
+	ArrowDown01Icon,
+	Group01Icon,
+	LayoutGridIcon,
+	SortByDown02Icon,
+	SortByUp02Icon,
+} from '@hugeicons/core-free-icons'
 import Pagination from './Pagination.vue'
 import TableColumnFilterPopover from './TableColumnFilterPopover.vue'
 import TableColumnOptionsPopover from './TableColumnOptionsPopover.vue'
@@ -224,23 +316,29 @@ import {
 	getPresetById,
 	listPresets,
 	savePreset,
+	overwritePreset,
 	deletePreset,
 	setDefaultPreset,
 	sanitizePresetState,
 	layoutStatesEqual,
 } from '../composables/tableColumnPresets.js'
+import {
+	getViewSettingsHandlers,
+	isViewSettingsControlEnabled,
+	VIEW_CONTROL_CALLBACK,
+} from '../composables/tableViewSettings.js'
 import {
 	defaultColumnPriorityForIndex,
 	isValidColPriority,
 } from '../composables/tableColumnPriorities.js'
+import {
+	buildDisplayBodyItems,
+	formatGroupValue,
+	isHeaderGroupable,
+} from '../composables/tableGroupBy.js'
 
 const DEFAULT_PAGE_SIZE = 10
 
-const sortBy = ref(null)
-const sortDir = ref('asc')
-const page = ref(1)
-const pageSize = ref(DEFAULT_PAGE_SIZE)
-
 const props = defineProps({
 	headers: {
 		type: Array,
@@ -250,6 +348,29 @@ const props = defineProps({
 		type: Array,
 		default: () => [],
 	},
+	sortBy: {
+		type: [String, Number],
+		default: undefined,
+	},
+	sortDir: {
+		type: String,
+		default: undefined,
+		validator: (value) => value === undefined || value === 'asc' || value === 'desc',
+	},
+	page: {
+		type: Number,
+		default: undefined,
+		validator: (value) => value === undefined || (Number.isFinite(value) && value >= 1),
+	},
+	pageSize: {
+		type: Number,
+		default: undefined,
+		validator: (value) => value === undefined || (Number.isFinite(value) && value >= 1),
+	},
+	resetPageOnSort: {
+		type: Boolean,
+		default: true,
+	},
 	showPagination: {
 		type: Boolean,
 		default: true,
@@ -307,6 +428,21 @@ const props = defineProps({
 		type: String,
 		default: '',
 	},
+	/**
+	 * How saved table views (column order, visibility, filters in presets, etc.) are stored.
+	 * - `localStorageControlled`: requires `tableId`; uses browser localStorage (default).
+	 * - `callbackControlled`: requires `viewSettings` callbacks (server or app-owned persistence).
+	 */
+	viewControlMode: {
+		type: String,
+		default: 'localStorageControlled',
+		validator: (value) => ['localStorageControlled', 'callbackControlled'].includes(value),
+	},
+	/** Callback handlers when `viewControlMode` is `callbackControlled`. */
+	viewSettings: {
+		type: Object,
+		default: null,
+	},
 	loadSavedLayout: {
 		type: Boolean,
 		default: true,
@@ -319,6 +455,7 @@ const props = defineProps({
 		type: [String, Function],
 		default: 'id',
 	},
+	/** @deprecated Use `viewSettings` with `viewControlMode="callbackControlled"`. */
 	layoutPresets: {
 		type: Object,
 		default: null,
@@ -331,6 +468,35 @@ const props = defineProps({
 		type: Array,
 		default: undefined,
 	},
+	selectionClickMode: {
+		type: String,
+		default: 'row',
+		validator: (value) => ['row', 'checkbox', 'modifier', 'extended'].includes(value),
+	},
+	activeCell: {
+		type: Object,
+		default: undefined,
+	},
+	rowClass: {
+		type: Function,
+		default: null,
+	},
+	rowStyle: {
+		type: Function,
+		default: null,
+	},
+	cellClass: {
+		type: Function,
+		default: null,
+	},
+	cellStyle: {
+		type: Function,
+		default: null,
+	},
+	cellAttrs: {
+		type: Function,
+		default: null,
+	},
 	/**
 	 * Row right-click menu. Array of items, or a function that returns items
 	 * for the click context. Each item may include `action(ctx)` where
@@ -341,6 +507,14 @@ const props = defineProps({
 		type: [Array, Function],
 		default: null,
 	},
+	groupable: {
+		type: Boolean,
+		default: true,
+	},
+	groupBy: {
+		type: String,
+		default: undefined,
+	},
 })
 
 const emit = defineEmits([
@@ -349,8 +523,14 @@ const emit = defineEmits([
 	'query-change',
 	'fetch-error',
 	'row-click',
+	'cell-click',
+	'update:sortBy',
+	'update:sortDir',
+	'update:page',
+	'update:pageSize',
 	'update:selectedKeys',
 	'selection-change',
+	'update:activeCell',
 	'row-context-menu',
 	'row-context-menu-action',
 	'update:columnVisibility',
@@ -361,14 +541,118 @@ const emit = defineEmits([
 	'column-priorities-change',
 	'update:layoutLabel',
 	'layout-label-change',
+	'update:groupBy',
+	'group-by-change',
 ])
 
 const attrs = useAttrs()
 const slots = useSlots()
 
-const rowClickable = computed(() => Boolean(attrs.onRowClick) || props.selectable)
+function normalizePage(value) {
+	const numeric = Number(value)
+	return Number.isFinite(numeric) && numeric >= 1 ? Math.floor(numeric) : 1
+}
+
+function normalizePageSize(value) {
+	const numeric = Number(value)
+	return Number.isFinite(numeric) && numeric >= 1 ? Math.floor(numeric) : DEFAULT_PAGE_SIZE
+}
+
+function normalizeSortDir(value) {
+	return value === 'desc' ? 'desc' : 'asc'
+}
+
+function normalizeActiveCell(value) {
+	if (
+		!value
+		|| typeof value !== 'object'
+		|| value.rowKey === null
+		|| value.rowKey === undefined
+		|| value.columnKey === null
+		|| value.columnKey === undefined
+	) {
+		return null
+	}
+	return {
+		rowKey: value.rowKey,
+		columnKey: value.columnKey,
+	}
+}
+
+const internalSortBy = ref(props.sortBy !== undefined ? props.sortBy : null)
+const internalSortDir = ref(normalizeSortDir(props.sortDir))
+const internalPage = ref(normalizePage(props.page))
+const internalPageSize = ref(normalizePageSize(props.pageSize))
+const internalActiveCell = ref(normalizeActiveCell(props.activeCell))
+
+const sortBy = computed({
+	get: () => props.sortBy !== undefined ? props.sortBy : internalSortBy.value,
+	set: (value) => {
+		const nextValue = value ?? null
+		if (nextValue === sortBy.value) {
+			return
+		}
+		if (props.sortBy === undefined) {
+			internalSortBy.value = nextValue
+		}
+		emit('update:sortBy', nextValue)
+	},
+})
+
+const sortDir = computed({
+	get: () => props.sortDir !== undefined ? normalizeSortDir(props.sortDir) : internalSortDir.value,
+	set: (value) => {
+		const nextValue = normalizeSortDir(value)
+		if (nextValue === sortDir.value) {
+			return
+		}
+		if (props.sortDir === undefined) {
+			internalSortDir.value = nextValue
+		}
+		emit('update:sortDir', nextValue)
+	},
+})
+
+const page = computed({
+	get: () => props.page !== undefined ? normalizePage(props.page) : internalPage.value,
+	set: (value) => {
+		const nextValue = normalizePage(value)
+		if (nextValue === page.value) {
+			return
+		}
+		if (props.page === undefined) {
+			internalPage.value = nextValue
+		}
+		emit('update:page', nextValue)
+	},
+})
+
+const pageSize = computed({
+	get: () => props.pageSize !== undefined ? normalizePageSize(props.pageSize) : internalPageSize.value,
+	set: (value) => {
+		const nextValue = normalizePageSize(value)
+		if (nextValue === pageSize.value) {
+			return
+		}
+		if (props.pageSize === undefined) {
+			internalPageSize.value = nextValue
+		}
+		emit('update:pageSize', nextValue)
+	},
+})
+
+const activeCell = computed(() => (
+	props.activeCell !== undefined ? normalizeActiveCell(props.activeCell) : internalActiveCell.value
+))
+
+const rowClickable = computed(() =>
+	Boolean(attrs.onRowClick)
+	|| (props.selectable && props.selectionClickMode !== 'checkbox'),
+)
 const internalFilters = ref({})
 const internalSelectedKeys = ref([])
+const selectionAnchorKey = ref(null)
+const pendingSelectionCheckboxClick = ref(null)
 const remoteRows = ref([])
 const remoteTotal = ref(0)
 const internalLoading = ref(false)
@@ -388,15 +672,24 @@ const internalColumnPriorities = ref({})
 const savedPresets = ref([])
 const defaultPresetId = ref(null)
 const activeLayoutPresetId = ref(null)
+const internalGroupBy = ref(null)
+const collapsedGroupIds = ref([])
 
 const isRemote = computed(() => typeof props.fetchRows === 'function')
 
-const layoutPresetsAvailable = computed(() => {
-	if (isRemote.value) {
-		return props.layoutPresets != null
-	}
-	return Boolean(props.tableId)
-})
+const viewSettingsHandlers = computed(() =>
+	getViewSettingsHandlers(props.viewSettings, props.layoutPresets))
+
+const isCallbackViewControl = computed(
+	() => props.viewControlMode === VIEW_CONTROL_CALLBACK,
+)
+
+const layoutPresetsAvailable = computed(() =>
+	isViewSettingsControlEnabled(
+		props.viewControlMode,
+		props.tableId,
+		viewSettingsHandlers.value,
+	))
 
 const activeFilters = computed(() => {
 	if (!props.filterable) {
@@ -456,6 +749,53 @@ function bodyColumnColspan(index) {
 	return isLastColumnWithOptions(index) ? 2 : null
 }
 
+const bodyGroupColspan = computed(() => {
+	let colspan = visibleHeaders.value.length
+	if (showColumnOptionsButton.value) {
+		colspan += 1
+	}
+	return colspan
+})
+
+function bodyItemKey(item, index) {
+	if (item.kind === 'group') {
+		return `group-${item.groupId}`
+	}
+	return resolveRowKey(item.row, item.sourceIndex ?? index)
+}
+
+function isHeaderGrouped(header) {
+	return Boolean(activeGroupBy.value && header?.key === activeGroupBy.value)
+}
+
+function toggleGroupCollapsed(groupId) {
+	const next = new Set(collapsedGroupIdSet.value)
+	if (next.has(groupId)) {
+		next.delete(groupId)
+	} else {
+		next.add(groupId)
+	}
+	collapsedGroupIds.value = [...next]
+}
+
+function setGroupBy(nextGroupBy) {
+	const header = props.headers.find((item) => item.key === nextGroupBy)
+	const normalized = isHeaderGroupable(header, props.groupable) ? nextGroupBy : null
+
+	if (props.groupBy === undefined) {
+		internalGroupBy.value = normalized
+	}
+
+	collapsedGroupIds.value = []
+	page.value = 1
+	emit('update:groupBy', normalized)
+	emit('group-by-change', normalized)
+	if (isRemote.value) {
+		scheduleFetchRows()
+	}
+	emitQueryChange()
+}
+
 function isHeaderHidden(header) {
 	if (header.hidden) {
 		return true
@@ -561,23 +901,61 @@ const filteredItems = computed(() => {
 	return applyFilterQuery(props.data, props.headers, activeFilterQuery.value)
 })
 
+const activeSortHeader = computed(() =>
+	props.headers.find((header) => header?.key === sortBy.value),
+)
+
 const sortedItems = computed(() => {
 	if (isRemote.value) {
 		return filteredItems.value
 	}
-	return sortRows(filteredItems.value, sortBy.value, sortDir.value)
+	return sortRows(
+		filteredItems.value,
+		sortBy.value,
+		sortDir.value,
+		activeSortHeader.value?.comparator,
+	)
 })
 
-const displayRows = computed(() => {
-	if (isRemote.value || !props.showPagination) {
-		return sortedItems.value
+const activeGroupBy = computed(() => {
+	if (!props.groupable) {
+		return null
 	}
+	if (props.groupBy !== undefined) {
+		return props.groupBy || null
+	}
+	return internalGroupBy.value
+})
 
-	const start = (page.value - 1) * pageSize.value
-	return sortedItems.value.slice(start, start + pageSize.value)
+const collapsedGroupIdSet = computed(() => new Set(collapsedGroupIds.value))
+
+const displayBodyItems = computed(() => {
+	const paginate = !isRemote.value && props.showPagination
+	const items = buildDisplayBodyItems(sortedItems.value, {
+		groupBy: activeGroupBy.value,
+		page: page.value,
+		pageSize: pageSize.value,
+		paginate,
+		collapsedGroupIds: collapsedGroupIdSet.value,
+	})
+	let displayIndex = 0
+	return items.map((item) => {
+		if (item.kind !== 'row') {
+			return item
+		}
+		const indexed = { ...item, displayIndex }
+		displayIndex += 1
+		return indexed
+	})
 })
 
-const hasRows = computed(() => displayRows.value.length > 0)
+const displayRows = computed(() =>
+	displayBodyItems.value
+		.filter((item) => item.kind === 'row')
+		.map((item) => item.row),
+)
+
+const hasRows = computed(() => displayBodyItems.value.length > 0)
 
 const hasActiveFilters = computed(() =>
 	isFilterQueryActive(activeFilterQuery.value, props.headers, props.data),
@@ -631,6 +1009,7 @@ const queryParams = computed(() => {
 		pageSize: pageSize.value,
 		sortBy: sortBy.value,
 		sortDir: sortDir.value,
+		groupBy: activeGroupBy.value,
 		filterQuery: activeFilterQuery.value,
 	}
 
@@ -670,6 +1049,7 @@ function headerClasses(header) {
 		sortable: header.sortable,
 		filterable: isHeaderFilterable(header),
 		filtered: isHeaderFiltered(header),
+		grouped: isHeaderGrouped(header),
 		'menu-open': filterPopoverOpen.value && activeFilterHeader.value?.key === header.key,
 		[colPriorityClass(priority)]: isValidColPriority(priority),
 	}
@@ -683,6 +1063,60 @@ function cellClasses(header) {
 	}
 }
 
+function sourceRowIndex(row, displayIndex) {
+	const sourceRows = isRemote.value ? remoteRows.value : props.data
+	const index = sourceRows.indexOf(row)
+	return index >= 0 ? index : filteredRowIndex(displayIndex)
+}
+
+function rowContext(row, rowIndex) {
+	return {
+		row,
+		rowIndex,
+		sourceIndex: sourceRowIndex(row, rowIndex),
+	}
+}
+
+function cellContext(row, header, rowIndex) {
+	return {
+		...rowContext(row, rowIndex),
+		value: row?.[header.key],
+		header,
+	}
+}
+
+function resolveRowClass(row, rowIndex) {
+	return props.rowClass?.(rowContext(row, rowIndex))
+}
+
+function resolveRowStyle(row, rowIndex) {
+	return props.rowStyle?.(rowContext(row, rowIndex))
+}
+
+function resolveCellClass(row, header, rowIndex) {
+	return props.cellClass?.(cellContext(row, header, rowIndex))
+}
+
+function resolveCellStyle(row, header, rowIndex) {
+	return props.cellStyle?.(cellContext(row, header, rowIndex))
+}
+
+function resolveCellAttrs(row, header, rowIndex) {
+	const value = props.cellAttrs?.(cellContext(row, header, rowIndex))
+	if (!value || typeof value !== 'object' || Array.isArray(value)) {
+		return {}
+	}
+
+	const {
+		class: _class,
+		style: _style,
+		key: _key,
+		ref: _ref,
+		...safeAttrs
+	} = value
+	return safeAttrs
+}
+
 function resolveRowKey(row, index) {
 	if (typeof props.rowKey === 'function') {
 		const key = props.rowKey(row, index)
@@ -702,6 +1136,192 @@ function resolveRowKey(row, index) {
 	return index
 }
 
+function activeCellsEqual(left, right) {
+	return left?.rowKey === right?.rowKey && left?.columnKey === right?.columnKey
+}
+
+function setActiveCell(nextCell) {
+	const normalized = normalizeActiveCell(nextCell)
+	if (activeCellsEqual(normalized, activeCell.value)) {
+		return
+	}
+	if (props.activeCell === undefined) {
+		internalActiveCell.value = normalized
+	}
+	emit('update:activeCell', normalized)
+}
+
+function clearActiveCell() {
+	setActiveCell(null)
+}
+
+function isActiveCell(row, header, rowIndex) {
+	const current = activeCell.value
+	return Boolean(
+		current
+		&& current.rowKey === resolveRowKey(row, rowIndex)
+		&& current.columnKey === header.key,
+	)
+}
+
+const activeCellElements = new Map()
+
+function registerCellElement(element, row, header, rowIndex) {
+	const rowKey = resolveRowKey(row, rowIndex)
+	let rowCells = activeCellElements.get(rowKey)
+
+	if (!element) {
+		rowCells?.delete(header.key)
+		if (rowCells?.size === 0) {
+			activeCellElements.delete(rowKey)
+		}
+		return
+	}
+
+	if (!rowCells) {
+		rowCells = new Map()
+		activeCellElements.set(rowKey, rowCells)
+	}
+	rowCells.set(header.key, element)
+}
+
+function focusCell(cell, options) {
+	if (!cell) {
+		return false
+	}
+	const element = activeCellElements.get(cell.rowKey)?.get(cell.columnKey)
+	if (!element) {
+		return false
+	}
+	element.focus(options)
+	return true
+}
+
+function focusActiveCell(options) {
+	return focusCell(activeCell.value, options)
+}
+
+function cellContextAt(rowIndex, columnIndex) {
+	const row = displayRows.value[rowIndex]
+	const header = visibleHeaders.value[columnIndex]
+	if (!row || !header) {
+		return null
+	}
+
+	return {
+		...cellContext(row, header, rowIndex),
+		rowKey: resolveRowKey(row, rowIndex),
+		columnKey: header.key,
+		columnIndex,
+	}
+}
+
+function getActiveCellContext() {
+	const current = activeCell.value
+	if (!current) {
+		return null
+	}
+
+	const rowIndex = displayRows.value.findIndex(
+		(row, index) => resolveRowKey(row, index) === current.rowKey,
+	)
+	const columnIndex = visibleHeaders.value.findIndex(
+		(header) => header.key === current.columnKey,
+	)
+	if (rowIndex < 0 || columnIndex < 0) {
+		return null
+	}
+
+	return cellContextAt(rowIndex, columnIndex)
+}
+
+function clampGridIndex(value, maximum) {
+	const numeric = Number(value)
+	const normalized = Number.isFinite(numeric) ? Math.trunc(numeric) : 0
+	return Math.min(Math.max(normalized, 0), maximum)
+}
+
+function scheduleCellFocus(cell, options) {
+	if (!options?.focus) {
+		return
+	}
+	void nextTick(() => focusCell(cell, options.focusOptions))
+}
+
+function activateCellAt(rowIndex, columnIndex, options = {}) {
+	if (displayRows.value.length === 0 || visibleHeaders.value.length === 0) {
+		return null
+	}
+
+	const nextRowIndex = clampGridIndex(rowIndex, displayRows.value.length - 1)
+	const nextColumnIndex = clampGridIndex(columnIndex, visibleHeaders.value.length - 1)
+	const context = cellContextAt(nextRowIndex, nextColumnIndex)
+	const nextActiveCell = {
+		rowKey: context.rowKey,
+		columnKey: context.columnKey,
+	}
+
+	setActiveCell(nextActiveCell)
+	scheduleCellFocus(nextActiveCell, options)
+	return context
+}
+
+function moveActiveCell(rowDelta, columnDelta, options = {}) {
+	if (displayRows.value.length === 0 || visibleHeaders.value.length === 0) {
+		return null
+	}
+
+	const current = getActiveCellContext()
+	if (!current) {
+		return activateCellAt(0, 0, options)
+	}
+
+	const normalizedRowDelta = Number.isFinite(Number(rowDelta)) ? Math.trunc(Number(rowDelta)) : 0
+	const normalizedColumnDelta = Number.isFinite(Number(columnDelta))
+		? Math.trunc(Number(columnDelta))
+		: 0
+	const rowIndex = clampGridIndex(
+		current.rowIndex + normalizedRowDelta,
+		displayRows.value.length - 1,
+	)
+	let columnIndex
+
+	if (options.wrapColumns) {
+		const linearIndex = (rowIndex * visibleHeaders.value.length)
+			+ current.columnIndex
+			+ normalizedColumnDelta
+		const clampedLinearIndex = clampGridIndex(
+			linearIndex,
+			(displayRows.value.length * visibleHeaders.value.length) - 1,
+		)
+		return activateCellAt(
+			Math.floor(clampedLinearIndex / visibleHeaders.value.length),
+			clampedLinearIndex % visibleHeaders.value.length,
+			options,
+		)
+	}
+
+	columnIndex = clampGridIndex(
+		current.columnIndex + normalizedColumnDelta,
+		visibleHeaders.value.length - 1,
+	)
+	return activateCellAt(rowIndex, columnIndex, options)
+}
+
+function onCellClick(row, header, rowIndex, event) {
+	const context = cellContext(row, header, rowIndex)
+	const nextActiveCell = {
+		rowKey: resolveRowKey(row, rowIndex),
+		columnKey: header.key,
+	}
+	setActiveCell(nextActiveCell)
+	emit('cell-click', {
+		...context,
+		...nextActiveCell,
+		event,
+	})
+}
+
 const activeSelectedKeys = computed(() => (
 	props.selectedKeys !== undefined ? props.selectedKeys : internalSelectedKeys.value
 ))
@@ -724,6 +1344,7 @@ function setSelectedKeys(nextKeys) {
 function toggleRowSelection(row, index) {
 	const key = resolveRowKey(row, index)
 	const current = activeSelectedKeys.value
+	selectionAnchorKey.value = key
 	if (selectedKeySet.value.has(key)) {
 		setSelectedKeys(current.filter((item) => item !== key))
 		return
@@ -731,10 +1352,60 @@ function toggleRowSelection(row, index) {
 	setSelectedKeys([...current, key])
 }
 
+function replaceRowSelection(row, index) {
+	const key = resolveRowKey(row, index)
+	selectionAnchorKey.value = key
+	setSelectedKeys([key])
+}
+
 const displayRowKeys = computed(() =>
 	displayRows.value.map((row, index) => resolveRowKey(row, index)),
 )
 
+function selectRowRange(row, index, { updateAnchor = true } = {}) {
+	const key = resolveRowKey(row, index)
+	const anchorIndex = displayRowKeys.value.findIndex((item) => item === selectionAnchorKey.value)
+	const targetIndex = displayRowKeys.value.findIndex((item) => item === key)
+
+	if (anchorIndex < 0 || targetIndex < 0) {
+		setSelectedKeys([...activeSelectedKeys.value, key])
+		selectionAnchorKey.value = key
+		return
+	}
+
+	const from = Math.min(anchorIndex, targetIndex)
+	const to = Math.max(anchorIndex, targetIndex)
+	setSelectedKeys([
+		...activeSelectedKeys.value,
+		...displayRowKeys.value.slice(from, to + 1),
+	])
+	if (updateAnchor) {
+		selectionAnchorKey.value = key
+	}
+}
+
+function rememberSelectionCheckboxClick(row, index, event) {
+	pendingSelectionCheckboxClick.value = {
+		key: resolveRowKey(row, index),
+		shiftKey: event.shiftKey,
+	}
+}
+
+function onSelectionCheckboxChange(row, index) {
+	const key = resolveRowKey(row, index)
+	const shiftKey = (
+		pendingSelectionCheckboxClick.value?.key === key
+		&& pendingSelectionCheckboxClick.value.shiftKey
+	)
+	pendingSelectionCheckboxClick.value = null
+
+	if (shiftKey) {
+		selectRowRange(row, index)
+		return
+	}
+	toggleRowSelection(row, index)
+}
+
 const allDisplayRowsSelected = computed(() => {
 	const keys = displayRowKeys.value
 	return keys.length > 0 && keys.every((key) => selectedKeySet.value.has(key))
@@ -756,15 +1427,18 @@ function toggleSelectAllDisplayRows() {
 	if (allDisplayRowsSelected.value) {
 		const pageKeySet = new Set(pageKeys)
 		setSelectedKeys(activeSelectedKeys.value.filter((key) => !pageKeySet.has(key)))
+		selectionAnchorKey.value = null
 		return
 	}
 
 	setSelectedKeys([...activeSelectedKeys.value, ...pageKeys])
+	selectionAnchorKey.value = pageKeys.at(-1) ?? null
 }
 
 watch(() => props.selectable, (enabled) => {
 	if (!enabled) {
 		setSelectedKeys([])
+		selectionAnchorKey.value = null
 	}
 })
 
@@ -822,11 +1496,49 @@ function onRowClick(row, displayIndex, event) {
 	if (event.target.closest('a, button, input, select, textarea, [data-row-click-ignore]')) {
 		return
 	}
+
 	if (props.selectable) {
-		toggleRowSelection(row, displayIndex)
-		return
+		if (props.selectionClickMode === 'extended') {
+			if (event.ctrlKey || event.metaKey) {
+				toggleRowSelection(row, displayIndex)
+				return
+			}
+
+			const hasRangeAnchor = displayRowKeys.value.includes(selectionAnchorKey.value)
+			if (event.shiftKey && hasRangeAnchor) {
+				selectRowRange(row, displayIndex, { updateAnchor: false })
+				return
+			}
+
+			replaceRowSelection(row, displayIndex)
+			return
+		}
+
+		if (
+			props.selectionClickMode !== 'checkbox'
+			&& event.shiftKey
+		) {
+			selectRowRange(row, displayIndex)
+			return
+		}
+
+		if (
+			props.selectionClickMode === 'row'
+			|| (
+				props.selectionClickMode === 'modifier'
+				&& (event.ctrlKey || event.metaKey)
+			)
+		) {
+			toggleRowSelection(row, displayIndex)
+			return
+		}
 	}
-	emit('row-click', { row, index: filteredRowIndex(displayIndex) })
+
+	emit('row-click', {
+		row,
+		index: filteredRowIndex(displayIndex),
+		event,
+	})
 }
 
 const rowContextMenuOpen = ref(false)
@@ -888,7 +1600,7 @@ function closeRowContextMenu() {
 	rowContextMenuAnchor.value = null
 }
 
-function onRowContextMenu(row, displayIndex, event) {
+function onRowContextMenu(row, sourceIndex, event) {
 	if (!hasRowContextMenu.value) {
 		return
 	}
@@ -899,8 +1611,8 @@ function onRowContextMenu(row, displayIndex, event) {
 	event.preventDefault()
 	event.stopPropagation()
 
-	const key = resolveRowKey(row, displayIndex)
-	const index = filteredRowIndex(displayIndex)
+	const key = resolveRowKey(row, sourceIndex)
+	const index = filteredRowIndex(sourceIndex)
 	let targetKeys
 
 	if (props.selectable && selectedKeySet.value.has(key) && activeSelectedKeys.value.length > 0) {
@@ -1035,6 +1747,17 @@ function onFilterCancel() {
 	activeFilterValue.value = []
 }
 
+const canGroupByActiveFilterColumn = computed(() => {
+	if (!props.groupable || !activeFilterHeader.value) {
+		return false
+	}
+	return isHeaderGroupable(activeFilterHeader.value, props.groupable)
+})
+
+const isActiveFilterHeaderGrouped = computed(() =>
+	Boolean(activeFilterHeader.value?.key && activeFilterHeader.value.key === activeGroupBy.value),
+)
+
 const canHideActiveFilterColumn = computed(() => {
 	if (!showColumnOptionsButton.value || !activeFilterHeader.value) {
 		return false
@@ -1049,6 +1772,12 @@ const canHideActiveFilterColumn = computed(() => {
 	return configurableHeaders.value.some((item) => item.key === header.key)
 })
 
+function onFilterGroupBy(columnKey) {
+	setGroupBy(columnKey || null)
+	filterPopoverOpen.value = false
+	onFilterCancel()
+}
+
 function onFilterHideColumn() {
 	const header = activeFilterHeader.value
 	if (!header?.key || !canHideActiveFilterColumn.value) {
@@ -1134,10 +1863,13 @@ function openColumnOptions() {
 	void refreshSavedPresets()
 }
 
-function onColumnOptionsApply({ order, visibleKeys, priorities }) {
+function onColumnOptionsApply({ order, visibleKeys, priorities, groupBy }) {
 	setColumnOrder(order)
 	setColumnVisibility(visibleKeys)
 	setColumnPriorities(priorities)
+	if (groupBy !== undefined && groupBy !== activeGroupBy.value) {
+		setGroupBy(groupBy)
+	}
 	updateActiveLayoutLabel()
 }
 
@@ -1146,15 +1878,16 @@ function onColumnOptionsCancel() {
 }
 
 async function refreshSavedPresets() {
-	if (isRemote.value) {
-		if (!props.layoutPresets || typeof props.layoutPresets.list !== 'function') {
+	if (isCallbackViewControl.value) {
+		const handlers = viewSettingsHandlers.value
+		if (!handlers || typeof handlers.list !== 'function') {
 			savedPresets.value = []
 			defaultPresetId.value = null
 			return
 		}
 
 		try {
-			const result = await props.layoutPresets.list()
+			const result = await handlers.list()
 			savedPresets.value = Array.isArray(result?.presets) ? result.presets : []
 			defaultPresetId.value = result?.defaultPresetId ?? null
 		} catch {
@@ -1192,6 +1925,7 @@ function getCurrentLayoutState() {
 		filters: cloneFilters(activeFilters.value),
 		sortBy: sortBy.value,
 		sortDir: sortDir.value,
+		groupBy: activeGroupBy.value,
 		pageSize: pageSize.value,
 	}
 }
@@ -1231,6 +1965,12 @@ function applyPresetState(state) {
 		sortDir.value = 'asc'
 	}
 
+	if (sanitized.groupBy) {
+		setGroupBy(sanitized.groupBy)
+	} else {
+		setGroupBy(null)
+	}
+
 	if (sanitized.pageSize) {
 		pageSize.value = sanitized.pageSize
 	}
@@ -1246,13 +1986,14 @@ function applyPresetState(state) {
 async function onSavePreset({ name, setAsDefault }) {
 	const state = getCurrentLayoutState()
 
-	if (isRemote.value) {
-		if (!props.layoutPresets || typeof props.layoutPresets.save !== 'function') {
-			return { ok: false, error: 'Remote layout save is unavailable.' }
+	if (isCallbackViewControl.value) {
+		const handlers = viewSettingsHandlers.value
+		if (!handlers || typeof handlers.save !== 'function') {
+			return { ok: false, error: 'View save callback is unavailable.' }
 		}
 
 		try {
-			const result = await props.layoutPresets.save({ name, state, setAsDefault })
+			const result = await handlers.save({ name, state, setAsDefault })
 			if (result?.ok) {
 				await refreshSavedPresets()
 				if (result.preset?.id) {
@@ -1285,14 +2026,50 @@ async function onSavePreset({ name, setAsDefault }) {
 	return result
 }
 
+async function onOverwritePreset({ presetId }) {
+	const state = getCurrentLayoutState()
+
+	if (isCallbackViewControl.value) {
+		const handlers = viewSettingsHandlers.value
+		if (!handlers || typeof handlers.overwrite !== 'function') {
+			return { ok: false, error: 'View overwrite callback is unavailable.' }
+		}
+
+		try {
+			const result = await handlers.overwrite({ presetId, state })
+			if (result?.ok) {
+				await refreshSavedPresets()
+				activeLayoutPresetId.value = presetId
+				updateActiveLayoutLabel()
+			}
+			return result ?? { ok: false, error: 'Unable to overwrite layout.' }
+		} catch {
+			return { ok: false, error: 'Unable to overwrite layout.' }
+		}
+	}
+
+	if (!props.tableId) {
+		return { ok: false, error: 'Table identity is required.' }
+	}
+
+	const result = overwritePreset(props.tableId, presetId, { state })
+	if (result.ok) {
+		refreshSavedPresets()
+		activeLayoutPresetId.value = presetId
+		updateActiveLayoutLabel()
+	}
+	return result
+}
+
 async function onLoadPreset(presetId) {
-	if (isRemote.value) {
-		if (!props.layoutPresets || typeof props.layoutPresets.load !== 'function') {
-			return { ok: false, error: 'Remote layout load is unavailable.' }
+	if (isCallbackViewControl.value) {
+		const handlers = viewSettingsHandlers.value
+		if (!handlers || typeof handlers.load !== 'function') {
+			return { ok: false, error: 'View load callback is unavailable.' }
 		}
 
 		try {
-			const result = await props.layoutPresets.load(presetId)
+			const result = await handlers.load(presetId)
 			if (!result?.ok || !result.preset?.state) {
 				return result ?? { ok: false, error: 'Preset not found.' }
 			}
@@ -1322,13 +2099,14 @@ async function onLoadPreset(presetId) {
 }
 
 async function onDeletePreset(presetId) {
-	if (isRemote.value) {
-		if (!props.layoutPresets || typeof props.layoutPresets.delete !== 'function') {
-			return { ok: false, error: 'Remote layout delete is unavailable.' }
+	if (isCallbackViewControl.value) {
+		const handlers = viewSettingsHandlers.value
+		if (!handlers || typeof handlers.delete !== 'function') {
+			return { ok: false, error: 'View delete callback is unavailable.' }
 		}
 
 		try {
-			const result = await props.layoutPresets.delete(presetId)
+			const result = await handlers.delete(presetId)
 			if (result?.ok) {
 				await refreshSavedPresets()
 				if (activeLayoutPresetId.value === presetId) {
@@ -1358,13 +2136,14 @@ async function onDeletePreset(presetId) {
 }
 
 async function onSetDefaultPreset(presetId) {
-	if (isRemote.value) {
-		if (!props.layoutPresets || typeof props.layoutPresets.setDefault !== 'function') {
+	if (isCallbackViewControl.value) {
+		const handlers = viewSettingsHandlers.value
+		if (!handlers || typeof handlers.setDefault !== 'function') {
 			return { ok: false, error: 'Unable to update default layout.' }
 		}
 
 		try {
-			const result = await props.layoutPresets.setDefault(presetId)
+			const result = await handlers.setDefault(presetId)
 			if (result?.ok) {
 				await refreshSavedPresets()
 			}
@@ -1407,6 +2186,7 @@ function getDeveloperDefaultLayoutState() {
 		filters: {},
 		sortBy: null,
 		sortDir: 'asc',
+		groupBy: null,
 		pageSize: DEFAULT_PAGE_SIZE,
 	}
 }
@@ -1466,6 +2246,7 @@ function loadDeveloperDefaults() {
 	setFilters({})
 	sortBy.value = null
 	sortDir.value = 'asc'
+	setGroupBy(null)
 	setColumnOrder(getDeveloperDefaultColumnOrder())
 	setColumnPriorities({})
 
@@ -1550,7 +2331,18 @@ function scheduleFetchRows() {
 }
 
 watch(
-	() => [pageSize.value, sortBy.value, sortDir.value],
+	pageSize,
+	() => {
+		page.value = 1
+		if (isRemote.value) {
+			scheduleFetchRows()
+		}
+		emitQueryChange()
+	},
+)
+
+watch(
+	activeGroupBy,
 	() => {
 		page.value = 1
 		if (isRemote.value) {
@@ -1560,6 +2352,19 @@ watch(
 	},
 )
 
+watch(
+	() => [sortBy.value, sortDir.value],
+	() => {
+		if (props.resetPageOnSort) {
+			page.value = 1
+		}
+		if (isRemote.value) {
+			scheduleFetchRows()
+		}
+		emitQueryChange()
+	},
+)
+
 watch(page, () => {
 	if (isRemote.value) {
 		scheduleFetchRows()
@@ -1567,6 +2372,40 @@ watch(page, () => {
 	emitQueryChange()
 })
 
+watch(() => props.sortBy, (value) => {
+	if (value !== undefined) {
+		internalSortBy.value = value ?? null
+	}
+})
+
+watch(() => props.sortDir, (value) => {
+	if (value !== undefined) {
+		internalSortDir.value = normalizeSortDir(value)
+	}
+})
+
+watch(() => props.page, (value) => {
+	if (value !== undefined) {
+		internalPage.value = normalizePage(value)
+	}
+})
+
+watch(() => props.pageSize, (value) => {
+	if (value !== undefined) {
+		internalPageSize.value = normalizePageSize(value)
+	}
+})
+
+watch(
+	() => props.activeCell,
+	(value) => {
+		if (value !== undefined) {
+			internalActiveCell.value = normalizeActiveCell(value)
+		}
+	},
+	{ deep: true },
+)
+
 watch(
 	activeFilters,
 	() => {
@@ -1623,6 +2462,24 @@ watch(
 	{ deep: true },
 )
 
+watch(
+	() => props.groupBy,
+	(nextGroupBy) => {
+		if (nextGroupBy !== undefined) {
+			collapsedGroupIds.value = []
+		}
+	},
+)
+
+watch(
+	() => props.groupable,
+	(enabled) => {
+		if (!enabled) {
+			setGroupBy(null)
+		}
+	},
+)
+
 watch(
 	() => props.columnPriorities,
 	(nextPriorities) => {
@@ -1643,7 +2500,7 @@ watch(
 )
 
 watch(
-	() => [props.tableId, props.layoutPresets],
+	() => [props.viewControlMode, props.tableId, viewSettingsHandlers.value],
 	() => {
 		void refreshSavedPresets()
 		updateActiveLayoutLabel()
@@ -1660,6 +2517,7 @@ watch(
 		activeFilters,
 		sortBy,
 		sortDir,
+		activeGroupBy,
 		pageSize,
 		() => props.headers,
 		savedPresets,
@@ -1674,25 +2532,30 @@ watch(activeLayoutLabel, (label) => {
 	emitLayoutLabelChange(label)
 }, { immediate: true })
 
-watch(sortedItems, () => {
-	if (!isRemote.value) {
-		page.value = 1
-	}
-})
+watch(
+	() => props.data,
+	() => {
+		if (!isRemote.value) {
+			page.value = 1
+		}
+	},
+	{ deep: true },
+)
 
 onMounted(async () => {
 	if (props.loadSavedLayout) {
-		if (isRemote.value && props.layoutPresets && typeof props.layoutPresets.getDefault === 'function') {
+		const handlers = viewSettingsHandlers.value
+		if (isCallbackViewControl.value && handlers && typeof handlers.getDefault === 'function') {
 			try {
-				const result = await props.layoutPresets.getDefault()
+				const result = await handlers.getDefault()
 				if (result?.preset?.state) {
 					applyPresetState(result.preset.state)
 					activeLayoutPresetId.value = result.preset.id
 				}
 			} catch {
-				// Ignore default layout load failures in remote mode.
+				// Ignore default layout load failures in callback mode.
 			}
-		} else if (!isRemote.value && props.tableId) {
+		} else if (!isCallbackViewControl.value && props.tableId) {
 			const preset = getDefaultPreset(props.tableId)
 			if (preset?.state) {
 				applyPresetState(preset.state)
@@ -1721,6 +2584,12 @@ onBeforeUnmount(() => {
 defineExpose({
 	layoutLabel: activeLayoutLabel,
 	loadDeveloperDefaults,
+	clearFilters: clearAllFilters,
+	focusActiveCell,
+	clearActiveCell,
+	activateCellAt,
+	moveActiveCell,
+	getActiveCellContext,
 })
 </script>
 
@@ -1759,9 +2628,57 @@ table.loading tbody {
 }
 
 .sort-indicator {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
 	width: 1.5em;
-	display: inline-block;
-	text-align: center;
+	vertical-align: middle;
+}
+
+.group-indicator {
+	display: inline-flex;
+	vertical-align: middle;
+	margin-right: 0.25rem;
+	opacity: 0.85;
+}
+
+table thead th.grouped {
+	color: var(--table-header-active-fg);
+}
+
+tbody tr.table-group-row > td.table-group-cell {
+	background-color: var(--table-header-active-bg);
+	color: var(--table-header-fg);
+	font-weight: 600;
+	padding-top: 0.65rem;
+	padding-bottom: 0.65rem;
+}
+
+.table-group-toggle {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 1.5rem;
+	margin-right: 0.35rem;
+	padding: 0.1rem 0.35rem;
+	vertical-align: middle;
+}
+
+.table-group-chevron {
+	flex-shrink: 0;
+	transition: transform 0.15s ease;
+}
+
+.table-group-row:not(.table-group-row-collapsed) .table-group-chevron {
+	transform: rotate(180deg);
+}
+
+.table-group-label {
+	margin-right: 0.35rem;
+}
+
+.table-group-count {
+	font-weight: normal;
 }
 
 td:first-child,
@@ -1792,6 +2709,16 @@ tbody tr.row-clickable {
 	cursor: pointer;
 }
 
+tbody td.table-active-cell {
+	outline: 2px solid currentColor;
+	outline-offset: -2px;
+}
+
+tbody td.table-active-cell:focus,
+tbody td.table-active-cell:focus-visible {
+	outline-width: 3px;
+}
+
 tbody tr.row-selected > td {
 	background-color: var(--control-checked-bg);
 	color: var(--control-checked-fg);