](http://godban.github.io/browsers-support-badges/)Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)iOS Safari | [
](http://godban.github.io/browsers-support-badges/)Samsung | [
](http://godban.github.io/browsers-support-badges/)Opera | [
](http://godban.github.io/browsers-support-badges/)Electron | 27 | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | --------- | 28 | | last 2 versions | last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions 29 | 30 | 31 | ## 功能对比 32 | 33 | 34 | |功能描述 | rc-grid | ag-grid | react-data-grid | ant design | handsontable | 35 | |--------|-------- |------- |--------- |------ |----------- | 36 | |固定左 | ✅ | ✅ | ✅ |✅ | ✅ 37 | |右列 | ✅ | ✅ | ❌ |✅ | ✅ 38 | |列可拖拽改变大小| ✅ | ✅ | ✅ |⚠️ 需要自定义列头 | ✅ 39 | |列头合并 | ✅ | ✅ | ❌ | ✅ | ✅ 40 | |虚拟滚动 | ✅ | ✅ | ✅ |⚠️ 需要重写渲染 | ✅ 41 | |单元格编辑 | ✅ | ✅ | ✅ | ⚠️ 需要重写cell | ✅ 42 | |可展开表格 | ✅ | ✅ | ✅ | ✅ | ❌ 43 | |树形表格 | ✅ | ✅ | ✅ | ✅ | ❌ 44 | |开源协议 | MIT | MIT | MIT | MIT | 商业 45 | 46 | > 注明: 此数据仅供参照，组件库可能是随着更新，而添加新的功能 47 | 48 | ## 关于里程碑 49 | 50 | 保持每个月月底完成一次里程碑的开发,并且发布到 npm 仓库中， 我们所有的开发全部托管在 github 上进行开发 51 | -------------------------------------------------------------------------------- /packages/rc-grid/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [['@babel/preset-env', { 3 | targets: { 4 | node: 'current', 5 | } 6 | }], '@babel/preset-react', '@babel/preset-typescript'] 7 | }; -------------------------------------------------------------------------------- /packages/rc-grid/jest.config.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * For a detailed explanation regarding each configuration property and type check, visit: 3 | * https://jestjs.io/docs/configuration 4 | */ 5 | 6 | export default { 7 | // All imported modules in your tests should be mocked automatically 8 | // automock: false, 9 | 10 | // Stop running tests after `n` failures 11 | // bail: 0, 12 | 13 | // The directory where Jest should store its cached dependency information 14 | // cacheDirectory: "/tmp/jest_rs", 15 | 16 | // Automatically clear mock calls and instances between every test 17 | clearMocks: true, 18 | 19 | // Indicates whether the coverage information should be collected while executing the test 20 | collectCoverage: true, 21 | 22 | // An array of glob patterns indicating a set of files for which coverage information should be collected 23 | // collectCoverageFrom: undefined, 24 | 25 | // The directory where Jest should output its coverage files 26 | coverageDirectory: "coverage", 27 | 28 | // An array of regexp pattern strings used to skip coverage collection 29 | // coveragePathIgnorePatterns: [ 30 | // "/node_modules/" 31 | // ], 32 | 33 | // Indicates which provider should be used to instrument code for coverage 34 | // coverageProvider: "babel", 35 | 36 | // A list of reporter names that Jest uses when writing coverage reports 37 | // coverageReporters: [ 38 | // "json", 39 | // "text", 40 | // "lcov", 41 | // "clover" 42 | // ], 43 | 44 | // An object that configures minimum threshold enforcement for coverage results 45 | // coverageThreshold: undefined, 46 | 47 | // A path to a custom dependency extractor 48 | // dependencyExtractor: undefined, 49 | 50 | // Make calling deprecated APIs throw helpful error messages 51 | // errorOnDeprecated: false, 52 | 53 | // Force coverage collection from ignored files using an array of glob patterns 54 | // forceCoverageMatch: [], 55 | 56 | // A path to a module which exports an async function that is triggered once before all test suites 57 | // globalSetup: undefined, 58 | 59 | // A path to a module which exports an async function that is triggered once after all test suites 60 | // globalTeardown: undefined, 61 | 62 | // A set of global variables that need to be available in all test environments 63 | // globals: {}, 64 | 65 | // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers. 66 | // maxWorkers: "50%", 67 | 68 | // An array of directory names to be searched recursively up from the requiring module's location 69 | // moduleDirectories: [ 70 | // "node_modules" 71 | // ], 72 | 73 | // An array of file extensions your modules use 74 | // moduleFileExtensions: [ 75 | // "js", 76 | // "jsx", 77 | // "ts", 78 | // "tsx", 79 | // "json", 80 | // "node" 81 | // ], 82 | 83 | // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module 84 | // moduleNameMapper: {}, 85 | 86 | // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader 87 | // modulePathIgnorePatterns: [], 88 | 89 | // Activates notifications for test results 90 | // notify: false, 91 | 92 | // An enum that specifies notification mode. Requires { notify: true } 93 | // notifyMode: "failure-change", 94 | 95 | // A preset that is used as a base for Jest's configuration 96 | // preset: undefined, 97 | 98 | // Run tests from one or more projects 99 | // projects: undefined, 100 | 101 | // Use this configuration option to add custom reporters to Jest 102 | // reporters: undefined, 103 | 104 | // Automatically reset mock state between every test 105 | // resetMocks: false, 106 | 107 | // Reset the module registry before running each individual test 108 | // resetModules: false, 109 | 110 | // A path to a custom resolver 111 | // resolver: undefined, 112 | 113 | // Automatically restore mock state between every test 114 | // restoreMocks: false, 115 | 116 | // The root directory that Jest should scan for tests and modules within 117 | // rootDir: undefined, 118 | 119 | // A list of paths to directories that Jest should use to search for files in 120 | // roots: [ 121 | // "
46 | 无任何数据
47 |
48 | )}
49 | />
50 | )}
51 |
72 | {' '}
73 | 这是一个展开的内容信息 {JSON.stringify(row)}{' '}
74 |
75 | ),
76 | }}
77 | />
78 | )}
79 |
73 | 这是一个展开的内容信息 {JSON.stringify(row)}{' '}
74 |
75 | ),
76 | }}
77 | onChildrenRows={(row) => {
78 | const tempRow = []
79 | for (let i = 500; i < 510; i += 1) {
80 | const cells: Array
97 | {' '}
98 | 这是一个展开的内容信息 {JSON.stringify(row)}{' '}
99 |
100 | ),
101 | }}
102 | onSort={(sort) => {
103 | if (sort.length === 0) {
104 | setDatas(oldData.current)
105 | }
106 | if (sort.length > 0) {
107 | const { direction } = sort[0]
108 | const { columnKey } = sort[0]
109 | const tempRowData = produce(datas, (newData) => {
110 | newData.sort((a, b) => {
111 | const aData: string = a.object[columnKey]
112 | const bData: string = b.object[columnKey]
113 |
114 | if (direction === 'ASC') {
115 | if (
116 | aData.toUpperCase() >
117 | bData.toUpperCase()
118 | ) {
119 | return 1
120 | }
121 | return -1
122 | }
123 | if (direction === 'DESC') {
124 | if (
125 | aData.toUpperCase() <
126 | bData.toUpperCase()
127 | ) {
128 | return 1
129 | }
130 | }
131 | return -1
132 | })
133 | })
134 | setDatas(tempRowData)
135 | }
136 | }}
137 | />
138 | )
139 | }
140 |
141 |
142 | BashGrid.defaultProps = {
143 | columns: [{
144 | name: 'id',
145 | title: 'id',
146 | sort: true,
147 | resizable: true,
148 | fixed: 'left'
149 | }, {
150 | name: 'userName',
151 | sort: true,
152 | resizable: true,
153 | title: 'User Name',
154 | editor: Input
155 | }, {
156 | name: 'address',
157 | sort: true,
158 | resizable: true,
159 | title: 'Address'
160 | }, {
161 | name: 'email',
162 | sort: true,
163 | resizable: true,
164 | title: 'E-Mail'
165 | }, {
166 | name: 'mobilePhone',
167 | title: 'Mobile Phone',
168 | sort: true,
169 | resizable: true,
170 | fixed: 'right'
171 | }],
172 | rows: rowsData
173 | }
174 |
175 |
176 | test('expandable grid test', async () => {
177 | const { container, getAllByRole } =render((
178 | Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)iOS Safari | [
](http://godban.github.io/browsers-support-badges/)Samsung | [
](http://godban.github.io/browsers-support-badges/)Opera | [
](http://godban.github.io/browsers-support-badges/)Electron | 23 | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | --------- | 24 | | last 2 versions | last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions 25 | 26 | > Browsers that do not currently support IE, if you need IE, you need to find the corresponding polyfill, this is not a simple process. 27 | 28 | ## Compare to others 29 | 30 | |Description | rc-grid | ag-grid | react-data-grid | ant design | handsontable | 31 | |--------|-------- |------- |--------- |------ |----------- | 32 | |Fixed left column | ✅ | ✅ | ✅ |✅ | ✅ 33 | |Fixed right column | ✅ | ✅ | ❌ |✅ | ✅ 34 | |Columns can be dragged to change size| ✅ | ✅ | ✅ |⚠️ need rewrite header | ✅ 35 | |Column header merge | ✅ | ✅ | ❌ | ✅ | ✅ 36 | |Virtual scroll | ✅ | ✅ | ✅ |⚠️ need rewrite render | ✅ 37 | |Cell editing | ✅ | ✅ | ✅ | ⚠️ need rewrite cell | ✅ 38 | |Expandable | ✅ | ✅ | ✅ | ✅ | ❌ 39 | |Tree Grid | ✅ | ✅ | ✅ | ✅ | ❌ 40 | |Open source agreement | MIT | MIT | MIT | MIT | Business 41 | 42 | > Note: This data is for reference only, the component library may be updated with new functions added. 43 | 44 | ## Installation 45 | 46 | ### Use npm or yarn installation 47 | 48 | We recommend using npm or yarn for development. Not only can it be easily debugged in the development environment, but it can also be packaged and deployed in the production environment with confidence, and enjoy the many benefits of the entire ecosystem and tool chain. 49 | 50 | ```sh 51 | npm install @lifhcp/rc-grid --save 52 | ``` 53 | 54 | ```sh 55 | yarn add @lifhcp/rc-grid 56 | ``` 57 | 58 | ### Browser import 59 | 60 | If you want to import rc-grid in the browser, you need to compile the corresponding file with `webpack`, and then use global variables. 61 | 62 | ## Community help 63 | 64 | If you encounter problems during use, you can seek help through the following channels, and we also encourage experienced users to provide help to newcomers through the following channels. 65 | 66 | - [GitHub Discussions](https://github.com/HighPerformanceComponent/rc-grid/discussions) 67 | -------------------------------------------------------------------------------- /website/docs/getting-started/introduce.zh-CN.md: -------------------------------------------------------------------------------- 1 | --- 2 | nav: 3 | title: 文档 4 | order: 1 5 | path: /getting-started 6 | title: 介绍 7 | order: 1 8 | --- 9 | 10 | # Rc-Grid 组件 11 | 12 | Rc-Grid 是基于 React 和 styled-components 的组件库，主要企业级中后台产品中的表格。 13 | 14 | ## ✨ 特性 15 | 16 | - 📦 开箱即用的高质量 React 组件, 并且默认支持虚拟滚动。 17 | - 🛡 使用 TypeScript 开发，提供完整的类型定义文件。 18 | - ⚙️ 组件功能丰富，支持固定列，可展开表格，表格树，拖拽列头，排序等等... 19 | 20 | 21 | ## 浏览器支持 22 | 23 | | [
](http://godban.github.io/browsers-support-badges/)Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)iOS Safari | [
](http://godban.github.io/browsers-support-badges/)Samsung | [
](http://godban.github.io/browsers-support-badges/)Opera | [
](http://godban.github.io/browsers-support-badges/)Electron | 24 | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | --------- | 25 | | last 2 versions | last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions 26 | 27 | > 目前不支持 IE 的浏览器，如果需要兼容 IE 需要寻找对应的 polyfills， 这并不是一个简单的过程 28 | 29 | ## 与其他开源表格进行对比 30 | 31 | 32 | |功能描述 | rc-grid | ag-grid | react-data-grid | ant design | handsontable | 33 | |--------|-------- |------- |--------- |------ |----------- | 34 | |固定左 | ✅ | ✅ | ✅ |✅ | ✅ 35 | |右列 | ✅ | ✅ | ❌ |✅ | ✅ 36 | |列可拖拽改变大小| ✅ | ✅ | ✅ |⚠️ 需要自定义列头 | ✅ 37 | |列头合并 | ✅ | ✅ | ❌ | ✅ | ✅ 38 | |虚拟滚动 | ✅ | ✅ | ✅ |⚠️ 需要重写渲染 | ✅ 39 | |单元格编辑 | ✅ | ✅ | ✅ | ⚠️ 需要重写cell | ✅ 40 | |可展开表格 | ✅ | ✅ | ✅ | ✅ | ❌ 41 | |树形表格 | ✅ | ✅ | ✅ | ✅ | ❌ 42 | |开源协议 | MIT | MIT | MIT | MIT | 商业 43 | 44 | > 注明: 此数据仅供参照，组件库可能是随着更新，而添加新的功能 45 | 46 | ## 安装 47 | 48 | ### 使用 npm 或 yarn 安装 49 | 50 | 我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。 51 | 52 | ``` 53 | npm install @lifhcp/rc-grid --save 54 | ``` 55 | 56 | ``` 57 | yarn add @lifhcp/rc-grid 58 | ``` 59 | 60 | 如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm) 。 61 | 62 | ### 浏览器引入 63 | 64 | 如果要在浏览器中引入 rc-grid 需要自己用 `webpack` 编译对应的文件，然后使用全局变量即可 65 | 66 | ### 社区互助 67 | 68 | 如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。 69 | 70 | - [GitHub Discussions](https://github.com/HighPerformanceComponent/rc-grid/discussions) 71 | -------------------------------------------------------------------------------- /website/docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | hero: 3 | title: Rc-Grid 4 | desc: High performance grid components out of the box 5 | actions: 6 | - text: Getting Started 7 | link: /getting-started/introduce 8 | features: 9 | - icon: https://gw.alipayobjects.com/zos/bmw-prod/881dc458-f20b-407b-947a-95104b5ec82b/k79dm8ih_w144_h144.png 10 | title: Feature 11 | desc: Out of the box, it is easy to get started with very few configurations. 12 | - icon: https://gw.alipayobjects.com/zos/bmw-prod/d60657df-0822-4631-9d7c-e7a869c2f21c/k79dmz3q_w126_h126.png 13 | title: High performance 14 | desc: Virtual scrolling of rows and columns improves table performance 15 | - icon: https://gw.alipayobjects.com/zos/bmw-prod/d1ee0c6f-5aed-4a45-a507-339a4bfe076c/k7bjsocq_w144_h144.png 16 | title: Open source 17 | desc: The code is hosted in github, open source agreement MIT 18 | footer: Open-source MIT Licensed | Copyright © 2021
Powered by [HighPerformanceComponent](https://github.com/HighPerformanceComponent) 19 | --- 20 | 21 | ## Browsers support 22 | 23 | | [
](http://godban.github.io/browsers-support-badges/)Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)iOS Safari | [
](http://godban.github.io/browsers-support-badges/)Samsung | [
](http://godban.github.io/browsers-support-badges/)Opera | [
](http://godban.github.io/browsers-support-badges/)Electron | 24 | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | --------- | 25 | | last 2 versions | last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions 26 | -------------------------------------------------------------------------------- /website/docs/index.zh-CN.md: -------------------------------------------------------------------------------- 1 | --- 2 | hero: 3 | title: Rc-Grid 4 | desc: 高性能的 React 表格组件, 在不丢失表格的强大功能的情况下，并且保持高性能 5 | actions: 6 | - text: 开始使用 7 | link: /zh-CN/getting-started/introduce 8 | features: 9 | - icon: https://gw.alipayobjects.com/zos/bmw-prod/881dc458-f20b-407b-947a-95104b5ec82b/k79dm8ih_w144_h144.png 10 | title: 功能 11 | desc: 开箱即用，在极少的配置上，能很容易的上手。 12 | - icon: https://gw.alipayobjects.com/zos/bmw-prod/d60657df-0822-4631-9d7c-e7a869c2f21c/k79dmz3q_w126_h126.png 13 | title: 高性能 14 | desc: 行和列的虚拟滚动，提升表格的性能 15 | - icon: https://gw.alipayobjects.com/zos/bmw-prod/d1ee0c6f-5aed-4a45-a507-339a4bfe076c/k7bjsocq_w144_h144.png 16 | title: 开源 17 | desc: 代码托管在 GitHub 中，采用 MIT 协议，完全开源 18 | footer: Open-source MIT Licensed | Copyright © 2021
Powered by [HighPerformanceComponent](https://github.com/HighPerformanceComponent) 19 | --- 20 | 21 | ## 浏览器支持 22 | 23 | | [
](http://godban.github.io/browsers-support-badges/)Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)iOS Safari | [
](http://godban.github.io/browsers-support-badges/)Samsung | [
](http://godban.github.io/browsers-support-badges/)Opera | [
](http://godban.github.io/browsers-support-badges/)Electron | 24 | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | --------- | 25 | | last 2 versions | last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions 26 | -------------------------------------------------------------------------------- /website/embed/api.md: -------------------------------------------------------------------------------- 1 | 2 | # Grid 3 | 4 | |Property | Description | Type | Default 5 | |----------- |------------------ |--------- |---------- 6 | | rows | Row data information of the table |`Row
51 | 无任何数据
52 |
53 | )}
54 | />
55 | )}
56 |
78 | {' '}
79 | 这是一个展开的内容信息 {JSON.stringify(row)}{' '}
80 |
81 | ),
82 | }}
83 | />
84 | )}
85 |