Исправлено название столбца (isActive -> inArchive). Добавлена вьюха …

…(компонент-представление) GridComponentView.vue для демонстрации возможностей грид компонента (включение/отключение фильтрации, многострочного выделения и т.д.) и необходимые мутации во Vuex модуль

src/store/modules/gridOptions.js

@@ -105,7 +105,7 @@ export default {
                 },
                 {
                     type: "checkbox",
-                    name: "isActive",
+                    name: "inArchive",
                     caption: "В архиве",
                     width: "180px",
                     padding: "0px",
@@ -127,6 +127,20 @@ export default {
             allowFiltering: true,
         },
     },
+    mutations: {
+        enableFiltering(state, allowFiltering) {
+            state.behaviorOptions.allowFiltering = allowFiltering;
+        },
+        enableMultipleSelection(state, allowMultipleSelection) {
+            state.behaviorOptions.allowMultipleSelection = allowMultipleSelection;
+        },
+        enableSelectAll(state, allowSelectAll) {
+            state.behaviorOptions.allowSelectAll = allowSelectAll;
+        },
+        enablePaging(state, allowPaging) {
+            state.behaviorOptions.allowPaging = allowPaging;
+        }
+    },
     getters: {
         getCommonTableOptions(state) {
             let commonTableOptions = [];

src/views/GridComponentView.vue

@@ -1,14 +1,116 @@
 <template>
-  <GridComponent/>
+  <div id="container">
+    <div class="grid-settings">
+      <input
+        type="checkbox"
+        id="allowFilter"
+        name="filtering"
+        v-model="filterVisibleProperty"
+      />
+      <label for="allowFilter">Фильтрация</label>
+    </div>
+    <div class="grid-settings">
+      <input
+        type="checkbox"
+        id="allowSelection"
+        name="selection"
+        v-model="selectionVisibleProperty"
+      />
+      <label for="allowSelection">Мультистрочное выделение</label>
+    </div>
+    <div class="grid-settings">
+      <input
+        type="checkbox"
+        id="allowSelectAll"
+        name="selectAll"
+        v-model="selectAllVisibleProperty"
+      />
+      <label for="allowSelectAll">Выделить все</label>
+    </div>
+    <div class="grid-settings">
+      <input
+        type="checkbox"
+        id="allowPaging"
+        name="paging"
+        v-model="pagingVisibleProperty"
+      />
+      <label for="allowPaging">Пагинация</label>
+    </div>
+    <GridComponent @selectionChanged="showSelectedRowIds" />
+    <div id="selected-ids">Id выделенных строк: {{ selectedIds }}</div>
+  </div>
 </template>
 
 <script>
-import GridComponent from '@/components/GridComponent.vue'
+import GridComponent from "@/components/GridComponent.vue";
 
 export default {
-  name: 'GridComponentView',
+  name: "GridView",
+
+  data() {
+    let selectedIds = "";
+    return { selectedIds };
+  },
+
   components: {
-    GridComponent 
-  }
-}
+    GridComponent,
+  },
+
+  computed: {
+    filterVisibleProperty: {
+      get() {
+        return this.$store.getters.getBehaviorOptions.allowFiltering;
+      },
+      set(value) {
+        this.$store.commit("enableFiltering", value);
+      },
+    },
+    selectionVisibleProperty: {
+      get() {
+        return this.$store.getters.getBehaviorOptions.allowMultipleSelection;
+      },
+      set(value) {
+        this.$store.commit("enableMultipleSelection", value);
+      },
+    },
+    selectAllVisibleProperty: {
+      get() {
+        return this.$store.getters.getBehaviorOptions.allowSelectAll;
+      },
+      set(value) {
+        this.$store.commit("enableSelectAll", value);
+      },
+    },
+    pagingVisibleProperty: {
+      get() {
+        return this.$store.getters.getBehaviorOptions.allowPaging;
+      },
+      set(value) {
+        this.$store.commit("enablePaging", value);
+      },
+    },
+  },
+
+  methods: {
+    showSelectedRowIds(selectedRows) {
+      this.selectedIds = selectedRows.join(", ");
+    },
+  },
+};
 </script>
+
+<style scoped>
+#container {
+  width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.grid-settings {
+  margin-bottom: 10px;
+}
+
+#selected-ids {
+  margin-top: 50px;
+}
+</style>