---
order: 0
title: 介绍
---

Table of KDesign

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

官网介绍

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

安装

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

$3

``bash
$ npm install @kdcloudjs/kdesign --save


或者


$ yarn add @kdcloudjs/kdesign
`

$3

`js
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((



), document.getElementById('root'))
`

$3

在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 kdesign。

使用：
`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

License

该项目使用了 Apache-2.0. 详细license 请查看 LICENSE

关于

本项目基于ali-react-table`修改，特别鸣谢！ 源地址：https://github.com/alibaba/ali-react-table