LegacyYDataTable

适用范围：Legacy Admin Kit / Schema 与旧 admin-vue。新 admin-nuxtui 的开发入口见管理端 Nuxt UI 指南。

定位 / Owner

LegacyYDataTable 是 Admin Kit 的 Data Workbench projection。它组合 Data Workbench runtime、query/filter、table、selection、pagination、editor/overlay、summary/custom view 等能力，但 Data Workbench/TanStack 等现有 state owner 仍保持 authoritative。

任务级选择、完整 anatomy 与 helper 边界见 Data Workbench Application UI。本文只维护 LegacyYDataTable 的组件 API。

Public API

可运行示例

查询、排序与选择

打开示例后搜索 ITEM-24；清空查询后翻页、点击编号排序并勾选。可切换全屏体验完整表格，窄屏自动采用卡片。

查看同源 Vue 代码

<script setup lang="ts">
import { ref } from 'vue'
import { YButton, YModal, LegacyYDataTable, type YDataRuntimeInput } from '@yoyoboot/yoyo-admin-kit'
import { compileYoyoPageSchema } from '@yoyoboot/yoyo-admin-schema'

const selection = ref('')
const open = ref(false)
const rows = Array.from({ length: 24 }, (_, index) => ({ id: `ITEM-${String(index + 1).padStart(2, '0')}`, name: `演示条目 ${index + 1}` }))
const input: YDataRuntimeInput = {
  environment: 'test',
  page: compileYoyoPageSchema({
    schemaVersion: 1, pageKind: 'query', pageKey: 'docs-data-workbench', title: '演示目录',
    query: { datasource: 'docs.items', fields: [{ key: 'keyword', kind: 'text', label: '查找条目' }], presentation: { pageSize: 10 } },
    table: { rowKey: 'id', columns: [
      { key: 'id', title: '编号', renderer: 'text', sortable: true, role: 'identity', priority: 'high', mobilePlacement: 'headline' },
      { key: 'name', title: '名称', renderer: 'text', role: 'key', priority: 'high', mobilePlacement: 'supporting' },
    ] }, actions: [],
  }).ir,
  binding: { kind: 'fixture', datasource: {
    id: 'docs.items',
    async query({ state, filter, signal }) {
      if (signal.aborted) throw new DOMException('Aborted', 'AbortError')
      const keyword = String(filter.keyword ?? '').trim().toLowerCase()
      const matching = rows.filter(row => `${row.id} ${row.name}`.toLowerCase().includes(keyword))
      if (state.sorting) matching.sort((a, b) => a.id.localeCompare(b.id) * (state.sorting === 'id desc' ? -1 : 1))
      return { ...state, items: matching.slice(state.skipCount, state.skipCount + state.pageSize), totalCount: matching.length, pageCount: Math.max(1, Math.ceil(matching.length / state.pageSize)) }
    },
  } },
}
</script>

<template>
  <YButton type="button" @click="open = true">打开数据工作台示例</YButton>
  <YModal v-model:open="open" title="数据工作台示例" size="lg" allow-fullscreen>
    <LegacyYDataTable :input="input" @selection-change="selection = JSON.stringify($event)" />
    <template #actions><YButton type="button" @click="open = false">完成体验</YButton></template>
  </YModal>
  <p role="status">选择通知：{{ selection || '尚未选择' }}</p>
  <p>24 条内存数据。查询、排序、分页和选择由正式 runtime 管理；datasource 仅执行查询。此例不连接数据库、不证明真实业务写入。</p>
</template>

示例与展示源码同源，消费公开 Kit/Schema 入口；不复制 Product Catalog 的业务工作流。真实消费说明见 Data Workbench，作者接入见 Authoring，安装与发布状态见 External Consumption。本地示例不表示当前源码已发布 npm。

input: YDataRuntimeInput
presentation?: YoyoAdminKitDataTablePresentation

'selectionChange': [selection: YoyoAdminKitSelectionSnapshot]

业务页面不通过大量 Vue props 手工组装表格，而是提供编译后的 Page Schema/runtime binding 与可选 presentation 文案/formatting。selectionChange 是 runtime 权威 selection 的只读通知，用于选择任务等外层 composition 观察结果；它不是第二个 selection state owner。

什么时候使用

• 标准后台查询目录、CRUD、selection/bulk action、responsive Data Workbench。
• 需要 Schema + Data Workbench 的 URL/query/sort/pagination/action consistency。

不什么时候使用

• 简单静态内容不要为了“统一”硬套 LegacyYDataTable。
• feature 不要在 LegacyYDataTable 外再建一套 filter/query/pagination state。
• 不要复制 Product Catalog fixture 只为展示组件。

Workbench 与正式示例

组件工作台不复制第二套 Data Workbench setup；请直接打开「前端模块演示 → 列表演示 → 商品目录」。该页面是当前正式 fixture consumer，可观察：

• query/filter control plane；
• table information hierarchy；
• sorting/pagination；
• responsive presentation；
• selection/bulk actions；
• custom view/summary/editor/overlay 等 shared composition。

Composition

Page Schema + binding
        ↓
Data Workbench runtime/state owner
        ↓
LegacyYDataTable projection
        ↓
shared Application Composition

Live Workbench

Admin Vue 稳定路径：

/frontend-module-demo/component-workbench/data-table

该路径只标识 live scenario，不固化部署 Host；官方文档站与 Admin Vue 可以独立部署。

Verification / Source

• packages/yoyo-admin/admin-kit/src/kit/data/LegacyYDataTable.vue
• Product Catalog fixture consumer
• Data Workbench workbench focused tests
• Tenant List / Product Catalog real browser evidence