import { Vue, Component, Prop } from 'vue-property-decorator';
import VTable from './components/Table.vue';

/**
 * Example of usage for the Table
 */
@Component({
    components: {
        VTable,
    },
})
export default class App extends Vue {
    /**
     * Internal state of the component
     */
    state: {[key: string]: any} = {
        headers: [
            {
                label: 'ID', hideable: true, visible: true, name: 'id',
            },
            {
                label: 'Name', hideable: true, visible: false, name: 'name',
            },
            { label: 'Surname', name: 'surname' },
            {
                label: 'Age', hideable: true, name: 'age', visible: true,
            }
        ],
        data: [
            {
                id: 0,
                name: 'Melody',
                surname: 'Smith',
                age: 27,
            },
            {
                id: 1,
                name: 'Rachel',
                surname: 'Jones',
                age: 35,
            },
            {
                id: 2,
                name: 'Rachel',
                surname: 'Smith',
                age: 85,
            },
            {
                id: 3,
                name: 'Rachel',
                surname: 'Joe',
                age: 25,
            }
        ],
        selectedColumns: [],
        selectedRows: [],
        itemsPerPage: 2,
        currentPage: 1,
    };
}