sortingpagingtable.vue

<template>
    <g-table :datas="userDatas2" :columns="userColumns2" type="info" use-paging :total-data="10" :per-page="5"
        front-end-pagination show-numbering />
</template>

<script>
    export default {
        data() {
            return {
                userDatas2: [
                    { 'first_name': 'Jesse', 'last_name': 'Simmons', 'date': '2016-10-15 13:43:27', 'gender': 'Male' },
                    { 'first_name': 'John', 'last_name': 'Jacobs', 'date': '2016-12-15 06:00:53', 'gender': 'Male' },
                    { 'first_name': 'Tina', 'last_name': 'Gilbert', 'date': '2016-04-26 06:26:28', 'gender': 'Female' },
                    { 'first_name': 'Clarence', 'last_name': 'Flores', 'date': '2016-04-10 10:28:46', 'gender': 'Male' },
                    { 'first_name': 'Joana', 'last_name': 'Samuel', 'date': '2016-04-10 10:28:46', 'gender': 'Male' },
                    { 'first_name': 'Burglar', 'last_name': 'Cattie', 'date': '2016-04-10 10:28:46', 'gender': 'Male' },
                    { 'first_name': 'Samuel', 'last_name': 'Wiliam', 'date': '2016-04-10 10:28:46', 'gender': 'Male' },
                    { 'first_name': 'Michelle', 'last_name': 'Jackson', 'date': '2016-04-10 10:28:46', 'gender': 'Male' },
                    { 'first_name': 'Jacob', 'last_name': 'Jacobo', 'date': '2016-04-10 10:28:46', 'gender': 'Male' },
                    { 'first_name': 'Anne', 'last_name': 'Lee', 'date': '2016-12-06 14:38:38', 'gender': 'Female' }
                ],
                userColumns2: [{ name: 'First name', sorting: true, key: 'first_name' },
                { name: 'Last name', sorting: true, key: 'last_name' }, { name: 'Created date', position: 'centered' },
                { name: 'Gender' }]
            }
        }
    }
</script>