React Table CRUD example using Hooks & react-table v7
Tags: react, webdev, javascript, todayilearned
Published: 2021-04-02 09:51:48

In this tutorial, I will show you how to build a React Table example with <a href="https://github.com/tannerlinsley/react-table">react-table</a> 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/](https://bezkoder.com/react-table-example-hooks-crud/)

<h2>Overview of React Table example CRUD with Web API</h2>
We will build a React Table Tutorial Application in that:
<ul>
	<li>Each Tutorial has id, title, description, published status.</li>
	<li>We can create, retrieve, update, delete Tutorials.</li>
	<li>List of Tutorials is shown in a Table using <code>react-table</code> 7</li>
	<li>There is a Search bar for finding Tutorials by title.</li>
</ul>

Here are screenshots of our React.js CRUD Application.

- Create a Tutorial:

![react-table-example-crud-react-table-v7-create-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20mkftpup7l91tmp4qru.png)

- Retrieve all Tutorials with a data table:

![react-table-example-crud-react-table-v7-retrieve-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3xbbj78lfeh3u29puyh.png)

- Click on <strong>Edit</strong> button to update an item:

![react-table-example-crud-react-table-v7-retrieve-one-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kp701sl5e3mkma6ti0of.png)

On this Page, you can:
<ul>
	<li>change status to <strong>Published</strong> using <strong>Publish</strong> button</li>
	<li>delete the item using <strong>Delete</strong> button</li>
	<li>update the item details with <strong>Update</strong> button</li>
</ul>

![react-table-example-crud-react-table-v7-update-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvbv3br563xafdxrah65.png)

- Search Tutorials by title:

![react-table-example-crud-react-table-v7-search-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjz9jn8cg52lph948i5l.png)

This React-Table App Client consumes the following Web API:
<div class="table-responsive">
<table class="table table-hover  table table-hover" width="100%">
<thead>
<tr>
<th>Methods</th>
<th>Urls</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>POST</td>
<td>/api/tutorials</td>
<td>create new Tutorial</td>
</tr>
<tr>
<td>GET</td>
<td>/api/tutorials</td>
<td>retrieve all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>/api/tutorials/:id</td>
<td>retrieve a Tutorial by <code>:id</code></td>
</tr>
<tr>
<td>PUT</td>
<td>/api/tutorials/:id</td>
<td>update a Tutorial by <code>:id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>/api/tutorials/:id</td>
<td>delete a Tutorial by <code>:id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>/api/tutorials</td>
<td>delete all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>/api/tutorials?title=[keyword]</td>
<td>find all Tutorials which title contains <code>keyword</code></td>
</tr>
</tbody>
</table>
</div>

You can find step by step to build a Server like this in one of these posts:
- <a href="https://bezkoder.com/node-js-express-sequelize-mysql/">Express, Sequelize & MySQL</a>
- <a href="https://bezkoder.com/node-express-sequelize-postgresql/">Express, Sequelize & PostgreSQL</a>
- <a href="https://bezkoder.com/node-express-mongodb-crud-rest-api/">Express & MongoDb</a>
- <a href="https://bezkoder.com/spring-boot-jpa-crud-rest-api">Spring Boot & MySQL</a>
- <a href="https://bezkoder.com/spring-boot-postgresql-example/">Spring Boot & PostgreSQL</a>
- <a href="https://bezkoder.com/angular-spring-boot-mongodb/">Spring Boot & MongoDB</a>
- <a href="https://bezkoder.com/spring-boot-jpa-h2-example/">Spring Boot & H2</a>
- <a href="https://bezkoder.com/spring-boot-cassandra-crud/">Spring Boot & Cassandra</a>
- <a href="https://bezkoder.com/django-crud-mysql-rest-framework/">Django & MySQL</a>
- <a href="https://bezkoder.com/django-postgresql-crud-rest-framework/">Django & PostgreSQL</a>
- <a href="https://bezkoder.com/django-mongodb-crud-rest-framework/">Django & MongoDB</a>

<h2>React App Diagram with Axios and Router</h2>
Let's see the React Application Diagram that we're gonna implement:

![react-table-example-crud-react-table-v7-components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f34s2zxsbm3l3og682q4.png)

– The <code>App</code> component is a container with React <code>Router</code>. It has <code>navbar</code> that links to routes paths.

– <code>TutorialsList</code> gets and displays Tutorials in table using <code>react-table</code> v7.
– <code>Tutorial</code> has form for editing Tutorial's details based on <code>:id</code>.
– <code>AddTutorial</code> has form for submission new Tutorial.

– They call <code>TutorialDataService</code> functions which use <code>axios</code> to make HTTP requests and receive responses.

<h2>Technology</h2>
<ul>
	<li>React 16/17</li>
	<li>react-table 7.6.3</li>
	<li>react-router-dom 5.2.0</li>
	<li>axios 0.21.1</li>
	<li>bootstrap 4</li>
	<li>fontawesome-free 5</li>
</ul>

<h2>Project Structure</h2>
Now look at the project directory structure:

![react-table-example-crud-react-table-v7-project-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfl3rjjhzb6x43k55ayr.png)

Let me explain it briefly.

- <strong>package.json</strong> contains 4 main modules: <code>react</code>, <code>react-router-dom</code>, <code>axios</code> & <code>bootstrap</code>.
- <code>App</code> is the container that has <code>Router</code> & navbar.
- There are 3 items using React Hooks: <code>TutorialsList</code>, <code>Tutorial</code>, <code>AddTutorial</code>.
- <strong>http-common.js</strong> initializes axios with HTTP base Url and headers.
- <code>TutorialService</code> has functions for sending HTTP requests to the Apis.
- <strong>.env</strong> configures <em>port</em> for this React Table CRUD App.

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

## More Practice

Fullstack:
- <a href="https://bezkoder.com/react-spring-boot-crud/">React + Spring Boot + MySQL: CRUD example</a>
- <a href="https://bezkoder.com/spring-boot-react-postgresql/">React + Spring Boot + PostgreSQL: CRUD example</a>
- <a href="https://bezkoder.com/react-spring-boot-mongodb/">React + Spring Boot + MongoDB: CRUD example</a>
- <a href="https://bezkoder.com/react-node-express-mysql/">React + Node.js + Express + MySQL: CRUD example</a>
- <a href="https://bezkoder.com/react-node-express-postgresql/">React + Node.js + Express + PostgreSQL example</a>
- <a href="https://bezkoder.com/react-node-express-mongodb-mern-stack/">React + Node.js + Express + MongoDB example</a>
- <a href="https://bezkoder.com/django-react-hooks/">React + Django + Rest Framework example</a>

Related Posts:
- <a href="https://bezkoder.com/react-hooks-file-upload/">React Hooks File Upload example with Axios & Progress Bar</a>
- <a href="https://bezkoder.com/react-hooks-jwt-auth/">React Hooks: JWT Authentication (without Redux) example</a>
- <a href="https://bezkoder.com/react-hooks-redux-login-registration-example/">React Hooks + Redux: JWT Authentication example</a>

Serverless with Firebase:
- <a href="https://bezkoder.com/react-firebase-hooks-crud/">React Hooks + Firebase Realtime Database: CRUD App</a>
- <a href="https://bezkoder.com/react-hooks-firestore/">React Hooks + Firestore example: CRUD app</a>

Integration:
- <a href="https://bezkoder.com/integrate-reactjs-spring-boot/">Integrate React with Spring Boot</a>
- <a href="https://bezkoder.com/integrate-react-express-same-server-port/">Integrate React with Node.js Express</a>

Table Pagination:
<a href="https://bezkoder.com/react-table-pagination-server-side/">React Table Pagination (Server side) with Search | react-table v7</a>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzzdvx6jb4fe5ego873n.png)