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.