/react-autogenerate-crud

React autogenerate crud is an automatic way to generate CRUD for React

Primary LanguageJavaScriptMIT LicenseMIT

React Auto Generate CRUD

Thank you very much to the best team I have ever had, they are:

  1. Hartanto Boby
  2. Boby Harmoko
  3. And me

This project is made open source to help other people who use react in developing their backend, because we think the process of making CRUD to master data is very time consuming and especially it is done many times.

To try this project, follow this instruction :

  1. Clone this project or download.
  2. Open the directory project, go to folder server ({DIR_PROJECT}/server). After that, open your terminal in server directory and then type npm install on it. After finished, you have to type this command npm run start, if server already run open your browser and go to localhost:3000, if there are some dummy api from json server so thats server can be run.
  3. After that open your terminal in root directory project ({DIR_PROJECT}) and then type npm install on your terminal. If finished, then type npm run start on your terminal, wait until webpack compiling success, then open your browser type localhost:9000.
  4. Enjoy it

This project uses several dependencies:

  1. "@material-ui / core": "^ 1.4.1",
  2. "@material-ui / icons": "^ 2.0.0",
  3. "axios": "^ 0.18.0",
  4. "classnames": "^ 2.2.6",
  5. "draft-js": "^ 0.10.5",
  6. "draftjs-to-html": "^ 0.8.4",
  7. "html-to-draftjs": "^ 1.4.0",
  8. "immutable": "^ 3.8.2",
  9. "lodash": "^ 4.17.10",
  10. "moment": "^ 2.22.2",
  11. "prop-types": "^ 15.6.2",
  12. "react-draft-wysiwyg": "^ 1.12.13",
  13. "react-dropzone": "^ 4.2.13",
  14. "react-number-format": "^ 3.5.0",
  15. "react-select": "^ 2.0.0",
  16. "react-text-mask": "^ 5.4.3",
  17. "validate.js": "^ 0.12.0"
  18. "file-saver": "^1.3.8"
  19. "xlsx": "^0.13.3"

And also, this project already has features including:

No. Name Status
1 Access Control Level (CRUD) done
2 Pagination done
3 Limitation done
4 Auto generate table (depending on the configuration column you want to display) done
5 Merging the column table done
6 Sorting column ASC & DESC done
7 Delete Bulk & Single Item done
8 Add an additional button top of table done
9 Add an additional button at each row done
10 Auto generate form (depend on the configuration) done
11 Export data to CSV done
12 Autoload data in edit mode done
13 Export data to excel done
14 Import data from excel done
15 Form details done
16 Submit for edit data, and add new done
17 Search done
18 Sorting using api done
19 Add some component from outside, to render in form crud done

Click here to know, how to use this generator

Below is a documentation of this project

No Props Name Type Default Required Description
1 aclId String * No aclId is used to provide each user with an access limit to the actions that can be carried out in this generator, namely, add, update, delete
2 aclRules Object 
                   
{
    "*": {
        create: true (required),
        read: true (required),
        update: true (required),
        delete: true (required),
        export: true (required),
        import: true (required)
    }
}
No From the aclId given above, from here it can be seen that the user can only access several modules or everything
3 initialLimit Number 10 No Every time a table is created, the data limit displayed and requested by the server uses this number, but this number can change if the limit per page in the table view is changed
4 title String '' Yes Title of table
5 server Object {} Yes See full documentation at here
6 table Object {} No See full documentation here
7 fields Array [] Yes See full documentation here
8 export Object {} Yes See full documentation here
9 import Object {} Yes See full documentation here
10 loading Object {} No See full documentation here
11 additionalComponentInForm Object 
{
    top: () => <h1>examples</h1> (functional component)
    bottom: () => <h2>examples</h2> (functional component)
}
 No This configuration is used to add several components to the form that has been created automatically

Click here to see the configuration

If you interest, give us your star for this project :)