Big Table - vxe-table

by Nag729

HTML

<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- faker.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script>
<!-- vxe-table -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/index.css" />
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>

<div id="app">
	<h1>Big Table - vxe-table</h1>

	<vxe-table :data="tableData" style="width: 100%;" max-height="300">
	  <vxe-table-column type="checkbox" width="55"> </vxe-table-column>
		<vxe-table-column field="id" title="ID" width="120"> </vxe-table-column>
		<vxe-table-column field="name" title="Name" width="120" sortable> </vxe-table-column>
		<vxe-table-column field="sex" title="Sex" width="120"> </vxe-table-column>
		<vxe-table-column field="company" title="Company" show-overflow> </vxe-table-column>
		<vxe-table-column field="job" title="Job" show-overflow> </vxe-table-column>
		<vxe-table-column field="jobArea" title="JobArea" width="120"> </vxe-table-column>
		<vxe-table-column field="zipCode" title="ZipCode" width="120"> </vxe-table-column>
		<vxe-table-column field="city" title="City" show-overflow> </vxe-table-column>
		<vxe-table-column field="email" title="Email" width="120"> </vxe-table-column>
		<vxe-table-column field="phone" title="Phone" width="120"></vxe-table-column>
	</vxe-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;
	},
});