JSFiddle - React, Tailwind, and code Playground

Vue Tables 2 live demo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-tables-2/2.3.4/vue-tables-2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div id="app" class="container">
  <v-client-table
    :data="tableData"
    :columns="columns"
    :options="options"
  ></v-client-table>
</div>

CSS

#app {
  text-align: center;
  width: 95%;
  margin: 0 auto;
}

th,
td {
  text-align: left;
}

.VueTables__sortable {
  cursor: pointer;
}

JavaScript

const { Event } = VueTables;

Vue.use(VueTables.ClientTable);

new Vue({
  el: '#app',
  data: () => ({
    columns: [ 'name', 'pet', 'aaa', 'bbb' ],
    options: {
      filterByColumn: true,
      filterAlgorithm: {
        aaa: (row, q) => row.values.aaa === +q,
        bbb: (row, q) => `${row.values.bbb}`.includes(q),
      },
      templates: {
        aaa: (h, row) => row.values.aaa,
        bbb: (h, row) => row.values.bbb,
      },
      listColumns: {
        pet: [
          { id: '0', text: 'Guinea Pig' },
          { id: '1', text: 'Dog' },
          { id: '2', text: 'Cat' },
          { id: '3', text: 'Goldfish' },
          { id: '4', text: 'Hamster' },
        ],
      },
    },
    tableData: [ 'Sidney Brakus', 'Jovan Koepp', 'Shanie McCullough PhD', 'Miss Laury Farrell', 'Adrien Von', 'Vaughn Kertzmann', 'Effie Gottlieb V', 'Oswald Upton', 'Dr. Jo Hahn DVM', 'Luz Bartell', 'Dr. Houston Berge', 'Mr. Murray Hilll', 'Hollie Kassulke V', 'Verdie Boyer', 'Randall Reynolds', 'Carolina Fahey', 'Augustine Haley Sr.', 'Felix Fisher', "Dorothy O'Kon", 'Janelle Wisoky', 'Jaida Rohan', 'Timmothy Hudson DVM', 'Beth Haag', 'Miller Kirlin', 'Dr. Grant Rohan', 'Marilyne Ledner II', 'Jesse Fay', "Ms. Emily O'Connell III", 'Jettie McClure', 'Trystan Bayer', 'Eli Witting', 'Ms. Zola Murazik', 'Dortha Murazik', 'Mr. Montana Harber', 'Prof. Alanis Gislason', 'Dominique Goyette', 'Rebecca Wilkinson', 'Mr. Dane Dicki III', 'Audra Treutel', 'Ms. Elenor Ernser Jr.', 'Pietro Metz', 'Prof. Dustin Terry DVM', 'Damian Mertz I', 'Elouise Walter', 'Kaylee Volkman', 'Dr. Reyna Pfannerstill II', 'Leslie Spencer Jr.', 'Mrs. Rozella Willms IV', 'Alverta Okuneva II', 'Rae Simonis II', 'Micaela Bergnaum', 'Dr. Lamont Fadel DDS', 'Dr. Anissa Turner MD', 'Nia Veum', 'Bridget Ernser', 'Giovanna Emmerich', 'Ruthe Kub', 'Samson Jacobs', 'Martina Pouros', 'Malinda McGlynn V', 'Mrs. Alivia Stehr', 'Genevieve Huel', 'Violette Reilly', 'Furman DuBuque', 'Mr. Justyn...