Simple usage react component stylesheet table with inifnite scroll for massive data consumption and line editing using JSONSchema as data structure.
npm install --save react-jsonschema-tableimport 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 (
<Table schema={schema} />
)
}
}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:
items: [{
virtualId: 0, // integer
document: { // actual document
name: 'Jhon',
lastName: 'Doe',
email: '[email protected]',
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:
toolbarConfigs: {
hideStateFilterBtn: true,
hideColumnsVisibilityBtn: true,
hideDownloadBtn: true,
hideNewLineBtn: true,
hideDeleteBtn: true,
hideUndoBtn: true,
hideSaveBtn: true,
}Setup project
npm iRun example
npm startMIT © VTEX
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent