alibaba / ali-react-table Goto Github PK

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' ，不会报错。
使用 0.13.1 版本引入 ali-react-table/biz，不会报错。

也就是说，这应该是 0.13.2 新引入的一个 Bug。

想要实现虚拟滚动+异步加载表格数据

因为数据量大时想要一点一点请求表格数据，所以想要实现虚拟滚动+异步加载。
请教一下，如果想要实现异步加载该从哪里下手，暂时自己还没有思路。
(#^.^#)或者说后续版本是否考虑提供这个功能

横向虚拟滚动的时候回出现表头和内容无法对齐的情况滑动结束之后会对齐

./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处理过的文件，不应该出现...语法问题

后续会有vue版的吗

大佬，如果要改成vue版的，要改哪些

表格能支持一下分页吗？

表格 dataSource 突然变小的时候，虚拟滚动的 virtualBottom 没有被更新

在该例子中，从「关闭展开/收拢」切换到「开启展开/收拢」时 virtualBottom 没有被正确更新

新的单元格合并方法mergeCellProps怎么使用

1.0版本以后是否弃用原本的自动合并和SpanRect合并两种合并方式？
没有看到提及的mergeCellProps说明，可以指路一下文档吗？
感谢

0.14 版本在 Chrome49 中的兼容性问题

实在抱歉又来打扰

因为需要兼容chrome49，期初看到chrome49不支持 sticky没很在意，本以为只是会没有吸顶效果，可以用fixed父容器替代……

但是真正运行在Chrome49以后发现报错：
在updateItemStore()
queryAll(...).forEach is not a function
难受啊是否能不用sticky……

希望能得到你的帮助

是否可以支持下resize column

缺少自定义拖动列宽，是否可以考虑支持下，这个场景用到的还是比较普遍的。谢谢！

表格行默认 hover 效果优化

在内部维护 hoverRowIndex / hoverRowKey 来记录鼠标悬停的行，避免因为行的消失或出现导出高亮效果无法及时更新。

即下面代码中函数 onRowEnterOrLeave 在部分行消失或出现时没有被正确触发。

ali-react-table/src/base-table/table.tsx

Lines 538 to 550 in e718a04

 private onRowEnterOrLeave = (rowIndex: number, kind: 'enter' | 'leave') => { 

 const rowSelector = `*[data-rowindex="${rowIndex}"]` 

 const mainRow = this.doms.mainBody.querySelector(rowSelector) 

 const leftLockRow = this.doms.leftBody?.querySelector(rowSelector) 

 const rightLockRow = this.doms.rightBody?.querySelector(rowSelector) 

 const method = kind === 'enter' ? 'add' : 'remove' 

 ;[mainRow, leftLockRow, rightLockRow].forEach((row) => { 

 if (row) { 

 row.classList[method]('hovered') 

 } 

 }) 

 }

树状的table展开和收缩的时候，能不能自己自定义一个颜色，或者和之前排序一样，将SortHeaderCell暴露出来，自定义

因为我们使用表格的时候，一般数据都比较多，有时候点点就不知道我上次点开的是哪一个了，所以我想传进去一个自定义颜色，让我知道点开的是哪一个。收拢后颜色恢复

会出现thead和tbody有空隙的情况。

当我鼠标滚动下滑一定距离后，在重新上滑到顶部，会出现thead和tbody中间有100px左右的空白。有遇到过吗

能不能支持自定义表头，类似getRowProps这样的函数式api？

我发现用headerCellProps 在columns的配置中去处理，不太好处理，比如我的表头是动态的每次在接口后去写入不如像’getRowProps‘这个api类似处理方便，希望提供类似 getHeaderCellProps。谢谢！

编译出来的资源icons-react没有shake掉

@carbon/icons-react在bundle资源中占了很大的比重，我其实没有用到内置icon 都是自定义的icon，如何解决？

希望可以实现虚拟table 宽度自适应

目前市面上的虚拟table宽度都不是自适应的如果需要查看单元格内容的时候很难查看在自定义单元格内容渲染的时候稍微复杂一点就会出现滚动卡顿以及空白希望能支持

请教下，开启虚拟滚动的白屏问题

版本：0.13.5
用的是交叉表 CrossTable
开启虚拟滚动白屏，（一大段的空白页）
把useVirtual={false}后，一切正常
看了文档后说是要：在虚拟滚动开启的情况下，需要使用 column.getSpanRect 来设定单元格合并的情况

这个就不知道要怎么设置了...

看了交叉表的文档，缺少了好多配置说明，，还有，expression这个可以用的有什么？

请问下表格的横行要怎么合并呢？

loading 动画位置优化

loading 动画的位置应放置在可视范围内的**，可以利用这里的状态来优化位置。

ali-react-table/src/base-table/table.tsx

Lines 684 to 693 in 79e49e5

 const sizeAndOffset$ = new VisibleClipRectObservable(mainBody, resolvedFlowRoot).pipe( 

 filter(() => { 

 const { horizontal, vertical } = this.state.useVirtual 

 return horizontal || vertical 

 }), 

 map(({ clipRect, offsetY }) => ({ 

 maxRenderHeight: clipRect.bottom - clipRect.top, 

 maxRenderWidth: clipRect.right - clipRect.left, 

 offsetY, 

 })),

树状表格多选可以通过哪个方法实现，官方文档没有看到

类似ant desgin 这种，是很常见的功能

有什么方法可以触发树状的表格的状态为action=collapse

场景：目前我的表格最后一层，是一个弹出层，我想关闭弹出层的时候，将表格的树状的箭头变为可展示状态。
关闭前：

关闭后：

v0.14 文档更新

v0.14 文档更新：

在文档中去掉 commonTransform.xxx，换成最新的 API
提供从 v0.13 升级到 v0.14 的 migration guide

是否可以暴露更多编辑excel下载功能入口

比如暴露一下excel sheet标题编辑，和行列宽高编辑的入口

有没有什么api可以更改表格的字体呢，或者css变量

我想把表格默认的12px更改为14px，还请指教一下，谢谢

移动端表格上滑动和下滑动，会卡住

我明天更新一下 0.14 版本吧，0.14 处理之后也许可以兼容 chrome49

Originally posted by @shinima in #69 (comment)

请问做了兼容chrome49的处理了吗？我们也是49，主要问题是不兼容sticky.谢谢！

表格可以支持拖动排序吗？感觉这个功能还是比较实用的。

锁定列高度异常

如图，在页面渲染的时候，偶尔会出现如下情况，锁定列高度异常，请问下怎么解决这个问题呢

可以重写表格cell吗？和antd的component似的

proto TS 类型优化

proto 函数的动态性很强，现在的 TS 类型用到了很多 any，且存在一些会使得 TypeScript 类型推断出错的地方。需要对 proto 的 TS 类型进行优化

请教一个源码问题

大佬，我有个源码问题一直没想明白
#就是在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实现一遍

sort自定义颜色

排序的svg在排序的时候可以自定义颜色吗？我目前不想用默认的#23A3FF和#bfbfbf

虚拟滚动开启后滚动性能优化

在目前的实现中，在 useVirutal=true 的情况下，表格滚动会频繁触发 recalculate style 与 layout，导致滚动不够流畅。

实际情况：

期望的情况：
滚动时减少 adjustSize 的调用。对 adjustSize 进行防抖处理，等到滚动停止的时候调用一次 adjustSize 即可。

0.13.5版本报错

编译0.13.5版本报错

./chunks/ali-react-table-_tslib-cbb871fd.esm.js in ./node_modules/ali-react-table/dist/ali-react-table-biz.esm.js

发现发布包里面的名称是：
ali-react-table-_tslib-8c532ff9.esm.js

报错了

一部分报错信息：

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

表格组件兼容性整理

表格用到了一些较新的 JavaScript/CSS 特性，对浏览器的版本要求较高。需要整理一下哪些特性对浏览器的要求较高，看一下是否能够降低对浏览器的要求。

兼容性问题主要来源：

CSS 变量 chrome 49+
CSS sticky position chrome56+
NodeList#forEach chrome51+
ResizeObserver chrome64+，不过组件安装了 polyfill
styled-components

目前兼容结果：

移动端兼容性需要进一步检查（大部分手机上都没什么问题，但是移动端浏览器种类繁多，无法一一检查）
不兼容 IE （不再考虑 IE 了，ali-react-table 的目标是现代化的表格组件）
chrome 56+ CSS sticky position
safari 9.1+ CSS 变量

能否提供冻结行（锁行）功能

看了文档目前只有锁列功能，能否提供冻结行功能。
场景：如表格底部最后一行为合计栏，一般需要冻结显示。

希望树状表格支持自定义parent_id名称更好支持树结构直接渲染

现在只提供了拍平数据转换支持自定义parent_id 字段构建出树状结构，已有的树结构因为parent_id不是children导致无法直接使用源数据渲染，希望支持一下makeTreeModeTransform添加parentId

表格锁列，移动端出现不兼容问题

苹果手机会出现表头是固定的，但表头下的内容单元格不会固定住。请问这个问题怎么解

为啥不纳入fusion体系？

看样式，应该没法做到和fusion的主题变量做融合吧

扩展一个筛选功能遇到的问题

由于开发时间比较紧张所以没能仔细阅读例子以及源码…
十分抱歉打扰，希望可以得到你们的帮助。

功能：表头添加筛选图标，点击图标显示筛选弹窗
效果如antd Table自定义筛选
【思考】首先该如何写一个表头渲染，用来增加筛选按钮，弹框和功能？
以排序为例，发现相关api有features applyTransforms makeSortTransform
【疑问】可以通过写一个类似makeSortTransform方法来实现筛选吗？
clumns该如何处理?
safeRenderHeader(col)好像也取不到(ಥ﹏ಥ)

我正在开始我的尝试，希望能得到你们的帮助得以启发

排序错误

后续版本规划

0.14 规划

支持 SSR：在组件 didMount 之前避免调用只有在浏览器中才存在的 API，例如 window.innerWidth，ResizeObserver，requestAnimationFrame 等 #43
移除 import 入口：ali-react-table/biz，将原来从这里导出的符号移动到 ali-react-table 中
- 在 1.0 之前，ali-react-table/biz 仍会被保留，但会添加 deprecation warning
API 调整：
- transformColumn -> traverseColumn
- commonTransforms.xxx -> makeXXXTransform （这样受控用法和非受控用法可以相对应）
- 移除自定义对话框组件和表格操作栏 hooks
  - 在 1.0 之前，API 仍会被保留，但会添加 deprecation warning
- 新增 mergeCellProps，简化单元格 props 合并的过程

1.0 的规划

移动端适配（后续需要进一步验证）
使用 sticky position 来实现左右锁列

运行storybook报错了

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

	private onRowEnterOrLeave = (rowIndex: number, kind: 'enter' \| 'leave') => {
	const rowSelector = `*[data-rowindex="${rowIndex}"]`
	const mainRow = this.doms.mainBody.querySelector(rowSelector)
	const leftLockRow = this.doms.leftBody?.querySelector(rowSelector)
	const rightLockRow = this.doms.rightBody?.querySelector(rowSelector)

	const method = kind === 'enter' ? 'add' : 'remove'
	;[mainRow, leftLockRow, rightLockRow].forEach((row) => {
	if (row) {
	row.classList[method]('hovered')
	}
	})
	}

	const sizeAndOffset$ = new VisibleClipRectObservable(mainBody, resolvedFlowRoot).pipe(
	filter(() => {
	const { horizontal, vertical } = this.state.useVirtual
	return horizontal \|\| vertical
	}),
	map(({ clipRect, offsetY }) => ({
	maxRenderHeight: clipRect.bottom - clipRect.top,
	maxRenderWidth: clipRect.right - clipRect.left,
	offsetY,
	})),

alibaba / ali-react-table Goto Github PK

ali-react-table's Issues

Recommend Projects

Recommend Topics

Recommend Org