Table Styles

[Ryanb58]

Hello,

I just purchased the entire big bundle a few days ago specifically for this template. However, I am having some trouble using the tables. The styles from the _table.scss file isn't taking effect and I am not sure why.

This is how it looks for me.

But when I just download the zip and follow the instructions... the simple table page shows it like your examples:

How do I get my page to use the same styles as the ones from the example? I copied the card/table components directly from the example. See the following code:

<template>
    <div>
    <div class="card">
      <div class="card-header">
          <h5 class="title">Simple table</h5>
      </div>
      <div class="card-body table-responsive table-full-width">
        <el-table :data="tableData">
            <el-table-column label="Id" property="id" width="100px"></el-table-column>
            <el-table-column label="First Name" property="first_name"></el-table-column>
            <el-table-column label="Last Name" property="last_name"></el-table-column>
            <el-table-column label="Case Manager" property="case_manager"></el-table-column>
            <el-table-column label="Salary" property="salary"></el-table-column>
        </el-table>

      </div>
    </div>
        <!-- <div class="card">
            <div class="card-body row">
                <div class="col-sm-12">
                    <el-table :data="tableData" header-row-class-name="text-primary">
                        <el-table-column type="index"></el-table-column>
                        <el-table-column prop="first_name" label="First Name"></el-table-column>
                        <el-table-column prop="last_name" label="Last Name"></el-table-column>
                        <el-table-column prop="case_manager" label="Case Manager"></el-table-column>
                        <el-table-column class-name="action-buttons td-actions" align="right" label="Actions">
                            <template slot-scope="props">
                                <p-button type="info" size="sm" icon @click="handleLike(props.$index, props.row)">
                                    <i class="fa fa-user"></i>
                                </p-button>
                                <p-button type="success" size="sm" icon @click="handleEdit(props.$index, props.row)">
                                    <i class="fa fa-edit"></i>
                                </p-button>
                                <p-button type="danger" size="sm" icon @click="handleDelete(props.$index, props.row)">
                                    <i class="fa fa-times"></i>
                                </p-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
      <div class="card-footer">
        <p-pagination
          v-model="pagination.currentPage"
          :per-page="pagination.perPage"
          :total="pagination.total">
        </p-pagination>
      </div>
        </div> -->
    </div>
