This section, we will use Next.js to make request to RESTful API. Then use Material UI - Table to bind Data Object in Data Table.
Required Environments
1.Before start, we need our starter Project from Material UI + Next.js Part.1 and RESTful API Service from Express.js+TypeORM+RDBMS Part.1.
2.Then create "src/app/appconfig.json" file and set our API URL.
{
"api":{
"url":"http://localhost:5000/user/"
}
}
3.We will make API request on our source-code using axios, that mean we should be run the command to install axios first.
npm install axios
1.Material UI Data Table for render Data from API
Prepare our Material UI Data Table and columns. We should be make it as a component. So we will create "usertable.tsx" file on "src/components/user" folder and put the Material UI Data Table script.
Update columns object to put row render 2 buttons
Put GET request script to load User data form API on useEffect.
Replace User data to "rows" property on DataGrid and remove not use script out.
Put the "UserTable" component on main script.
2.Material UI Input Form for create/update data to API
Prepare our Input Form. We will use one form for create/update both. So we will create "page.tsx" on "src/user/form" folder. and put Material UI Input / Button script.
On useEffect, Checking User ID to load exists data and set it on Input Form for update process.
Create onSave function and set it on our form at "onSubmit" property.
3.Material UI Confirm Dialog for confirm delete data request
Delete is sensitive activity, before do it we should be inform user. we will use dialog box to confirm with user. Put Material UI Dialog script on "src/components/user/usertable.tsx" file. Then prepare relate functions for confirm/cancel the activity.
Now, our Next.js app can done Create/Update/Delete on RDBMS.
For visitor who are need my source-code, this is my github project link:
https://github.com/zodic/next-mui2
See ya next time m(_ _)m
