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">
    <el-data-table-column min-width="40%" label="Agency" data-key="name"></el-data-table-column>
    <el-data-table-column min-width="40%" align="right" label="Actions" data-key="actions" #default="row">
      <el-dropdown @command="handleActionTriggered($event, row)">
        <span class="el-dropdown-link">
          <fa-icon :icon="['fas', 'ellipsis-h']"
            size="xs"
            class="u-ml2">
          </fa-icon>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="edit">Edit</el-dropdown-item>
          <el-dropdown-item command="delete">Delete</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-data-table-column>
  </el-data-table>
</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]"
    }
].map((obj, idx) => { obj.id = idx + 1; return obj; });

new Vue({
  el: '#app',
  methods: {
  	handleActionTriggered(actionName, row) {
			window.alert(`"${actionName}" triggered for...