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.

For more steps and Github source code, please visit:
https://bezkoder.com/react-table-example-hooks-crud/

More Practice

Fullstack:

Serverless with Firebase:

Integration:

Table Pagination:
React Table Pagination (Server side) with Search | react-table v7

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.