Source

https://github.com/kyleparisi/vue.kyleparisi.com

Install

<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
  integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
  crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
<link rel="stylesheet" href="https://vue.kyleparisi.com/Table.css">

<div id="table">
  <loading-table-rows
    :columns="gridColumns"
    v-if="loading"
  ></loading-table-rows>
  <table-component
    :data="gridData"
    :columns="gridColumns"
    :mapping="mapping"
    :filterMapping="filterMapping"
    v-else
  ></table-component>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue2-perfect-scrollbar@1.2.1/dist/vue2-perfect-scrollbar.umd.min.js"></script>
<script src="https://unpkg.com/pagination-layout@1.0.5/pagination-layout.min.js"></script>
<script src="https://unpkg.com/sort-and-filter@1.0.0/sortAndFilter.min.js"></script>
<script src="https://unpkg.com/vue-shortkey@3.1.7/dist/index.js"></script>
<script src="Table.js"></script>

State

window.data = {
  loading: false,
  gridData: [],
  gridColumns: [],
  mapping: {},
  filterMapping: {}
};