In 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-table
7 - 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
. -
App
is 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.
-
TutorialService
has 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
Top comments (4)
Really like the way react-table approach to solve the problem. I'm happy using it so far on refiapp.vercel.app/
Pretty tool :)
Nice post.
With which tool did you generate the chart?
dev-to-uploads.s3.amazonaws.com/up...
Hi, I just use PowerPoint :)