JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<link rel="stylesheet" href="https://unpkg.com/@britecore/[email protected]/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/@britecore/[email protected]/lib/index.js"></script>

<div id="app" class="u-py3 u-px3 u-mx-auto" style="max-width: 650px;">
  <!-- relevant code start -->
  <el-data-table
    :data="agencies" :searchable="false" headerless selectable
    :items-per-page="10" @row-selected="handleRowSelect">
    <el-data-table-column label="Agency" data-key="name"></el-data-table-column>
    <el-data-table-column width="50%" label="Email address" data-key="email" align="right" #default="agency">
      <div class="l-flex-grid--no-wrap l-flex-grid--v-center" @click.stop>
        <div class="u-grow u-mr1">
          <el-input v-if="models[agency.id]" size="small" v-model="models[agency.id].email"></el-input>
          <el-input v-else size="small" :value="agency.email" disabled></el-input>
        </div>
        <el-button size="small" @click="handleResetClick(agency)">Reset</el-button>
      </div>
    </el-data-table-column>
  </el-data-table>
  <!-- relevant code end -->
  <hr>
  <div class="l-flex-grid l-flex-grid--gutters u-mb4">
    <div class="l-flex-grid__cell u-1of2">
      Raw model for managing selected agencies and default/user provided email addresses.
      <pre style="overflow: auto;">{{ models }}</pre>
    </div>
    <div class="l-flex-grid__cell u-1of2">
      Prepared structure with selected and edited agencies as an array.
      <pre style="overflow: auto;">{{ selectedAgenciesWithEditedEmails }}</pre>
    </div>
  </div>
</div>

JavaScript

const agencies = [
    {
        "name": "Ritchie Inc",
        "email": "[email protected]"
    },
    {
        "name": "Powlowski LLC",
        "email": "[email protected]"
    },
    {
        "name": "Hartmann, Purdy and Nikolaus",
        "email": "[email protected]"
    },
    {
        "name": "Hyatt - Kuvalis",
        "email": "[email protected]"
    },
    {
        "name": "Bayer - Cummings",
        "email": "[email protected]"
    },
    {
        "name": "Steuber - Bashirian",
        "email": "[email protected]"
    },
    {
        "name": "Johns - Emard",
        "email": "[email protected]"
    },
    {
        "name": "Lesch, Pacocha and Murazik",
        "email": "[email protected]"
    },
    {
        "name": "Beer - Friesen",
        "email": "[email protected]"
    },
    {
        "name": "McCullough, Swift and Christiansen",
        "email": "[email protected]"
    },
    {
        "name": "Weber LLC",
        "email": "[email protected]"
    },
    {
        "name": "Gottlieb Inc",
        "email": "[email protected]"
    },
    {
        "name": "Collins, Ritchie and Dietrich",
        "email": "[email protected]"
    },
    {
        "name": "O'Kon, Lebsack and Ritchie",
        "email": "[email protected]"
    },
    {
        "name": "Boyer, King and Kiehn",
        "email": "[email protected]"
    },
    {
        "name": "Walker - Powlowski",
        "email": "[email protected]"
    },
    {
        "name": "Dietrich Inc",
        "email": "[email protected]"
    },
    {
        "name": "Kovacek Group",
        "email": "[email protected]"
    },
    {
        "name": "Rogahn, Grimes and Dare",
        "email": "[email protected]"
    },
    {
        "name": "Koelpin, Bogan and Dibbert",
        "email": "[email protected]"
    },
    {
        "name": "Will - Schuppe",
        "email":...