From 27db3882237b00c9b0066087ec9e00996dea3b6a Mon Sep 17 00:00:00 2001 From: mertsincan Date: Sun, 31 Dec 2023 14:08:33 +0000 Subject: [PATCH] Improve DataTable demo performance --- components/demo/DeferredDemo.vue | 55 +++++ doc/datatable/BasicDoc.vue | 24 +- doc/datatable/ColumnGroupDoc.vue | 118 ++++----- doc/datatable/ColumnToggleDoc.vue | 35 +-- doc/datatable/ConditionalStyleDoc.vue | 38 +-- doc/datatable/ContextMenuDoc.vue | 36 +-- doc/datatable/DynamicColumnsDoc.vue | 18 +- doc/datatable/ExportDoc.vue | 34 +-- doc/datatable/GridLinesDoc.vue | 24 +- doc/datatable/LazyLoadDoc.vue | 154 ++++++------ doc/datatable/ReorderDoc.vue | 24 +- doc/datatable/RowExpansionDoc.vue | 120 ++++----- doc/datatable/SizeDoc.vue | 28 ++- doc/datatable/StatefulDoc.vue | 146 +++++------ doc/datatable/StripedRowsDoc.vue | 24 +- doc/datatable/TemplateDoc.vue | 72 +++--- doc/datatable/colresize/ExpandModeDoc.vue | 24 +- doc/datatable/colresize/FitModeDoc.vue | 24 +- doc/datatable/edit/CellEditDoc.vue | 62 ++--- doc/datatable/edit/FilterSortEditDoc.vue | 60 ++--- doc/datatable/edit/RowEditDoc.vue | 112 ++++----- doc/datatable/filter/AdvancedFilterDoc.vue | 230 +++++++++--------- doc/datatable/filter/BasicFilterDoc.vue | 152 ++++++------ doc/datatable/paginator/PaginatorBasicDoc.vue | 24 +- .../paginator/PaginatorTemplateDoc.vue | 52 ++-- doc/datatable/pt/PTDoc.vue | 96 ++++---- .../rowgroup/ExpandableRowGroupDoc.vue | 86 +++---- doc/datatable/rowgroup/RowSpanRowGroupDoc.vue | 74 +++--- .../rowgroup/SubHeaderRowGroupDoc.vue | 62 ++--- .../rowselection/CheckboxRowSelectionDoc.vue | 26 +- .../rowselection/MultipleRowsSelectionDoc.vue | 30 ++- .../RadioButtonRowSelectionDoc.vue | 26 +- .../rowselection/RowSelectEventsDoc.vue | 24 +- .../rowselection/SingleRowSelectionDoc.vue | 30 ++- doc/datatable/samples/CustomersDoc.vue | 211 ++++++++-------- doc/datatable/samples/ProductsDoc.vue | 143 +++++------ doc/datatable/scroll/FlexibleScrollDoc.vue | 12 +- doc/datatable/scroll/FrozenColumnsDoc.vue | 50 ++-- doc/datatable/scroll/FrozenRowsDoc.vue | 60 ++--- doc/datatable/scroll/HorizontalScrollDoc.vue | 46 ++-- doc/datatable/scroll/VerticalScrollDoc.vue | 28 ++- doc/datatable/sort/MultipleColumnsDoc.vue | 24 +- doc/datatable/sort/PresortDoc.vue | 34 +-- doc/datatable/sort/RemovableSortDoc.vue | 24 +- doc/datatable/sort/SingleColumnDoc.vue | 24 +- .../virtualscroll/LazyVirtualScrollDoc.vue | 98 ++++---- .../virtualscroll/PreloadVirtualScrollDoc.vue | 26 +- plugins/app.js | 2 + 48 files changed, 1560 insertions(+), 1366 deletions(-) create mode 100644 components/demo/DeferredDemo.vue diff --git a/components/demo/DeferredDemo.vue b/components/demo/DeferredDemo.vue new file mode 100644 index 000000000..508ec6f03 --- /dev/null +++ b/components/demo/DeferredDemo.vue @@ -0,0 +1,55 @@ + + + + diff --git a/doc/datatable/BasicDoc.vue b/doc/datatable/BasicDoc.vue index 793ee58a3..9e1b380f1 100644 --- a/doc/datatable/BasicDoc.vue +++ b/doc/datatable/BasicDoc.vue @@ -2,14 +2,16 @@

