table.html

<div class="table table--padded">
                        <!-- Table Head -->
                        <div class="table__section table__section--head">
                            <!-- table row -->
                            <div class="table__row">
                                <!-- table header -->
                                <div class="table__header">Full Name</div>
                                <!-- table header -->
                                <div class="table__header">Email Address</div>
                                <!-- table header -->
                                <div class="table__header">Phone Number</div>
                                <!-- table header -->
                                <div class="table__header">Date</div>
                            </div>
                        </div>
                        <!-- Table body -->
                        <div class="table__section table__section--body">
                            <!-- table row -->
                            <router-link tag="div" :to="{ name: 'customersID', params: { id: customer.id }}" class="table__row" v-for="customer in customersList.customers" :key="customer.id">
                                <!-- table data -->
                                <div class="table__data table__data--full show--xs">
                                    <p class="table__data--main">{{customer.customer_fullname}}</p>
                                    <p class="show--xs table__data--extra">{{customer.customer_email}}</p>
                                </div>
                                <!-- table data -->
                                <div class="table__data hidden--xs">
                                    <p class="table__data--main">{{customer.customer_fullname}}</p>
                                </div>
                                <!-- table data -->
                                <div class="table__data hidden--xs">
                                    <span class="link">{{customer.customer_email}}</span>
                                </div>
                                <!-- table data -->
                                <div class="table__data hidden--xs">{{customer.customer_phonenumber ? customer.customer_phonenumber : 'Not Available'}}</div>
                                <!-- table data -->
                                <!-- table data -->
                                <div class="table__data hidden--xs">
                                    <p class="table__data--main">{{formatDateTime(customer.date_created)}}</p>
                                </div>
                                <div class="table__data table__data--right show--xs">
                                    <p class="table__data--value hidden--xs">{{formatDateTime(customer.date_created)}}</p>
                                    <div class="show--xs table__data--moreicon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="7" height="14" viewBox="0 0 7 14">
                                            <path fill="#1E2852" fill-rule="nonzero" d="M6.885 6.707L.667.121a.376.376 0 0 0-.553 0 .432.432 0 0 0 0 .586L6.056 7 .114 13.293a.432.432 0 0 0 0 .586.378.378 0 0 0 .553 0l6.217-6.586a.43.43 0 0 0 .001-.586z" />
                                        </svg>
                                    </div>
                                </div>
                            </router-link>
                        </div>
                    </div>