ali-rc-table
Advanced tools
基于金蝶 KDesign 规范实现的 React 表格组件。
https://react.kingdee.design/components/table
该项目不建议直接使用，推荐安装kdcloudjs/kdesign项目，然后再导出其中的Table组件使用。
$ npm install @kdcloudjs/kdesign --save
# 或者
$ yarn add @kdcloudjs/kdesign
import 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
FAQs
金蝶 react table 组件
We found that ali-rc-table demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub Actions checkout now blocks risky pull_request_target checkouts by default to help prevent pwn request supply chain attacks.
Product
Socket now supports Custom Roles and Repository Access Permissions so organizations can control who can access specific repositories and actions.
Product
Socket MCP now lets AI assistants review org alerts, investigate threats using the Socket threat feed, and inspect package files in addition to dependency scoring.