From abe7c1d950a58dfd5a7001d5862bf2e3d631e852 Mon Sep 17 00:00:00 2001 From: p0psicles Date: Sun, 28 Feb 2021 11:45:12 +0100 Subject: [PATCH 1/4] Add vgtColumnDropdown.vue component --- src/components/VgtColumnDropdown.vue | 49 ++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 src/components/VgtColumnDropdown.vue diff --git a/src/components/VgtColumnDropdown.vue b/src/components/VgtColumnDropdown.vue new file mode 100644 index 00000000..0eea0e5a --- /dev/null +++ b/src/components/VgtColumnDropdown.vue @@ -0,0 +1,49 @@ + + + + + From 3ba3758da5317f9ab06c3a7d4035ceff153e0e71 Mon Sep 17 00:00:00 2001 From: p0psicles Date: Sun, 28 Feb 2021 11:49:02 +0100 Subject: [PATCH 2/4] Add vgt-column-dropdown component to Table.vue * Add slots: - table-actions-header - table-actions-global-search - table-actions-dropdown --- src/components/Table.vue | 58 ++++++++++++++++++++++++++++++++-------- 1 file changed, 47 insertions(+), 11 deletions(-) diff --git a/src/components/Table.vue b/src/components/Table.vue index 328ca45c..8f0df2b3 100644 --- a/src/components/Table.vue +++ b/src/components/Table.vue @@ -37,18 +37,21 @@ :info-fn="paginationInfoFn" > - - - +
({ @@ -494,6 +506,9 @@ export default { forceSearch: false, sortChanged: false, dataTypes: dataTypes || {}, + + // internal column filter options + columnFilterEnabled: false, }), watch: { @@ -556,6 +571,14 @@ export default { }); } }, + + columnFilterOptions: { + handler() { + this.initializeColumnFilter(); + }, + deep: true, + immediate: true, + }, }, computed: { @@ -1439,6 +1462,10 @@ export default { return originalRows; }, + toggleFilteredColumn(value) { + this.columns.find(column => column.label === value.label).hidden = !value.checked; + }, + initializePagination() { const { enabled, @@ -1631,6 +1658,14 @@ export default { this.clearSelectionText = clearSelectionText; } }, + + initializeColumnFilter() { + const { enabled } = this.columnFilterOptions; + + if (typeof enabled === 'boolean') { + this.columnFilterEnabled = enabled; + } + }, }, mounted() { @@ -1645,6 +1680,7 @@ export default { 'vgt-global-search': VgtGlobalSearch, 'vgt-header-row': VgtHeaderRow, 'vgt-table-header': VgtTableHeader, + 'vgt-column-dropdown': VgtColumnDropdown, }, }; From bc4f547258ab170d25b14cc1cac905e522240cdb Mon Sep 17 00:00:00 2001 From: p0psicles Date: Sun, 28 Feb 2021 11:49:14 +0100 Subject: [PATCH 3/4] Update dev example for grouped table --- dev/App.vue | 7 + dev/grouped-table.vue | 39 +- yarn.lock | 10415 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 10459 insertions(+), 2 deletions(-) create mode 100644 yarn.lock diff --git a/dev/App.vue b/dev/App.vue index b693a94c..82db3d7a 100644 --- a/dev/App.vue +++ b/dev/App.vue @@ -72,6 +72,7 @@ export default { // filterDropdownItems: ['Chris', 'Dan', 'Susan'], // filterValue: 'Chris', }, + hidden: false, }, { label: 'Age', @@ -93,6 +94,7 @@ export default { // }, // ], }, + hidden: false, }, { filterOptions: { @@ -104,16 +106,19 @@ export default { type: 'date', dateInputFormat: 'yyyy-MM-dd', dateOutputFormat: 'PPPP', + hidden: false, }, { label: 'Percent', field: 'score', type: 'percentage', + hidden: false, }, { label: 'func', field: this.funcValue, type: 'number', + hidden: false, }, { label: 'Valid', @@ -126,6 +131,7 @@ export default { false, ], }, + hidden: false, }, { label: 'Exact', @@ -137,6 +143,7 @@ export default { 'rematch', ], }, + hidden: false, } ], rows: [ diff --git a/dev/grouped-table.vue b/dev/grouped-table.vue index 18c912b3..2bc68c8f 100644 --- a/dev/grouped-table.vue +++ b/dev/grouped-table.vue @@ -3,6 +3,7 @@ + +
diff --git a/src/components/Table.vue b/src/components/Table.vue index 8f0df2b3..3eadd5dd 100644 --- a/src/components/Table.vue +++ b/src/components/Table.vue @@ -37,21 +37,19 @@ :info-fn="paginationInfoFn" > -
- - - - - - - -
+
+ + + + + +
({ @@ -506,9 +495,6 @@ export default { forceSearch: false, sortChanged: false, dataTypes: dataTypes || {}, - - // internal column filter options - columnFilterEnabled: false, }), watch: { @@ -571,14 +557,6 @@ export default { }); } }, - - columnFilterOptions: { - handler() { - this.initializeColumnFilter(); - }, - deep: true, - immediate: true, - }, }, computed: { @@ -1462,10 +1440,6 @@ export default { return originalRows; }, - toggleFilteredColumn(value) { - this.columns.find(column => column.label === value.label).hidden = !value.checked; - }, - initializePagination() { const { enabled, @@ -1659,13 +1633,6 @@ export default { } }, - initializeColumnFilter() { - const { enabled } = this.columnFilterOptions; - - if (typeof enabled === 'boolean') { - this.columnFilterEnabled = enabled; - } - }, }, mounted() { @@ -1680,7 +1647,6 @@ export default { 'vgt-global-search': VgtGlobalSearch, 'vgt-header-row': VgtHeaderRow, 'vgt-table-header': VgtTableHeader, - 'vgt-column-dropdown': VgtColumnDropdown, }, }; diff --git a/src/components/VgtColumnDropdown.vue b/src/components/plugins/VgtColumnDropdown.vue similarity index 86% rename from src/components/VgtColumnDropdown.vue rename to src/components/plugins/VgtColumnDropdown.vue index 0eea0e5a..62d81d96 100644 --- a/src/components/VgtColumnDropdown.vue +++ b/src/components/plugins/VgtColumnDropdown.vue @@ -27,9 +27,13 @@ export default { selectOpen: false } }, + mounted() { + const { parentProps } = this; + console.log(parentProps); + }, methods: { - updateFilteredColumn(columnLabel, checked) { - this.$emit('input', { label: columnLabel, checked }); + updateFilteredColumn(label, checked) { + this.columns.find(column => column.label === label).hidden = !checked; } }, watch: {