Implemented two-way syncing of sort-by and sort-direction properties in pf-table

Author: mtorromeo

CHANGELOG.md

@@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file.
 ## [Unreleased]
 ### Added
 - Implemented `v-model` on the page property `pf-paginate-control` components.
+- Implemented two-way syncing of `sort-by` and `sort-direction` properties in `pf-table`.
 - Implemented `pf-application-launcher` and `pf-launcher-item`.
 - Implemented `pf-notification-bell` as a toggler for the `pf-drawer`.
 - Added `navbar-brand-name` CSS class to correctly style text-only brand titles.

docs/src/pages/table.vue

@@ -15,9 +15,8 @@
               :selectable="table.selectable"
               :sortable="table.sortable"
               :scrollable="table.scrollable"
-              :sort-by="table.sortBy"
-              :sort-direction="table.sortDirection"
-              @sort-by="setSort"
+              :sort-by.sync="table.sortBy"
+              :sort-direction.sync="table.sortDirection"
               style="height:250px">
       <template scope="data">
         <td style="width:50px">#{{data.row.id}}</td>
@@ -223,12 +222,5 @@ export default {
       },
     };
   },
-
-  methods: {
-    setSort(field, direction) {
-      this.table.sortBy = field;
-      this.table.sortDirection = direction;
-    },
-  }
 };
 </script>

src/components/Table.vue

@@ -214,6 +214,8 @@ export default {
   methods: {
     setSortBy(field, direction) {
       this.$emit('sort-by', field, direction);
+      this.$emit('update:sortBy', field);
+      this.$emit('update:sortDirection', direction);
     },
 
     changeSelectAll(e) {