• Stars
    star
    155
  • Rank 240,864 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A React Component which focus on Data-Mapping & Table-Field-Mapping.(基于React的数据/表字段映射组件)

一个基于React的数据/字段映射组件

npm version download gzip size license

English | 简体中文

特性

  • 支持定制字段属性
  • 支持表名定制
  • 支持字段连接数量限制
  • 支持字段排序
  • 支持延迟渲染,自动适配高宽,四周留白等配置
  • 支持空字段内容定制

🔨快速本地DEMO


git clone [email protected]:aliyun/react-data-mapping.git
npm install
cd example
npm install
npm start

📦 安装


npm install react-data-mapping

API

DataMapping属性

参数 说明 类型 默认值
width 组件宽度 number 默认500,自适应的话可以设置"auto"
height 组件高度 number 默认500,自适应的话可以设置"auto"
type 映射类型 string single | mutiply ,默认 single
className 组件类名 string -
sourceClassName 来源表类名 string -
targetClassName 目标表类名 string -
columns 每列的属性 Columns | Array<Columns> undefined
sourceData 来源表数据 SourceData | Object | Array<SourceData> undefined
targetData 目标表数据 TargetData | Object | Array<TargetData> undefined
mappingData 初始映射关系,见mappingData Prop array [ ]
emptyContent 当表字段为空时显示内容 string | ReactNode -
emptyWidth 当表字段为空时,表容器的宽度 string | number 150
config 组件的额外属性配置,见config Prop object { }
isConnect 每次连线前触发,判断是否可以连线 function(edge): boolean
onChange 每次连线触发事件 function
onRowMouseOver 鼠标移入某一行数据时触发 function(row)
onRowMouseOut 鼠标移出某一行数据时触发 function(row)
onEdgeClick 点击连线时触发 function(row)
readonly 是否只读 boolean 默认false

Column

列描述数据对象,是Columns中的一项

参数 说明 类型 默认值
key 列数据在数据项中对应的路径 string -
title 列头显示文字 string -
width 列宽度 number -
primaryKey 此属性是否为该组数据唯一标识 boolean 必须且仅有一个属性为true
render 自定义渲染函数,参数分别为当前行的值,当前行数据,行索引 function(text, record, index) {} -

sourceData

来源表数据,当typesingle 时,sourceData的类型为{ };当typemutiply 时,sourceData的类型为[ ]

参数 说明 类型 默认值
id 列标识, single 类型下,id可不填, mutiply 为必填 string -
title 列标题 string -
fileds 数据数组 array -
checked 勾选框是否已勾选 boolean false
disable 禁止连线 boolean false

targetData

目标表数据,当typesingle 时,targetData的类型为{ };当typemutiply 时,targetData的类型为[ ],属性详情见sourceData


mappingData

参数 说明 类型
source 来源表当前行数据的唯一标识 -
target 目标表当前行数据的唯一标识 -
sourceNode 来源表的id,见sourceData ID string
targetNode 目标表的id,见targetData ID string

config

组件的额外属性配置

参数 说明 类型 默认值
delayDraw 延迟渲染,此组件一定要确保画布容器渲染(包括动画执行)完毕才能渲染, 否则坐标都产生偏移, 如:antd的modal的动画 number 0
extraPos 画布渲染的时候会留padding, extraPos Prop { } -
sortable 排序支持 boolean | object -
linkNumLimit 连线数量支持 number | object -
checkable 来源表,目标表是否有勾选框 checkable Prop { } -

extraPos

画布渲染的时候预留padding

参数 说明 类型 默认值
paddingLeft 左侧padding间距 number 0
paddingRight 右侧padding间距 number 0
paddingTop 顶部padding间距 number 0
paddingBottom 底部padding间距 number 0
paddingCenter 水平间距 number 150
nodeVerticalPadding 节点垂直间距 number 10

checkable

来源表,目标表是否有勾选框

参数 说明 类型 默认值
source 源表是否有勾选框 boolean false
target 目标表是否有勾选框 boolean false

🔗API

interface columns { // 设置每列的属性
  title ? : string; // 每列的title,类似thead的概念
  key: string; // 每列的唯一标志,对应数据上的key值
  width ? : number; // 每列宽度
  primaryKey: boolean // 这列的key对应的value是否作为键值对
}

