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

Documentation for TableState

pull/104/head
cagataycivici 2019-10-22 10:39:36 +03:00
parent 360ad46404
commit 7982f2c5fd
3 changed files with 106 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/datatable/DataTable.d.ts vendored
View File

@ -42,6 +42,8 @@ export declare class DataTable extends Vue {
groupRowsBy?: string[]|string; groupRowsBy?: string[]|string;
expandableRowGroups?: boolean; expandableRowGroups?: boolean;
expandedRowGroups?: any[]; expandedRowGroups?: any[];
stateStorage?: string;
stateKey?: string;
$emit(eventName: 'page', event: Event): this; $emit(eventName: 'page', event: Event): this;
$emit(eventName: 'sort', event: Event): this; $emit(eventName: 'sort', event: Event): this;
$emit(eventName: 'filter', event: Event): this; $emit(eventName: 'filter', event: Event): this;

103
src/views/datatable/DataTableDoc.vue
View File

@ -904,6 +904,97 @@ export default {
} }
} }
} }
</CodeHighlight>
<h3>TableState</h3>
<p>Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using its last settings.
Enabling state is easy as defining a unique <i>stateKey</i>, the storage to keep the state is defined with the <i>stateStorage</i> property that accepts session for sessionStorage and local for localStorage.
Currently following features are supported by TableState; paging, sorting, filtering, column resizing, column reordering, row expansion, row group expansion and row selection.
</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters" :resizableColumns="true"
stateStorage="session" stateKey="dt-state-demo-session"&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&gt;
&lt;/template&gt;
&lt;Column field="vin" header="Vin" filterMatchMode="startsWith" :sortable="true"&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="year" header="Year" filterMatchMode="contains" :sortable="true"&gt;
&lt;template #filter&gt;
&lt;InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="brand" header="Brand" filterMatchMode="equals" :sortable="true"&gt;
&lt;template #filter&gt;
&lt;Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-clearfix p-dropdown-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;&#123;&#123;slotProps.option.brand&#125;&#125;&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/Dropdown&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="color" header="Color" filterMatchMode="in" :sortable="true"&gt;
&lt;template #filter&gt;
&lt;MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;template #empty&gt;
No records found.
&lt;/template&gt;
&lt;/DataTable&gt;
</code>
</pre>
<CodeHighlight lang="javascript">
import CarService from '../../service/CarService';
export default {
data() {
return {
filters: {},
brands: [
{brand: 'Audi', value: 'Audi'},
{brand: 'BMW', value: 'BMW'},
{brand: 'Fiat', value: 'Fiat'},
{brand: 'Honda', value: 'Honda'},
{brand: 'Jaguar', value: 'Jaguar'},
{brand: 'Mercedes', value: 'Mercedes'},
{brand: 'Renault', value: 'Renault'},
{brand: 'Volkswagen', value: 'Volkswagen'},
{brand: 'Volvo', value: 'Volvo'}
],
colors: [
{name: 'White', value: 'White'},
{name: 'Green', value: 'Green'},
{name: 'Silver', value: 'Silver'},
{name: 'Black', value: 'Black'},
{name: 'Red', value: 'Red'},
{name: 'Maroon', value: 'Maroon'},
{name: 'Brown', value: 'Brown'},
{name: 'Orange', value: 'Orange'},
{name: 'Blue', value: 'Blue'}
],
cars: null
}
},
carService: null,
created() {
this.carService = new CarService();
},
mounted() {
this.carService.getCarsMedium().then(data => this.cars = data);
}
}
</CodeHighlight> </CodeHighlight>
<h3>Empty Message</h3> <h3>Empty Message</h3>
@ -1308,6 +1399,18 @@ export default {
<td>null</td> <td>null</td>
<td>An array of group field values whose groups would be rendered as expanded.</td> <td>An array of group field values whose groups would be rendered as expanded.</td>
</tr> </tr>
<tr>
<td>stateStorage</td>
<td>string</td>
<td>session</td>
<td>Defines where a stateful table keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.</td>
</tr>
<tr>
<td>stateKey</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of a stateful table to use in state storage.</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>

1
src/views/datatable/DataTableStateDemo.vue
View File

@ -184,6 +184,7 @@
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
import CarService from '../../service/CarService'; import CarService from '../../service/CarService';
export default { export default {
data() { data() {
return { return {