content logo

React Forms:

React Table with Add New Row Form

We have a form post using React at the top of the page. This form takes information such as first and last name and email from the user and by clicking on the button below the text fields, the information is added to the table. This table also allows you to delete added rows. By clicking on each row of the table, the color of that row becomes purple and blue one by one.

#

Simple React Table

#

Add New Row Form

#

React Dynamic Table

#

HTML React Table Code

<!-- This script got from frontendfreecode.com -->
<div id="container"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.table {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  background-color: white;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
}
.table .table-body {
  display: flex;
  width: 100%;
  color: black;
  flex-wrap: wrap;
}
.table .table-header {
  background-color: #36304a;
  color: white;
  width: 100%;
}
.table .table-header .column:hover {
  background-color: #484848;
  font-weight: 500;
}
.table .row {
  display: inline-flex;
  width: 100%;
  box-sizing: border-box;
}
.table .column {
  width: 25%;
  padding: 10px;
  text-align: center;
}
.table .icon {
  background: transparent;
  border: none;
  width: 35px;
  height: 35px;
  margin: 0px;
  padding: 0px;
  font-size: 20px;
}
.form {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
}
.form fieldset {
  margin: 0;
  padding: 0.35em 0 0.75em;
  border: 0;
}
.form fieldset .field {
  margin-bottom: 0.5em;
  box-sizing: border-box;
}
.form fieldset .field label {
  text-align: right;
  display: inline-block;
  vertical-align: middle;
  margin: 0 1em 0 0;
  width: 250px;
  text-align: center;
}
.form fieldset .field input {
  padding: 0.5em 0.6em;
  display: inline-block;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 3px #ddd;
  border-radius: 4px;
  vertical-align: middle;
  box-sizing: border-box;
  width: 400px;
}
.form button {
  background-color: #0078e7;
  color: #fff;
  font-size: 100%;
  padding: 0.5em 1em;
  border: 1px solid #999;
  border: transparent;
  text-decoration: none;
  border-radius: 2px;
}
@-webkit-keyframes blinking {
  0% {
    background-color: #0078e7;
  }
  100% {
    background-color: #36304a;
    color: white;
  }
}
@keyframes blinking {
  0% {
    background-color: #0078e7;
  }
  100% {
    background-color: #36304a;
    color: white;
  }
}
.updating {
  -webkit-animation: blinking 1s infinite;
          animation: blinking 1s infinite;
}
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}console.clear();
const { PureComponent } = React;
class App extends PureComponent {constructor(...args) {super(...args);_defineProperty(this, "state",
    {
      formState: {
        id: '',
        firstName: "",
        lastName: "",
        email: "",
        mode: "submit" },
      users: [
      {
        id: 0,
        firstName: "name",
        lastName: "family",
        email: "sample_xc3@hotmail.com",
        updating: false }] });_defineProperty(this, "resetFormState",
    () => {
      this.setState({
        formState: {
          firstName: "",
          lastName: "",
          email: "",
          mode: "submit",
          id: "" } });
    });_defineProperty(this, "onChange",
    event => {
      this.setState({
        formState: {
          ...this.state.formState,
          [event.target.name]: event.target.value } });
    });_defineProperty(this, "onSubmit",
    event => {
      const { users, formState } = this.state;
      event.preventDefault();
      const firstName = event.target.querySelector("input[name='firstName']").
      value;
      const lastName = event.target.querySelector("input[name='lastName']").
      value;
      const email = event.target.querySelector("input[name='email']").value;
      if (formState.mode === "submit") {
        this.setState({
          users: [
          ...this.state.users,
          {
            firstName,
            lastName,
            email,
            updating: false,
            id: this.state.users[this.state.users.length - 1].id + 1 }] });
      } else if (formState.mode === "edit") {
        const index = users.find(user => user.id === formState.id).id;
        users[index] = {
          firstName,
          lastName,
          email,
          updating: false,
          id: users[index].id };
        this.setState({
          users: [...users] });
      }
      this.resetFormState();
    });_defineProperty(this, "updateUser",
    key => {
      let { users } = this.state;
      users[key].updating = true;
      this.setState({
        formState: { ...this.state.users[key], mode: "edit" },
        users });
    });_defineProperty(this, "deleteUser",
    key => {
      let { users } = this.state;
      users.splice(key, 1);
      this.setState({
        users: [...users] });
    });}
  render() {
    const { users, formState } = this.state;
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement(Form, {
        formState: formState,
        onChange: this.onChange,
        onSubmit: this.onSubmit }), /*#__PURE__*/
      React.createElement(Table, {
        users: users,
        updateUser: this.updateUser,
        deleteUser: this.deleteUser })));
  }}
