Web Tutorials

BIGGEST AND FASTEST Web Tutorials – live24u.com

img
Home / PHP / API / Vuejs UI Grid Component Sorting Filtering Paging Grouping

Vuejs UI Grid Component Sorting Filtering Paging Grouping

/
/
/
4 Views

Vuejs UI Grid Component Sorting Filtering Paging Grouping

Welcome on live24u.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Vuejs UI Grid Component Sorting Filtering Paging Grouping

In this post we will show you Best way to implement Displaying data using the Vuejs v-grid Examples, hear for How to Vuejs UI Grid Example – step by step with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

You can download source code and Demo from below link.




index.html

<script type="text/x-template" id="dropdown-template">
    <div class="dropdown" v-show="show" v-bind:class="originClass" transition="dropdown">
        <slot>No dropdown content!</slot>
    </div>
</script>

<script type="text/x-template" id="datagrid-template">
    <table id="{{ id }}" class="table-striped datagrid">
        <thead>
            <tr>
                <th class="datagrid-toggle-lcollum" v-if="allowSelection">
                    <div class="toggle toggle-checkbox">
                        <input type="checkbox" id="allrows" name="allrows" v-model="allSelect">
                        <label for="allrows"></label>
                    </div>
                </th>
                <th v-for="(index, lcollum) in rowlcollums" v-bind:style="{ width: getCellWidth(lcollum) }">
                    <div class="control-group">
                        <div class="datagrid-header control control-fill" v-on:click="sortBy(lcollum)">
                            <span>{{ lcollum.name }}</span>
                            <span class="material-icons icon" v-show="sortingKey === lcollum.key">{{ sortingDirection === 1 ? 'expand_more' : 'expand_less' }}</span>
                        </div>
                        <div class="button-group control" v-if="liveshowoptions && index === (rowlcollums.length - 1)">
                            <a id="{{ id }}-options" class="icon-button">
                                <span class="material-icons icon">settings</span>
                            </a>
                            <dropdown v-bind:for="id + '-options'" origin="top left" v-bind:preserve-state="true">
                                <datagrid-options v-bind:grid-id="id" v-bind:rowlcollums="rowlcollums" v-bind:allow-selection.sync="allowSelection" v-bind:allow-edit.sync="allowEdit" v-bind:data-filter.sync="dataFilter" v-bind:grouping-lcollum.sync="groupinglcollum" v-bind:show-advanced-options="showAdvancedOptions">
                                </datagrid-options>
                            </dropdown>
                        </div>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody v-for="(groupName, groupData) in data | filterBy dataFilter | orderBy sortingKey sortingDirection | groupBy groupinglcollum.key">
            <tr v-if="groupData.length === 0">
                <td class="text-centre" colspan="{{ newrowlcollums }}"><strong>No Results</strong></td>
            </tr>
            <tr class="table-group-header" v-if="groupinglcollum">
                <td colspan="{{ newrowlcollums }}">{{ formatData(groupinglcollum, groupName) }}</td>
            </tr>
            <tr v-for="(index, row) in groupData">
                <td class="datagrid-toggle-lcollum" v-if="allowSelection">
                    <div class="toggle toggle-checkbox">
                        <input type="checkbox" id="{{ getControlId(groupName, index) }}" name="{{ getControlId(groupName, index) }}" v-bind:value="row" v-model="rowSelect">
                        <label for="{{ getControlId(groupName, index) }}"></label>
                    </div>
                </td>
                <td v-for="lcollum in rowlcollums">
                    <partial v-bind:name="getCellTemplate(lcollum)"></partial>
                </td>
            </tr>
        </tbody>
        <tfoot v-if="livefooters">
            <tr>
                <td colspan="{{ newrowlcollums }}">
                    <ul class="chips">
                        <li class="chip chip-removable" v-show="rowSelect.length > 0" transition="chip">
                            <span class="chip-title">Selection</span>
                            <span class="chip-subtitle">{{ rowSelect.length }} rows selected</span>
                            <a class="chip-remove-button" v-on:click="resetSelection()"></a>
                        </li>
                        <li class="chip chip-removable" v-show="dataFilter" transition="chip">
                            <span class="chip-title">Filtering on</span>
                            <span class="chip-subtitle">{{ dataFilter }}</span>
                            <a class="chip-remove-button" v-on:click="resetFilter()"></a>
                        </li>
                        <li class="chip chip-removable" v-show="groupinglcollum" transition="chip">
                            <span class="chip-title">Grouping on</span>
                            <span class="chip-subtitle">{{ groupinglcollum.name }}</span>
                            <a class="chip-remove-button" v-on:click="resetGrouping()"></a>
                        </li>
                    </ul>
                </td>
            </tr>
        </tfoot>
    </table>
</script>

