基于金蝶 KDesign 规范实现的 React 表格组件。
https://react.kingdee.design/components/table
该项目不建议直接使用，推荐安装kdcloudjs/kdesign项目，然后再导出其中的Table组件使用。
$ npm install @kdcloudjs/kdesign --save
# 或者
$ yarn add @kdcloudjs/kdesignimport React, { useState } from 'react'
import reactDom from 'react-dom'
import { Table } from '@kdcloudjs/kdesign'
import '@kdcloudjs/kdesign/dist/kdesign.css'
const dataSource = [
{ prov: '湖北省', confirm: 54406, cure: 4793, dead: 1457, t: '2020-02-15 19:52:02' },
{ prov: '广东省', confirm: 1294, cure: 409, dead: 2, t: '2020-02-15 19:52:02' },
{ prov: '河南省', confirm: 1212, cure: 390, dead: 13, t: '2020-02-15 19:52:02' },
{ prov: '浙江省', confirm: 1162, cure: 428, dead: 0, t: '2020-02-15 19:52:02' },
{ prov: '湖南省', confirm: 1001, cure: 417, dead: 2, t: '2020-02-15 19:52:02' }
]
const columns = [
{ code: 'prov', name: '省份', width: 150, features: { sortable: true, filterable: true } },
{ code: 'confirm', name: '确诊', width: 100, align: 'right', features: { sortable: true, filterable: true } },
{ code: 'cure', name: '治愈', width: 100, align: 'right', features: { sortable: true, filterable: true } },
{ code: 'dead', name: '死亡', width: 100, align: 'right', features: { sortable: true, filterable: true } },
{ code: 't', name: '更新时间', width: 180, features: { sortable: true, filterable: true } }
]
reactDom.render((
<Table dataSource={dataSource} columns={columns} />
), document.getElementById('root'))在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 kdesign。
使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>kdesign</title>
<script src="https://cdn.staticfile.org/react/16.14.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.14.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://unpkg.com/@kdcloudjs/kdesign@latest/dist/kdesign.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@kdcloudjs/kdesign@latest/dist/kdesign.min.css">
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const dataSource = [
{"No":1,"order":"AP-202009-00001","from":"陕西环宇科技","to":"深圳环球科技","amount":"26,800.00","balance":"500.00"},
{"No":2,"order":"AP-202009-00001","from":"陕西环宇科技","to":"深圳环球科技","amount":"26,800.00","balance":"500.00"},
{"No":3,"order":"AP-202009-00001","from":"陕西环宇科技","to":"深圳环球科技","amount":"26,800.00","balance":"500.00"},
{"No":4,"order":"AP-202009-00001","from":"陕西环宇科技","to":"深圳环球科技","amount":"26,800.00","balance":"500.00"},
{"No":5,"order":"AP-202009-00001","from":"陕西环宇科技","to":"深圳环球科技","amount":"26,800.00","balance":"500.00"}
]
const columns = [
{ code: 'No', name: '序号', width: 60, align: 'center' },
{ code: 'order', name: '单据号', width: 200 },
{ code: 'from', name: '来户', width: 200 },
{ code: 'to', name: '往户', width: 200 },
{ code: 'amount', name: '应付金额', width: 100, align: 'right' },
{ code: 'balance', name: '应收余额', width: 100, align: 'right' }
]
ReactDOM.render((
<kdesign.Table dataSource={dataSource} columns={columns}></kdesign.Table>
),
document.getElementById('root')
)
</script>
</body>
</html>
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
 iOS Safari |
 Samsung |
 Opera |
|---|---|---|---|---|---|---|
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
该项目使用了 Apache-2.0. 详细license 请查看 LICENSE
本项目基于ali-react-table修改，特别鸣谢！ 源地址：https://github.com/alibaba/ali-react-table