Skip to content
A react/redux implementation of an editable property grid.
JavaScript Other
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
scripts Fix project not being correctly published as a lib Nov 14, 2016
src
test
.gitignore Upgrade dependencies, fixing nested sortable items May 10, 2017
.npmignore Upgrade dependencies, fixing nested sortable items May 10, 2017
CHANGELOG.md Upgrade packages with deprecations Jun 1, 2017
LICENSE Refactor utilities dir Nov 11, 2016
README.md Fix docs Dec 23, 2016
index.html
index.js Fix interaction with parent store Nov 16, 2016
package.json
screenshot.png Fix interaction with parent store Nov 16, 2016
yarn.lock Upgrade packages with deprecations Jun 1, 2017

README.md

react-property-grid

React/redux implementation of a hierarchical, editable property grid, backed by JSON Schema.

Heavily inspired by Treema, this React component takes a JSON Schema and optional default JSON data to dynamically build a powerful and performant hierarchical grid with editable values.

This project is a WIP: some important features are not there yet, but hopefully they will soon!

screenshot

Installation

npm install --save react-property-grid

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import PropertyGrid from 'react-property-grid'

ReactDOM.render(
  <PropertyGrid schema={schema} />,
  document.getElementById('property-grid')
)

Options

Name Description Default
schema A valid JSON Schema {"$schema": "http://json-schema.org/draft-04/schema#", "properties": {"hello": {"type": "string"}}}
data Optional default JSON data {"hello": "world"}
title Optional header title string "Properties"
onChange Optional callback executed when data changes function(data) { console.log(data) }

To do

  • Fields validation
  • Selection from anyOf list when adding an item (now it's auto-selecting the first one)
  • allOf properties
  • oneOf properties
  • not properties
  • object's minProperties and maxProperties
  • array's uniqueItems
  • schema- and property-dependencies
  • patternProperties
  • Circular $refs
  • More useful description on caption row
  • Custom field editors?

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Credits

Thanks to Irion for financing this project and contributing to it!

License

The MIT License (MIT)

You can’t perform that action at this time.