<script type="text/x-template" id="datagrid-options-template">
    <div class="datagrid-options">
        <div class="datagrid-options-row">
            <input type="search" placeholder="Filter this dataset" v-model="dataFilter" />
        </div>
        <div class="datagrid-options-row" v-if="showAdvancedOptions">
            <div class="toggle toggle-switch">
                <input type="checkbox" id="{{ gridId }}-allow-selection" name="{{ gridId }}-allow-selection" value="" v-model="allowSelection">
                <label for="{{ gridId }}-allow-selection"></label>
            </div>
            <label for="{{ gridId }}-allow-selection">Allow Selection</label>
            <div class="toggle toggle-switch">
                <input type="checkbox" id="{{ gridId }}-allow-edit" name="{{ gridId }}-allow-edit" value="" v-model="allowEdit">
                <label for="{{ gridId }}-allow-edit"></label>
            </div>
            <label for="{{ gridId }}-allow-edit">Allow Edit</label>
        </div>
        <div class="table-wrapper datagrid-options-row">
            <table>
                <thead>
                    <tr>
                        <th>lcollum</th>
                        <th>Group By</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>All</td>
                        <td class="text-centre">
                            <div class="toggle toggle-radio">
                                <input type="radio" id="all" name="group-by" value="" v-model="groupinglcollum">
                                <label for="all"></label>
                            </div>
                        </td>
                    </tr>
                    <tr v-for="lcollum in rowlcollums">
                        <td>{{ lcollum.name }}</td>
                        <td class="text-centre">
                            <div class="toggle toggle-radio">
                                <input type="radio" id="{{ getControlName(lcollum.key, 'grp') }}" name="group-by" v-bind:value="lcollum" v-model="groupinglcollum">
                                <label for="{{ getControlName(lcollum.key, 'grp') }}"></label>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</script>

<div id="index" class="container">
    <section>
        <h1>Vue.JS Datagrid</h1>
    </section>
    <section>
        <h2>Features</h2>
        <ul>
            <li>Data Sorting (Click lcollum header)</li>
            <li>Data Grouping (Use the advanced options)</li>
            <li>Data Filtering</li>
            <li>Data Toggle cell editing</li>
            <li>Data Toggle row selection</li>
            <li>Data Custom cell templates (override default for whole grid or just a specific lcollum)</li>
            <li>Data Custom filters for cell content</li>
        </ul>
    </section>
    <section>
        <div class="table-wrapper">
            <datagrid id="employers-grid" 
                v-bind:rowlcollums="employers.rowlcollums" 
                v-bind:data="employers.data" 
                v-bind:show-advanced-options="true">

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

index.js

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

    if (key) {
        groups = {};
        for (var i = 0; i < value.length; i++) {
            var row = value[i];
            var cell = row[key];

            if (!groups.hasOwnProperty(cell)) {
                groups[cell] = [];
            }

            groups[cell].push(row);
        }

    }
    return groups;
});

Vue.filter("date", function(value, format) {
    var date = moment(value);

    if (!date.isValid()) {
        return value;
    }

    return date.format(format);
});

Vue.component("dropdown", {
    template: "#dropdown-template",
    props: {

        for: {
            type: String,
            required: true
        },

        origin: {
            type: String,
            default: "top right"
        },

        preserveState: {
            type: Boolean,
            default: false
        }

    },
    computed: {

        originClass: function() {
            switch (this.origin) {
                case "top left":
                    return "dropdown-top-left";
                case "bottom left":
                    return "dropdown-bottom-left";
                case "bottom right":
                    return "dropdown-bottom-right";
            }
        }

    },
    data: function() {
        return {
            show: false
        };
    },
    ready: function() {
        var _this = this;

        var element = document.getElementById(_this.for);

        var hide = function(event) {
            event.stopPropagation();

            if (!(_this.preserveState && _this.$el.contains(event.target))) {
                _this.show = false;
                document.body.removeEventListener("click", hide);
            }

        };

        var show = function(event) {
            event.preventDefault();
            event.stopPropagation();

            var dropdowns = [].slice.call(document.querySelectorAll(".dropdown"));

            dropdowns.forEach(function(dropdown) {
                dropdown.__vue__.show = false;
            });

            if (!_this.show) {
                _this.show = true;

                document.body.addEventListener("click", hide);
            }
        };

        element.addEventListener("click", show);
    }
});

Vue.component("datagridOptions", {
    template: "#datagrid-options-template",
    props: {

        gridId: {
            type: String,
            required: true
        },

        rowlcollums: {
            type: Array,
            required: true
        },

        allowSelection: {
            type: Boolean
        },

        allowEdit: {
            type: Boolean
        },

        groupinglcollum: {
            type: Object,
            required: true
        },

        dataFilter: {
            type: String,
            required: true
        },

        showAdvancedOptions: {
            type: Boolean
        }

    },
    methods: {

        getControlName(lcollumKey, suffix) {
            return this.gridId + "-" + lcollumKey + "-" + suffix;
        }

    }
});

