{"_id":"@angineer/table-ui","_rev":"4-636306d03060904a2aa7b1257ccb1175","name":"@angineer/table-ui","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"@angineer/table-ui","version":"0.1.0","license":"MIT","_id":"@angineer/table-ui@0.1.0","maintainers":[{"name":"0mao0","email":"orangen@aliyun.com"}],"dist":{"shasum":"5d501f777561f1eb6b207b0871858620359e836d","tarball":"https://registry.npmjs.org/@angineer/table-ui/-/table-ui-0.1.0.tgz","fileCount":6,"integrity":"sha512-c8QILnBnJ5QaXMzD7rdxDzjdMCt2z5dOlIwiTcHECJMqWnICEVaXccaG4I70s4hC3WkQY9Jh2YWxn/6QInoS2Q==","signatures":[{"sig":"MEQCIFCDJaBMf18fp69q53rF44VR3oGApdMyYLBNFsOidFLQAiBWmJ4+6Iuuxcqzj2gUnqqoRMdZ8M/2fdTpZJamdhclig==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27456},"main":"./src/index.ts","type":"module","types":"./src/index.ts","exports":{".":{"types":"./src/index.ts","import":"./src/index.ts"}},"scripts":{"typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"0mao0","email":"orangen@aliyun.com"},"_npmVersion":"11.4.2","description":"通用表格组件库（Vue 3 + ant-design-vue）：配置驱动的 DataTable——筛选栏、列宽拖拽持久化、容器自适应填满，外加配套卡片容器 SectionCard。","directories":{},"_nodeVersion":"24.3.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"3.5.41","less":"^4.2.0","vue-tsc":"^2.0.6","typescript":"~5.4.0","ant-design-vue":"4.2.6"},"peerDependencies":{"vue":"3.5.41","ant-design-vue":"4.2.6"},"_npmOperationalInternal":{"tmp":"tmp/table-ui_0.1.0_1787835472161_0.25481197174840187","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@angineer/table-ui","version":"0.1.1","license":"MIT","_id":"@angineer/table-ui@0.1.1","maintainers":[{"name":"0mao0","email":"orangen@aliyun.com"}],"dist":{"shasum":"c3126553f18cdeaf13a6853ea03eba553139253a","tarball":"https://registry.npmjs.org/@angineer/table-ui/-/table-ui-0.1.1.tgz","fileCount":6,"integrity":"sha512-FU6flyNDl+LrmVnOhALCp3Sp1Kliaf/nIbUiaPrgTDQD8C3Da04+85ru+EBXlsyJthOnMun2goFkJ6Q8ayWyTg==","signatures":[{"sig":"MEYCIQDkC+lzMC7ujq5fQ62p5W9rIePC8CNhgxQXGj2Xg8dDLQIhAL9wp+ob/g69w2Q14alfeoJgZLcpoc0MNti9VofteVP7","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27459},"main":"./src/index.ts","type":"module","types":"./src/index.ts","exports":{".":{"types":"./src/index.ts","import":"./src/index.ts"}},"scripts":{"typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"0mao0","email":"orangen@aliyun.com"},"_npmVersion":"11.4.2","description":"通用表格组件库（Vue 3 + ant-design-vue）：配置驱动的 DataTable——筛选栏、列宽拖拽持久化、容器自适应填满，外加配套卡片容器 SectionCard。","directories":{},"_nodeVersion":"24.3.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"3.5.41","less":"^4.2.0","vue-tsc":"^2.0.6","typescript":"~5.4.0","ant-design-vue":"4.2.6"},"peerDependencies":{"vue":"3.5.41","ant-design-vue":"4.2.6"},"_npmOperationalInternal":{"tmp":"tmp/table-ui_0.1.1_1787835961461_0.2795204348356153","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@angineer/table-ui","version":"0.1.2","license":"MIT","_id":"@angineer/table-ui@0.1.2","maintainers":[{"name":"0mao0","email":"orangen@aliyun.com"}],"homepage":"https://github.com/0mao0/angineer-table-ui#readme","bugs":{"url":"https://github.com/0mao0/angineer-table-ui/issues"},"dist":{"shasum":"016ffff7678da28a009b30ad9a787003dc8f10ee","tarball":"https://registry.npmjs.org/@angineer/table-ui/-/table-ui-0.1.2.tgz","fileCount":6,"integrity":"sha512-inF2QL93GgqhyDybx3zD8pRlrJSUile87+kGtXX9ix4w+nf3dwvoZ7UVHYz8ZoFhtnaoU5AVZ61dHrnMlH/smg==","signatures":[{"sig":"MEQCIB18dOcmS3Y8Yz5gYJ+56UX/lQBkLdXxspJ+Do58119hAiBLNd9vWqYTcjOp5Bw3bEJel6w89rf78K12ZqikTpNy0Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@angineer%2ftable-ui@0.1.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":27138},"main":"./src/index.ts","type":"module","types":"./src/index.ts","exports":{".":{"types":"./src/index.ts","import":"./src/index.ts"}},"gitHead":"59caad78b018b2db934fbe7eeee9aad5877a2e84","scripts":{"typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:92f8deb9-cfed-4940-99d6-2633c768aace"}},"repository":{"url":"git+https://github.com/0mao0/angineer-table-ui.git","type":"git"},"_npmVersion":"11.17.0","description":"通用表格组件库（Vue 3 + ant-design-vue）：配置驱动的 DataTable——筛选栏、列宽拖拽持久化、容器自适应填满，外加配套卡片容器 SectionCard。","directories":{},"_nodeVersion":"24.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"3.5.41","less":"^4.2.0","vue-tsc":"^2.0.6","typescript":"~5.4.0","ant-design-vue":"4.2.6"},"peerDependencies":{"vue":"3.5.41","ant-design-vue":"4.2.6"},"_npmOperationalInternal":{"tmp":"tmp/table-ui_0.1.2_1787876889073_0.024441438041914454","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"_id":"@angineer/table-ui@0.1.3","bugs":{"url":"https://github.com/0mao0/angineer-table-ui/issues"},"dist":{"shasum":"7823bf427d8bd4b9bb7f3b745cd72a3a1ae5e8fd","tarball":"https://registry.npmjs.org/@angineer/table-ui/-/table-ui-0.1.3.tgz","fileCount":6,"integrity":"sha512-LQaM0SXgpdegH1T2uLD/xftoR+XrQdm3do7cDenzDOFkefMG6gOF2L/be3C348zbbq4ibuIPEZIFvXcUa496vw==","signatures":[{"sig":"MEYCIQDDU91OsL3Fli+3TiK0wjt8Dmwx7EOY5M6yGgV+8jjgeQIhALzuyVhGAFz0rJRjVd/ht0Ha+Z/b9v9Tub8OneK6+xe+","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDT/mVqn9/Rjz3AdSKuvCbE6q9ETaIPsXTiV6w7lkYMcgIhAI73SynKP+bXaEedrs+v8kBiJcQwoQ7qizHROQGUcB6l"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@angineer%2ftable-ui@0.1.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":33673},"main":"./src/index.ts","name":"@angineer/table-ui","type":"module","types":"./src/index.ts","exports":{".":{"types":"./src/index.ts","import":"./src/index.ts"}},"gitHead":"d4b88943135f726d5dd11c341143454ce5fada20","license":"MIT","scripts":{"typecheck":"vue-tsc --noEmit"},"version":"0.1.3","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:92f8deb9-cfed-4940-99d6-2633c768aace"}},"homepage":"https://github.com/0mao0/angineer-table-ui#readme","repository":{"url":"git+https://github.com/0mao0/angineer-table-ui.git","type":"git"},"_npmVersion":"11.19.0","description":"通用表格组件库（Vue 3 + ant-design-vue）：配置驱动的 DataTable——筛选栏、列宽拖拽持久化、容器自适应填满，外加配套卡片容器 SectionCard。","directories":{},"maintainers":[{"name":"0mao0","email":"orangen@aliyun.com"}],"sideEffects":["**/*.css","**/*.less","**/styles/**"],"_nodeVersion":"24.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"3.5.41","less":"^4.2.0","vue-tsc":"^2.0.6","typescript":"~5.4.0","ant-design-vue":"4.2.6"},"peerDependencies":{"vue":"3.5.41","ant-design-vue":"4.2.6"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/table-ui_0.1.3_1789194819485_0.08786374764397342"}}},"time":{"created":"2026-08-27T12:57:52.006Z","modified":"2026-09-12T06:33:39.952Z","0.1.0":"2026-08-27T12:57:52.285Z","0.1.1":"2026-08-27T13:06:01.615Z","0.1.2":"2026-08-28T00:28:09.226Z","0.1.3":"2026-09-12T06:33:39.588Z"},"bugs":{"url":"https://github.com/0mao0/angineer-table-ui/issues"},"license":"MIT","homepage":"https://github.com/0mao0/angineer-table-ui#readme","repository":{"url":"git+https://github.com/0mao0/angineer-table-ui.git","type":"git"},"description":"通用表格组件库（Vue 3 + ant-design-vue）：配置驱动的 DataTable——筛选栏、列宽拖拽持久化、容器自适应填满，外加配套卡片容器 SectionCard。","maintainers":[{"name":"0mao0","email":"orangen@aliyun.com"}],"readme":"# @angineer/table-ui\n\n通用表格组件库（Vue 3 + ant-design-vue）：配置驱动的 DataTable——筛选栏、列宽拖拽持久化、容器自适应填满，外加配套卡片容器 SectionCard。\n\n## 特性\n\n- **配置驱动筛选栏**：`filters` 声明式配置，支持 input / select（可多选）/ radio / switch 四种控件，`v-model:query` 输出查询条件\n- **列宽拖拽 + 持久化**：列声明 `resizable` 即可拖拽调宽，传入 `storageKey` 后列宽写入 localStorage，刷新不丢\n- **容器自适应填满**：`fillWidth` 开启时（默认）列总宽小于容器自动按比例摊开；`flex: true` 标记的弹性列优先吸收剩余宽度\n- **卡片容器模式**：默认把表格包进圆角卡片（内置 SectionCard），`:card=\"false\"` 即裸表格\n- **主题零配置**：颜色经 `var(--table-*, var(--语义变量, 默认值))` 双回退——跟随宿主主题（含 dark/light），无宿主变量时用内置默认值，也可覆盖 `--table-*` 单独定制表格\n- a-table 能力透传：展开行、行选择、行高亮、空态文案、分页约定（`showTotal` 默认\"共 N 条\"）\n\n## 安装\n\n已发布到 npm registry：\n\n```bash\npnpm add @angineer/table-ui\n```\n\n或从 GitHub 钉 tag 安装（源码同源）：`\"@angineer/table-ui\": \"github:0mao0/angineer-table-ui#v0.1.1\"`\n\n**环境要求**：`vue 3.5.41` + `ant-design-vue 4.2.6`（peerDependencies）。包为源码分发（无构建产物），宿主需用 Vite + `@vitejs/plugin-vue` 与 less 编译（与本组织其他 `*-ui` 包一致）。\n\n## 快速上手\n\n```vue\n<template>\n  <DataTable\n    v-model:query=\"query\"\n    :columns=\"columns\"\n    :data-source=\"users\"\n    row-key=\"id\"\n    :loading=\"loading\"\n    :filters=\"filters\"\n    :pagination=\"{ pageSize: 15 }\"\n    storage-key=\"my-users-table\"\n    @change=\"onTableChange\"\n  >\n    <template #bodyCell=\"{ column, record }\">\n      <template v-if=\"column.key === 'action'\">\n        <a @click=\"edit(record)\">编辑</a>\n      </template>\n    </template>\n  </DataTable>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { DataTable } from '@angineer/table-ui'\nimport type { DataTableColumn, DataTableFilter } from '@angineer/table-ui'\n\nconst columns: DataTableColumn[] = [\n  { key: 'name', title: '姓名', width: 200, resizable: true, flex: true },\n  { key: 'role', title: '角色', width: 120 },\n  { key: 'action', title: '操作', width: 100, fixed: 'right' },\n]\n\nconst filters: DataTableFilter[] = [\n  { key: 'keyword', type: 'input', placeholder: '搜索姓名/账号', width: 240 },\n  { key: 'role', type: 'select', placeholder: '角色', options: ['管理员', '编辑', '访客'] },\n  { key: 'tags', type: 'select', placeholder: '标签', multiple: true, options: [{ value: 'vip', label: 'VIP' }] },\n  { key: 'status', type: 'radio', options: [{ value: 'all', label: '全部' }, { value: 'on', label: '启用' }] },\n  { key: 'enabled', type: 'switch', label: '仅启用', checkedLabel: '是', uncheckedLabel: '否' },\n]\n\nconst query = ref<Record<string, any>>({})\nconst users = ref<Record<string, any>[]>([])\nconst loading = ref(false)\n\nfunction onTableChange(pagination: unknown, _filters: unknown, sorter: unknown) {\n  // a-table change 事件透传：分页/排序变化时重新拉数\n}\nfunction edit(record: Record<string, any>) { /* ... */ }\n</script>\n```\n\n## Props\n\n| Prop | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `columns` | `DataTableColumn[]` | 必填 | 列配置（透传 a-table 列属性，扩展见下表） |\n| `dataSource` | `Record<string, any>[]` | 必填 | 数据源 |\n| `rowKey` | `string \\| (record) => string` | 必填 | 行主键 |\n| `filters` | `DataTableFilter[]` | `[]` | 筛选栏配置，见下表 |\n| `query` | `Record<string, any>` | — | 查询条件，配合 `v-model:query` 双向绑定 |\n| `pagination` | `object \\| false` | `false` | a-table 分页配置；对象形式时默认补 `showSizeChanger: false` 与 `showTotal: 共 N 条` |\n| `loading` | `boolean` | `false` | 加载态 |\n| `card` | `boolean` | `true` | 是否包进卡片容器（内置 SectionCard） |\n| `fillWidth` | `boolean` | `true` | 列总宽小于容器时自动摊开填满 |\n| `storageKey` | `string` | `''` | 列宽持久化 key（localStorage：`angineer-datatable-cols:<storageKey>`） |\n| `emptyText` | `string` | `'暂无数据'` | 空态文案 |\n| `rowClassName` | `string \\| (record) => string` | `''` | 行级自定义 class（移动/选中高亮等） |\n| `expandable` / `rowSelection` | `object` | — | a-table 对应配置透传 |\n\n### DataTableColumn（在 a-table 列属性基础上扩展）\n\n| 字段 | 类型 | 默认 | 说明 |\n| --- | --- | --- | --- |\n| `key` | `string` | — | 列标识；参与列宽管理/持久化的列必须提供 |\n| `width` | `number` | `120` | 初始列宽（px） |\n| `minWidth` | `number` | `50` | 拖拽下限（px） |\n| `resizable` | `boolean` | `false` | 可拖拽调宽 |\n| `flex` | `boolean` | `false` | 弹性列：自适应填满时优先吸收剩余宽度 |\n| `fixed` | `'left' \\| 'right' \\| boolean` | — | 固定列（固定列不参与拖拽补偿与自适应缩放） |\n\n### DataTableFilter\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `key` | `string` | 查询条件字段名（`update:query` 输出的 key） |\n| `type` | `'input' \\| 'select' \\| 'radio' \\| 'switch'` | 控件类型 |\n| `placeholder` | `string` | input/select 占位文案 |\n| `width` | `number` | 控件宽度（px）；默认 input 220、select 120、多选 select 160 |\n| `options` | `Array<string \\| number \\| { value, label }>` | select/radio 的选项 |\n| `multiple` | `boolean` | select 多选模式 |\n| `label` | `string` | switch 左侧标签 |\n| `checkedLabel` / `uncheckedLabel` | `string` | switch 选中/未选中文案 |\n\n## 事件\n\n| 事件 | 签名 | 说明 |\n| --- | --- | --- |\n| `update:query` | `(q: Record<string, any>)` | 筛选栏任一控件变化即触发；空字符串归一为 `undefined` |\n| `change` | `(pagination, filters, sorter)` | a-table change 事件透传（分页/排序/列筛选变化） |\n\n## 插槽\n\n| 插槽 | 说明 |\n| --- | --- |\n| `bodyCell` | 单元格自定义渲染（a-table 同名机制，scope：`{ column, record, text, index }`） |\n| `toolbar` | 整体替换筛选栏 |\n| `toolbarExtra` | 筛选栏右侧追加内容（按钮等） |\n| `tableExtra` | 表格上方追加内容（卡片内侧/裸表格均生效） |\n| `expandedRowRender` | 展开行渲染（配合 `expandable`） |\n| `emptyText` | 空态自定义内容 |\n\n## 主题定制\n\n组件颜色全部经双回退解析：`var(--table-*, var(--宿主语义变量, 内置默认值))`。\n即：默认跟随宿主全局主题（含 `[data-theme=\"dark\"]` 下的暗色值），宿主无对应变量时使用内置默认值；想单独定制表格外观，在 `:root` 覆盖 `--table-*` 即可，无需导入任何样式文件。\n\n| 变量 | 跟随的宿主变量 | 内置默认值（light） |\n| --- | --- | --- |\n| `--table-card-bg` | `--card-bg` | `#ffffff` |\n| `--table-border-color` | `--border-color` | `rgba(0, 0, 0, 0.06)` |\n| `--table-divider-color` | `--divider-color` | `rgba(0, 0, 0, 0.08)` |\n| `--table-text-primary` | `--text-primary` | `rgba(0, 0, 0, 0.85)` |\n| `--table-text-secondary` | `--text-secondary` | `rgba(0, 0, 0, 0.65)` |\n| `--table-shadow-sm` | `--shadow-sm` | `0 1px 2px rgba(0, 0, 0, 0.06)` |\n| `--table-shadow-md` | `--shadow-md` | `0 4px 12px rgba(0, 0, 0, 0.08)` |\n\n## 导出\n\n```ts\nimport { DataTable, SectionCard } from '@angineer/table-ui'\nimport type { DataTableColumn, DataTableFilter } from '@angineer/table-ui'\n```\n\n## 仓库说明\n\n本仓库为独立发布仓，代码唯一真相源在 [AnGIneer](https://github.com/0mao0/AnGIneer) monorepo 的 `packages/table-ui`，经 `scripts/sync-standalone.ps1` 同步；版本以 git tag（vx.y.z）与 npm registry（`@angineer/table-ui`）同步发布。变更历史见 [CHANGELOG.md](./CHANGELOG.md)。\n","readmeFilename":"README.md"}