vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add new DataTable demos

pull/201/head
cagataycivici 2020-01-30 13:07:40 +03:00
parent 42058232d3
commit a4457368e7
5 changed files with 183 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/splitbutton/SplitButton.vue
View File

@ -3,14 +3,13 @@
<PVSButton type="button" :icon="icon" :label="label" @click="onClick" :disabled="disabled" :tabindex="tabindex" />
<PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-caret-down" @click="onDropdownButtonClick" :disabled="disabled"
aria-haspopup="true" :aria-controls="ariaId + '_overlay'"/>
<Menu :id="ariaId + '_overlay'" ref="menu" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" />
<PVSMenu :id="ariaId + '_overlay'" ref="menu" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" />
</div>
</template>
<script>
import Button from '../button/Button';
import Menu from '../menu/Menu';
import DomHandler from '../utils/DomHandler';
import UniqueComponentId from '../utils/UniqueComponentId';
export default {

10
src/router.js
View File

@ -131,6 +131,16 @@ export default new Router({
name: 'datatable',
component: () => import('./views/datatable/DataTableDemo.vue')
},
{
path: '/datatable/basic',
name: 'datatablebasic',
component: () => import('./views/datatable/DataTableBasicDemo.vue')
},
{
path: '/datatable/dynamiccolumns',
name: 'datatabledynamiccolumns',
component: () => import('./views/datatable/DataTableDynamicColumnsDemo.vue')
},
{
path: '/datatable/templating',
name: 'datatabletemplating',

80
src/views/datatable/DataTableBasicDemo.vue Normal file
View File

@ -0,0 +1,80 @@
<template>
<div>
<DataTableSubMenu />
<div class="content-section introduction">
<div class="feature-intro">
<h1>DataTable - Basic</h1>
<p>DataTable requires a collection to display along with column components for the representation of the data.</p>
</div>
</div>
<div class="content-section implementation">
<DataTable :value="cars">
<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>
&lt;DataTable :value="cars"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import CarService from '../../service/CarService';
export default {
data() {
return {
cars: null
}
},
carService: null,
created() {
this.carService = new CarService();
},
mounted() {
this.carService.getCarsSmall().then(data => this.cars = data);
}
}
</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.getCarsSmall().then(data => this.cars = data);
},
components: {
'DataTableSubMenu': DataTableSubMenu
}
}
</script>

90
src/views/datatable/DataTableDynamicColumnsDemo.vue Normal file
View File

@ -0,0 +1,90 @@
<template>
<div>
<DataTableSubMenu />
<div class="content-section introduction">
<div class="feature-intro">
<h1>DataTable - Dynamic Columns</h1>
<p>Columns can be defined dynamically using the v-for directive.</p>
</div>
</div>
<div class="content-section implementation">
<DataTable :value="cars">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
</DataTable>
</div>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;DataTable :value="cars"&gt;
&lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import CarService from '../../service/CarService';
export default {
data() {
return {
columns: null,
cars: null
}
},
carService: null,
created() {
this.carService = new CarService();
this.columns = [
{field: 'vin', header: 'Vin'},
{field: 'year', header: 'Year'},
{field: 'brand', header: 'Brand'},
{field: 'color', header: 'Color'}
];
},
mounted() {
this.carService.getCarsSmall().then(data => this.cars = data);
}
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</div>
</template>
<script>
import CarService from '../../service/CarService';
import DataTableSubMenu from './DataTableSubMenu';
export default {
data() {
return {
columns: null,
cars: null
}
},
carService: null,
created() {
this.carService = new CarService();
this.columns = [
{field: 'vin', header: 'Vin'},
{field: 'year', header: 'Year'},
{field: 'brand', header: 'Brand'},
{field: 'color', header: 'Color'}
];
},
mounted() {
this.carService.getCarsSmall().then(data => this.cars = data);
},
components: {
'DataTableSubMenu': DataTableSubMenu
}
}
</script>

2
src/views/datatable/DataTableSubMenu.vue
View File

@ -2,6 +2,8 @@
<div class="content-section content-submenu p-clearfix">
<ul>
<li><router-link to="/datatable">&#9679; Documentation</router-link></li>
<li><router-link to="/datatable/basic">&#9679; Basic</router-link></li>
<li><router-link to="/datatable/dynamiccolumns">&#9679; Dynamic</router-link></li>
<li><router-link to="/datatable/templating">&#9679; Templating</router-link></li>
<li><router-link to="/datatable/colgroup">&#9679; ColGroup</router-link></li>
<li><router-link to="/datatable/paginator">&#9679; Paginator</router-link></li>