DataTable requires a value as data to display and Column components as children for the representation.

 -
- - - - - - -
+ +
+ + + + + + +
+ @@ -98,8 +100,10 @@ const products = ref(); } }; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); + methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + } } }; diff --git a/doc/datatable/ColumnGroupDoc.vue b/doc/datatable/ColumnGroupDoc.vue index eefe461a5..e073b8233 100644 --- a/doc/datatable/ColumnGroupDoc.vue +++ b/doc/datatable/ColumnGroupDoc.vue @@ -5,50 +5,52 @@ to span are defined with the colspan and rowspan properties of a Column.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ @@ -294,21 +296,21 @@ const thisYearTotal = computed(() => { } }; }, - created() { - this.sales = [ - { product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342 }, - { product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122 }, - { product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500 }, - { product: 'Blue T-Shirt', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323 }, - { product: 'Brown Purse', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332 }, - { product: 'Chakra Bracelet', lastYearSale: 52, thisYearSale: 65, lastYearProfit: 421132, thisYearProfit: 150005 }, - { product: 'Galaxy Earrings', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214 }, - { product: 'Game Controller', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322 }, - { product: 'Gaming Set', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232 }, - { product: 'Gold Phone Case', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533 } - ]; - }, methods: { + loadDemoData() { + this.sales = [ + { product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342 }, + { product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122 }, + { product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500 }, + { product: 'Blue T-Shirt', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323 }, + { product: 'Brown Purse', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332 }, + { product: 'Chakra Bracelet', lastYearSale: 52, thisYearSale: 65, lastYearProfit: 421132, thisYearProfit: 150005 }, + { product: 'Galaxy Earrings', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214 }, + { product: 'Game Controller', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322 }, + { product: 'Gaming Set', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232 }, + { product: 'Gold Phone Case', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533 } + ]; + }, formatCurrency(value) { return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); } diff --git a/doc/datatable/ColumnToggleDoc.vue b/doc/datatable/ColumnToggleDoc.vue index ccc03efb1..b8dab4a59 100644 --- a/doc/datatable/ColumnToggleDoc.vue +++ b/doc/datatable/ColumnToggleDoc.vue @@ -2,17 +2,19 @@

Column visibility based on a condition can be implemented with dynamic columns, in this sample a MultiSelect is used to manage the visible columns.

 -
- - - - - -
+ +
+ + + + + +
+ @@ -30,7 +32,7 @@ export default { @@ -44,7 +46,7 @@ export default { @@ -139,7 +141,6 @@ const onToggle = (val) => { } }; }, - created() { this.columns = [ { field: 'name', header: 'Name' }, @@ -148,10 +149,10 @@ const onToggle = (val) => { ]; this.selectedColumns = this.columns; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); - }, methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + }, onToggle(value) { this.selectedColumns = this.columns.filter((col) => value.includes(col)); } diff --git a/doc/datatable/ConditionalStyleDoc.vue b/doc/datatable/ConditionalStyleDoc.vue index dd069efbe..21486f042 100644 --- a/doc/datatable/ConditionalStyleDoc.vue +++ b/doc/datatable/ConditionalStyleDoc.vue @@ -2,20 +2,22 @@

Particular rows and cells can be styled based on conditions. The rowClass receives a row data as a parameter to return a style class for a row whereas cells are customized using the body template.

 -