</template>
<script>
import Vue from "vue";
import { Table, TableColumn } from "element-ui";
import PPagination from 'src/components/UIComponents/Pagination.vue'
import PSwitch from "src/components/UIComponents/Switch.vue";
Vue.use(Table);
Vue.use(TableColumn);
export default {
    components: {
    PPagination,
        PSwitch
    },
    data() {
        return {
      pagination: {
        perPage: 5,
        currentPage: 1,
        perPageOptions: [5, 10, 25, 50],
        total: 0
      },
            tableData: [
                {
                    id: 1,
                    first_name: "Ron",
                    last_name: "Darnell",
                    county: "Morgan",
                    phone_numbers: "776-165-7585",
                    ref_id: "f476db60-5d15-401d-a655-1999d444fab0",
                    client_care_plan: true,
                    case_manager: "Ron Darnell",
                    referals: "Adoption Counseling and Support",
                    created_on: "Feb 9th 2019 9:12PM",
                    updated_on: "Feb 9th 2019 9:12PM"
                },
                {
                    id: 2,
                    first_name: "Kylynn",
                    last_name: "Joan",
                    county: "Marion",
                    phone_numbers: "386-110-0558",
                    ref_id: "3a4df62e-2143-40ca-8ad6-e145ec3152f3",
                    client_care_plan: true,
                    case_manager: "Kylynn Joan",
                    referals: "Respite Care"
                },
                {
                    id: 3,
                    first_name: "Pammi",
                    last_name: "Jordi",
                    county: "Shelby",
                    phone_numbers: "423-218-0896",
                    ref_id: "d2480122-434b-4cb7-ba19-ae2c418d9221",
                    client_care_plan: true,
                    case_manager: "Pammi Jordi",
                    referals: "Adoption Counseling and Support"
                },
                {
                    id: 4,
                    first_name: "Jasper",
                    last_name: "Swyer",
                    county: "Johnson",
                    phone_numbers: "714-410-6980",
                    ref_id: "8508384e-9eda-4a70-af02-dbebfc6d03aa",
                    client_care_plan: true,
                    case_manager: "Jasper Swyer",
                    referals: "Adoption Counseling and Support"
                },
                {
                    id: 5,
                    first_name: "Seka",
                    last_name: "Skyme",
                    county: "Hancock",
                    phone_numbers: "638-564-7927",
                    ref_id: "dd8e8315-277f-4b5e-a196-30b730f9e70a",
                    client_care_plan: false,
                    case_manager: "Seka Skyme",
                    referals: "Respite Care"
                },
                {
                    id: 6,
                    first_name: "Raynell",
                    last_name: "Geillier",
                    county: "Shelby",
                    phone_numbers: "914-405-4003",
                    ref_id: "3e311f19-e4be-4f3c-9998-2e84007329ed",
                    client_care_plan: true,
                    case_manager: "Raynell Geillier",
                    referals: "Respite Care"
                },
                {
                    id: 7,
                    first_name: "Grantham",
                    last_name: "Riping",
                    county: "Morgan",
                    phone_numbers: "203-531-5944",
                    ref_id: "7e7588dc-7714-4f8c-a975-293870aecdd7",
                    client_care_plan: false,
                    case_manager: "Grantham Riping",
                    referals: "Crime Victim/Witness Counseling"
                },
                {
                    id: 8,
                    first_name: "Brew",
                    last_name: "Freckelton",
                    county: "Boone",
                    phone_numbers: "820-905-5484",
                    ref_id: "64457b8c-e670-4f95-b4ab-b8d493d9ad14",
                    client_care_plan: false,
                    case_manager: "Brew Freckelton",
                    referals: "Respite Care"
                },
                {
                    id: 9,
                    first_name: "Analise",
                    last_name: "MacAllan",
                    county: "Putnam",
                    phone_numbers: "420-951-0640",
                    ref_id: "3d48c43b-2093-4202-a9e7-81f869d413e0",
                    client_care_plan: true,
                    case_manager: "Analise MacAllan",
                    referals: "Crime Victim/Witness Counseling"
                },
                {
                    id: 10,
                    first_name: "Hollis",
                    last_name: "Wrench",
                    county: "Hamilton",
                    phone_numbers: "807-564-3675",
                    ref_id: "4a4e048f-28b1-4aba-834e-d0cb88720409",
                    client_care_plan: false,
                    case_manager: "Hollis Wrench",
                    referals: "Donation Pickups"
                }
            ]
        };
    },
    methods: {
        handleLike(index, row) {
            alert(`Your clicked on Like button`);
        },
        handleEdit(index, row) {
            alert(`Your want to edit ${row.first_name} ${row.last_name}`);
        },
        handleDelete(index, row) {
            alert(`Your want to delete ${row.first_name} ${row.last_name}`);
        },
        getSummaries(param) {
            const { columns } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "Total";
                } else if (index < columns.length - 1) {
                    sums[index] = "";
                } else {
                    let sum = 0;
                    this.productsTable.forEach(obj => {
                        sum += obj.quantity * obj.price;
                    });
                    sums[index] = `€ ${sum}`;
                }
            });
            return sums;
        }
    }
};
</script>
<style lang="scss">
.el-table .td-actions {
    button.btn {
        margin-right: 5px;
    }
}
</style>

[Ryanb58]

The css property el-table__body doesn't seem to be defined in the chrome dev bar.

[Ryanb58]

Whereas the property seems to be defined in the example project.

To be clear. I started my project from a copy of the other project and have not removed any files. Just added my own Client.vue page and modified the sidebarLinks.js file.

[Ryanb58]

Something very interesting.. if I copy the code from this page: https://demos.creative-tim.com/paper-dashboard-2-pro/docs/1.0/components/tables.html

Then the table shows up just fine... I guess the difference is using element ui's table component vs just the css classes? Not sure why that would make things freak out ... Still not a good solution.