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>

<template id="agency-item">
  <div class="l-flex-grid l-flex-grid--v-center">
    <div class="u-shrink u-pr3">
      <el-checkbox></el-checkbox>
    </div>
    <div class="u-grow">{{ agency.name }}</div>
    <div class="u-1of2 l-flex-grid l-flex-grid--v-center">
      <div class="u-mr1">
        <el-input size="small" v-model="agency.email"></el-input>
      </div>
      <el-button size="small">Reset</el-button>
    </div>
  </div>
</template>

<div id="app" class="u-py3 u-px3 u-mx-auto" style="max-width: 600px;">
  <el-data-table :data="agencies" :searchable="false" headerless selectable @row-selected="handleRowSelect">
    <el-data-table-column min-width="40%" label="Agency" data-key="name"></el-data-table-column>
    <el-data-table-column label="Email address" data-key="email" align="right" #default="agency">
      <div
        class="l-flex-grid--no-wrap l-flex-grid--v-center"
        :class="{ 'l-flex-grid--h-right': $breakpoint.smAndUp }"
        @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" readonly></el-input>
        </div>
        <el-button size="small" @click="handleResetClick(agency)">Reset</el-button>
      </div>
    </el-data-table-column>
  </el-data-table>
  <pre>{{ models }}</pre>
  <el-list-group v-if="false">
    <el-list-group-item v-for="agency in agencies" :key="agency.name">
      <agency-item :agency="agency"></agency-item>
    </el-list-group-item>
  </el-list-group>
</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":...