Big Table - Vuetify

by Nag729

HTML

<!-- Vuetify Style -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet" />
<meta
	name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
/>
<!-- 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>
<!-- Vuetify -->
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

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

	<v-data-table
		v-model="selected"
		:headers="headers"
		:items="tableData"
		:items-per-page="1000"
		item-key="id"
		show-select
		style="width: 100%;"
		height="300"
	>
	</v-data-table>
</div>

CSS

#app{
  width: 600px;
}

Vue

const app = new Vue({
	el: '#app',
	vuetify: new Vuetify(),
	data() {
		return {
			selected: [],
			headers: [
				{ text: 'ID', value: 'id' },
				{ text: 'Name', value: 'name' },
				{ text: 'Sex', value: 'sex' },
				{ text: 'Company', value: 'company' },
				{ text: 'Job', value: 'job' },
				{ text: 'JobArea', value: 'jobArea' },
				{ text: 'ZipCode', value: 'zipCode' },
				{ text: 'City', value: 'city' },
				{ text: 'Email', value: 'email' },
				{ text: 'Phone', value: 'phone' },
			],
			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;
	},
});