In this detailed post, we will show you how to create the dynamic table component in React js and how to dynamically add the rows in React table component. Not only but also how to remove the table row data using the functional component React hooks and Bootstrap 5.

To dynamically insert the data, you need a table component. We will design our React Table component using the Bootstrap 5 package. The bootstrap library is an easily available front-end framework. That makes our UI design extremely facile. Not only it offers Table component but also tons of other UI components.

The useState hook will help us in answering how to add a row to a table component on button click. We are going to create somewhat an editable table with a delete row on button click.

After completing this guide, you will know how to add rows dynamically in the table and also how to delete a specific row from a table in React js application.

React Js Dynamically Add or Remove Table Rows Example

• Step 1: Create New React Project
• Step 2: Add Bootstrap Library
• Step 3: Create Component File
• Step 4: Add or Delete Table Rows
• Step 5: Register Table Component in App
• Step 6: Start React Application

Create New React Project

If you haven’t created a React app, then this step is for you.

Run the given command to create a new React app, however make sure to have Node and NPM on your system.

npx create-react-app react_demo --template typescript

Move inside the project’s root:

cd react_demo

Add Bootstrap Library

We need Bootstrap to create or design the table UI, therefore execute the following command to add bootstrap package in React app.

npm install bootstrap

Next, head over to App.js file, here you have to import the bootstrap CSS url.

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";

function App() {
  return (
    <div className="container mt-5">

    </div>
  );
}

export default App;

Create Component File

To create the basic function component, you have to create the features/DataTable.js folder and file with given code.

import React from 'react'

function DataTable() {
  return (
    <div></div>
  )
}

export default DataTable

Add or Delete Table Rows

In the previous step, we created a basic function component. Now, you have to add the following code into the features/DataTable.js file.

We created a TableComp component and passed three props:

To add the data into the table.

Delete the table rows from a table.

Handle the adding and removing table rows when a user clicks on the delete button located on every row in the table.

The useState hook is being used here to handle the component state on every render.

To design the dynamic table, we are using the bootstrap table component.

import React, { useState } from "react";

function TableComp({ tableRows, removeTableRows, onChange }) {
  return tableRows.map((rowsData, i) => {
    const { name, email, contact } = rowsData;
    return (
      <tr key={i}>
        <td>
          <input
            type="text"
            value={name}
            onChange={(e) => onChange(i, e)}
            name="name"
            className="form-control"
          />
        </td>
        <td>
          <input
            type="text"
            value={email}
            onChange={(e) => onChange(i, e)}
            name="email"
            className="form-control"
          />
        </td>
        <td>
          <input
            type="text"
            value={contact}
            onChange={(e) => onChange(i, e)}
            name="contact"
            className="form-control"
          />
        </td>
        <td>
          <button
            className="btn btn-outline-danger"
            onClick={() => removeTableRows(i)}
          >
            Delete
          </button>
        </td>
      </tr>
    );
  });
}

function DataTable() {
  const [tableRows, setTableRows] = useState([]);

  const insertRow = () => {
    const dataRows = {
      name: "",
      email: "",
      contact: "",
    };
    setTableRows([...tableRows, dataRows]);
  };
  const removeTableRows = (index) => {
    const rows = [...tableRows];
    rows.splice(index, 1);
    setTableRows(rows);
  };

  const onChange = (index, e) => {
    const { name, value } = e.target;
    const dataRows = [...tableRows];
    dataRows[index][name] = value;
    setTableRows(dataRows);
  };
  return (
    <div className="col-12">
      <table className="table table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Contact</th>
            <th>
              <button className="btn btn-outline-primary" onClick={insertRow}>
                Add Row
              </button>
            </th>
          </tr>
        </thead>
        <tbody>
          <TableComp
            tableRows={tableRows}
            removeTableRows={removeTableRows}
            onChange={onChange}
          />
        </tbody>
      </table>
    </div>
  );
}

export default DataTable;

Register Table Component in App

We created the dynamic table component, to test it out or view it in the browser. Make sure to register the DataTable component in the src/App.js global component file.

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import DataTable from "./features/DataTable";

function App() {
  return (
    <div className="container mt-5">
      <h2 className="text-center">React Create and Remove Table Rows Example</h2>
      <DataTable />
    </div>
  );
}

export default App;

Start React Application

Execute the following command through the command-prompt of your console, and hit enter.

npm start

After the react server is invoked, make sure to use the given url if testing the app locally.

http://localhost:3000

Conclusion

In this post, we have learned how to swiftly and quite easily create a dynamic table component using the bootstrap UI table component.

How to add rows in a table in React js app, and also, how to delete the table rows in React js function component using React useState hook.