react-data-mapping v1.3.17

English | 简体中文

✨ Features

• support for custom field attributes
• support custom table name
• support field connection number limit
• support field sorting
• support delay rendering, automatic adaptation of height and width, blank padding around
• support custom empty field content

🔨QUCIK DEMO LOCAL

git clone git@github.com:aliyun/react-data-mapping.git
npm install
cd example
npm install
npm start

📦 Install

npm install react-data-mapping

API：

DataMapping属性

Column

A column describes a data object and is an item in a Columns.

sourceData

Source table data，when type is single , the sourceData type is { }; when type为 mutiply , the sourceData type is .

targetData

Target table data, when type is single , the targetData type is { }, when type is mutiply , the targetData type is , Please check sourceData

mappingData

config

The extra configuration of components

extraPos

Padding is reserved when rendering the canvas

checkable

Table supports checkbox

🔗API

interface columns { // setting the attributes of each column
  title ? : string; // the title of each column, similar to the concept of thead
  key: string; // the unique mark of each column, corresponding to the key value on the data
  width ? : number; // width of each column
  primaryKey: boolean // whether the value corresponding to the key in this column is used as a unique sign
  render?(text: any, record: any, index: number): void; // Custom rendering function
}

interface config {
  delayDraw: number; // Delayed rendering, this component must ensure that the canvas container rendering (including animation execution) is completed before rendering, otherwise the coordinates will be offset, such as: antd's modal animation
  extraPos ? : { // Padding is reserved when the canvas is rendered
      paddingLeft ? : number,
      paddingRight ? : number,
      paddingTop ? : number,
      paddingBottom ? : number,
      paddingCenter ? : number,
    },
    sortable ? : boolean | { // Sorting support, if it is true, the canvas will support sorting
      source ? : boolean, // If it is true, only the left source table supports sorting
      target ? : boolean // If it is true, only pure right target table supports sorting
    },
    linkNumLimit ? : number | { // Connection Number support, if it is number, the canvas supports n connections
      source ? : number, // If it is number, only the left source table supports n connections
      target ? : number // If it is number, only the left target table supports n connections
    },
    checkable ？: {  // table supports checkbox
      source ? : boolean, // // If it is true, only pure right target table supports checkbox
      target ? : boolean
    }
}

interface ComProps { // component props
  width ? : number; // component width
  height ? : number; // component height
  type ? : string; // "single"or"mutiply", single-table mapping (above pic one) or multi-table mapping (above pic two)
  className ? : string; // component className
  sourceClassName ? : string; // source table className
  targetClassName ? : string; // target table className
  columns: Array < columns > ; // please refer to the above interface columns
  sourceData: Array < any > | Object; // single-table mapping corresponds to Object, multi-table mapping Array, please refer to demo
  targetData: Array < any > | Object; // single-table mapping corresponds to Object, multi-table mapping Array, please refer to demo
  mappingData: Array < any > ; // initialize correspondence data, please refer to demo
  emptyContent ? : string | JSX.Element; // show content when table field is empty
  emptyWidth ? : number | string; // table container width when table field is empty
  isConnect?(edge: any): boolean; // isConnect event is triggered before you connect an edge, return true, it will connect, and false will not
  onChange(data: any): void // onChange event is triggered every time you connect edge
  onRowMouseOver?(row:any):void, // onRowMouseOver event is triggered when you move the cursor onto a row of data
  onRowMouseOut?(row:any):void, // onRowMouseOver event is triggered when you move the cursor out of a row of data
};

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-mapping'}
  sourceClassName={'source-column'}
  targetClassName={'target-column'}
/>

If you need more customized requirements, you can refer to issue or butterfly to customize your needs