- - - - - - - - -
+ +
+ + + + + + + + +
+ @@ -119,7 +121,7 @@ import { ProductService } from '@/service/ProductService'; onMounted(() => { ProductService.getProductsSmall().then((data) => (this.products = data)); }); - + const products = ref(); const rowClass = (data) => { @@ -160,10 +162,10 @@ const stockClass = (data) => { } }; }, - mounted() { - ProductService.getProductsSmall().then((data) => (this.products = data)); - }, methods: { + loadDemoData() { + ProductService.getProductsSmall().then((data) => (this.products = data)); + }, rowClass(data) { return [{ 'bg-primary': data.category === 'Fitness' }]; }, diff --git a/doc/datatable/ContextMenuDoc.vue b/doc/datatable/ContextMenuDoc.vue index 078663432..d35782449 100644 --- a/doc/datatable/ContextMenuDoc.vue +++ b/doc/datatable/ContextMenuDoc.vue @@ -4,19 +4,21 @@ DataTable has exclusive integration with ContextMenu using the contextMenu event to open a menu on right click alont with contextMenuSelection property and row-contextmenu event to control the selection via the menu.

-
- - - - - - - - - -
+ +
+ + + + + + + + + +
+ @@ -51,7 +53,7 @@ export default { @@ -110,8 +112,10 @@ const columns = [ { field: 'quantity', header: 'Quantity' } ]; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); + methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + } } }; diff --git a/doc/datatable/ExportDoc.vue b/doc/datatable/ExportDoc.vue index ed3f6a5c4..d4f3c56c2 100644 --- a/doc/datatable/ExportDoc.vue +++ b/doc/datatable/ExportDoc.vue @@ -2,19 +2,21 @@

DataTable can export its data to CSV format.

 -
- - - - - - - -
+ +
+ + + + + + + +
+ @@ -127,10 +129,10 @@ const exportCSV = () => { } }; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); - }, methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + }, exportCSV() { this.$refs.dt.exportCSV(); } diff --git a/doc/datatable/GridLinesDoc.vue b/doc/datatable/GridLinesDoc.vue index 09b774066..09aed1ecf 100644 --- a/doc/datatable/GridLinesDoc.vue +++ b/doc/datatable/GridLinesDoc.vue @@ -2,14 +2,16 @@

Enabling showGridlines displays borders between cells.

 -
- - - - - - -
+ +
+ + + + + + +
+ @@ -98,8 +100,10 @@ const products = ref(); } }; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); + methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + } } }; diff --git a/doc/datatable/LazyLoadDoc.vue b/doc/datatable/LazyLoadDoc.vue index 75235affb..83c0b2e9b 100644 --- a/doc/datatable/LazyLoadDoc.vue +++ b/doc/datatable/LazyLoadDoc.vue @@ -10,65 +10,67 @@

Note that, the implementation of checkbox selection in lazy mode needs to be handled manually as in this example since the DataTable cannot know about the whole dataset.

