Inline table editing with edit icon and delete in React Js

Inline table editing with edit icon and delete in React Js. This is a blog post on how to implement inline table editing with an edit icon, which enables users of the app/site to make edits without leaving the input field

This is a simple React Js tutorial about how to edit inline tables and delete rows.

Inline table editing with edit icon and delete in React Js. The “react editable table – codesandbox” is a component that allows users to create an inline table with edit icons and a delete button.

The data flow between the client and the server is managed using CRUD operations. So, in this tutorial, we’ll learn how to do CRUD operations in react js utilizing the rest API, including inline table editing using the edit icon and delete.

In our application, we sometimes need to insert, amend, and remove data in a Table utilizing inline editing. 

We covered the crud operation in react js utilizing the rest api in our previous post. In this article, we’ll go through how to add and change records using a table, bootstrap, and iconography.

If we have a single page where we can view a list of our company’s employees and we want to do the same action, instead of developing four components to accomplish these activities, we may construct a single component to meet our needs. So, in this tutorial, we’ll use bootstrap and the font great icon to add, update, and remove rows of an HTML table.

inline table editing in react js with edit icon and remove

For the demonstration, we are utilizing a free REST API.

1. GET http://restapi.adequateshop.com/api/Tourist from http://restapi.adequateshop.com/api/T
2. POST a request to http://restapi.adequateshop.com/api/Tourist.
3. PUT http://restapi.adequateshop.com/api/Tourist/15863 into your browser
4. DELETE api/Tourist/15863 http://restapi.adequateshop.com

If you want to learn more about RESTful APIs, check out the link below, where we’ve included an example rest API for testing.

Using React,js, add action icons (edit, remove) to the table.

• Create a react js app using the command below.

crud-app npx create-react-app

• Using the commands below, we can install bootstrap CSS and font-awesome in our project.

npm install –save font-awesome npm install –save bootstrap

In the src folder, create two directories named “httphelpers” and “components.”

Create one file restHelper.js in the httphelpers folder, and three files Touristtable.js, Crudtourists.js, and Addtourist.js in the components folder. 

restHelper.js is a static-typed file that includes widely used functions. The advantage of writing such a helper class is that we can write all common functions in one file and reuse them in any component, allowing us to retain code reusability and maintainability.

restHelper.js

export const restHelper = () => { const callAPI = async (endpointurl, options = {}) => { const defaultHTTPMethod = “GET” const defaultHTTPHeaders = { //set defaultHeaders of Http request “Content-Type”: “application/json”, Accept: “application/json”, } const controller = new AbortController() //using AbortController to cancel ongoing fetch requests options.signal = controller.signal options.method = options.method || defaultHTTPMethod options.headers = options.headers ? { …defaultHTTPHeaders, …options.headers } : defaultHTTPHeaders options.body = JSON.stringify(options.body) || false if (!options.body) delete options.body setTimeout(() => { // cancel request if it will take more then 5s controller.abort() }, 5000) try { const apiResponse = await fetch(endpointurl, options) return await apiResponse.json() } catch (err) { return err } } //calling get API For fetching data const get = (endpointurl, options = {}) => callAPI(endpointurl, options) //Post to insert const postCreate = (endpointurl, options) => { options.method = “POST” return callAPI(endpointurl, options) } //Put Api calling const putUpdate = (endpointurl, options) => { options.method = “PUT” return callAPI(endpointurl, options) } //Delete Api calling const deletedata = (endpointurl, options) => { options.method = “DELETE” return callAPI(endpointurl, options) } return { get, postCreate, putUpdate, deletedata, } }

Touristtable.js

import React from “react” import Form from “./Addtourist” import ‘bootstrap/dist/css/bootstrap.min.css’; import ‘font-awesome/css/font-awesome.min.css’; const Touristtable = ({ tourists, postTourist, updateTourist, deleteTourist }) => { debugger; const showUpdateUser = id => { const form = document.getElementsByClassName(`show-form-${id}`) form[0].classList.toggle(“hide-form”) } const Row = ({ tourist }) => { return ( <>{tourist.tourist_name}{tourist.tourist_email}{tourist.tourist_location} showUpdateUser(tourist.id)}> deleteTourist(tourist.id)}></> ) } return ({tourists && tourists.map(u => )}

) Touristtable default export

Addtourist.js

import React, { useState } from “react” import ‘font-awesome/css/font-awesome.min.css’; import { faL } from “@fortawesome/free-solid-svg-icons”; const Addtourist = ({ userData = {}, postUser, updateTourist,showUpdateUser }) => { const [user, setUser] = useState({ id: userData.id ?? 0, tourist_name: userData.tourist_name ?? “”, tourist_email: userData.tourist_email ?? “”, tourist_location: userData.tourist_location ?? “”, }) const handleValue = e => { setUser({ …user, [e.target.name]: e.target.value }) } const submitUser = e => { e.preventDefault() debugger; if (user.tourist_name === “” || user.tourist_email === “” || user.tourist_location === “”) return if (userData.id) { debugger; updateTourist(userData.id, user) } else { postUser(user) } setUser({ …user, “tourist_name”: “”, “tourist_email”: “”, “tourist_location”: “” }) } const hiderow = e => { showUpdateUser(userData.id); } const isAdd = !userData.id ? true : false; return ( <> handleValue(e)} /> handleValue(e)} /> handleValue(e)} />{isAdd ? : } {isAdd ? “” : }</> ) } export default Addtourist

Crudtourists.js

import React, { useState, useEffect } from “react” import Form from “./Addtourist” import Tablelist from “./Touristtable” import ‘bootstrap/dist/css/bootstrap.min.css’; import { restHelper } from “../httphelpers/restHelper” const Crudtourists = () => { const [tourists, settourists] = useState(null) const url = “http://192.168.1.105:234/api/Tourist” const api = restHelper() useEffect(() => { gettourists() }, []) const postTourist = tourist => { api .postCreate(`${url}`, { body: tourist }) .then(res => gettourists()) .catch(err => console.log(err)) } const updateTourist = (id, tourist) => { api .putUpdate(`${url}/${id}`, { body: tourist }) .then(res => gettourists()) .catch(err => console.log(err)) } const deleteTourist = id => { api .deletedata(`${url}/${id}`, {}) .then(res => gettourists()) .catch(err => console.log(err)) } const gettourists = () => { api .get(`${url}`) .then(res => { if(res && res.data) { settourists(res.data) } }) .catch(err => console.log(err)) } if (!tourists) return null return ( <>

Create a New Record

Every tourist

</> ) } export default Crudtourists

App.js

import ‘./App.css’; import CrudData from “./components/Crudtourists” import ‘bootstrap/dist/css/bootstrap.min.css’ import ‘bootstrap/dist/css/bootstrap.min.css’; function App() return (

); export the default application;

I’m assuming you’re acquainted with the React Js framework and how to build React Js apps. If not, have a look at the following articles:

React Js has a new inline table editing feature that allows users to edit the data in the cells using an edit icon and delete button. Reference: react-table edit button.

Related Tags

• react editable table codepen
• react editable table component
• react editable table example
• reactjs – add/remove a table row
• material-ui table edit row