A ReactJS CRUD Table

A few days back I had posted an article on this website A HTML CSS JavaScript Front End CRUD Table. Now, I have this front end app with similar functionality. This time I used a JavaScript library, ReactJS, to build the app.

To try this app you will require an installation of NodeJS and basic knowledge of web app front end programming with the HTML, CSS and JavaScript. Basic knowledge of ReactJS library is useful (refer the ReactJS web site's article: Tutorial: Intro to React), especially knowing the concepts of react component and state.

The app is a front end browser client. There is no back end program or a database. We use a JavaScript Array for storing the data and perform CRUD (Create, Read, Update, Delete) operations on that data.

The array with data is defined within the react app itself (in the index.js). In a real web app, the front end would be connecting to a web server and the database via web APIs to access data and perform some functions on it.

The data is a set of items with name and quantity properties. In the app, each item is a table row. We can add an item, update an existing item's quantity or delete an item. Also, navigate to the first or last row of the table.

The data is listed in a HTML table of the user interface. The user interface also has buttons to click on and text boxes to enter input and labels to show text or status message.

The initial items data is defined as follows:

const INITIAL_DATA = [
    { name: "Paper", quantity: 20 },
    { name: "Pencils", quantity: 8 },
    { name: "Paper-clips", quantity: 100 }
]

This becomes the initial state of the items data in the react app. The initial state is set from the react component's componentDidMount lifecycle method of the App component (App is the main (known as parent) component for this app).

    componentDidMount() {
        this.setState({ 
            data: INITIAL_DATA,
            status: { msg: "Items data loaded." }
        });
    }

Further, as we perform CRUD operations on the data from the user interface, this state is updated. In addition to the data, there are other aspects of the app and are maintained as state as shown below in the constructor of the App component definition.

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            rowIx: null,
            name: "",
            quantity: "",
            status: { msg: "" }
        }
        ...
}

The other components for this app (known as child components) are as shown in the App component's render method below. Note that these child components can be related to the specific widgets or a grouping of them within the user interface.

    render() {
        return (
            <div>
                <Heading />

                <TextInputs 
                    handleNameChange={this.handleNameChange} 
                    handleQtyChange={this.handleQtyChange} 
                    name={this.state.name} 
                    quantity={this.state.quantity} 
                />

                <DataTable
                    data={this.state.data}
                    rowIx={this.state.rowIx}
                    radioClick={this.radioClick}
                />              

                <ButtonsBar 
                    addBtnClick={this.addBtnClick}
                    updateBtnClick={this.updateBtnClick}
                    deleteBtnClick={this.deleteBtnClick}
                    clearBtnClick={this.clearBtnClick}
                    navBtnClick={this.navBtnClick}
                />

                <StatusLabel status={this.state.status} />
            </div>
        );
    }

The App also defines all the event listener methods for various widgets of the user interface. For example, the Add button's onClick event listener is defined as addBtnClick.

---

Try the App

You start by creating a react app and use the provided code to complete and run the app.

First, create a new react project, from your operating system terminal command prompt:

npx create-react-app items-app

This creates the items-app project folder with necessary files.

Next:

• Delete all files in the src/ folder.
• Create two files index.js and index.css in the src/ folder.
• Add the code for the two files from this GitHub Gist A ReactJS CRUD Table.

Run the app:

cd items-app
npm start

The user interface for the app in the browser looks like in the below screenshot:

---