-
- - - - - - - - - - - - - - - - - -
+ +
+ + + + + + + + + + + + + + + + + +
+ @@ -213,8 +215,8 @@ export default { this.loading = true; this.lazyParams = { - first: this.$refs.dt.first, - rows: this.$refs.dt.rows, + first: 0, + rows: 10, sortField: null, sortOrder: null, filters: this.filters @@ -324,8 +326,8 @@ onMounted(() => { loading.value = true; lazyParams.value = { - first: dt.value.first, - rows: dt.value.rows, + first: 0, + rows: 10, sortField: null, sortOrder: null, filters: filters.value @@ -425,20 +427,20 @@ const onRowUnselect = () => { } }; }, - mounted() { - this.loading = true; - - this.lazyParams = { - first: this.$refs.dt.first, - rows: this.$refs.dt.rows, - sortField: null, - sortOrder: null, - filters: this.filters - }; - - this.loadLazyData(); - }, methods: { + loadDemoData() { + this.loading = true; + + this.lazyParams = { + first: 0, + rows: 10, + sortField: null, + sortOrder: null, + filters: this.filters + }; + + this.loadLazyData(); + }, loadLazyData(event) { this.loading = true; this.lazyParams = { ...this.lazyParams, first: event?.first || this.first }; diff --git a/doc/datatable/ReorderDoc.vue b/doc/datatable/ReorderDoc.vue index 864f9eb7c..094c836f5 100644 --- a/doc/datatable/ReorderDoc.vue +++ b/doc/datatable/ReorderDoc.vue @@ -6,12 +6,14 @@ the rows after reorder completes.

-
- - - - -
+ +
+ + + + +
+ @@ -72,7 +74,7 @@ export default { } } } -<\/script> +<\/script> `, composition: ` @@ -112,7 +114,7 @@ const onRowReorder = (event) => { toast.add({severity:'success', summary: 'Rows Reordered', life: 3000}); }; -<\/script> +<\/script> `, data: ` { @@ -139,10 +141,10 @@ const onRowReorder = (event) => { { field: 'quantity', header: 'Quantity' } ]; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); - }, methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + }, onColReorder() { this.$toast.add({ severity: 'success', summary: 'Column Reordered', life: 3000 }); }, diff --git a/doc/datatable/RowExpansionDoc.vue b/doc/datatable/RowExpansionDoc.vue index dbda2780c..cba39ee20 100644 --- a/doc/datatable/RowExpansionDoc.vue +++ b/doc/datatable/RowExpansionDoc.vue @@ -9,64 +9,66 @@ {'1004': true}. The dataKey alternative is more performant for large amounts of data.

-
- - - - - - @@ -126,8 +128,10 @@ const sizeOptions = ref([ } }; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); + methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + } } }; diff --git a/doc/datatable/StatefulDoc.vue b/doc/datatable/StatefulDoc.vue index a99954f8e..eca2c339a 100644 --- a/doc/datatable/StatefulDoc.vue +++ b/doc/datatable/StatefulDoc.vue @@ -6,76 +6,78 @@ browser is closed. Other alternative is local referring to localStorage for an extended lifetime.

-
- - - - @@ -433,10 +435,10 @@ const getSeverity = (status) => { created() { this.initFilters(); }, - mounted() { - CustomerService.getCustomersSmall().then((data) => (this.customers = data)); - }, methods: { + loadDemoData() { + CustomerService.getCustomersSmall().then((data) => (this.customers = data)); + }, initFilters() { this.filters = { global: { value: null, matchMode: FilterMatchMode.CONTAINS }, diff --git a/doc/datatable/StripedRowsDoc.vue b/doc/datatable/StripedRowsDoc.vue index ea63be2f0..b02fbc644 100644 --- a/doc/datatable/StripedRowsDoc.vue +++ b/doc/datatable/StripedRowsDoc.vue @@ -2,14 +2,16 @@

Alternating rows are displayed when stripedRows property is present.

 -
- - - - - - -
+ +
+ + + + + + +
+ @@ -98,8 +100,10 @@ const products = ref(); } }; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); + methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + } } }; diff --git a/doc/datatable/TemplateDoc.vue b/doc/datatable/TemplateDoc.vue index 3172acbbd..94ab4c505 100644 --- a/doc/datatable/TemplateDoc.vue +++ b/doc/datatable/TemplateDoc.vue @@ -2,39 +2,41 @@

Custom content at header and footer sections are supported via templating.

 -
- - - - - @@ -236,10 +238,10 @@ const getSeverity = (product) => { } }; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); - }, methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + }, formatCurrency(value) { return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); }, diff --git a/doc/datatable/colresize/ExpandModeDoc.vue b/doc/datatable/colresize/ExpandModeDoc.vue index 6398161c9..fae264a12 100644 --- a/doc/datatable/colresize/ExpandModeDoc.vue +++ b/doc/datatable/colresize/ExpandModeDoc.vue @@ -2,14 +2,16 @@

