60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<DataTableSubMenu />
|
|
|
|
<div class="content-section introduction">
|
|
<div class="feature-intro">
|
|
<h1>DataTable - Scroll</h1>
|
|
<p>Data scrolling is available horizontally, vertically or both. Virtual Scrolling mode is also provided to deal with large datasets by loading data on demand during scrolling.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section implementation">
|
|
<h3>Vertical</h3>
|
|
<DataTable :value="cars" :scrollable="true" scrollHeight="200px">
|
|
<Column field="vin" header="Vin"></Column>
|
|
<Column field="year" header="Year"></Column>
|
|
<Column field="brand" header="Brand"></Column>
|
|
<Column field="color" header="Color"></Column>
|
|
</DataTable>
|
|
</div>
|
|
|
|
<div class="content-section documentation">
|
|
<TabView>
|
|
<TabPanel header="Source">
|
|
<CodeHighlight>
|
|
<template v-pre>
|
|
</template>
|
|
</CodeHighlight>
|
|
|
|
<CodeHighlight lang="javascript">
|
|
|
|
</CodeHighlight>
|
|
</TabPanel>
|
|
</TabView>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CarService from '../../service/CarService';
|
|
import DataTableSubMenu from './DataTableSubMenu';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
cars: null
|
|
}
|
|
},
|
|
carService: null,
|
|
created() {
|
|
this.carService = new CarService();
|
|
},
|
|
mounted() {
|
|
this.carService.getCarsLarge().then(data => this.cars = data);
|
|
},
|
|
components: {
|
|
'DataTableSubMenu': DataTableSubMenu
|
|
}
|
|
}
|
|
</script> |