JSFiddle - React, Tailwind, and code Playground

by mbudnik

HTML

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

  <div id="container">


        <!-- demo root element -->
        <div id="demo">
            <form id="search">
                Search <input name="query" v-model="searchQuery">
            </form>
            <demo-grid
                v-bind:data="gridData"
                v-bind:columns="gridColumns"
                v-bind:filter-key="searchQuery">
            </demo-grid>
        </div>


    </div>



    <!-- component template -->
    <template id="grid-template">
        <table>
            <thead>
                <tr>
                    <th>Check</th>
                    <!--<th>Completed</th>-->
                    <th v-for="key in columns"
                        @click="sortBy(key)"
                        :class="{active: sortKey == key}">
                        {{key | capitalize}}
                        <span class="arrow"
                          :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
                        </span>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="
                    entry in data
                    | filterBy filterKey
                    | orderBy sortKey sortOrders[sortKey]">
                    <td><input @click="selectAll" type="checkbox" v-model="selected" value="{{ entry.name }}"></td>
                    console.log({{ entry.name }})
                    <!--<td>No</td>-->
                    <td v-for="key in columns">
                        {{entry[key]}}
                    </td>
                </tr>
            </tbody>
        </table>

        <pre>
{{ selected| json}}

        </pre>

    </template>

JavaScript

Vue.component('demo-grid', {
    template: '#grid-template',
    props: {
        data: Array,
        columns: Array,
        filterKey: String
    },
    data: function () {
        var sortOrders = {}
        this.columns.forEach(function (key) {
            sortOrders[key] = 1
        })
        return {
            sortKey: '',
            sortOrders: sortOrders,
            selected: []
        }
    },
    methods: {
        sortBy: function (key) {
            this.sortKey = key
            this.sortOrders[key] = this.sortOrders[key] * -1
        },
        
    }
})


var demo = new Vue({
    el: '#demo',
    data: {
        searchQuery: '',
        gridColumns: ['name', 'power'],
//            gridColumns :keys,
//            gridData: data
        gridData: [
            {name: 'Chuck Norris', power: Infinity},
            {name: 'Bruce Lee', power: 9000},
            {name: 'Jackie Chan', power: 7000},
            {name: 'Jet Li', power: 8000}
        ]
    }
})