Tien NguyenIn this tutorial, I will show you how to build a React Table example with react-table 7 by a CRUD Application to consume Web API with Hooks, Axios, display data table and modify with Router & Bootstrap.
Full Article: https://bezkoder.com/react-table-example-hooks-crud/
Overview of React Table example CRUD with Web API
We will build a React Table Tutorial Application in that:
- Each Tutorial has id, title, description, published status.
- We can create, retrieve, update, delete Tutorials.
- List of Tutorials is shown in a Table using
react-table7 - There is a Search bar for finding Tutorials by title.
Here are screenshots of our React.js CRUD Application.
- Create a Tutorial:
- Retrieve all Tutorials with a data table:
- Click on Edit button to update an item:
On this Page, you can:
- change status to Published using Publish button
- delete the item using Delete button
- update the item details with Update button
- Search Tutorials by title:
This React-Table App Client consumes the following Web API:
| Methods | Urls | Actions |
|---|---|---|
| POST | /api/tutorials | create new Tutorial |
| GET | /api/tutorials | retrieve all Tutorials |
| GET | /api/tutorials/:id | retrieve a Tutorial by :id
|
| PUT | /api/tutorials/:id | update a Tutorial by :id
|
| DELETE | /api/tutorials/:id | delete a Tutorial by :id
|
| DELETE | /api/tutorials | delete all Tutorials |
| GET | /api/tutorials?title=[keyword] | find all Tutorials which title contains keyword
|
You can find step by step to build a Server like this in one of these posts:
- Express, Sequelize & MySQL
- Express, Sequelize & PostgreSQL
- Express & MongoDb
- Spring Boot & MySQL
- Spring Boot & PostgreSQL
- Spring Boot & MongoDB
- Spring Boot & H2
- Spring Boot & Cassandra
- Django & MySQL
- Django & PostgreSQL
- Django & MongoDB
React App Diagram with Axios and Router
Let's see the React Application Diagram that we're gonna implement:
– The App component is a container with React Router. It has navbar that links to routes paths.
– TutorialsList gets and displays Tutorials in table using react-table v7.
– Tutorial has form for editing Tutorial's details based on :id.
– AddTutorial has form for submission new Tutorial.
– They call TutorialDataService functions which use axios to make HTTP requests and receive responses.
Technology
- React 16/17
- react-table 7.6.3
- react-router-dom 5.2.0
- axios 0.21.1
- bootstrap 4
- fontawesome-free 5
Project Structure
Now look at the project directory structure:
Let me explain it briefly.
-
package.json contains 4 main modules:
react,react-router-dom,axios&bootstrap. -
Appis the container that hasRouter& navbar. - There are 3 items using React Hooks:
TutorialsList,Tutorial,AddTutorial. - http-common.js initializes axios with HTTP base Url and headers.
-
TutorialServicehas functions for sending HTTP requests to the Apis. - .env configures port for this React Table CRUD App.
For more steps and Github source code, please visit:
https://bezkoder.com/react-table-example-hooks-crud/
More Practice
Fullstack:
- React + Spring Boot + MySQL: CRUD example
- React + Spring Boot + PostgreSQL: CRUD example
- React + Spring Boot + MongoDB: CRUD example
- React + Node.js + Express + MySQL: CRUD example
- React + Node.js + Express + PostgreSQL example
- React + Node.js + Express + MongoDB example
- React + Django + Rest Framework example
Related Posts:
- React Hooks File Upload example with Axios & Progress Bar
- React Hooks: JWT Authentication (without Redux) example
- React Hooks + Redux: JWT Authentication example
Serverless with Firebase:
Integration:
Table Pagination:
React Table Pagination (Server side) with Search | react-table v7