Setting columnResizeMode as expand changes the table width as well.

 -
- - - - - - -
+ +
+ + + + + + +
+ @@ -96,8 +98,10 @@ const products = ref(); } }; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); + methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + } } }; diff --git a/doc/datatable/colresize/FitModeDoc.vue b/doc/datatable/colresize/FitModeDoc.vue index d1f15badb..5e597ee8d 100644 --- a/doc/datatable/colresize/FitModeDoc.vue +++ b/doc/datatable/colresize/FitModeDoc.vue @@ -5,14 +5,16 @@ that does not change the overall table width.

-
- - - - - - -
+ +
+ + + + + + +
+ @@ -99,8 +101,10 @@ const products = ref(); } }; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); + methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + } } }; diff --git a/doc/datatable/edit/CellEditDoc.vue b/doc/datatable/edit/CellEditDoc.vue index f7c3b6f4c..71bfed66c 100644 --- a/doc/datatable/edit/CellEditDoc.vue +++ b/doc/datatable/edit/CellEditDoc.vue @@ -2,35 +2,37 @@

Cell editing is enabled by setting editMode as cell, defining input elements with editor templating of a Column and implementing cell-edit-complete to update the state.

 -
- - - - @@ -271,10 +273,10 @@ const isPositiveInteger = (val) => { { field: 'price', header: 'Price' } ]; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); - }, methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + }, onCellEditComplete(event) { let { data, newValue, field } = event; diff --git a/doc/datatable/edit/RowEditDoc.vue b/doc/datatable/edit/RowEditDoc.vue index 3a407d990..b29886724 100644 --- a/doc/datatable/edit/RowEditDoc.vue +++ b/doc/datatable/edit/RowEditDoc.vue @@ -5,55 +5,57 @@ editor slot of a Column and implementing row-edit-save are necessary to update the state. The column to control the editing state should have editor templating applied.

-
- - - - - - - - - - - - - - - - - -
+ +
+ + + + + + + + + + + + + + + + + +
+ @@ -77,7 +79,7 @@ export default { table: { style: 'min-width: 50rem' }, column: { bodycell: ({ state }) => ({ - style: state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem' + style: state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem' }) } }" @@ -123,7 +125,7 @@ export default { table: { style: 'min-width: 50rem' }, column: { bodycell: ({ state }) => ({ - style: state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem' + style: state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem' }) } }" @@ -217,7 +219,7 @@ export default { table: { style: 'min-width: 50rem' }, column: { bodycell: ({ state }) => ({ - style: state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem' + style: state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem' }) } }" @@ -317,10 +319,10 @@ const formatCurrency = (value) => { } }; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); - }, methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + }, onRowEditSave(event) { let { newData, index } = event; diff --git a/doc/datatable/filter/AdvancedFilterDoc.vue b/doc/datatable/filter/AdvancedFilterDoc.vue index d79d746a5..99e11393f 100644 --- a/doc/datatable/filter/AdvancedFilterDoc.vue +++ b/doc/datatable/filter/AdvancedFilterDoc.vue @@ -2,116 +2,118 @@

When filterDisplay is set as menu, filtering is done via popups with support for multiple constraints and advanced templating.

 -
- - - - - - - - - - @@ -682,13 +684,13 @@ const getSeverity = (status) => { created() { this.initFilters(); }, - mounted() { - CustomerService.getCustomersMedium().then((data) => { - this.customers = this.getCustomers(data); - this.loading = false; - }); - }, methods: { + loadDemoData() { + CustomerService.getCustomersMedium().then((data) => { + this.customers = this.getCustomers(data); + this.loading = false; + }); + }, formatDate(value) { return value.toLocaleDateString('en-US', { day: '2-digit', diff --git a/doc/datatable/filter/BasicFilterDoc.vue b/doc/datatable/filter/BasicFilterDoc.vue index f352b7fdb..11669fd62 100644 --- a/doc/datatable/filter/BasicFilterDoc.vue +++ b/doc/datatable/filter/BasicFilterDoc.vue @@ -6,77 +6,79 @@

The optional global filtering searches the data against a single value that is bound to the global key of the filters object. The fields to search against is defined with the globalFilterFields.

-
- - - - - - - - - - @@ -510,13 +512,13 @@ const getSeverity = (status) => { } }; }, - mounted() { - CustomerService.getCustomersMedium().then((data) => { - this.customers = this.getCustomers(data); - this.loading = false; - }); - }, methods: { + loadDemoData() { + CustomerService.getCustomersMedium().then((data) => { + this.customers = this.getCustomers(data); + this.loading = false; + }); + }, getCustomers(data) { return [...(data || [])].map((d) => { d.date = new Date(d.date); diff --git a/doc/datatable/paginator/PaginatorBasicDoc.vue b/doc/datatable/paginator/PaginatorBasicDoc.vue index 8dcf2221d..ac3ca5fa2 100644 --- a/doc/datatable/paginator/PaginatorBasicDoc.vue +++ b/doc/datatable/paginator/PaginatorBasicDoc.vue @@ -2,14 +2,16 @@

Pagination is enabled by adding paginator property and defining rows per page.

 -
- - - - - - -
+ +
+ + + + + + +
+ @@ -104,8 +106,10 @@ const customers = ref(); } }; }, - mounted() { - CustomerService.getCustomersMedium().then((data) => (this.customers = data)); + methods: { + loadDemoData() { + CustomerService.getCustomersMedium().then((data) => (this.customers = data)); + } } }; diff --git a/doc/datatable/paginator/PaginatorTemplateDoc.vue b/doc/datatable/paginator/PaginatorTemplateDoc.vue index d51c38d11..7f844bdde 100644 --- a/doc/datatable/paginator/PaginatorTemplateDoc.vue +++ b/doc/datatable/paginator/PaginatorTemplateDoc.vue @@ -5,28 +5,30 @@ Paginator component for more information about the advanced customization options.

-
- - - - - - - - -
+ +
+ + + + + + + + +
+ @@ -145,8 +147,10 @@ const customers = ref(); } }; }, - mounted() { - CustomerService.getCustomersMedium().then((data) => (this.customers = data)); + methods: { + loadDemoData() { + CustomerService.getCustomersMedium().then((data) => (this.customers = data)); + } } }; diff --git a/doc/datatable/pt/PTDoc.vue b/doc/datatable/pt/PTDoc.vue index a08b514c6..0b65c687c 100644 --- a/doc/datatable/pt/PTDoc.vue +++ b/doc/datatable/pt/PTDoc.vue @@ -1,51 +1,53 @@ @@ -248,8 +250,10 @@ const products = ref(); } }; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); + methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + } } }; diff --git a/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue b/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue index 96e19d6ce..5647d9cff 100644 --- a/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue +++ b/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue @@ -5,46 +5,48 @@ rowgroup-collapse events.

