{"id":22994222,"url":"https://github.com/yangfei4913438/react-window-table","last_synced_at":"2025-10-16T09:32:16.125Z","repository":{"id":112524780,"uuid":"526822672","full_name":"yangfei4913438/react-window-table","owner":"yangfei4913438","description":"基于 react-window 库编写的一个超灵活的表格。","archived":false,"fork":false,"pushed_at":"2024-11-17T04:39:32.000Z","size":20683,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-13T22:39:45.971Z","etag":null,"topics":["cva","dnd-kit","mockjs","react-window","shadcn","table","tailwindcss","vite"],"latest_commit_sha":null,"homepage":"https://table.yangfei.vip/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yangfei4913438.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-20T04:17:26.000Z","updated_at":"2024-11-17T04:39:58.000Z","dependencies_parsed_at":"2023-12-30T06:26:48.408Z","dependency_job_id":"bc3a1c4c-e094-46f0-a855-2cd0c549c46c","html_url":"https://github.com/yangfei4913438/react-window-table","commit_stats":{"total_commits":74,"total_committers":1,"mean_commits":74.0,"dds":0.0,"last_synced_commit":"16d7c2644138ae33bd8d47868f502de6cc203c69"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yangfei4913438/react-window-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangfei4913438%2Freact-window-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangfei4913438%2Freact-window-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangfei4913438%2Freact-window-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangfei4913438%2Freact-window-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yangfei4913438","download_url":"https://codeload.github.com/yangfei4913438/react-window-table/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangfei4913438%2Freact-window-table/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279173278,"owners_count":26119039,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-16T02:00:06.019Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cva","dnd-kit","mockjs","react-window","shadcn","table","tailwindcss","vite"],"created_at":"2024-12-15T05:17:31.687Z","updated_at":"2025-10-16T09:32:16.105Z","avatar_url":"https://github.com/yangfei4913438.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 项目说明：\n一个基于 react-window 的全功能表单组件。\n\n### 提示\n\n表格可以直接在右上角 About 里面的找到链接，点击就能查看在线演示。\n\n如果你想要下载到本地尝试，可以直接复制 `dev/demo` 这个目录下的代码到你的项目里，\n\n但是记得更换 `dev/demo/Table.tsx` 里面的表格引入代码。\n\n`import { VirtualTable } from 'lib';` 这行代码替换成 `import { VirtualTable } from '@yf-ui/react-window-table';`\n\n因为这个文件是直接引用库代码的，你得改成下载的包名，也就是 `@yf-ui/react-window-table`\n\n`import { Button } from 'ui/button';` 这行代码，换成你用的 button 组件。 \n\n如果你还没有，当然也可以从源码里面, 直接复制 button 组件使用，路径 `lib/ui/button.tsx`，一样很方便。\n\n还有就是，表格组件是不支持服务端渲染的。 如果要在服务端渲染组件内引入，请注意渲染成非 ssr 组件。\n\nnext 里面的非 ssr 组件引入方式。\n```typescript\nimport dynamic from \"next/dynamic\";\n\nconst Tab = dynamic(() =\u003e import('./tab'), { ssr: false })\n```\n\n其他项目开始之前，准备把这个项目优化一下：\n\n- [x] 全面移除 antd 相关代码\n- [x] 引入 shadcn 相关生态\n- [x] 回归传统的组件开发模式\n- [x] 移除 storybook 相关代码\n\n---\n\n### 安装\n\n```shell\nnpm install @yf-ui/react-window-table\n```\n\n或\n\n```shell\nyarn add @yf-ui/react-window-table\n```\n\n### 启动开发环境\n\n```shell\nyarn \nyarn dev\n```\n\n#### 添加 shadcn 的 ui组件\n\n```shell\n# 添加 button 组件\nyarn ui button\n```\n\n执行后，button 组件的代码自动出现在 lib/ui 目录下。\n\n\u003e 补充说明：cva 官方提供了，常见 ide 中 tailwind 类名的正则提示支持。如果你的 ide 不支持，你可以去 cva 官网寻求支持。\n\n\n---\n\n\n### 重构计划\n\n- [ ] 抽离拖拽组件，降低耦合度，使用封装好的拖拽组件，进行处理\n- [ ] 增加自定义增删列功能，也就是说，用户可以直接在界面操作增加列，减少列\n- [ ] 单元格配置化封装，增强单元格的扩展能力和想象力\n- [ ] 支持基础表格显示，增加简单表格的使用场景\n- [ ] 支持纯数据结构的参数传入，生成表格，降低使用难度\n- [ ] 支持css全局变量，进行样式调整\n\n---\n\n### 功能特点\n\n- [x] 表格渲染，使用虚拟列表，支持滚动分页请求数据。\n- [x] 滚动分页的触发位置，支持自定义。\n- [x] 每个表头的单元格，自定义渲染\n- [x] 每个列的单元格，自定义单独渲染, 函数渲染，返回参数：行数据、行索引。\n- [x] 支持排序组件，自定义渲染，多列排序，支持主动开启关闭。\n- [x] 支持筛选组件，自定义渲染，多列筛选，支持主动开启关闭。\n- [x] 表头宽度，可拖拽，支持自定义默认宽度, 支持关闭拖拽\n- [x] 表格支持，行在滚动的时候，渲染不一样的内容\n- [x] 表格行高，表头行高，都支持自定义高度\n- [x] 文字布局，支持设置，左对齐和居中对齐\n- [x] 支持表头行的样式自定义\n- [x] 支持表格行的样式自定义，使用函数渲染，返回参数：行索引。\n- [x] 表头列的顺序支持拖拽变更，支持开关该功能\n- [x] 支持行选中，行反选，全部选中，全部反选。支持主动启用关闭该功能。\n- [x] 支持分别或同时锁定左右 n 列，传参数生效。\n- [x] 表格支持，顶部 n 列锁定，传参数生效。 \n- [x] 支持自定义空态图渲染，传参数生效。\n- [x] 表格支持多行标题，传参数生效。（注: 多行之间的列存在上下级的树形关系，列拖拽不能跨越父分支）。\n- [x] 表格支持行点击事件，传参数生效。\n- [x] 支持分组展示，需要自己在外部定义渲染逻辑。\n- [x] 行选中，默认显示行号，hover之后显示checkbox, 自身被选中或者子元素被选中，则checkbox选项框会持续显示。\n\n---\n\n### 其他说明\n\n如果大家发现什么 bug, 可以给我提 issue，看到了我会安排时间修复。\n\n当然了，更欢迎大家给我提 pr, 如果没啥问题我就会合并的。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyangfei4913438%2Freact-window-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyangfei4913438%2Freact-window-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyangfei4913438%2Freact-window-table/lists"}