Big Table - Element UI

by Nag729

HTML

<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- fakser.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<div id="app">
	<h1>Big Table - Element UI</h1>

	<el-table :data="tableData" style="width: 100%;" max-height="300">
		<el-table-column type="selection" width="55"> </el-table-column>
		<el-table-column property="id" label="ID" width="120"> </el-table-column>
		<el-table-column property="name" label="Name" width="120" sortable> </el-table-column>
		<el-table-column property="sex" label="Sex" width="120"> </el-table-column>
		<el-table-column property="company" label="Company" show-overflow-tooltip> </el-table-column>
		<el-table-column property="job" label="Job" show-overflow-tooltip> </el-table-column>
		<el-table-column property="jobArea" label="JobArea" width="120"> </el-table-column>
		<el-table-column property="zipCode" label="ZipCode" width="120"> </el-table-column>
		<el-table-column property="city" label="City" show-overflow-tooltip> </el-table-column>
		<el-table-column property="email" label="Email" width="120"> </el-table-column>
		<el-table-column property="phone" label="Phone" width="120"></el-table-column>
	</el-table>
</div>

CSS

#app{
  width: 600px;
}

Vue

const app = new Vue({
	el: '#app',
	data() {
		return {
			tableData: [],
		};
	},
	mounted() {
		const dummyArr = [];
		for (let i = 1; i <= 1000; i++) {
			const obj = {
				id: faker.random.uuid(),
				name: faker.name.findName(),
				sex: faker.random.boolean ? 'Man' : 'Woman',
				company: faker.company.companyName(),
				job: faker.name.jobTitle(),
				jobArea: faker.name.jobArea(),
				zipCode: faker.address.zipCode(),
				city: faker.address.city(),
				email: faker.internet.email(),
				phone: faker.phone.phoneNumber(),
			};
			dummyArr.push(obj);
		}
		this.tableData = dummyArr;
	},
});