Package Exports

react-collection-manager

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-collection-manager) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>
  )
}

JSPM