Custom Vue Table

<template>
    <div>
        <table class="pds-table-wrapper">
            <!-- Header -->
            <thead>
                <tr class="pds-table-row-header">
                    <th v-for="(item, index) in columns" :key="index + 456">{{item.label}}</th>
                </tr>
            </thead>

            <!-- Datas -->
            <tbody>
                <tr v-for="(data, index) in showData" :key="index + 345" class="pds-table-row pds-table-row-small">
                    <td v-for="(column, iter) in columns" :key="iter + 92">{{data[column.field]}}</td>
                </tr>
            </tbody>
        </table>
        <div id="pds-pagination" class="pds-table-pagination-wrapper">
            <div class="pds-pagination-container">
                <div class="pds-pagination-state-box" v-for="(item, index) in innerData" :key="index + 7155">
                    <p class="pds-pagination-state-box-label">
                        {{index + 1}}
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            'columns': {
                type: Array,
                default: []
            },
            'data': {
                type: Array,
                default: []
            },
            'size': {
                type: Number,
                default: 5
            },
            'isPaginated': {
                type: Boolean,
                default: false
            }
        },
        created(){
            if(this.isPaginated){
                let currentSize = this.size;
                let splitCounter= this.data.length;
                if(splitCounter > currentSize){
                    while(splitCounter > currentSize){
                        splitCounter -= currentSize;
                        this.innerData.push(this.data.splice(0, this.size));
                    }
                }
            }
            this.innerData.push(this.data);

            this.showData = [];
            this.showData = this.innerData[this.currentIndex].slice();
        },
        watch:{
            data(){
                console.log('kecskefészek')
                console.log(this.data)
            }
        },
        data(){
            return {
                innerData: [],
                showData: [],
                currentIndex: 0
            }
        }
    }
</script>

<style lang="scss"scoped>
    @import "../../css/pds.scss";

    $main-border-color: #e0d9d9;
    $main-font-color: #363636;
    $header-title-font-size: 14px;
    $table-cells-font-size: 12px;
    $table-row-line-height: 40px;

    .pds-table-wrapper{
        width: 100%;
        font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        color: $main-font-color;
        //border: 1px solid $main-border-color;
        font-size: $table-cells-font-size;
    }


    //header css
    .pds-table-row-header{
        border-bottom: outset $main-border-color;
    }

    .pds-table-wrapper th {
        font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        text-align: center;
        color: $main-font-color;
        font-size: $header-title-font-size;
        border-bottom: inset $main-border-color;
    }
    .pds-table-wrapper th:nth-child(1) {
        border-bottom: outset $main-border-color;
    }

    //body css
    .pds-table-wrapper tr{
        font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        text-align: center;
        line-height: $table-row-line-height;
        font-size: $table-cells-font-size;
        border-bottom: 1px solid $main-border-color;
    }

    .pds-table-wrapper tr:last-child{
        border-bottom: none;
    }

    .pds-table-wrapper tr td{
        font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        text-align: center;
        line-height: $table-row-line-height;
        //border: 1px solid $main-border-color;
        font-size: $table-cells-font-size;
    }

    .pds-table-row{
        line-height: $box-height;
        word-break: break-all;
        font-size: $table-font-size;
        &.table-row-small{
            line-height: $box-height-small;
            font-size: $table-font-small-size;
        }
        &.table-row-medium{
            line-height: $box-height-medium;
            font-size: $table-font-medium-size;
        }
    }

    .pds-table-row:nth-child(odd){
        background-color: $table-row-odd;
    }
    .pds-table-row:nth-child(even){
        background-color: $table-row-even;
    }

    .pds-table-row:hover{
        background-color: $table-row-hover;
        cursor: pointer;
    }

    .pds-table-row-active > td {
        font-weight: bold;
    }

    //pagination
    .pds-table-pagination-wrapper{
        width: 100%;
        height: 50px;
        margin-top: 10px;
    }

    .pds-pagination-container{
        float: right;
        display: flex;
    }

    .pds-pagination-state-box{
        width: 40px;
        height: 40px;
        background-color: #cecece;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 2px;
        margin-right: 2px;
        display: inline-block;
        border-radius: 5px;
    }

    .pds-pagination-state-box-label{
        font-size: 12px;
        padding-top: 10px;
        padding-left: 16px;
    }
</style>