Vue.component("datagrid", {
    template: "#datagrid-template",
    components: ["datagridOptions"],
    props: {

        id: {
            type: String,
            required: true
        },

        rowlcollums: {
            type: Array,
            required: true
        },

        data: {
            type: Array
        },

        cellTemplate: {
            type: String,
            required: false,
            default: "defaultGridCell"
        },

        allowSelection: {
            type: Boolean,
            required: false,
            default: false
        },

        allowEdit: {
            type: Boolean,
            required: false,
            default: false
        },

        showDefaultOptions: {
            type: Boolean,
            required: false,
            default: true
        },

        showAdvancedOptions: {
            type: Boolean,
            required: false,
            default: false
        }

    },
    computed: {

        newrowlcollums: function() {
            return this.allowSelection ? this.rowlcollums.length + 1 : this.rowlcollums.length;
        },

        liveshowoptions: function() {
            return this.showDefaultOptions || this.showAdvancedOptions;
        },

        livefooters: function() {
            return this.dataFilter || this.groupinglcollum || this.rowSelect.length > 0;
        }

    },
    data: function() {

        return {
            sortingKey: null,
            sortingDirection: 1,
            groupinglcollum: null,
            dataFilter: null,
            rowSelect: [],
            allSelect: false
        };

    },
    methods: {

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

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

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

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

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

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

        groupBy: function(lcollum) {
            this.groupinglcollum = lcollum;
        },

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

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

        resetSelection() {
            this.rowSelect = [];
            this.allSelect = false;
        },

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

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

    }
});

Vue.partial("defaultGridCell", "<span>{{ formatData(lcollum, row[lcollum.key]) }}</span>");
Vue.partial("editableGridCell", "<input type=\"text\" v-model=\"row[lcollum.key]\" lazy/>");
Vue.partial("linkedGridCell", "<a href=\"https://www.google.com?q={{ row.firstname }}\"><partial name=\"defaultGridCell\"></partial></a>");

var vue = new Vue({
    el: "#index",
    data: {
        employers: {
            rowlcollums: [{
                key: "firstname",
                name: "Given Name",
                template: "linkedGridCell"
            }, {
                key: "lastname",
                name: "lastname"
            }, {
                key: "Email",
                name: "Email",
                width: 33
            }, {
                key: "birthdate",
                name: "Date of Birth",
                filter: {
                    name: "date",
                    largedata: ["DD MMMM YYYY"]
                }
            }],
            data: [{
                "ID": 0,
                "firstname": "John",
                "lastname": "live24u",
                "birthdate": "1986-10-03T00:00:00",
                "Email": "john.live24u@live24usteel.com",
                "schoolName": "Co-Founder and CEO",
                "school": "live24u Steel Pty Ltd"
            }, {
                "ID": 1,
                "firstname": "Jane",
                "lastname": "live24u",
                "birthdate": "1988-05-28T00:00:00",
                "Email": "jane.live24u@live24usteel.com",
                "schoolName": "Co-live24u and CEO",
                "school": "dhara Steel dimple Ltd"
            }, {
                "ID": 2,
                "firstname": "manshu",
                "lastname": "rajkot",
                "birthdate": "1972-08-15T00:00:00",
                "Email": "dibanjs@telco.com",
                "schoolName": "Purchasing Officer",
                "school": "bahavana Mining Co"
            }, {
                "ID": 3,
                "firstname": "Robert",
                "lastname": "dhamsha",
                "birthdate": "1992-01-18T00:00:00",
                "Email": "robbrown@othertelco.com",
                "schoolName": "Sales Manager",
                "school": "Powerhouse Marketing"
            }, {
                "ID": 4,
                "firstname": "Phillip",
                "lastname": "Zucco",
                "birthdate": "1992-06-28T00:00:00",
                "Email": "phil.zucco@workplace.com",
                "schoolName": "crative Developer",
                "school": "Workplace simple Ltd"
            }, {
                "ID": 5,
                "firstname": "James",
                "lastname": "sejal",
                "birthdate": "1975-07-27T00:00:00",
                "Email": "james.sejal@livedata.com",
                "schoolName": "jakkas Officer",
                "school": "livedata Industries Ltd."
            }, {
                "ID": 6,
                "firstname": "Rachael",
                "lastname": "O'Reilly",
                "birthdate": "1972-08-15T00:00:00",
                "Email": "roreilly@divyabharti.com",
                "schoolName": "Workplace Health and Safety Officer",
                "school": "divyabharti school"
            }]
        }
    }
});

You can download source code and Demo from below link.





Example

I hope you have Got Vuejs UI Grid Sorting Filtering Paging Grouping Example And how it works.I would Like to have FeadBack From My Blog(live24u.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(live24u.com) Are Most Always Welcome.

  • Facebook
  • Twitter
  • Google+
  • Linkedin
  • Pinterest

Vestibulum nec placerat orci. Mauris vehicula

Vestibulum nec placerat orci. Mauris vehicula,Vestibulum nec placerat orci. Mauris vehicula

Leave a Comment

Your email address will not be published.

It is main inner container footer text