const Table = ({ users = [], updateUser, deleteUser }) => {
  return /*#__PURE__*/(
    React.createElement("div", { className: "table" }, /*#__PURE__*/
    React.createElement("div", { className: "table-header" }, /*#__PURE__*/
    React.createElement("div", { className: "row" }, /*#__PURE__*/
    React.createElement("div", { className: "column" }, "First Name"), /*#__PURE__*/
    React.createElement("div", { className: "column" }, "Last Name"), /*#__PURE__*/
    React.createElement("div", { className: "column" }, "Email"), /*#__PURE__*/
    React.createElement("div", { className: "column" }, "Options"))), /*#__PURE__*/
    React.createElement("div", { className: "table-body" },
    users.map((user, key) => {
      return /*#__PURE__*/(
        React.createElement("div", { className: `row ${user.updating ? "updating" : ""}` }, /*#__PURE__*/
        React.createElement("div", { className: "column" }, user.firstName), /*#__PURE__*/
        React.createElement("div", { className: "column" }, user.lastName), /*#__PURE__*/
        React.createElement("div", { className: "column" }, user.email), /*#__PURE__*/
        React.createElement("div", { className: "column" }, /*#__PURE__*/
        React.createElement("button", {
          className: "icon",
          onClick: () => updateUser(key) }, /*#__PURE__*/
        React.createElement("i", { class: "far fa-edit" })), /*#__PURE__*/
        React.createElement("button", { className: "icon" }, /*#__PURE__*/
        React.createElement("i", {
          class: "fas fa-user-minus",
          onClick: () => deleteUser(key) })))));
    }))));
};
const Field = ({ label = "", name = "", value = "", onChange }) => {
  return /*#__PURE__*/(
    React.createElement("div", { className: "field" }, /*#__PURE__*/
    React.createElement("label", { htmlFOR: name }, label), /*#__PURE__*/
    React.createElement("input", { type: "text", name: name, value: value, onChange: onChange })));
};
const Form = ({ formState, onChange, onSubmit }) => {
  return /*#__PURE__*/(
    React.createElement("form", { className: "form", onSubmit: onSubmit }, /*#__PURE__*/
    React.createElement("fieldset", null, /*#__PURE__*/
    React.createElement(Field, {
      name: "firstName",
      label: "user name",
      value: formState.firstName,
      onChange: onChange }), /*#__PURE__*/
    React.createElement(Field, {
      name: "lastName",
      label: "last name",
      value: formState.lastName,
      onChange: onChange }), /*#__PURE__*/
    React.createElement(Field, {
      name: "email",
      label: "email",
      value: formState.email,
      onChange: onChange })), /*#__PURE__*/
    React.createElement("button", null, formState.mode)));
};
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("container"));
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js'></script>
<style>
.table {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  background-color: white;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
}
.table .table-body {
  display: flex;
  width: 100%;
  color: black;
  flex-wrap: wrap;
}
.table .table-header {
  background-color: #36304a;
  color: white;
  width: 100%;
}
.table .table-header .column:hover {
  background-color: #484848;
  font-weight: 500;
}
.table .row {
  display: inline-flex;
  width: 100%;
  box-sizing: border-box;
}
.table .column {
  width: 25%;
  padding: 10px;
  text-align: center;
}
.table .icon {
  background: transparent;
  border: none;
  width: 35px;
  height: 35px;
  margin: 0px;
  padding: 0px;
  font-size: 20px;
}
.form {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
}
.form fieldset {
  margin: 0;
  padding: 0.35em 0 0.75em;
  border: 0;
}
.form fieldset .field {
  margin-bottom: 0.5em;
  box-sizing: border-box;
}
.form fieldset .field label {
  text-align: right;
  display: inline-block;
  vertical-align: middle;
  margin: 0 1em 0 0;
  width: 250px;
  text-align: center;
}
.form fieldset .field input {
  padding: 0.5em 0.6em;
  display: inline-block;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 3px #ddd;
  border-radius: 4px;
  vertical-align: middle;
  box-sizing: border-box;
  width: 400px;
}
.form button {
  background-color: #0078e7;
  color: #fff;
  font-size: 100%;
  padding: 0.5em 1em;
  border: 1px solid #999;
  border: transparent;
  text-decoration: none;
  border-radius: 2px;
}
@-webkit-keyframes blinking {
  0% {
    background-color: #0078e7;
  }
  100% {
    background-color: #36304a;
    color: white;
  }
}
@keyframes blinking {
  0% {
    background-color: #0078e7;
  }
  100% {
    background-color: #36304a;
    color: white;
  }
}
.updating {
  -webkit-animation: blinking 1s infinite;
          animation: blinking 1s infinite;
}
</style>

