How to build an editable React table with NextUI table component

Question

I have built a table with NextUI table component and although I have defined the onChange on my input elements, it is not possible to enter a value within them.

I have tried various elements, and if I replace the NextUI table with a standard HTML table, this React component works without an issue.

This is the code of a React component that should return an editable table based on NextUI table component. What is wrong with the code of this component ?

import { useState } from 'react'
//import './index.css'
import { Table, Row, Col, Tooltip, User, Text } from "@nextui-org/react";
import { Input, Spacer } from "@nextui-org/react";

const data = [
    {
        employeeId: '01',
        name: 'John Doe',
        email: 'johndoe@email.com',
        position: 'Frontend Developer',
    },
    {
        employeeId: '02',
        name: 'Sara',
        email: 'sara@email.com',
        position: 'HR Executive',
    },
    {
        employeeId: '03',
        name: 'Mike',
        email: 'mike@email.com',
        position: 'Backend Developer',
    },
]

const EditableTable = () => {
    const [employeeData, setEmployeeData] = useState(data)

    const onChangeInput = (e, employeeId) => {
        const { name, value } = e.target

        const editData = employeeData.map((item) =>
            item.employeeId === employeeId && name ? { ...item, [name]: value } : item
        )

        setEmployeeData(editData)
    }

    return (
        <div className="container">


            <h1 className="title">ReactJS Editable Table with NextUI Table</h1>
            <Table
                aria-label="Example table with static content"
                css={{
                    height: "auto",
                    minWidth: "100%",
                }}
            >
                <Table.Header>
                    <Table.Column>NAME</Table.Column>
                    <Table.Column>ROLE</Table.Column>
                    <Table.Column>STATUS</Table.Column>
                </Table.Header>
                <Table.Body>
                    {employeeData.map(({ employeeId, name, email, position }) => (
                        <Table.Row key={employeeId}>
                            <Table.Cell>
                                <Input
                                    aria-label="test"
                                    name="name"
                                    value={name}
                                    type="text"
                                    onChange={(e) => onChangeInput(e, employeeId)}

                                />
                            </Table.Cell>
                            <Table.Cell>
                                <Input
                                    aria-label="test"
                                    name="name"
                                    value={position}
                                    type="text"
                                    onChange={(e) => onChangeInput(e, employeeId)}
                                />
                            </Table.Cell>
                            <Table.Cell>
                                <Input
                                    aria-label="test"
                                    name="name"
                                    value={email}
                                    type="text"
                                    onChange={(e) => onChangeInput(e, employeeId)}

                                />

                            </Table.Cell>
                        </Table.Row>
                    ))}
                </Table.Body>
            </Table>



        </div>
    )
}

export default EditableTable

Marc Rochat · Accepted Answer · 2022-11-17T13:56:08.160

In facts it appears that the issue was due to not getting the focus on the input element.

I managed to resolve this by creating a customised Input component in which I handle the focus using the onClick event. Here is the code for this component:

import React from "react";
import { Input } from "@nextui-org/react";


class TextInput extends React.Component {
 constructor(props) {
  super(props);
  this.textInput = React.createRef();
  this.focusTextInput = this.focusTextInput.bind(this);
}

focusTextInput() {
 this.textInput.current.focus();
}

render() {
 return (
   <div>
    <Input
      type="text"
      ref={this.textInput}
      onClick={this.focusTextInput}
      size="xs"
      aria-label="Default msg"
    />
  </div>
  );
 }
}
export default TextInput;

Then simply import this component in the code that uses the NextUI table component and use in as an input for the table cells.

How to build an editable React table with NextUI table component

1 Answers1