@kdcloudjs/table NPM

order: 0

title: 介绍

Table of KDesign

基于金蝶 KDesign 规范实现的 React 表格组件。

官网介绍

https://react.kingdee.design/components/table

安装

该项目不建议直接使用，推荐安装kdcloudjs/kdesign项目，然后再导出其中的Table组件使用。

使用 npm 或 yarn 安装

$ 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>