interface config {
  delayDraw: number; // 延迟渲染,此组件一定要确保画布容器渲染(包括动画执行)完毕才能渲染,否则坐标都产生偏移,如:antd的modal的动画
  extraPos ? : { // 画布渲染的时候会留padding
      paddingLeft ? : number,
      paddingRight ? : number,
      paddingTop ? : number,
      paddingBottom ? : number,
      paddingCenter ? : number,
    },
    sortable ? : boolean | { // 排序支持,假如是true,会整个画布都支持排序
      source ? : boolean, // 假如是true,单纯左侧来源表支持排序
      target ? : boolean // 假如是true,单纯左侧目标表支持排序
    },
    linkNumLimit ? : number | { // 连线数量支持,假如是number,会整个画布都支持n条连线
      source ? : number, // 假如是number,单纯左侧来源表支持n条连线
      target ? : number // 假如是number,单纯左侧来源表支持n条连线
    },
    checkable : {  // 源表目标表是否有勾选框
      source ? : boolean, // 假如是true,单纯左侧来源表支持勾选框
      target ? : boolean
    }
}

interface ComProps { // 组件props属性
  width ? : number | string; // 组件的宽度,自适应的话可以设置"auto"
  height ? : number | string; // 组件的高度,自适应的话可以设置"auto"
  type ? : string; // "single"or"mutiply",单表映射(上图一) or 多表映射(上图二)
  className ? : string; // 组件类名
  sourceClassName ? : string; // 来源表类名
  targetClassName ? : string; // 目标表类名
  columns: Array < columns > ; // 请参考上述interface columns
  sourceData: Array < any > | Object; // 单表映射对应Object,多表映射Array,可参考demo
  targetData: Array < any > | Object; // 单表映射对应Object,多表映射Array,可参考demo
  mappingData: Array < any > ; // 初始化对应关系数据,可参考demo
  emptyContent ? : string | JSX.Element; // 当表字段为空时显示内容
  emptyWidth ? : number | string; // 当表字段为空时表容器宽度
  isConnect?(edge: any): boolean; // 每次连线前触发isConnect,返回true则进行连线,false则不会
  onChange(data: any): void; // 每次连线都是触发onChange事件
  onRowMouseOver?(row:any):void, // 鼠标移入某一行数据时触发
  onRowMouseOut?(row:any):void, // 鼠标移出某一行数据时触发
};
import ButterflyDataMapping from 'react-data-mapping';
import 'react-data-mapping/dist/index.css';

<ButterflyDataMapping
  width={500}
  height={1000}
  type={'single'}
  columns={columns}
  sourceData={sourceData}
  targetData={targetData}
  mappingData={mappingData}
  className={'butterfly-data-mappint'}
  sourceClassName={'source-column'}
  targetClassName={'target-column'}
/>

如需要更多定制的需求,您可以提issue或者参考Butterfly来定制您需要的需求

More Repositories

1

oss-browser

OSS Browser 提供类似windows资源管理器功能。用户可以很方便的浏览文件,上传下载文件,支持断点续传等。
JavaScript
3,175
star
2

aliyun-openapi-java-sdk

Alibaba Cloud SDK for Java
Java
1,379
star
3

aliyun-oss-java-sdk

Aliyun OSS SDK for Java
Java
1,216
star
4

alibaba-cloud-sdk-go

Alibaba Cloud SDK for Go
Go
1,104
star
5

alicloud-android-demo

Java
990
star
6

aliyun-openapi-python-sdk

Alibaba Cloud SDK for Python
Python
980
star
7

aliyun-oss-php-sdk

Aliyun OSS SDK for PHP
PHP
975
star
8

aliyun-oss-go-sdk

Aliyun OSS SDK for Go
Go
951
star
9

aliyun-oss-python-sdk

Aliyun OSS SDK for Python
Python
935
star
10

darabonba

Darabonba 是一种用于 OpenAPI 的 DSL 语言,可以用来生成多语言的 SDK、Code Sample、Test Case 等代码
JavaScript
894
star
11

alibabacloud-alfa

阿里云微前端解决方案
TypeScript
845
star
12

aliyun-oss-android-sdk