</head>
<body>
<div id="container"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}console.clear();
const { PureComponent } = React;
class App extends PureComponent {constructor(...args) {super(...args);_defineProperty(this, "state",
    {
      formState: {
        id: '',
        firstName: "",
        lastName: "",
        email: "",
        mode: "submit" },
      users: [
      {
        id: 0,
        firstName: "name",
        lastName: "family",
        email: "sample_xc3@hotmail.com",
        updating: false }] });_defineProperty(this, "resetFormState",
    () => {
      this.setState({
        formState: {
          firstName: "",
          lastName: "",
          email: "",
          mode: "submit",
          id: "" } });
    });_defineProperty(this, "onChange",
    event => {
      this.setState({
        formState: {
          ...this.state.formState,
          [event.target.name]: event.target.value } });
    });_defineProperty(this, "onSubmit",
    event => {
      const { users, formState } = this.state;
      event.preventDefault();
      const firstName = event.target.querySelector("input[name='firstName']").
      value;
      const lastName = event.target.querySelector("input[name='lastName']").
      value;
      const email = event.target.querySelector("input[name='email']").value;
      if (formState.mode === "submit") {
        this.setState({
          users: [
          ...this.state.users,
          {
            firstName,
            lastName,
            email,
            updating: false,
            id: this.state.users[this.state.users.length - 1].id + 1 }] });
      } else if (formState.mode === "edit") {
        const index = users.find(user => user.id === formState.id).id;
        users[index] = {
          firstName,
          lastName,
          email,
          updating: false,
          id: users[index].id };
        this.setState({
          users: [...users] });
      }
      this.resetFormState();
    });_defineProperty(this, "updateUser",
    key => {
      let { users } = this.state;
      users[key].updating = true;
      this.setState({
        formState: { ...this.state.users[key], mode: "edit" },
        users });
    });_defineProperty(this, "deleteUser",
    key => {
      let { users } = this.state;
      users.splice(key, 1);
      this.setState({
        users: [...users] });
    });}
  render() {
    const { users, formState } = this.state;
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement(Form, {
        formState: formState,
        onChange: this.onChange,
        onSubmit: this.onSubmit }), /*#__PURE__*/
      React.createElement(Table, {
        users: users,
        updateUser: this.updateUser,
        deleteUser: this.deleteUser })));
  }}
const Table = ({ users = [], updateUser, deleteUser }) => {
  return /*#__PURE__*/(
    React.createElement("div", { className: "table" }, /*#__PURE__*/
    React.createElement("div", { className: "table-header" }, /*#__PURE__*/
    React.createElement("div", { className: "row" }, /*#__PURE__*/
    React.createElement("div", { className: "column" }, "First Name"), /*#__PURE__*/
    React.createElement("div", { className: "column" }, "Last Name"), /*#__PURE__*/
    React.createElement("div", { className: "column" }, "Email"), /*#__PURE__*/
    React.createElement("div", { className: "column" }, "Options"))), /*#__PURE__*/
    React.createElement("div", { className: "table-body" },
    users.map((user, key) => {
      return /*#__PURE__*/(
        React.createElement("div", { className: `row ${user.updating ? "updating" : ""}` }, /*#__PURE__*/
        React.createElement("div", { className: "column" }, user.firstName), /*#__PURE__*/
        React.createElement("div", { className: "column" }, user.lastName), /*#__PURE__*/
        React.createElement("div", { className: "column" }, user.email), /*#__PURE__*/
        React.createElement("div", { className: "column" }, /*#__PURE__*/
        React.createElement("button", {
          className: "icon",
          onClick: () => updateUser(key) }, /*#__PURE__*/
        React.createElement("i", { class: "far fa-edit" })), /*#__PURE__*/
        React.createElement("button", { className: "icon" }, /*#__PURE__*/
        React.createElement("i", {
          class: "fas fa-user-minus",
          onClick: () => deleteUser(key) })))));
    }))));
};
const Field = ({ label = "", name = "", value = "", onChange }) => {
  return /*#__PURE__*/(
    React.createElement("div", { className: "field" }, /*#__PURE__*/
    React.createElement("label", { htmlFOR: name }, label), /*#__PURE__*/
    React.createElement("input", { type: "text", name: name, value: value, onChange: onChange })));
};
const Form = ({ formState, onChange, onSubmit }) => {
  return /*#__PURE__*/(
    React.createElement("form", { className: "form", onSubmit: onSubmit }, /*#__PURE__*/
    React.createElement("fieldset", null, /*#__PURE__*/
    React.createElement(Field, {
      name: "firstName",
      label: "user name",
      value: formState.firstName,
      onChange: onChange }), /*#__PURE__*/
    React.createElement(Field, {
      name: "lastName",
      label: "last name",
      value: formState.lastName,
      onChange: onChange }), /*#__PURE__*/
    React.createElement(Field, {
      name: "email",
      label: "email",
      value: formState.email,
      onChange: onChange })), /*#__PURE__*/
    React.createElement("button", null, formState.mode)));
};
ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("container"));
</script>

</body>
</html>
Preview