读写分离
每个数据单元都分别有读状态和写状态
独立编辑
可以单独控制每个数据单元的编辑状态
支持在表格中使用
在表格的单元格编辑时使用数据单元
数据单元是读写分离的;请点击右侧小笔进行编辑

import React, { useState } from 'react'
import {Input} from 'gantd'
//import {Input} from 'data-cell-g'
const Demo = () => {
  const [value, setValue] = useState('数据单元是读写分离的;请点击右侧小笔进行编辑')
  const onSave = (id, value, cb) => {
    console.log(id, value);
    cb()
  }
  return <Input allowEdit={true} onSave={onSave} value={value} onChange={setValue} />
}
  
快速构建
通过schema数据快速构建出复杂表单
灵活布局
通过uiSchema对表单进行快速的布局自定义
读写分离
基于数据单元实现表单的读写分离
支持嵌套
通过schema语义可以描述出复杂类型的嵌套型表单
拓展灵活
基于数据单元的可拓展性,可以支持自定义数据单元的拓展
结构明了
同时支持可选的headerConfig配置负责表格标题的表现
数据驱动表单
暂无
数据文本
暂无
+86 13945689732

  import React, { useState, useRef, useCallback, useEffect } from 'react'
  import { Button, notification } from 'antd'
  import { EditStatus, SwitchStatus, SchemaForm } from 'gantd'
  //import SchemaForm from 'schema-form-g'
  //import {EditStatus, SwitchStatus} from 'data-cell-g'
  const schema = {
      type: "object",
      title: "数据驱动表单",
      required: ["key_1"],
      propertyType: {
          key_1: {
              title: "文本",
              type: "string",
          },
          key_2: {
              title: "金额",
              type: "string",
              componentType: "InputMoney"
          },
          key_3: {
              title: "超链接",
              type: "string",
              componentType: "InputUrl"
          },
          key_4: {
              title: "手机号",
              type: "string",
              componentType: "InputCellPhone"
          },
      }
  }
  
  const uiSchema = {
      "field:col": 12,
      "form:gutter": 10,
      "field:labelCol": 4,
      "field:wrapperCol": 20,
      "field:labelAlign": "left",
      "form:style": {padding:10,background:'transparent'},
  }
  
  export default function BasicUse() {
      const [edit, setEdit] = useState(EditStatus.CANCEL)
      const formRef = useRef(null)
      const [data, setData] = useState({
          key_1: '数据文本',
          key_2: {
              key: 'CNY',
              value: '12'
          },
          key_3: 'https://www.npmjs.com/',
          key_4: {
              key: '86',
              value: '13945689732'
          }
      })
  
      const onSubmit = async () => {
          if (!formRef.current) return
          const { errors, values: formValues } = await formRef['current'].validateForm();
          if (errors) { return }
          console.log('formValues', formValues)
      }
      const useSwitch = useCallback(() => {
          setEdit(SwitchStatus)
      }, [])
  
      const titleConfig = {
          "title:extra": (<>
              {edit === EditStatus.EDIT && <Button onClick={useSwitch} className='gant-margin-5' size="small">退出编辑</Button>}
              {edit !== EditStatus.EDIT && <Button onClick={useSwitch} className='gant-margin-5' size="small">进入编辑</Button>}
              {edit === EditStatus.EDIT && < Button
                  onClick={() => {
                      setEdit(EditStatus.SAVE)
                      onSubmit()
                  }}
                  className='gant-margin-5' size="small"
                  type="primary"
              >
                  保存
              </Button>}
          </>)
      }
  
      const onSave = useCallback((id, value, cb) => {
          setData({ ...data, [id]: value })
          cb()
      }, [data])
  
      return <>
          <SchemaForm
              wrappedComponentRef={formRef}
              onSave={onSave}
              edit={edit}
              data={data}
              schema={schema}
              uiSchema={uiSchema}
              titleConfig={titleConfig}
          />
      </>
  }
  
单元格编辑
基于数据单元实现表单的读写分离单元格编辑
撤销重做
内置immutable数据实现撤销重做功能
虚拟滚动
大批量数据展现时性能优化
欢迎
😄 欢迎使用, 欢迎提PR和issue,感谢star,多多关照 🙏