Android SDK for aliyun object storage service
Java
793
star
13

aliyun-cli

Alibaba Cloud CLI
Go
770
star
14

ossfs

Export s3fs for aliyun oss.
C++
735
star
15

aliyun-openapi-php-sdk

[Abandoned] Open API SDK for PHP developers
PHP
605
star
16

terraform-provider-alicloud

Terraform AliCloud provider
Go
590
star
17

aliyun-openapi-net-sdk

Alibaba Cloud SDK for .NET
C#
535
star
18

rds_dbsync

围绕 PostgreSQL Greenplum ,实现易用的数据的互迁功能项目
C
528
star
19

openapi-sdk-php

Alibaba Cloud SDK for PHP
PHP
501
star
20

iotkit-embedded

高速镜像: https://code.aliyun.com/linkkit/c-sdk
C
492
star
21

ossutil

A user friendly command line tool to access AliCloud OSS.
Go
456
star
22

aliyun-oss-ios-sdk

iOS SDK for aliyun object storage service
Objective-C
450
star
23

aliyun-odps-python-sdk

ODPS Python SDK and data analysis framework
Python
433
star
24

alicloud-ios-demo

Demos for AMS iOS SDKs
Objective-C
431
star
25

alibabacloud-microservice-demo

An Alibaba Cloud native microservice demo powered by Apache Dubbo and Spring Cloud Alibaba
Java
379
star
26

api-gateway-demo-sign-java

aliyun api gateway request signature demo by java
Java
371
star
27

NeWCRFs

Python
365
star
28

aliyun-oss-csharp-sdk

Aliyun OSS SDK for C#
C#
360
star
29

surftrace

surftrace is a tool that allows you to surf the linux kernel
Python
332
star
30

conditional-lane-detection

Python
328
star
31

aliyun-log-jaeger

Go
294
star
32

coolbpf

C
240
star
33

tablestore-examples

Example code for aliyun tablestore.
Java
238
star
34

tablestore-timeline

TableStore-Timeline Model for Social scene
Java
236
star
35

aliyun-log-c-sdk

Aliyun LOG Producer for C/C++
C
215
star
36

openapi-sdk-php-client

Official repository of the Alibaba Cloud Client for PHP
PHP
214
star
37

aliyun-log-logback-appender

Java
186
star
38

aliyun-log-android-sdk

Java
179
star
39

alibabacloud-jindodata

alibabacloud-jindodata
176
star
40

openapi-core-nodejs-sdk

OpenAPI POP core SDK for Node.js
JavaScript
175
star
41

aliyun-emapreduce-datasources

Extended datasource support for Spark/Hadoop on Aliyun E-MapReduce.
Scala
168
star
42

aliyun-log-python-sdk

Use python to manage, produce and consume data with Aliyun Log Service.
Python
166
star
43

aliyun-oss-react-native

Objective-C
148
star
44

aliyun-apsaradb-hbase-demo

C++
146
star
45

django-oss-storage

Django storage backends for AliCloud OSS.
Python
144
star
46

aliyun-oss-c-sdk

Aliyun OSS SDK for C
C
144
star
47

react-visual-modeling

A DAG React Component for visualization modeling, suitable for UML, database modeling, data warehouse construction.(一个基于React的数据可视化建模的DAG图,适用于UML,数据库建模,数据仓库建设等业务)
JavaScript
138
star
48

aliyun-oss-ruby-sdk

Aliyun OSS SDK for Ruby
Ruby
138
star
49

ram-policy-editor

AliCloud RAM Policy Editor for OSS
JavaScript
136
star
50

aliyun-log-java-sdk

Java
135
star
51

serverless-aliyun-function-compute

Serverless Alibaba Cloud Function Compute Plugin – Add Alibaba Cloud Function Compute support to the Serverless Framework
JavaScript
134
star
52

alibabacloud-console-components

阿里云企业云管理平台 UI 组件库
TypeScript
133
star
53

aliyun-log-java-producer

Aliyun LOG Java Producer
Java
131
star
54

fc-nodejs-sdk

The Node.js SDK of FunctionCompute.
JavaScript
130
star
55

aliyun-cms-grafana

JavaScript
127
star
56

