niuma-ui 1.0.1 → 1.1.0

package/src/components/reka.ts

@@ -58,6 +58,11 @@ export {
   PopoverPortal,
   PopoverRoot,
   PopoverTrigger,
+  RadioGroupIndicator,
+  RadioGroupItem,
+  RadioGroupRoot,
+  SwitchRoot,
+  SwitchThumb,
   PaginationEllipsis,
   PaginationFirst,
   PaginationLast,

package/src/components/select-utils.ts

@@ -1,7 +1,24 @@
+export type RsSelectValue = string | number
+
+/** 过滤 / 回显比对字段名，默认 label；可传 value 或 fieldNames 映射后的键 */
+export type RsSelectOptionFilterProp = string
+
+export type RsSelectPlacement = 'top' | 'bottom' | 'left' | 'right'
+
+export type RsSelectStatus = 'error' | 'warning' | ''
+
+/** 自定义过滤（对齐 Ant Design filterOption）。返回 false 则隐藏该项。 */
+export type RsSelectFilterOption = (query: string, option: RsSelectOption) => boolean
+
+/** 过滤后排序（对齐 Ant Design filterSort） */
+export type RsSelectFilterSort = (a: RsSelectOption, b: RsSelectOption) => number
+
 export interface RsSelectOption {
   label: string
-  value: string
+  value: RsSelectValue
   disabled?: boolean
+  /** 原生 title；悬停展示补充说明 */
+  title?: string
 }
 
 export interface RsSelectOptionGroup {
@@ -11,6 +28,51 @@ export interface RsSelectOptionGroup {
 
 export type RsSelectOptions = ReadonlyArray<RsSelectOption | RsSelectOptionGroup>
 
+/** 未正规化的选项（配合 fieldNames 可用 name/id/children 等业务字段） */
+export type RsSelectOptionInput = RsSelectOption | RsSelectOptionGroup | Record<string, unknown>
+
+export type RsSelectOptionsInput = ReadonlyArray<RsSelectOptionInput>
+
+/** 对齐 Ant Design fieldNames */
+export interface RsSelectFieldNames {
+  label?: string
+  value?: string
+  options?: string
+  disabled?: string
+  groupLabel?: string
+}
+
+export type RsSelectGetPopupContainer = (triggerNode?: HTMLElement) => string | HTMLElement | undefined
+
+/** labelInValue 时的 v-model 项（对齐 Ant Design） */
+export interface RsSelectLabeledValue {
+  label: string
+  value: RsSelectValue
+}
+
+export type RsSelectModelValue =
+  | RsSelectValue
+  | RsSelectValue[]
+  | RsSelectLabeledValue
+  | RsSelectLabeledValue[]
+  | ''
+
+/**
+ * Reka ComboboxItem 禁止 value 为空串（空串表示未选中 / placeholder）。
+ * 选项若传入 value: ''，对内映射为此哨兵，避免崩溃；对外读写仍为 ''。
+ */
+export const RS_SELECT_EMPTY_VALUE = '__rs_select_empty__'
+
+/** 业务 value → ComboboxItem token（空串走哨兵；数字转为十进制字符串） */
+export function toComboboxValue(value: RsSelectValue): string {
+  return value === '' ? RS_SELECT_EMPTY_VALUE : String(value)
+}
+
+/** ComboboxItem token → 业务字符串（仅还原空串哨兵，不恢复 number） */
+export function fromComboboxValue(value: string): string {
+  return value === RS_SELECT_EMPTY_VALUE ? '' : value
+}
+
 export function isSelectOptionGroup(
   item: RsSelectOption | RsSelectOptionGroup,
 ): item is RsSelectOptionGroup {
@@ -29,10 +91,40 @@ export function flattenSelectOptions(options: RsSelectOptions): RsSelectOption[]
   return result
 }
 
+export function findSelectOption(
+  options: RsSelectOptions,
+  token: string,
+): RsSelectOption | undefined {
+  const raw = fromComboboxValue(token)
+  return flattenSelectOptions(options).find((opt) => String(opt.value) === String(raw))
+}
+
+/**
+ * Combobox token → 业务 value。
+ * 优先返回 options 里的原始类型（number 0 保持为 0）；手输/未知项保持字符串。
+ */
+export function restoreSelectValue(
+  token: string,
+  options: RsSelectOptions,
+): RsSelectValue {
+  const matched = findSelectOption(options, token)
+  if (matched) return matched.value
+  return fromComboboxValue(token)
+}
+
+export function restoreSelectValues(
+  tokens: string[],
+  options: RsSelectOptions,
+): RsSelectValue[] {
+  return tokens.map((token) => restoreSelectValue(token, options))
+}
+
 export function buildOptionLabelMap(options: RsSelectOptions): Map<string, string> {
   const map = new Map<string, string>()
   for (const opt of flattenSelectOptions(options)) {
-    map.set(opt.value, opt.label)
+    const key = toComboboxValue(opt.value)
+    map.set(key, opt.label)
+    if (opt.value === '') map.set('', opt.label)
   }
   return map
 }
@@ -40,27 +132,130 @@ export function buildOptionLabelMap(options: RsSelectOptions): Map<string, strin
 export function buildOptionDisabledMap(options: RsSelectOptions): Map<string, boolean> {
   const map = new Map<string, boolean>()
   for (const opt of flattenSelectOptions(options)) {
-    map.set(opt.value, Boolean(opt.disabled))
+    const key = toComboboxValue(opt.value)
+    map.set(key, Boolean(opt.disabled))
   }
   return map
 }
 
+function optionFieldText(option: RsSelectOption, prop: string): string {
+  if (prop === 'value') return String(option.value)
+  if (prop === 'label' || !prop) return String(option.label)
+  const extra = Reflect.get(option, prop)
+  return extra == null ? String(option.label) : String(extra)
+}
+
+function defaultMatchOption(
+  option: RsSelectOption,
+  query: string,
+  contains: (text: string, search: string) => boolean,
+  optionFilterProp: RsSelectOptionFilterProp,
+): boolean {
+  return contains(optionFieldText(option, optionFilterProp), query)
+}
+
+function coerceSelectValue(raw: unknown): RsSelectValue {
+  if (typeof raw === 'number' || typeof raw === 'string') return raw
+  if (raw == null) return ''
+  return String(raw)
+}
+
+function mapSelectOption(
+  raw: Record<string, unknown>,
+  names: Required<Pick<RsSelectFieldNames, 'label' | 'value' | 'disabled'>>,
+): RsSelectOption {
+  const value = coerceSelectValue(raw[names.value])
+  const label = raw[names.label]
+  return {
+    ...raw,
+    value,
+    label: label == null ? String(value) : String(label),
+    disabled: Boolean(raw[names.disabled]),
+    title: typeof raw.title === 'string' ? raw.title : undefined,
+  }
+}
+
+/**
+ * 按 fieldNames 把业务选项正规化为 { label, value, disabled }。
+ * 默认键即为 label / value / options，既有调用无需改。
+ */
+export function normalizeSelectOptions(
+  options: RsSelectOptionsInput,
+  fieldNames?: RsSelectFieldNames,
+): RsSelectOptions {
+  const labelKey = fieldNames?.label ?? 'label'
+  const valueKey = fieldNames?.value ?? 'value'
+  const optionsKey = fieldNames?.options ?? 'options'
+  const disabledKey = fieldNames?.disabled ?? 'disabled'
+  const groupLabelKey = fieldNames?.groupLabel ?? labelKey
+  const result: Array<RsSelectOption | RsSelectOptionGroup> = []
+
+  for (const item of options) {
+    if (!item || typeof item !== 'object') continue
+    const raw = item as Record<string, unknown>
+    const nested = raw[optionsKey]
+    if (Array.isArray(nested)) {
+      const children: RsSelectOption[] = []
+      for (const child of nested) {
+        if (!child || typeof child !== 'object') continue
+        children.push(mapSelectOption(child as Record<string, unknown>, {
+          label: labelKey,
+          value: valueKey,
+          disabled: disabledKey,
+        }))
+      }
+      result.push({
+        label: String(raw[groupLabelKey] ?? ''),
+        options: children,
+      })
+      continue
+    }
+    result.push(mapSelectOption(raw, { label: labelKey, value: valueKey, disabled: disabledKey }))
+  }
+  return result
+}
+
+/** 触发器 / tag 展示文案，对齐 Ant optionLabelProp */
+export function optionDisplayLabel(option: RsSelectOption, prop = 'label'): string {
+  return optionFieldText(option, prop)
+}
+
+export function comboboxBindingToTokens(value: unknown, multiple: boolean): string[] {
+  if (multiple) return Array.isArray(value) ? value.map(String) : []
+  if (value == null || value === '') return []
+  return [String(value)]
+}
+
+export function selectModelEntries(value: unknown): unknown[] {
+  if (Array.isArray(value)) return value
+  if (value === '' || value == null) return []
+  return [value]
+}
+
 export function filterSelectOptions(
   options: RsSelectOptions,
   query: string,
   contains: (text: string, search: string) => boolean,
+  filterOption?: RsSelectFilterOption | boolean,
+  optionFilterProp: RsSelectOptionFilterProp = 'label',
 ): RsSelectOptions {
+  if (filterOption === false) return options
   const trimmed = query.trim()
   if (!trimmed) return options
 
+  const match =
+    typeof filterOption === 'function'
+      ? (opt: RsSelectOption) => filterOption(trimmed, opt)
+      : (opt: RsSelectOption) => defaultMatchOption(opt, trimmed, contains, optionFilterProp)
+
   const result: Array<RsSelectOption | RsSelectOptionGroup> = []
   for (const item of options) {
     if (isSelectOptionGroup(item)) {
-      const filtered = item.options.filter((opt) => contains(opt.label, trimmed))
+      const filtered = item.options.filter(match)
       if (filtered.length > 0) {
         result.push({ label: item.label, options: filtered })
       }
-    } else if (contains(item.label, trimmed)) {
+    } else if (match(item)) {
       result.push(item)
     }
   }
@@ -68,5 +263,89 @@ export function filterSelectOptions(
 }
 
 export function flattenSelectValues(options: RsSelectOptions): string[] {
-  return flattenSelectOptions(options).map((opt) => opt.value)
+  return flattenSelectOptions(options).map((opt) => toComboboxValue(opt.value))
+}
+
+export function toSelectedTokens(value: unknown, multiple: boolean): string[] {
+  const entries = multiple
+    ? selectModelEntries(value)
+    : Array.isArray(value) || value === '' || value == null
+      ? []
+      : [value]
+  const tokens: string[] = []
+  for (const entry of entries) {
+    const raw = unwrapSelectEntry(entry)
+    if (raw === null) continue
+    tokens.push(toComboboxValue(raw))
+  }
+  return tokens
+}
+
+export function isSelectLabeledValue(value: unknown): value is RsSelectLabeledValue {
+  return typeof value === 'object' && value !== null && !Array.isArray(value) && 'value' in value
+}
+
+export function unwrapSelectEntry(item: unknown): RsSelectValue | null {
+  if (item == null || item === '') return null
+  if (isSelectLabeledValue(item)) return item.value
+  if (typeof item === 'string' || typeof item === 'number') return item
+  return null
+}
+
+export function toLabeledValue(
+  value: RsSelectValue,
+  options: RsSelectOptions,
+): RsSelectLabeledValue {
+  const matched = flattenSelectOptions(options).find(
+    (opt) => String(opt.value) === String(value),
+  )
+  return {
+    value: matched ? matched.value : value,
+    label: matched?.label ?? String(value),
+  }
+}
+
+export function packSelectModel(
+  values: RsSelectValue[],
+  options: RsSelectOptions,
+  multiple: boolean,
+  labelInValue: boolean,
+): RsSelectModelValue {
+  if (multiple) {
+    return labelInValue ? values.map((value) => toLabeledValue(value, options)) : values
+  }
+  const first = values[0]
+  if (first === undefined) return ''
+  return labelInValue ? toLabeledValue(first, options) : first
+}
+
+export function sortSelectOptions(
+  options: RsSelectOptions,
+  sort?: RsSelectFilterSort,
+): RsSelectOptions {
+  if (!sort) return options
+  const next: Array<RsSelectOption | RsSelectOptionGroup> = []
+  const flats: RsSelectOption[] = []
+  const flushFlats = () => {
+    if (!flats.length) return
+    next.push(...[...flats].sort(sort))
+    flats.length = 0
+  }
+  for (const item of options) {
+    if (isSelectOptionGroup(item)) {
+      flushFlats()
+      next.push({ label: item.label, options: [...item.options].sort(sort) })
+    } else {
+      flats.push(item)
+    }
+  }
+  flushFlats()
+  return next as RsSelectOptions
+}
+
+export function splitByTokenSeparators(raw: string, separators: string[]): string[] | null {
+  if (!separators.length) return null
+  const found = separators.find((sep) => sep && raw.includes(sep))
+  if (!found) return null
+  return raw.split(found)
 }

package/src/components/split-pane-utils.ts

@@ -1,15 +1,23 @@
 /** 面板分割方向：horizontal 左右排布（拖动横向）· vertical 上下排布（拖动纵向） */
 export type RsSplitOrientation = 'horizontal' | 'vertical'
 
-/** 单个面板定义；尺寸单位统一为「占比百分比」(0~100) */
+/** 面板尺寸：数字为占比百分比；'auto' 按内容自适应（不占百分比配额） */
+export type RsSplitPaneSize = number | 'auto'
+
+/** 单个面板定义；百分比尺寸单位为 0~100 */
 export interface RsSplitPaneItem {
   /** 唯一标识，用于插槽名与 v-model:sizes 的顺序映射 */
   key: string
-  /** 初始尺寸（百分比）；缺省时在剩余空间内均分 */
-  size?: number
-  /** 最小尺寸（百分比），默认 0 */
+  /**
+   * 初始尺寸
+   * - number：占比百分比
+   * - 'auto'：按内容自适应（flex-basis: auto）
+   * - 缺省：在「非 auto」面板的剩余百分比内均分
+   */
+  size?: RsSplitPaneSize
+  /** 最小尺寸（百分比），默认 0；auto 面板可作为 min-height/min-width % */
   min?: number
-  /** 最大尺寸（百分比），默认 100 */
+  /** 最大尺寸（百分比），默认 100；auto 面板可作为 max-height/max-width % */
   max?: number
   /** 是否可折叠：拖动越过阈值时吸附到 collapsedSize */
   collapsible?: boolean
@@ -36,6 +44,16 @@ export function roundSize(value: number, precision = 4): number {
   return Math.round(value * factor) / factor
 }
 
+/** 是否为内容自适应尺寸 */
+export function isRsSplitPaneAutoSize(size: RsSplitPaneSize | undefined): size is 'auto' {
+  return size === 'auto'
+}
+
+/** 各面板是否声明为 auto（忽略受控 provided 时的瞬时物化） */
+export function resolveSplitAutoFlags(panes: RsSplitPaneItem[]): boolean[] {
+  return panes.map((pane) => isRsSplitPaneAutoSize(pane.size))
+}
+
 /** 将面板定义解析为规范化约束，保证 0 ≤ min ≤ max ≤ 100 且 collapsedSize ≤ min */
 export function resolveSplitConstraints(panes: RsSplitPaneItem[]): RsSplitConstraint[] {
   return panes.map((pane) => {
@@ -65,8 +83,8 @@ function rescaleTo100(sizes: number[]): number[] {
 }
 
 /**
- * 计算初始尺寸数组（总和 100）。
- * 优先使用 provided（受控值），其次面板自身的 size，未指定的项在剩余空间内均分。
+ * 计算初始尺寸数组（非 auto 面板总和 100；auto 位为 0 占位，样式层不使用 flex-grow）。
+ * 优先使用 provided（受控值），其次面板自身的 number size，未指定的非 auto 项在剩余空间内均分。
  */
 export function normalizeSplitSizes(
   panes: RsSplitPaneItem[],
@@ -75,18 +93,53 @@ export function normalizeSplitSizes(
   const count = panes.length
   if (count === 0) return []
 
+  const autoFlags = resolveSplitAutoFlags(panes)
+  // 受控 sizes 一旦提供完整数组，视为已全部物化为百分比（含原 auto）
+  const fullyControlled =
+    Array.isArray(provided) &&
+    provided.length === count &&
+    provided.every((value) => typeof value === 'number' && Number.isFinite(value))
+
+  if (fullyControlled) {
+    return rescaleTo100(provided!.map((value) => Math.max(0, value))).map((value) =>
+      roundSize(value),
+    )
+  }
+
   const seed: (number | null)[] = panes.map((pane, index) => {
-    const candidate = provided?.[index] ?? pane.size
+    if (autoFlags[index]) return 0
+    const candidate = provided?.[index] ?? (typeof pane.size === 'number' ? pane.size : null)
     return typeof candidate === 'number' && Number.isFinite(candidate)
       ? Math.max(0, candidate)
       : null
   })
 
-  const missing = seed.filter((value) => value === null).length
-  const knownSum = seed.reduce<number>((acc, value) => acc + (value ?? 0), 0)
+  const flexibleIndices = panes
+    .map((_, index) => index)
+    .filter((index) => !autoFlags[index])
+
+  if (flexibleIndices.length === 0) {
+    // 全部 auto：占位全 0，由内容撑开
+    return panes.map(() => 0)
+  }
+
+  const missing = flexibleIndices.filter((index) => seed[index] === null).length
+  const knownSum = flexibleIndices.reduce<number>((acc, index) => acc + (seed[index] ?? 0), 0)
   const each = missing > 0 ? Math.max(0, 100 - knownSum) / missing : 0
-  const filled = seed.map((value) => value ?? each)
-  return rescaleTo100(filled).map((value) => roundSize(value))
+
+  const filled = seed.map((value, index) => {
+    if (autoFlags[index]) return 0
+    return value ?? each
+  })
+
+  // 只对非 auto 部分缩放到 100
+  const flexibleValues = flexibleIndices.map((index) => filled[index] ?? 0)
+  const scaledFlexible = rescaleTo100(flexibleValues)
+  const next = filled.slice()
+  flexibleIndices.forEach((paneIndex, i) => {
+    next[paneIndex] = roundSize(scaledFlexible[i] ?? 0)
+  })
+  return next
 }
 
 /** 判断某面板当前是否处于折叠态 */

package/src/components/table/RsTableBody.vue

@@ -0,0 +1,217 @@
+<script setup lang="ts" generic="T extends import('../table-utils').RsTableRowData">
+/**
+ * RsTable 表体视图：通过 ViewContext inject 取状态（多表互不串扰）。
+ * 行级 v-memo 保留，避免抽离后丢失细粒度跳过渲染。
+ */
+import { isTableRowDisabled, resolveEntryKey } from '../table-utils'
+import type { RsTableRowEntry } from '../table-utils'
+import RsTableBodyRow from './RsTableBodyRow.vue'
+import { useRsTableView } from './rs-table-view-context'
+
+const view = useRsTableView<T>()
+
+type RowEntry = Extract<RsTableRowEntry<T>, { type: 'row' }>
+
+function editingColKeyFor(entry: RowEntry): string | null {
+  const key = view.rowKeyFor(entry)
+  return view.editingCell?.rowKey === key ? view.editingCell.colKey : null
+}
+
+function focusColKeyFor(entry: RowEntry): string | null {
+  const key = view.rowKeyFor(entry)
+  return view.focusCell?.rowKey === key ? view.focusCell.colKey : null
+}
+
+function memoEditingDraft(entry: RowEntry): string {
+  return view.editingCell?.rowKey === view.rowKeyFor(entry) ? view.editingDraft : ''
+}
+</script>
+
+<template>
+  <tbody
+    @pointerover.passive="view.onBodyPointerOver($event)"
+    @pointerout.passive="view.onBodyPointerOut($event)"
+  >
+    <tr v-if="view.loading">
+      <td class="rs-table__empty" :colspan="view.bodyColspan">
+        <div class="rs-table__empty-content" :style="view.emptyContentStyle">
+          {{ view.bodyLabels.loading }}
+        </div>
+      </td>
+    </tr>
+    <tr v-else-if="!view.hasData">
+      <td class="rs-table__empty" :colspan="view.bodyColspan">
+        <div class="rs-table__empty-content" :style="view.emptyContentStyle">
+          <slot name="empty">{{ view.bodyLabels.empty }}</slot>
+        </div>
+      </td>
+    </tr>
+    <template v-else>
+      <tr
+        v-if="view.virtualScrollEnabled && view.virtualSlice.paddingTop > 0"
+        class="rs-table__virtual-pad"
+      >
+        <td :colspan="view.bodyColspan" :style="{ height: `${view.virtualSlice.paddingTop}px` }" />
+      </tr>
+      <template
+        v-for="entry in view.visibleEntries"
+        :key="resolveEntryKey(entry, view.rowKey)"
+      >
+        <tr v-if="entry.type === 'group'" class="rs-table__group-row">
+          <td class="rs-table__group-cell" :colspan="view.bodyColspan">
+            <slot name="group" :key="entry.key" :label="entry.label">
+              {{ entry.label }}
+            </slot>
+          </td>
+        </tr>
+        <tr v-else-if="entry.type === 'expand'" class="rs-table__expand-row">
+          <td class="rs-table__expand-cell" :colspan="view.bodyColspan">
+            <slot name="expand" :row="entry.row" :index="entry.rowIndex" />
+          </td>
+        </tr>
+        <RsTableBodyRow
+          v-else
+          v-memo="[
+            view.rowKeyFor(entry),
+            entry.row,
+            view.isRowSelected(entry),
+            view.isRowIndeterminate(entry),
+            view.isRowExpanded(entry),
+            view.isHighlighted(view.rowKeyFor(entry)),
+            view.rowEditPending(entry),
+            view.stagedMapSize,
+            memoEditingDraft(entry),
+            view.activeEditCellKey,
+            view.activeFocusCellKey,
+            view.activeErrorMapSize,
+            view.activeValidatingMapSize,
+            view.dragRowKeys.join(','),
+            view.dropRowTargetKey,
+            view.dropRowPosition,
+            view.columnPadLeft,
+            view.columnPadRight,
+            view.treeDepthOf(entry),
+            view.canExpandRow(entry),
+            view.treeLoadingKeySet.has(view.rowKeyFor(entry)),
+            view.visibleDataColumns.map((c) => c.key).join('\0'),
+            view.instanceId,
+          ]"
+          :row="entry.row"
+          :row-index="entry.rowIndex"
+          :row-key="view.rowKeyFor(entry)"
+          :columns="view.visibleDataColumns"
+          :column-pad-left="view.columnPadLeft"
+          :column-pad-right="view.columnPadRight"
+          :column-td-class-map="view.columnTdClassMap"
+          :column-style-map="view.columnStyleMap"
+          :show-row-drag-handle="view.showRowDragHandle"
+          :expandable="view.detailExpandable"
+          :tree-mode="view.treeMode"
+          :tree-depth="view.treeDepthOf(entry)"
+          :tree-has-children="view.canExpandRow(entry)"
+          :tree-indent="view.treeIndentPx"
+          :tree-column-key="view.treeExpandColumnKey"
+          :tree-loading="view.treeLoadingKeySet.has(view.rowKeyFor(entry))"
+          :selectable="view.showSelectColumn"
+          :show-index="view.showIndexColumn"
+          :show-edit-gutter="view.showEditGutterColumn"
+          :striped="view.striped"
+          :selection-type="view.selectionType"
+          :is-radio-selection="view.isRadioSelection"
+          :table-editable="view.editable"
+          :edit-trigger="view.editTrigger"
+          :row-commit="view.rowCommit"
+          :allow-null="view.allowNull"
+          :focus-mode="view.editFocusMode"
+          :null-label="view.nullLabel"
+          :show-row-status="view.showRowStatusColumn"
+          :selected="view.isRowSelected(entry)"
+          :indeterminate="view.isRowIndeterminate(entry)"
+          :highlighted="view.isHighlighted(view.rowKeyFor(entry))"
+          :expanded="view.isRowExpanded(entry)"
+          :disabled="isTableRowDisabled(entry.row)"
+          :row-drag-by-row="view.isRowDragByRow(entry)"
+          :dragging="view.isRowDragging(entry)"
+          :drop-target="view.isRowDropTarget(entry)"
+          :drop-position="view.isRowDropTarget(entry) ? view.dropRowPosition : null"
+          :drag-lead-style="view.dragLeadStyle"
+          :expand-lead-style="view.expandLeadStyle"
+          :select-lead-style="view.selectLeadStyle"
+          :index-lead-style="view.indexLeadStyle"
+          :gutter-lead-style="view.gutterLeadStyle"
+          :can-expand="view.canExpandRow(entry)"
+          :can-select="view.canSelectRow(entry)"
+          :row-edit-pending="view.rowEditPending(entry)"
+          :row-dirty="view.isRowDirty(view.rowKeyFor(entry))"
+          :show-gutter-rollback="view.rowCommit || view.isExternalRowPending(entry)"
+          :editing-col-key="editingColKeyFor(entry)"
+          :focus-col-key="focusColKeyFor(entry)"
+          :has-column-slot="view.hasColumnSlot"
+          :has-edit-slot="view.hasEditSlot"
+          :cell-tooltip-enabled="view.cellTooltipEnabled"
+          :cell-tooltip-mode="view.cellTooltipMode"
+          :cell-tooltip-text="view.cellTooltipText"
+          :cell-tooltip-fallback-title="view.cellTooltipFallbackTitle"
+          :get-cell-draft="view.getCellDraft"
+          :is-cell-dirty="view.isCellDirty"
+          :get-cell-error="view.getCellError"
+          :is-cell-validating="view.isCellValidating"
+          :drag-row-label="view.bodyLabels.dragRow"
+          :expand-row-label="view.bodyLabels.expandRow"
+          :collapse-row-label="view.bodyLabels.collapseRow"
+          :select-row-label="view.bodyLabels.selectRow"
+          :row-commit-label="view.bodyLabels.rowCommit"
+          :row-rollback-label="view.bodyLabels.rowRollback"
+          :gutter-commit-hint="view.bodyLabels.gutterCommit"
+          @click="view.onRowClick(entry, $event)"
+          @mousedown="view.onRowSelectMouseDown($event)"
+          @cell-click="(colKey, event) => view.onCellClick(entry, colKey, event)"
+          @cell-dblclick="(colKey, event) => view.onCellDblclick(entry, colKey, event)"
+          @cell-contextmenu="(colKey, event) => view.onCellContextmenu(entry, colKey, event)"
+          @dblclick="view.onRowDblclick(entry, $event)"
+          @contextmenu="view.onRowContextmenu(entry, $event)"
+          @dragover="view.onRowDragOver(entry, $event)"
+          @dragleave="view.onRowDragLeave($event)"
+          @drop="view.onRowDrop(entry, $event)"
+          @row-drag-start="view.onRowDragStart(entry, $event)"
+          @row-drag-end="view.onRowDragEnd()"
+          @toggle-expand="view.onToggleExpand(entry)"
+          @toggle-select="view.onToggleSelect(entry)"
+          @cell-start-edit="view.onCellStartEdit(entry, $event)"
+          @cell-commit="(colKey, value) => view.onCellCommit(entry, colKey, value)"
+          @cell-cancel="view.onCellCancel(entry, $event)"
+          @cell-update-draft="(colKey, value) => view.onCellUpdateDraft(entry, colKey, value)"
+          @cell-navigate="(colKey, direction) => view.onCellNavigate(entry, colKey, direction)"
+          @row-commit="view.onRowCommit(entry)"
+          @row-rollback="view.onRowRollback(entry)"
+          @gutter-commit="view.onGutterCommit(entry)"
+        >
+          <template v-for="column in view.visibleDataColumns" #[column.key]="slotProps">
+            <slot :name="column.key" v-bind="slotProps" />
+          </template>
+          <template
+            v-for="column in view.visibleDataColumns"
+            :key="`edit-${column.key}`"
+            #[`edit-${column.key}`]="slotProps"
+          >
+            <slot :name="`edit-${column.key}`" v-bind="slotProps" />
+          </template>
+        </RsTableBodyRow>
+      </template>
+      <tr
+        v-if="view.virtualScrollEnabled && view.virtualSlice.paddingBottom > 0"
+        class="rs-table__virtual-pad"
+      >
+        <td
+          :colspan="view.bodyColspan"
+          :style="{ height: `${view.virtualSlice.paddingBottom}px` }"
+        />
+      </tr>
+      <tr v-if="view.infinite && view.loadingMore">
+        <td class="rs-table__empty rs-table__empty--more" :colspan="view.bodyColspan">
+          {{ view.bodyLabels.loadingMore }}
+        </td>
+      </tr>
+    </template>
+  </tbody>
+</template>