diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts index 9646e7237..556c30533 100644 --- a/src/components/datatable/DataTable.d.ts +++ b/src/components/datatable/DataTable.d.ts @@ -42,6 +42,8 @@ export declare class DataTable extends Vue { groupRowsBy?: string[]|string; expandableRowGroups?: boolean; expandedRowGroups?: any[]; + stateStorage?: string; + stateKey?: string; $emit(eventName: 'page', event: Event): this; $emit(eventName: 'sort', event: Event): this; $emit(eventName: 'filter', event: Event): this; diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue index dce764cb6..4089fcbfe 100644 --- a/src/views/datatable/DataTableDoc.vue +++ b/src/views/datatable/DataTableDoc.vue @@ -904,6 +904,97 @@ export default { } } } + + +

TableState

+

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 stateKey, the storage to keep the state is defined with the stateStorage 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. +

+
+
+<DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters" :resizableColumns="true"
+    stateStorage="session" stateKey="dt-state-demo-session">
+    <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>
+    </template>
+    <Column field="vin" header="Vin" filterMatchMode="startsWith" :sortable="true">
+        <template #filter>
+            <InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" />
+        </template>
+    </Column>
+    <Column field="year" header="Year" filterMatchMode="contains" :sortable="true">
+        <template #filter>
+            <InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" />
+        </template>
+    </Column>
+    <Column field="brand" header="Brand" filterMatchMode="equals" :sortable="true">
+        <template #filter>
+            <Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true">
+                <template #option="slotProps">
+                    <div class="p-clearfix p-dropdown-car-option">
+                        <img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
+                        <span>{{slotProps.option.brand}}</span>
+                    </div>
+                </template>
+            </Dropdown>
+        </template>
+    </Column>
+    <Column field="color" header="Color" filterMatchMode="in" :sortable="true">
+        <template #filter>
+            <MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" />
+        </template>
+    </Column>
+    <template #empty>
+        No records found.
+    </template>
+</DataTable>
+
+
+ + +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); + } +}

Empty Message

@@ -1308,6 +1399,18 @@ export default { null An array of group field values whose groups would be rendered as expanded. + + stateStorage + string + session + Defines where a stateful table keeps its state, valid values are "session" for sessionStorage and "local" for localStorage. + + + stateKey + string + null + Unique identifier of a stateful table to use in state storage. + diff --git a/src/views/datatable/DataTableStateDemo.vue b/src/views/datatable/DataTableStateDemo.vue index ee415a826..4a164e633 100644 --- a/src/views/datatable/DataTableStateDemo.vue +++ b/src/views/datatable/DataTableStateDemo.vue @@ -184,6 +184,7 @@ import CarService from '../../service/CarService'; + export default { data() { return {