alibaba / ali-react-table Goto Github PK
View Code? Open in Web Editor NEWPerforment, flexible and modern React table component.
Home Page: https://ali-react-table.js.org/
License: MIT License
Performent, flexible and modern React table component.
Home Page: https://ali-react-table.js.org/
License: MIT License
表格能支持一下分页吗?
我发现用headerCellProps 在columns的配置中去处理,不太好处理,比如我的表头是动态的 每次在接口后去写入 不如像’getRowProps‘这个api类似处理方便,希望提供类似 getHeaderCellProps。谢谢!
看样式,应该没法做到和fusion的主题变量做融合吧
可以重写表格cell吗?和antd的component似的
ERROR in ./stories/pivot/pivot-utils.stories.tsx
Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.iterator' in 'E:\code\ali-react-table\stories\pivot'
@ ./stories/pivot/pivot-utils.stories.tsx 15:0-54
@ ./stories/pivot sync nonrecursive (?:pivot-utils.stories.tsx)$
@ ./.storybook/generated-stories-entry.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false
ERROR in ./stories/pivot/MinimumPivotTableDesigner.tsx
Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.iterator' in 'E:\code\ali-react-table\stories\pivot'
@ ./stories/pivot/MinimumPivotTableDesigner.tsx 11:0-54
@ ./stories/pivot/pivot-utils.stories.tsx
@ ./stories/pivot sync nonrecursive (?:pivot-utils.stories.tsx)$
@ ./.storybook/generated-stories-entry.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false
因为数据量大时想要一点一点请求表格数据,所以想要实现虚拟滚动+异步加载。
请教一下,如果想要实现异步加载该从哪里下手,暂时自己还没有思路。
(#^.^#)或者说后续版本是否考虑提供这个功能
现在只提供了拍平数据转换支持自定义parent_id
字段构建出树状结构,已有的树结构因为parent_id
不是children
导致无法直接使用源数据渲染,希望支持一下makeTreeModeTransform
添加parentId
缺少自定义拖动列宽,是否可以考虑支持下,这个场景用到的还是比较普遍的。谢谢!
苹果手机会出现表头是固定的,但表头下的内容单元格不会固定住。请问这个问题怎么解
在内部维护 hoverRowIndex / hoverRowKey 来记录鼠标悬停的行,避免因为行的消失或出现 导出高亮效果无法及时更新。
即下面代码中函数 onRowEnterOrLeave
在部分行消失或出现时 没有被正确触发。
ali-react-table/src/base-table/table.tsx
Lines 538 to 550 in e718a04
immer 现在只被用在了 commonTransforms.sort 中。这里可以改为手动操作数据结构,从而移除对 immer 的依赖
我想把表格默认的12px更改为14px,还请指教一下,谢谢
编译0.13.5版本报错
发现发布包里面的名称是:
ali-react-table-_tslib-8c532ff9.esm.js
v0.14 文档更新:
0.14 规划
ali-react-table/biz
,将原来从这里导出的符号移动到 ali-react-table
中
ali-react-table/biz
仍会被保留,但会添加 deprecation warning1.0 的规划
表格用到了一些较新的 JavaScript/CSS 特性,对浏览器的版本要求较高。需要整理一下哪些特性对浏览器的要求较高,看一下是否能够降低对浏览器的要求。
兼容性问题主要来源:
目前兼容结果:
我明天更新一下 0.14 版本吧,0.14 处理之后也许可以兼容 chrome49
Originally posted by @shinima in #69 (comment)
请问做了兼容chrome49的处理了吗?我们也是49,主要问题是不兼容sticky.谢谢!
实在抱歉又来打扰
因为需要兼容chrome49,期初看到chrome49不支持 sticky没很在意,本以为只是会没有吸顶效果,可以用fixed父容器替代……
但是真正运行在Chrome49以后发现报错:
在updateItemStore()
queryAll(...).forEach is not a function
难受啊 是否能不用sticky……
希望能得到你的帮助
当我鼠标滚动下滑一定距离后,在重新上滑到顶部,会出现thead和tbody中间有100px左右的空白。有遇到过吗
Failed to compile.
./node_modules/ali-react-table/dist/chunks/ali-react-table-table-d315bfb5.esm.js
Module parse failed: Unexpected token (355:31)
You may need an appropriate loader to handle this file type.
| if (column.width == null) {
| if (defaultColumnWidth != null) {
| column = { ...column, width: defaultColumnWidth };
| }
| else if (process.env.NODE_ENV !== 'production' && isLeafNode(column) && column.lock) {
运行时出现不能编译...解构语句错误,但是node_modules包应该是已经balbel或者ts-loader处理过的文件,不应该出现...语法问题
由于开发时间比较紧张所以没能仔细阅读例子以及源码…
十分抱歉打扰,希望可以得到你们的帮助。
功能:表头添加筛选图标,点击图标显示筛选弹窗
效果如antd Table自定义筛选
【思考】首先该如何写一个表头渲染,用来增加筛选按钮,弹框和功能?
以排序为例,发现相关api有features applyTransforms makeSortTransform
【疑问】可以通过写一个类似makeSortTransform方法来实现筛选吗?
clumns该如何处理?
safeRenderHeader(col)好像也取不到(ಥ﹏ಥ)
我正在开始我的尝试,希望能得到你们的帮助得以启发
大佬,如果要改成vue版的,要改哪些
[ ]
[ ]
loading 动画的位置应放置在 可视范围内的**,可以利用这里的状态来优化位置。
ali-react-table/src/base-table/table.tsx
Lines 684 to 693 in 79e49e5
比如暴露一下excel sheet标题编辑,和行列宽高编辑的入口
proto 函数的动态性很强,现在的 TS 类型用到了很多 any,且存在一些会使得 TypeScript 类型推断出错的地方。需要对 proto 的 TS 类型进行优化
横向虚拟滚动的时候回出现表头和内容无法对齐的情况 滑动结束之后会对齐
排序的svg在排序的时候可以自定义颜色吗?我目前不想用默认的#23A3FF和#bfbfbf
一部分报错信息:
ERROR in ./stories/pivot/pivot-utils.stories.tsx
Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.iterator' in 'E:\code\ali-react-table\stories\pivot'
@ ./stories/pivot/pivot-utils.stories.tsx 15:0-54
@ ./stories/pivot sync nonrecursive (?:pivot-utils\.stories\.tsx)$
@ ./.storybook/generated-stories-entry.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false
ERROR in ./stories/pivot/MinimumPivotTableDesigner.tsx
Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.iterator' in 'E:\code\ali-react-table\stories\pivot'
@ ./stories/pivot/MinimumPivotTableDesigner.tsx 11:0-54
@ ./stories/pivot/pivot-utils.stories.tsx
@ ./stories/pivot sync nonrecursive (?:pivot-utils\.stories\.tsx)$
@ ./.storybook/generated-stories-entry.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false
本地做了个最小重现案例,使用的 umi 的最新版本来使用 ali-react-table。
在 import { applyTransforms, commonTransforms, SortItem } from 'ali-react-table/biz'
会出现编译错误:
error in ./node_modules/ali-react-table/dist/ali-react-table-biz.esm.js Module parse failed: Identifier 'treeMode' has already been declared (6:64) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | import { a as isLeafNode, g as getTreeDepth, c as collectNodes, e as safeGetValue, d as safeGetCellProps, n as SpanManager, o as safeRenderHeader, p as STYLED_VERSION } from './chunks/ali-react-table-SpanManager-71d11259.esm.js'; | import styled__default from 'styled-components'; > import { f as flatMap, t as treeMode, a as treeMetaSymbol, b as treeMode, _ as __rest } from './chunks/ali-react-table-_tslib-1b7235e4.esm.js'; | import { Number_116, Number_216, Number_316, Number_416, Number_516, Number_616, Number_716, Number_816, Number_916, Information16, Column16, Download16 } from '@carbon/icons-react'; | @ ./src/pages/index.tsx 6:0-54 9:32-47 @ ./src/.umi/core/routes.ts @ ./src/.umi/umi.ts @ multi ./src/.umi/umi.ts
做了另外两个测试:
import { ArtColumn, BaseTable } from 'ali-react-table'
,不会报错。ali-react-table/biz
,不会报错。也就是说,这应该是 0.13.2 新引入的一个 Bug。
看了文档目前只有锁列功能,能否提供冻结行功能。
场景:如表格底部最后一行为合计栏,一般需要冻结显示。
大佬,我有个源码问题一直没想明白
#就是在componentDidMount的时候,执行initSubscriptions,里面的mainBody是绑定的emptyTable的那个Classes.TableBody (https://github.com/alibaba/ali-react-table/blob/v0.13.6/src/base-table/table.tsx#L414 ),
数据渲染后,mainBody引用的dom会更新成这个dom ( https://github.com/alibaba/ali-react-table/blob/v0.13.6/src/base-table/table.tsx#L429 )
为什么在VisibleClipRectObservable这个https://github.com/alibaba/ali-react-table/blob/v0.13.6/src/base-table/helpers/VisibleClipRectObservable.ts#L46 里target可以拿到这个新的dom?
我现在正在换成vue实现一遍
1.0版本以后是否弃用原本的自动合并和SpanRect合并两种合并方式?
没有看到提及的mergeCellProps说明,可以指路一下文档吗?
感谢
在该 例子 中,从 「关闭展开/收拢」切换到「开启展开/收拢」时 virtualBottom 没有被正确更新
版本:0.13.5
用的是交叉表 CrossTable
开启虚拟滚动白屏,(一大段的空白页)
把useVirtual={false}后,一切正常
看了文档后说是要:在虚拟滚动开启的情况下,需要使用 column.getSpanRect 来设定单元格合并的情况
这个就不知道要怎么设置了...
看了交叉表的文档,缺少了好多配置说明,,还有,expression这个可以用的有什么?
目前市面上的虚拟table宽度都不是自适应的 如果需要查看单元格内容的时候很难查看 在自定义单元格内容渲染的时候 稍微复杂一点就会出现滚动卡顿 以及空白 希望能支持
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.