React-collection-manager NPM

react-collection-manager

react-collection-manager is a manager to list, add, edit, delete documents in mongo collection automatically
This package use Simpl-schema to build automatically the create and edit forms with Uniforms thanks to material-ui version
This package is only compatible with Material-ui > 4.0

react-collection-manager in action

Demonstration and Documentation

For examples in action and full documentation, go to StoryBook

To run that demo on your own computer, clone this repository and :

$ yarn install
$ yarn storybook

Getting started

Installation

Install the package

$ yarn add react-collection-manager

Install the dependencies in your project

$ yarn add @material-table/core

Usage

import React from 'react'
import ReactCollectionManager from 'react-collection-manager'
import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles'

const entries = [
  { _id: 0, name: 'Test 1', description: 'description', status: 0 },
  { _id: 1, name: 'Test 2', description: 'description', status: 1 },
]

const columns = [
  { name: 'Name', property: 'name' },
  { name: 'Description', property: 'description' },
  { name: 'State', property: 'status', render: (data) => (data.status === 1 ? 'OK' : 'NOK') },
]

const App = () => {
  return (
    <MuiThemeProvider>
      <ReactCollectionManager
        title="Example"
        columns={columns}
        entries={entries}
        insertMethod={async (values) => {
          /* do some stuff */
        }}
        updateMethod={async (values) => {
          /* do some stuff */
        }}
        deleteMethod={async (values) => {
          /* do some stuff */
        }}
        canAdd
        canEdit
        canDelete
      />
    </MuiThemeProvider>
  )
}