MJ List Manager

Table of contents

• Getting started
• Installation
• Example
• Features
• Demo
• Credits
• License

Getting started

MJ List manager is an interface which will allow to list out theinformation.

And it is provides the CRUD option. So, it is easy to create, read, update and delete the item in list.

And it is allows to do filter and sort operation.

It is supports mj-drop-down list.

Installation

npm install mj-list-manager

Example

import MJList from 'mj-list-manager/List'; export default class App extends React.Component {

render () {
    const listInfo = {
         list: [
             {id: 1, firstName: 'james', lastName: 'mj', companyInfo: { id: 1}, mobileNo: '9876543212'},
             {id: 2, firstName: 'chris', lastName: 'james', companyInfo: { id: 2}, mobileNo: '9876556789'},
             {id: 3, firstName: 'chris', lastName: 'cd', companyInfo: { id: 2}, mobileNo: '9876543222'},
             {id: 4, firstName: 'james', lastName: 'chris', companyInfo: { id: 3}, mobileNo: '9876543111'},
             {id: 5, firstName: 'james', lastName: 'mj', companyInfo: { id: 1}, mobileNo: '9876543212'},
     
          ], //List of item source
         fields: [
             { name: 'id', title: 'ID', notEditable: true},
             { name: 'firstName', title: 'First Name'},
             { name: 'lastName', title: 'Last Name'},
             { name: 'companyInfo', title: 'Companies', type: 'list',
                 actions: {
                     doSelect: (item) => { console.log('Selected item info', item) },
                 },
                 options: [{
                     id: 1,
                     name: 'Apple',
                 },{
                     id: 2,
                     name: 'Google',
                 },{
                     id: 3,
                     name: 'Amazon',
                 }],
             },
             { name: 'mobileNo', title: 'Mobile number'}
         ],
         actions: {
             doAdd: (item) => { console.log('$ListManagement$ - Add item action - item', item)},
             doUpdate: (item) => { console.log('$ListManagement$ - Update item action - item', item)},
             doDelete: (item) => { console.log('$ListManagement$ - Delete item action - item', item)},
         },
     };
    return (
        <MJList listInfo={listInfo}/>
    );
};

}

Features

Isomorphic Rendering

It renders on the server and client.

CRUD

It allows to list the information with CURD operation.

Filer And Sorting

It allows to filter and sort the list.

Demo

Credits

Author: James

License

ISC