JSFiddle - React, Tailwind, and code Playground

by stovberpv

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <table class="table">
    <tr>
      <td>
        <input type="button" value="Имя" v-on:click="sortByName">
      </td>
      <td>
        <input type="button" value="Возраст" v-on:click="sortByAge">
      </td>
    </tr>
    <tr v-for="(person, key) in persons">
      <td>
        <input type="text" v-model="person.name" />
      </td>
      <td>
        <input type="text" v-model="person.age" />
      </td>
      <td>
        <input type="button" value="удалить" v-on:click="del(key);" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" v-model="name" />
      </td>
      <td>
        <input type="text" v-model="age" />
      </td>
      <td>
        <input type="button" value="Добавить" v-on:click="add" />
      </td>
    </tr>
  </table>
</div>

CSS

.table tr:nth-child(2n+1)>td>input {}

.table tr:nth-child(2n)>td>input {}

.table {
  border-collapse: collapse;
  padding: 0px 0px 0px 0px;
  margin: 0px;
}

.table td,
th,
tr {
  border: 1px solid black;
  padding: 0px 0px 0px 0px;
  margin: 0;
}

input {
  background-color: red;
  border: none;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
}

JavaScript

const app = new Vue({
  el: '#app',
  data: {
    persons: [],
    name: "",
    age: "",
  },
  methods: {
    del: function(position) {
      this.persons.splice(position, 1);
    },
    add: function(event) {
      this.persons.push({
        name: this.name,
        age: this.age
      })
      this.name = "";
      this.age = "";
    },
    getCompare: function(columnName) {
      return function(a, b) {
        if (a[columnName] > b[columnName]) {
          return 1;
        }
        if (a[columnName] < b[columnName]) {
          return -1;
        }
        if (a[columnName] == b[columnName]) {
          return 0;
        }
      }
    },
    sortByAge: function(event) {
      var compare = this.getCompare("age");
      this.persons.sort(compare);
    },
    sortByName: function(event) {
      var compare = this.getCompare("name");
      this.persons.sort(compare);
    }
  }
})