https://github.com/vtex/react-jsonschema-table
React component for generating a Table using JSON Schema specification
https://github.com/vtex/react-jsonschema-table
srv-styleguide xp-developer
Last synced: 10 months ago
JSON representation
React component for generating a Table using JSON Schema specification
- Host: GitHub
- URL: https://github.com/vtex/react-jsonschema-table
- Owner: vtex
- Created: 2017-10-17T18:03:28.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-23T17:05:23.000Z (over 7 years ago)
- Last Synced: 2025-04-14T09:15:04.767Z (10 months ago)
- Topics: srv-styleguide, xp-developer
- Language: JavaScript
- Homepage:
- Size: 717 KB
- Stars: 24
- Watchers: 11
- Forks: 2
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-jsonschema-table
> Simple usage react component stylesheet table with inifnite scroll for massive data consumption and line editing using JSONSchema as data structure.
### Work In Progress !
[](https://www.npmjs.com/package/react-modern-library-boilerplate) [](https://standardjs.com)
## Install
```bash
npm install --save react-jsonschema-table
```
## Simple Usage
```js
import React, { Component } from 'react'
import Table from 'react-jsonschema-table'
const schema = {
properties: {
name: {
type: 'string',
title: 'Name',
},
lastName: {
type: 'string',
title: 'LastName',
},
email: {
type: 'string',
format: 'email',
title: 'Email',
}
}
}
class Example extends Component {
render () {
return (
)
}
}
```
## API
**schema:** Is the JSONSchema that contains the estructure and validation rules of the rendered data.
**items**: An array of document objectcs compliant to the schema format. exemple:
```js
items: [{
virtualId: 0, // integer
document: { // actual document
name: 'Jhon',
lastName: 'Doe',
email: 'jhon@doe.com',
id: '2a08db19-894c-4d1a-82b6-f4abe2ebbe33'
}, // compliant to schema, you can have extra fields, they will not show on the Table but will be considered in callbacks
status: 'loaded' // string (one of 'loaded', 'loading', 'lazzy','new','invalid')
}]
```
**pagination**: boolean default true. If JsonschemaTable should paginate items for better handling massive amounts of items. (callback will be called when user has scrolled until 80% of items)
**getMoreItems**: function callback so JsonschemaTable can let you know it needs to load more items if pagination is activated
**shouldSaveData**: boolean default true that activates the save feature. (which can be configured with the following function)
**stagingItemsCallback**: function that return all the staging documents when 'save' button is clicked, so you can save them to your API or whatever.
**checkedItemsCallback**: function that return all the checked documents when 'delete' button is clicked, so you can delete them in your API or whatever.
**toolbarConfigs**: object to configure and toggle toolbar functions. example:
```js
toolbarConfigs: {
hideStateFilterBtn: true,
hideColumnsVisibilityBtn: true,
hideDownloadBtn: true,
hideNewLineBtn: true,
hideDeleteBtn: true,
hideUndoBtn: true,
hideSaveBtn: true,
}
```
## Local setup for developing
Setup project
```bash
npm i
```
Run example
```bash
npm start
```
## License
MIT © [VTEX](https://github.com/vtex)