-
- - - - - - @@ -242,10 +244,10 @@ const getSeverity = (status) => { } }; }, - mounted() { - CustomerService.getCustomersMedium().then((data) => (this.customers = data)); - }, methods: { + loadDemoData() { + CustomerService.getCustomersMedium().then((data) => (this.customers = data)); + }, onRowGroupExpand(event) { this.$toast.add({ severity: 'info', summary: 'Row Group Expanded', detail: 'Value: ' + event.data, life: 3000 }); }, diff --git a/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue b/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue index 2b40f03f4..3fb99517a 100644 --- a/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue +++ b/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue @@ -5,36 +5,38 @@ with groupfooter slots.

-
- - - - - - @@ -109,8 +111,10 @@ const metaKey = ref(true); } }; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); + methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + } } }; diff --git a/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue b/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue index 84d141e44..f67099ef2 100644 --- a/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue +++ b/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue @@ -5,18 +5,20 @@ metaKeySelection is present, behavior is changed in a way that selecting a new row requires meta key to be present. Note that in touch enabled devices, DataTable always ignores metaKey.

-
-
- - + +
+
+ + +
+ + + + + +
- - - - - - -
+ @@ -121,8 +123,10 @@ const metaKey = ref(true); } }; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); + methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + } } }; diff --git a/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue b/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue index cbd923201..6acd27001 100644 --- a/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue +++ b/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue @@ -5,15 +5,17 @@ trigger selection using the radio buttons.

