basictable.vue

<template>
    <g-field>
        <g-checkbox v-model="showNumbering">Apply Numbering</g-checkbox>
    </g-field>
    <g-field>
        <g-checkbox v-model="bordered">Apply Border to table</g-checkbox>
    </g-field>
    <g-field>
        <g-checkbox v-model="striped">Apply Strip to table</g-checkbox>
    </g-field>
    <g-field>
        <g-checkbox v-model="narrow">Apply Narrow to table</g-checkbox>
    </g-field>
    <g-table :datas="userDatas" :columns="userColumns" type="info" :show-numbering="showNumbering" :bordered="bordered"
        :striped="striped" :narrow="narrow" />
</template>

<script>
    export default {
        data() {
            return {
                showNumbering: false,
                bordered: false,
                striped: false,
                narrow: false,
                userDatas: [
                    { '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': 'Anne', 'last_name': 'Lee', 'date': '2016-12-06 14:38:38', 'gender': 'Female' }
                ],
                userColumns: [{ name: 'First name' }, { name: 'Last name' },
                { name: 'Created date', position: 'centered', width: 200 }, { name: 'Gender' }]
            }
        }
    }
</script>