azharprabudi/react-autogenerate-crud

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

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

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

react-autogenerate-crud's Issues

Import & export excel (js-xlsx lib)

Add form details

Add color red to text helper when validation is false

Cannot remove item in select multiple

Error same key if there a same title name, in table

Need testing per module

Cannot Remove Checkbox

calender date, time, datetime is to hard to used

TextField value is undefined in select basic, select async

Form autocomplete cannot set value

InputNominal after onchange, focus is missing

Select menu item, overlapping with paper component

Bug cannot add button each row

Checkbox value need to parse into string

Return the value object to user

dont use unique id as a key