VueJS Datagrid – Sorting Filtering Paging Grouping Example

VueJS Datagrid – Sorting Filtering Paging Grouping Example

List of Features Vuejs Datagrid

Vuejs using Sorting all the data(Click column header)
Vuejs using Grouping all the data(Use the advanced options)
Vuejs using Filtering Data
Vuejs using Toggle All the cell editing
Vuejs using Toggle All row selection
Vuejs using Custom cell templates dynemically(override default for new line whole grid table or just a new specific column)
Vuejs using Custom data filters for cell or row content
“VueJS Datagrid – Sorting Filtering Paging Grouping Example”

Vue.JS – Advanced Data Grid Component Example – VueJS Datagrid

Include Libs.

  
https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,600italic,700
https://fonts.googleapis.com/icon?family=Material+Icons
css/style.css
https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js
moment.js/2.12.0/moment.min.js
js/index.js

Vuejs Template 1

	<div class="dropdown">
		No any dropdown content!
	</div>

Vuejs Template 2

    <table id="{{ id }}" class="table contentgrid">
        <thead>
            <tr>
                <th class="contentgrid-toggle-column">
                    <div class="toggle toggle-checkbox">
                        
                        <label for="allrows"></label>
                    </div>
                </th>
                <th>
                    <div class="control-group">
                        <div class="contentgrid-header control control-fill">
                            <span>{{ column.name }}</span>
                            <span class="material-icons icon">{{ sortingDirection === 1 ? 'expand_more' : 'expand_less' }}</span>
                        </div>
                        <div class="button-group control">
                            <a id="{{ id }}-options" class="icon-button">
                                <span class="material-icons icon">settings</span>
                            </a>
                            
                                
                                
                            
                        </div>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="text-centre" colspan="{{ studentspan }}"><strong>No Results</strong></td>
            </tr>
            <tr class="table-group-header">
                <td colspan="{{ studentspan }}">{{ formatData(groupingColumn, groupName) }}</td>
            </tr>
            <tr>
                <td class="contentgrid-toggle-column">
                    <div class="toggle toggle-checkbox">
                        
                        <label for="{{ getControlId(groupName, index) }}"></label>
                    </div>
                </td>
                <td>
                    
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="{{ studentspan }}">
                    <ul class="chips">
                        <li class="chip chip-removable"> 0" transition="chip">
                            <span class="chip-title">Selection</span>
                            <span class="chip-subtitle">{{ selectedRows.length }} rows selected</span>
                            <a class="chip-remove-button"></a>
                        </li>
                        <li class="chip chip-removable">
                            <span class="chip-title">Filtering on</span>
                            <span class="chip-subtitle">{{ dataFilter }}</span>
                            <a class="chip-remove-button"></a>
                        </li>
                        <li class="chip chip-removable">
                            <span class="chip-title">Grouping on</span>
                            <span class="chip-subtitle">{{ groupingColumn.name }}</span>
                            <a class="chip-remove-button"></a>
                        </li>
                    </ul>
                </td>
            </tr>
        </tfoot>
    </table>

Vuejs Template 3

    <div class="contentgrid-options">
        <div class="contentgrid-options-row">
            
        </div>
        <div class="contentgrid-options-row">
            <div class="toggle toggle-switch">
                
                <label for="{{ gridId }}-allow-selection"></label>
            </div>
            <label for="{{ gridId }}-allow-selection">Allow Selection</label>
            <div class="toggle toggle-switch">
                
                <label for="{{ gridId }}-allow-edit"></label>
            </div>
            <label for="{{ gridId }}-allow-edit">Allow Edit</label>
        </div>
        <div class="table-wrapper contentgrid-options-row">
            <table>
                <thead>
                    <tr>
                        <th>Column</th>
                        <th>Group By</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>All</td>
                        <td class="text-centre">
                            <div class="toggle toggle-radio">
                                
                                <label for="all"></label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>{{ column.name }}</td>
                        <td class="text-centre">
                            <div class="toggle toggle-radio">
                                
                                <label for="{{ getControlName(column.key, 'grp') }}"></label>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

index.html

<div id="index" class="container">
    <section>
        <div class="table-wrapper">
            

            
        </div>
    </section>
</div>

index.js

