@kdcloudjs/table 1.1.3-canary.5 → 1.1.3-canary.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +568 -568
- package/README.md +111 -111
- package/dist/@kdcloudjs/table.css +1 -1
- package/dist/@kdcloudjs/table.js +1292 -1037
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +24 -15
- package/dist/@kdcloudjs/table.min.js.map +1 -1
- package/dist/kd-ui-complete.less +777 -777
- package/es/style/color/colors.less +1 -1
- package/es/style/core/index.less +1 -1
- package/es/style/core/motion/other.less +27 -27
- package/es/style/core/motion/slide.less +53 -53
- package/es/style/core/motion.less +1 -1
- package/es/style/core/reset.less +185 -185
- package/es/style/index.less +1 -1
- package/es/style/mixins/index.less +18 -18
- package/es/style/mixins/overlay.less +21 -21
- package/es/style/mixins/reset.less +12 -12
- package/es/style/themes/default.less +445 -445
- package/es/table/base/helpers/getRichVisibleRectsStream.js +1 -1
- package/es/table/pipeline/features/filter/Filter.js +1 -1
- package/es/table/pipeline/features/filter/FilterPanel.js +1 -1
- package/es/table/style/index.less +1 -1
- package/lib/style/color/colors.less +1 -1
- package/lib/style/components.less +1 -1
- package/lib/style/core/index.less +1 -1
- package/lib/style/core/motion/other.less +27 -27
- package/lib/style/core/motion/slide.less +53 -53
- package/lib/style/core/motion.less +1 -1
- package/lib/style/core/reset.less +185 -185
- package/lib/style/index.less +1 -1
- package/lib/style/mixins/index.less +18 -18
- package/lib/style/mixins/overlay.less +21 -21
- package/lib/style/mixins/reset.less +12 -12
- package/lib/style/themes/default.less +445 -445
- package/lib/table/base/helpers/getRichVisibleRectsStream.js +1 -1
- package/lib/table/pipeline/features/filter/Filter.js +1 -1
- package/lib/table/pipeline/features/filter/FilterPanel.js +1 -1
- package/lib/table/style/index.less +1 -1
- package/package.json +218 -218
- package/CHANGELOG.md +0 -0
package/README.md
CHANGED
|
@@ -1,112 +1,112 @@
|
|
|
1
|
-
---
|
|
2
|
-
order: 0
|
|
3
|
-
title: 介绍
|
|
4
|
-
---
|
|
5
|
-
# Table of KDesign
|
|
6
|
-
基于金蝶 KDesign 规范实现的 React 表格组件。
|
|
7
|
-
|
|
8
|
-
## 官网介绍
|
|
9
|
-
[https://react.kingdee.design/components/table](https://react.kingdee.design/components/table)
|
|
10
|
-
|
|
11
|
-
## 安装
|
|
12
|
-
该项目不建议直接使用,推荐安装[`kdcloudjs/kdesign`](https://github.com/kdcloudone/kdesign)项目,然后再导出其中的`Table`组件使用。
|
|
13
|
-
|
|
14
|
-
### 使用 npm 或 yarn 安装
|
|
15
|
-
|
|
16
|
-
```bash
|
|
17
|
-
$ npm install @kdcloudjs/kdesign --save
|
|
18
|
-
# 或者
|
|
19
|
-
$ yarn add @kdcloudjs/kdesign
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
### 示例
|
|
24
|
-
|
|
25
|
-
```js
|
|
26
|
-
import React, { useState } from 'react'
|
|
27
|
-
import reactDom from 'react-dom'
|
|
28
|
-
import { Table } from '@kdcloudjs/kdesign'
|
|
29
|
-
import '@kdcloudjs/kdesign/dist/kdesign.css'
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
const dataSource = [
|
|
33
|
-
{ prov: '湖北省', confirm: 54406, cure: 4793, dead: 1457, t: '2020-02-15 19:52:02' },
|
|
34
|
-
{ prov: '广东省', confirm: 1294, cure: 409, dead: 2, t: '2020-02-15 19:52:02' },
|
|
35
|
-
{ prov: '河南省', confirm: 1212, cure: 390, dead: 13, t: '2020-02-15 19:52:02' },
|
|
36
|
-
{ prov: '浙江省', confirm: 1162, cure: 428, dead: 0, t: '2020-02-15 19:52:02' },
|
|
37
|
-
{ prov: '湖南省', confirm: 1001, cure: 417, dead: 2, t: '2020-02-15 19:52:02' }
|
|
38
|
-
]
|
|
39
|
-
|
|
40
|
-
const columns = [
|
|
41
|
-
{ code: 'prov', name: '省份', width: 150, features: { sortable: true, filterable: true } },
|
|
42
|
-
{ code: 'confirm', name: '确诊', width: 100, align: 'right', features: { sortable: true, filterable: true } },
|
|
43
|
-
{ code: 'cure', name: '治愈', width: 100, align: 'right', features: { sortable: true, filterable: true } },
|
|
44
|
-
{ code: 'dead', name: '死亡', width: 100, align: 'right', features: { sortable: true, filterable: true } },
|
|
45
|
-
{ code: 't', name: '更新时间', width: 180, features: { sortable: true, filterable: true } }
|
|
46
|
-
]
|
|
47
|
-
|
|
48
|
-
reactDom.render((
|
|
49
|
-
<Table dataSource={dataSource} columns={columns} />
|
|
50
|
-
), document.getElementById('root'))
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
### 浏览器引入
|
|
54
|
-
|
|
55
|
-
在浏览器中使用 `script` 和 `link` 标签直接引入文件,并使用全局变量 `kdesign`。
|
|
56
|
-
|
|
57
|
-
使用:
|
|
58
|
-
```html
|
|
59
|
-
<!DOCTYPE html>
|
|
60
|
-
<html lang="en">
|
|
61
|
-
<head>
|
|
62
|
-
<meta charset="UTF-8">
|
|
63
|
-
<title>kdesign</title>
|
|
64
|
-
<script src="https://cdn.staticfile.org/react/16.14.0/umd/react.development.js"></script>
|
|
65
|
-
<script src="https://cdn.staticfile.org/react-dom/16.14.0/umd/react-dom.development.js"></script>
|
|
66
|
-
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
|
|
67
|
-
|
|
68
|
-
<script src="https://unpkg.com/@kdcloudjs/kdesign@latest/dist/kdesign.min.js"></script>
|
|
69
|
-
<link rel="stylesheet" href="https://unpkg.com/@kdcloudjs/kdesign@latest/dist/kdesign.min.css">
|
|
70
|
-
</head>
|
|
71
|
-
<body>
|
|
72
|
-
<div id="root"></div>
|
|
73
|
-
<script type="text/babel">
|
|
74
|
-
|
|
75
|
-
const dataSource = [
|
|
76
|
-
{"No":1,"order":"AP-202009-00001","from":"陕西环宇科技","to":"深圳环球科技","amount":"26,800.00","balance":"500.00"},
|
|
77
|
-
{"No":2,"order":"AP-202009-00001","from":"陕西环宇科技","to":"深圳环球科技","amount":"26,800.00","balance":"500.00"},
|
|
78
|
-
{"No":3,"order":"AP-202009-00001","from":"陕西环宇科技","to":"深圳环球科技","amount":"26,800.00","balance":"500.00"},
|
|
79
|
-
{"No":4,"order":"AP-202009-00001","from":"陕西环宇科技","to":"深圳环球科技","amount":"26,800.00","balance":"500.00"},
|
|
80
|
-
{"No":5,"order":"AP-202009-00001","from":"陕西环宇科技","to":"深圳环球科技","amount":"26,800.00","balance":"500.00"}
|
|
81
|
-
]
|
|
82
|
-
|
|
83
|
-
const columns = [
|
|
84
|
-
{ code: 'No', name: '序号', width: 60, align: 'center' },
|
|
85
|
-
{ code: 'order', name: '单据号', width: 200 },
|
|
86
|
-
{ code: 'from', name: '来户', width: 200 },
|
|
87
|
-
{ code: 'to', name: '往户', width: 200 },
|
|
88
|
-
{ code: 'amount', name: '应付金额', width: 100, align: 'right' },
|
|
89
|
-
{ code: 'balance', name: '应收余额', width: 100, align: 'right' }
|
|
90
|
-
]
|
|
91
|
-
|
|
92
|
-
ReactDOM.render((
|
|
93
|
-
<kdesign.Table dataSource={dataSource} columns={columns}></kdesign.Table>
|
|
94
|
-
),
|
|
95
|
-
document.getElementById('root')
|
|
96
|
-
)
|
|
97
|
-
</script>
|
|
98
|
-
</body>
|
|
99
|
-
</html>
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
## 兼容环境
|
|
103
|
-
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>iOS Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png" alt="Samsung" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Samsung | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |
|
|
104
|
-
| --------- | --------- | --------- | --------- | --------- | --------- | --------- |
|
|
105
|
-
| IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
|
|
106
|
-
|
|
107
|
-
## License
|
|
108
|
-
该项目使用了 Apache-2.0. 详细license 请查看 [LICENSE](./LICENSE)
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
## 关于
|
|
1
|
+
---
|
|
2
|
+
order: 0
|
|
3
|
+
title: 介绍
|
|
4
|
+
---
|
|
5
|
+
# Table of KDesign
|
|
6
|
+
基于金蝶 KDesign 规范实现的 React 表格组件。
|
|
7
|
+
|
|
8
|
+
## 官网介绍
|
|
9
|
+
[https://react.kingdee.design/components/table](https://react.kingdee.design/components/table)
|
|
10
|
+
|
|
11
|
+
## 安装
|
|
12
|
+
该项目不建议直接使用,推荐安装[`kdcloudjs/kdesign`](https://github.com/kdcloudone/kdesign)项目,然后再导出其中的`Table`组件使用。
|
|
13
|
+
|
|
14
|
+
### 使用 npm 或 yarn 安装
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
$ npm install @kdcloudjs/kdesign --save
|
|
18
|
+
# 或者
|
|
19
|
+
$ yarn add @kdcloudjs/kdesign
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### 示例
|
|
24
|
+
|
|
25
|
+
```js
|
|
26
|
+
import React, { useState } from 'react'
|
|
27
|
+
import reactDom from 'react-dom'
|
|
28
|
+
import { Table } from '@kdcloudjs/kdesign'
|
|
29
|
+
import '@kdcloudjs/kdesign/dist/kdesign.css'
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
const dataSource = [
|
|
33
|
+
{ prov: '湖北省', confirm: 54406, cure: 4793, dead: 1457, t: '2020-02-15 19:52:02' },
|
|
34
|
+
{ prov: '广东省', confirm: 1294, cure: 409, dead: 2, t: '2020-02-15 19:52:02' },
|
|
35
|
+
{ prov: '河南省', confirm: 1212, cure: 390, dead: 13, t: '2020-02-15 19:52:02' },
|
|
36
|
+
{ prov: '浙江省', confirm: 1162, cure: 428, dead: 0, t: '2020-02-15 19:52:02' },
|
|
37
|
+
{ prov: '湖南省', confirm: 1001, cure: 417, dead: 2, t: '2020-02-15 19:52:02' }
|
|
38
|
+
]
|
|
39
|
+
|
|
40
|
+
const columns = [
|
|
41
|
+
{ code: 'prov', name: '省份', width: 150, features: { sortable: true, filterable: true } },
|
|
42
|
+
{ code: 'confirm', name: '确诊', width: 100, align: 'right', features: { sortable: true, filterable: true } },
|
|
43
|
+
{ code: 'cure', name: '治愈', width: 100, align: 'right', features: { sortable: true, filterable: true } },
|
|
44
|
+
{ code: 'dead', name: '死亡', width: 100, align: 'right', features: { sortable: true, filterable: true } },
|
|
45
|
+
{ code: 't', name: '更新时间', width: 180, features: { sortable: true, filterable: true } }
|
|
46
|
+
]
|
|
47
|
+
|
|
48
|
+
reactDom.render((
|
|
49
|
+
<Table dataSource={dataSource} columns={columns} />
|
|
50
|
+
), document.getElementById('root'))
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### 浏览器引入
|
|
54
|
+
|
|
55
|
+
在浏览器中使用 `script` 和 `link` 标签直接引入文件,并使用全局变量 `kdesign`。
|
|
56
|
+
|
|
57
|
+
使用:
|
|
58
|
+
```html
|
|
59
|
+
<!DOCTYPE html>
|
|
60
|
+
<html lang="en">
|
|
61
|
+
<head>
|
|
62
|
+
<meta charset="UTF-8">
|
|
63
|
+
<title>kdesign</title>
|
|
64
|
+
<script src="https://cdn.staticfile.org/react/16.14.0/umd/react.development.js"></script>
|
|
65
|
+
<script src="https://cdn.staticfile.org/react-dom/16.14.0/umd/react-dom.development.js"></script>
|
|
66
|
+
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
|
|
67
|
+
|
|
68
|
+
<script src="https://unpkg.com/@kdcloudjs/kdesign@latest/dist/kdesign.min.js"></script>
|
|
69
|
+
<link rel="stylesheet" href="https://unpkg.com/@kdcloudjs/kdesign@latest/dist/kdesign.min.css">
|
|
70
|
+
</head>
|
|
71
|
+
<body>
|
|
72
|
+
<div id="root"></div>
|
|
73
|
+
<script type="text/babel">
|
|
74
|
+
|
|
75
|
+
const dataSource = [
|
|
76
|
+
{"No":1,"order":"AP-202009-00001","from":"陕西环宇科技","to":"深圳环球科技","amount":"26,800.00","balance":"500.00"},
|
|
77
|
+
{"No":2,"order":"AP-202009-00001","from":"陕西环宇科技","to":"深圳环球科技","amount":"26,800.00","balance":"500.00"},
|
|
78
|
+
{"No":3,"order":"AP-202009-00001","from":"陕西环宇科技","to":"深圳环球科技","amount":"26,800.00","balance":"500.00"},
|
|
79
|
+
{"No":4,"order":"AP-202009-00001","from":"陕西环宇科技","to":"深圳环球科技","amount":"26,800.00","balance":"500.00"},
|
|
80
|
+
{"No":5,"order":"AP-202009-00001","from":"陕西环宇科技","to":"深圳环球科技","amount":"26,800.00","balance":"500.00"}
|
|
81
|
+
]
|
|
82
|
+
|
|
83
|
+
const columns = [
|
|
84
|
+
{ code: 'No', name: '序号', width: 60, align: 'center' },
|
|
85
|
+
{ code: 'order', name: '单据号', width: 200 },
|
|
86
|
+
{ code: 'from', name: '来户', width: 200 },
|
|
87
|
+
{ code: 'to', name: '往户', width: 200 },
|
|
88
|
+
{ code: 'amount', name: '应付金额', width: 100, align: 'right' },
|
|
89
|
+
{ code: 'balance', name: '应收余额', width: 100, align: 'right' }
|
|
90
|
+
]
|
|
91
|
+
|
|
92
|
+
ReactDOM.render((
|
|
93
|
+
<kdesign.Table dataSource={dataSource} columns={columns}></kdesign.Table>
|
|
94
|
+
),
|
|
95
|
+
document.getElementById('root')
|
|
96
|
+
)
|
|
97
|
+
</script>
|
|
98
|
+
</body>
|
|
99
|
+
</html>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
## 兼容环境
|
|
103
|
+
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>iOS Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png" alt="Samsung" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Samsung | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera |
|
|
104
|
+
| --------- | --------- | --------- | --------- | --------- | --------- | --------- |
|
|
105
|
+
| IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
|
|
106
|
+
|
|
107
|
+
## License
|
|
108
|
+
该项目使用了 Apache-2.0. 详细license 请查看 [LICENSE](./LICENSE)
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
## 关于
|
|
112
112
|
本项目基于`ali-react-table`修改,特别鸣谢! 源地址:[https://github.com/alibaba/ali-react-table](https://github.com/alibaba/ali-react-table)
|