-
- - - - - - - -
+ +
+ + + + + + + +
+ @@ -111,8 +113,10 @@ const metaKey = ref(true); } }; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); + methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + } } }; diff --git a/doc/datatable/rowselection/RowSelectEventsDoc.vue b/doc/datatable/rowselection/RowSelectEventsDoc.vue index c5379b249..299a946bf 100644 --- a/doc/datatable/rowselection/RowSelectEventsDoc.vue +++ b/doc/datatable/rowselection/RowSelectEventsDoc.vue @@ -2,14 +2,16 @@

DataTable provides row-select and row-unselect events to listen selection events.

 -
- - - - - - -
+ +
+ + + + + + +
+ @@ -124,10 +126,10 @@ const onRowUnselect = (event) => { } }; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); - }, methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + }, onRowSelect(event) { this.$toast.add({ severity: 'info', summary: 'Product Selected', detail: 'Name: ' + event.data.name, life: 3000 }); }, diff --git a/doc/datatable/rowselection/SingleRowSelectionDoc.vue b/doc/datatable/rowselection/SingleRowSelectionDoc.vue index 4d78cee40..88daa3068 100644 --- a/doc/datatable/rowselection/SingleRowSelectionDoc.vue +++ b/doc/datatable/rowselection/SingleRowSelectionDoc.vue @@ -9,18 +9,20 @@ setting it to false.

-
-
- - + +
+
+ + +
+ + + + + +
- - - - - - -
+ @@ -125,8 +127,10 @@ const metaKey = ref(true); } }; }, - mounted() { - ProductService.getProductsMini().then((data) => (this.products = data)); + methods: { + loadDemoData() { + ProductService.getProductsMini().then((data) => (this.products = data)); + } } }; diff --git a/doc/datatable/samples/CustomersDoc.vue b/doc/datatable/samples/CustomersDoc.vue index b713f4592..1c8befc05 100644 --- a/doc/datatable/samples/CustomersDoc.vue +++ b/doc/datatable/samples/CustomersDoc.vue @@ -2,103 +2,114 @@

DataTable with selection, pagination, filtering, sorting and templating.

 -
- - - - - - - - - - @@ -628,12 +639,12 @@ const getSeverity = (status) => { created() { this.initFilters(); }, - mounted() { - CustomerService.getCustomersLarge().then((data) => { - this.customers = this.getCustomers(data); - }); - }, methods: { + loadDemoData() { + CustomerService.getCustomersLarge().then((data) => { + this.customers = this.getCustomers(data); + }); + }, formatDate(value) { return value.toLocaleDateString('en-US', { day: '2-digit', diff --git a/doc/datatable/samples/ProductsDoc.vue b/doc/datatable/samples/ProductsDoc.vue index 1346b2d31..549e496cc 100644 --- a/doc/datatable/samples/ProductsDoc.vue +++ b/doc/datatable/samples/ProductsDoc.vue @@ -2,73 +2,75 @@

CRUD implementation example with a Dialog.

 -
- - + +
+ + - - + + - - + + - - - - - - - - - - - - - - - - - - - - -
+ + + + + + + + + + + + + + + + + + + + +
+ @@ -197,7 +199,7 @@ export default {