Vue.filter("groupBy", function(value, key) {
    var packet = {
        data: value
    };

    if (key) {
        packet = {};
        for (var i = 0; i  0;
        }

    },
    data: function() {

        return {
            sortingKey: null,
            sortingDirection: 1,
            groupingColumn: null,
            dataFilter: null,
            selectedRows: [],
            selectAll: false
        };

    },
    methods: {

        getCellTemplate: function(column) {
            return this.allowEdit ? "editableGridCell" : (column.template || this.cellTemplate);
        },

        getCellWidth: function(column) {
            if (!column.width) {
                return;
            }

            return column.width + (isNaN(column.width) ? "" : "%");
        },

        getControlId: function(groupName, index, suffix) {
            return groupName + "-" + index + (suffix ? "-" + suffix : "");
        },

        sortBy: function(column) {
            if (column.key === this.sortingKey) {
                this.sortingDirection *= -1;
                return;
            }

            this.sortingKey = column.key;
            this.sortingDirection = 1;
        },

        groupBy: function(column) {
            this.groupingColumn = column;
        },

        resetFilter() {
            this.dataFilter = null;
        },

        resetGrouping() {
            this.groupingColumn = null;
        },

        resetSelection() {
            this.selectedRows = [];
            this.selectAll = false;
        },

        formatData: function(column, value) {
            if (column.hasOwnProperty("filter")) {
                var filter = Vue.filter(column.filter.name);
                var args = [].concat(value, column.filter.args);
                return filter.apply(this, args);
            }
            return value;
        }
    },
    watch: {

        "selectAll": function(value) {
            this.selectedRows = value ? [].concat(this.data) : [];
        }

    }
});

Vue.partial("defaultGridCell", "<span>{{ formatData(column, row[column.key]) }}</span>");
Vue.partial("editableGridCell", "");
Vue.partial("linkedGridCell", "<a href="http://www.google.com?q={{ row.PostName }}"></a>");

var vue = new Vue({
    el: "#index",
    data: {
        customers: {
            students: [{
                key: "PostName",
                name: "Given Name",
                template: "linkedGridCell"
            }, {
                key: "webtutorial",
                name: "webtutorial"
            }, {
                key: "Email",
                name: "Email",
                width: 33
            }, {
                key: "PostDate",
                name: "Date of Birth",
                filter: {
                    name: "date",
                    args: ["DD MMMM YYYY"]
                }
            }],
            data: [{
                "ID": 0,
                "PostName": "John",
                "webtutorial": "Smith",
                "PostDate": "2017-10-03T00:00:00",
                "Email": "[email protected]",
                "webTitle": "Co-Founder and CEO",
                "website": "Smith Steel Pty Ltd"
            }, {
                "ID": 1,
                "PostName": "deep",
                "webtutorial": "Smith",
                "PostDate": "2018-05-28T00:00:00",
                "Email": "[email protected]",
                "webTitle": "Co-Founder and CEO",
                "website": "Smith Steel Pty Ltd"
            }, {
                "ID": 2,
                "PostName": "Richard",
                "webtutorial": "Swanston",
                "PostDate": "1972-08-15T00:00:00",
                "Email": "[email protected]",
                "webTitle": "Purchasing Officer",
                "website": "Cortana Mining Co"
            }, {
                "ID": 3,
                "PostName": "Robert",
                "webtutorial": "Brown",
                "PostDate": "2016-01-18T00:00:00",
                "Email": "[email protected]",
                "webTitle": "email Manager",
                "website": "dreams Marketing"
            }, {
                "ID": 4,
                "PostName": "kankot",
                "webtutorial": "laro",
                "PostDate": "1991-06-28T00:00:00",
                "Email": "[email protected]",
                "webTitle": "web Developer",
                "website": "arith Pty Ltd"
            }, {
                "ID": 5,
                "PostName": "kali",
                "webtutorial": "Caldwell",
                "PostDate": "2018-07-27T00:00:00",
                "Email": "[email protected]",
                "webTitle": "old Officer",
                "website": "mynew Industries Ltd."
            }, {
                "ID": 6,
                "PostName": "Rachael",
                "webtutorial": "O'pinch",
                "PostDate": "2015-08-15T00:00:00",
                "Email": "[email protected]",
                "webTitle": "depl jamana and nags Officer",
                "website": "Energy website"
            }]
        }
    }
});

Example

READ :  PHP Laravel Get base url Examples

Add a Comment

Your email address will not be published. Required fields are marked *