React Js Table Row Edit and Delete Button (React Table Editable)

If you are looking for a way to create an editable table in React, you have come to the right place. In this article, you will learn how to use react-table, a headless UI library for building robust tables and data grids in React. You will also learn how to add edit and delete buttons to each row, and how to handle the actions using hooks and state management. Whether you need a simple text input, a date picker, a number input, or a select field, you will find a solution here. By the end of this article, you will be able to create a dynamic and editable table in React.

written

reviewed

updated

How to Create Edit Button in React js

In a React.js table with edit and delete buttons, users can efficiently manage tabular data. This interactive component facilitates actions such as adding, editing, and deleting table rows. With the edit button, users can modify specific row information, ensuring data accuracy. The delete button allows users to easily remove unwanted rows, streamlining data management

React Table with Edit and Delete

    <script type="text/babel">
        const { useState } = React;

        function App() {
            const [rows, setRows] = useState([
                { name: 'Alice', email: 'alice@example.com', editing: false },
                { name: 'Michael', email: 'michael@example.com', editing: false },
                { name: 'Emily', email: 'emily@example.com', editing: false },
                { name: 'David', email: 'david@example.com', editing: false },
                { name: 'Sarah', email: 'sarah@example.com', editing: false },
                { name: 'Daniel', email: 'daniel@example.com', editing: false },
                { name: 'Olivia', email: 'olivia@example.com', editing: false },
                { name: 'Andrew', email: 'andrew@example.com', editing: false }
            ]);

            const editRow = (row) => {
                const updatedRows = rows.map((r) => {
                    if (r === row) {
                        return { ...r, editing: true };
                    }
                    return r;
                });
                setRows(updatedRows);
            };

            const saveRow = (row) => {
                const updatedRows = rows.map((r) => {
                    if (r === row) {
                        return { ...r, editing: false };
                    }
                    return r;
                });
                setRows(updatedRows);
            };

            const deleteRow = (index) => {
                const updatedRows = [...rows];
                updatedRows.splice(index, 1);
                setRows(updatedRows);
            };

            const addRow = () => {
                const newRows = [...rows, { name: '', email: '', editing: true }];
                setRows(newRows);
            };

            return (
                <div className='container'>
                    <h3>React Js Table with edit and delete button</h3>
                    <table>
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {rows.map((row, index) => (
                                <tr key={index}>
                                    {!row.editing && <td>{row.name}</td>}
                                    {!row.editing && <td>{row.email}</td>}
                                    {row.editing && <td><input type="text" value={row.name} onChange={(e) => {
                                        const updatedRows = [...rows];
                                        updatedRows[index].name = e.target.value;
                                        setRows(updatedRows);
                                    }} /></td>}
                                    {row.editing && <td><input type="email" value={row.email} onChange={(e) => {
                                        const updatedRows = [...rows];
                                        updatedRows[index].email = e.target.value;
                                        setRows(updatedRows);
                                    }} /></td>}
                                    <td>
                                        {!row.editing && <button className="edit-button" onClick={() => editRow(row)}>Edit</button>}
                                        {row.editing && <button className="save-button" onClick={() => saveRow(row)}>Save</button>}
                                        <button className="delete-button" onClick={() => deleteRow(index)}>Delete</button>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                    <button className="add-button" onClick={addRow}>Add Row</button>
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

React JS Tutorial

React Js Table Row Edit and Delete Button (React Table Editable)

How to Create Edit Button in React js

React Table with Edit and Delete

Output of Editable Table React

React JS Tutorial

React Js Table Row Edit and Delete Button (React Table Editable)

Feedback for Abhishek

How to Create Edit Button in React js

React Table with Edit and Delete

Output of Editable Table React