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

Demo update

pull/435/head
cagataycivici 2020-08-05 16:37:02 +03:00
parent d7e7ec9652
commit 370dd15f9a
1 changed files with 46 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/views/treetable/TreeTableFilterDemo.vue
View File

@ -10,26 +10,28 @@
<div class="content-section implementation">
<div class="card">
<h5>Lenient Filter</h5>
<TreeTable :value="nodes" :filters="filters" filterMode="lenient">
<TreeTable :value="nodes" :filters="filters1" filterMode="lenient">
<template #header>
<div style="text-align: right">
<i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i>
<InputText v-model="filters['global']" placeholder="Global Search" size="50" />
<div class="p-text-right">
<div class="p-input-icon-left">
<i class="pi pi-search"></i>
<InputText v-model="filters1['global']" placeholder="Global Search" size="50" />
</div>
</div>
</template>
<Column field="name" header="Name" :expander="true">
<template #filter>
<InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Filter by name" />
<InputText type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Filter by name" />
</template>
</Column>
<Column field="size" header="Size">
<template #filter>
<InputText type="text" v-model="filters['size']" class="p-column-filter" placeholder="Filter by size"/>
<InputText type="text" v-model="filters1['size']" class="p-column-filter" placeholder="Filter by size"/>
</template>
</Column>
<Column field="type" header="Type">
<template #filter>
<InputText type="text" v-model="filters['type']" class="p-column-filter" placeholder="Filter by type"/>
<InputText type="text" v-model="filters1['type']" class="p-column-filter" placeholder="Filter by type"/>
</template>
</Column>
</TreeTable>
@ -37,26 +39,28 @@
<div class="card">
<h5>Strict Filter</h5>
<TreeTable :value="nodes" :filters="filters" filterMode="strict">
<TreeTable :value="nodes" :filters="filters2" filterMode="strict">
<template #header>
<div style="text-align: right">
<i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i>
<InputText v-model="filters['global']" placeholder="Global Search" size="50" />
<div class="p-text-right">
<div class="p-input-icon-left">
<i class="pi pi-search"></i>
<InputText v-model="filters2['global']" placeholder="Global Search" size="50" />
</div>
</div>
</template>
<Column field="name" header="Name" :expander="true">
<template #filter>
<InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Filter by name" />
<InputText type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Filter by name" />
</template>
</Column>
<Column field="size" header="Size">
<template #filter>
<InputText type="text" v-model="filters['size']" class="p-column-filter" placeholder="Filter by size" />
<InputText type="text" v-model="filters2['size']" class="p-column-filter" placeholder="Filter by size" />
</template>
</Column>
<Column field="type" header="Type">
<template #filter>
<InputText type="text" v-model="filters['type']" class="p-column-filter" placeholder="Filter by type" />
<InputText type="text" v-model="filters2['type']" class="p-column-filter" placeholder="Filter by type" />
</template>
</Column>
</TreeTable>
@ -68,55 +72,63 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;h3&gt;Lenient Filter&lt;/h3&gt;
&lt;TreeTable :value="nodes" :filters="filters" filterMode="lenient"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Lenient Filter&lt;/h5&gt;
&lt;TreeTable :value="nodes" :filters="filters1" filterMode="lenient"&gt;
&lt;template #header&gt;
&lt;div style="text-align: right"&gt;
&lt;i class="pi pi-search" style="margin: 4px 4px 0px 0px;"&gt;&lt;/i&gt;
&lt;InputText v-model="filters['global']" placeholder="Global Search" size="50" /&gt;
&lt;div class="p-text-right"&gt;
&lt;div class="p-input-icon-left"&gt;
&lt;i class="pi pi-search"&gt;&lt;/i&gt;
&lt;InputText v-model="filters1['global']" placeholder="Global Search" size="50" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;Column field="name" header="Name" :expander="true"&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Filter by name" /&gt;
&lt;InputText type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Filter by name" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="size" header="Size"&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['size']" class="p-column-filter" placeholder="Filter by size" /&gt;
&lt;InputText type="text" v-model="filters1['size']" class="p-column-filter" placeholder="Filter by size"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="type" header="Type"&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['type']" class="p-column-filter" placeholder="Filter by type" /&gt;
&lt;InputText type="text" v-model="filters1['type']" class="p-column-filter" placeholder="Filter by type"/&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;/TreeTable&gt;
&lt;/div&gt;
&lt;h3&gt;Strict Filter&lt;/h3&gt;
&lt;TreeTable :value="nodes" :filters="filters" filterMode="strict"&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Strict Filter&lt;/h5&gt;
&lt;TreeTable :value="nodes" :filters="filters2" filterMode="strict"&gt;
&lt;template #header&gt;
&lt;div style="text-align: right"&gt;
&lt;i class="pi pi-search" style="margin: 4px 4px 0px 0px;"&gt;&lt;/i&gt;
&lt;InputText v-model="filters['global']" placeholder="Global Search" size="50" /&gt;
&lt;div class="p-text-right"&gt;
&lt;div class="p-input-icon-left"&gt;
&lt;i class="pi pi-search"&gt;&lt;/i&gt;
&lt;InputText v-model="filters2['global']" placeholder="Global Search" size="50" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;Column field="name" header="Name" :expander="true"&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Filter by name" /&gt;
&lt;InputText type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Filter by name" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="size" header="Size"&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['size']" class="p-column-filter" placeholder="Filter by size" /&gt;
&lt;InputText type="text" v-model="filters2['size']" class="p-column-filter" placeholder="Filter by size" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="type" header="Type"&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['type']" class="p-column-filter" placeholder="Filter by type" /&gt;
&lt;InputText type="text" v-model="filters2['type']" class="p-column-filter" placeholder="Filter by type" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;/TreeTable&gt;
&lt;/div&gt;
</template>
</CodeHighlight>
@ -126,7 +138,8 @@ import NodeService from '../../service/NodeService';
export default {
data() {
return {
filters: {},
filters1: {},
filters2: {},
nodes: null
}
},
@ -152,7 +165,8 @@ import NodeService from '../../service/NodeService';
export default {
data() {
return {
filters: {},
filters1: {},
filters2: {},
nodes: null
}
},