GithubHelp home page GithubHelp logo

alibaba / ali-react-table Goto Github PK

View Code? Open in Web Editor NEW
860.0 15.0 249.0 80.57 MB

Performent, flexible and modern React table component.

Home Page: https://ali-react-table.js.org/

License: MIT License

JavaScript 3.42% TypeScript 96.15% CSS 0.16% SCSS 0.23% HTML 0.05%
react table react-table

ali-react-table's Introduction

ali-react-table

开发者平时工作实在太忙了,近期项目无法进行积极维护,抱歉。

NPM Package

高性能 React 表格组件. https://ali-react-table.js.org/

安装

npm install ali-react-table

特点

  • 高性能,内置虚拟滚动,数据量较大时自动开启
  • 简单灵活的 API,丰富的定制能力
  • 实用的表格特性:表头吸顶 & 左侧/右侧锁列 & 粘性定位的滚动条

表格适用场景

  • 需要用表格展示大量数据,对表格性能较为敏感
  • 页面没有引入 React 组件库,需要一个尺寸较小的表格组件
  • 原有表格组件可定制能力不够,需要更加灵活的表格组件

效果演示

虚拟滚动 ↑ 通过 dataSource 传入一个长度超过 5 万的数组,表格依旧流畅。当表格向下滚动时,BaseTable 默认会为表头设置 style.position=sticky,表头将会吸附在页面或滚动容器的顶部。在线示例


留存矩阵与投入产出分析表格 ↑ BaseTable 提供了灵活且丰富的 API,方便上层根据各类业务需求对表格进行定制,定制的内容包括单元格内容与样式、鼠标事件回调等。 留存矩阵 在线示例投入产出分析表格 在线示例


优化的加载图标位置

↑ 优化的加载图标位置,加载图标会位于表格的中心位置,并始终处于可见状态。


简单透视表格 ↑ 基于 BaseTable 的简单透视表格。一般来说,透视表展示的数据量较大,不过 BaseTable 内置的虚拟滚动保证了表格在大数据量下仍具有很好的性能,上层不需要过多担心性能问题。 在线示例

兼容性说明

表格只兼容 react ^16.8.0 || ^17.0.0

此外表格用到了大量较新的浏览器 API,只兼容较新版本的 PC 端浏览器或手机浏览器,详见该 issue

相关链接

ali-react-table's People

Contributors

alibaba-oss avatar geekrainy avatar gz315200 avatar jeasonstudio avatar liuweigl avatar shinima avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ali-react-table's Issues

移除对 immer 的依赖

immer 现在只被用在了 commonTransforms.sort 中。这里可以改为手动操作数据结构,从而移除对 immer 的依赖

表格组件兼容性整理

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

兼容性问题主要来源:

目前兼容结果:

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

后续版本规划

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 来实现左右锁列

loading 动画位置优化

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

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,
})),

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

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

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

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

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

实在抱歉又来打扰

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

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

希望能得到你的帮助

0.13.2 版本的 biz 模块引入错误

本地做了个最小重现案例,使用的 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

做了另外两个测试:

  1. 只引入 import { ArtColumn, BaseTable } from 'ali-react-table' ,不会报错。
  2. 使用 0.13.1 版本引入 ali-react-table/biz,不会报错。

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

编译错误问题

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

proto TS 类型优化

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

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

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

实际情况:
image

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

运行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

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

表格行默认 hover 效果优化

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

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

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')
}
})
}

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

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

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

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

v0.14 文档更新

v0.14 文档更新:

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

请教一个源码问题

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

锁定列高度异常

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

报错了

一部分报错信息:

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

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

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

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

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

sort自定义颜色

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.