JSFiddle - React, Tailwind, and code Playground

by Mantaya Fishaimer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.4/vue.min.js"></script>
<script src="https://rawgit.com/matfish2/vue-tables/master/dist/vue-tables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="vue-tables-options" class="container">
  <h2>VueTables 2 Options API</h2>
  <v-client-table :data="data" :columns="columns" :options="options">
    <div slot="beforeBody">
    before body
    </div>
  </v-client-table>
</div>

CSS

#vue-tables-options {
  text-align: center;
}

table {
  text-align: left;
}

h2 {
  margin-bottom: 10px;
}

thead tr:nth-child(2) th {
  font-weight: normal;
}

.VueTables__sortable {
  cursor: pointer;
}

JavaScript

Vue.use(VueTables.client, {
  perPage: 25
})

new Vue({
  el: "#vue-tables-options",
  data: {
    columns: ['option', 'type', 'description', 'default'],
    data: [
    {
    option:'columnsClasses',
    type:'Object',
    description:'Add class(es) to the specified columns. Takes key-value pairs, where the key is the column name and the value is a string of space-separated classes',
    default:'<code>{}</code>'
    },
    {
    	option:'multiSorting (client-side)',
      type:'Object',
      description:'See docomentation',
      default:'<code>{}</code>'
    },
    {
    	option:'serverMultiSorting',
      type:'Boolean',
      description:'Enable multiple columns sorting using Shift + Click on the server component',
      default:'<code>false</code>'
    },
     {
    	option:'clientMultiSorting',
      type:'Boolean',
      description:'Enable multiple columns sorting using Shift + Click on the client component',
      default:'<code>true</code>'
    },
    {
    	option:'requestAdapter (server-side)',
      type:'Function',
      description:'Set a custom request format',
      default:'<code>function(data) { return data; }</code>'
    },
    {
    option:'saveState',
    type:'Boolean',
    description:'Constantly save table state and reload it each time the component mounts. When setting it to true, use the `name` prop to set an identifier for the table',
    default:'<code>false</code>'
    },
     {
    option:'storage',
    type:'String',
    description:'Which persistance mechanism should be used when saveState is set to true: `local` - localStorage. `session` - sessionStorage',
    default:'<code>local</code>'
    },
     {
    option:'customSorting',
    type:'Object',
    description:'See documentation',
    default:'<code>{}</code>'
    },
      {
    option:'highlightMatches',
    type:'Boolean',
    description:'Highlight matches',
    default:'<code>false</code>'
    },
    {
      option: 'childRow',
      type: 'Function',
      description:...