aliyun-odps-jdbc

JDBC Driver for ODPS
Java
125
star
57

alibabacloud-quantization-networks

alibabacloud-quantization-networks
Python
122
star
58

aliyun-emapreduce-demo

Java
121
star
59

aliyun-maxcompute-data-collectors

Java
119
star
60

alicloud-ams-demo

C#
117
star
61

alibabacloud-iot-device-sdk

alibaba cloud for iot device javascript SDK , connect with linkplatform , run at node/broswer/winxin min program /ali min program. 阿里云IoT物联网平台javascript版本sdk,可以运行在node/broswer/winxin min program /ali min program. 阿里云IoT物联网平台javascript版本sdk,可以运行在node/broswer/winxin min program /ali min program
JavaScript
110
star
62

MaxCompute-Spark

MaxCompute spark demo for building a runnable application.
Scala
106
star
63

api-gateway-nodejs-sdk

The API Gateway SDK for Node.js
JavaScript
104
star
64

cloud-design

阿里云前端组件库,由专有云&公有云前端团队共建
CSS
99
star
65

gm-jsse

开源国密通信纯 Java JSSE 实现
Java
95
star
66

aliyun-odps-console

ODPS Console Source Code.
Java
93
star
67

aliyun-openapi-cpp-sdk

Alibaba Cloud SDK for C++
C++
90
star
68

aliyun-odps-java-sdk

ODPS SDK for Java Developers
Java
89
star
69

aliyun-tablestore-nodejs-sdk

Aliyun TableStore(原OTS) SDK for Node.js
JavaScript
88
star
70

algorithm-base

让算法工程化更简单
Python
86
star
71

aliyun-log-ios-sdk

Aliyun LOG iOS SDK
Swift
84
star
72

iotx-api-demo

PHP
82
star
73

plugsched

Live upgrade Linux kernel scheduler subsystem
Python
82
star
74

DCT-Mask

Python
81
star
75

aliyun-openapi-nodejs-sdk

Alibaba Cloud SDK for Node.js
JavaScript
80
star
76

aliyun-specs

Aliyun Mobile Service CocoaPods specs.
Ruby
77
star
77

alibabacloud-console-design

阿里云管平台研发解决方案
TypeScript
77
star
78

alibabacloud-redis-training-demo

Java
76
star
79

aliyun-oss-php-sdk-laravel

A Laravel service provider for the AliCloud OSS SDK for PHP
PHP
75
star
80

aliyun-tablestore-go-sdk

TableStore SDK for Golang
Go
75
star
81

alibabacloud-sdk

Tea
75
star
82

fc-docker

Dockerfiles for local building or running function of FC
Dockerfile
74
star
83

elasticsearch-repository-oss

Java
74
star
84

dro-sfm

Python
74
star
85

packagist-mirror

Alibaba Cloud Packagist Mirror
Go
73
star
86

react-monitor-dag

A React-based operation/monitoring DAG diagram.(基于React的运维/监控DAG图)
JavaScript
69
star
87

aliyun_assist_client

Aliyun Assist Client 阿里云 云助手
Go
67
star
88

aliyun-log-php-sdk

PHP
67
star
89

alibabacloud-hologres-connectors

alibabacloud-hologres-connectors
Java
66
star
90

aliyun-tsdb-java-sdk

Aliyun TSDB SDK for Java
Java
64
star
91

aliyun-log-log4j-appender

aliyun-log-log4j-appender
Java
63
star
92

fc-java-sdk

The Java SDK of FunctionCompute.
Java
61
star
93

oss-ftp

The ftp proxy for Aliyun OSS.
Python
61
star
94

react-lineage-dag

JavaScript
61
star
95

aliyun-log-cli

Command Line Interface for Aliyun Log Service
Python
60
star
96

csb-sdk

The CSB-SDK is a client-side invocation SDK for HTTP or Web Service API opened by the CSB (Cloud Service Bus) product. It is responsible for invoking the open API and signing the request information.
Java
58
star
97

ossimport

Data migration tool
58
star
98

aliyun-log-flink-connector

flink log connector
Java
58
star
99

oss-emulator

OSS Emulator
Ruby
58
star
100

aliyun-log-dotnetcore-sdk

C#
55
star