React Table CRUD example using Hooks & react-table v7

#react #webdev #javascript #todayilearned

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:

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 has Router & 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.