diff --git a/src/breeding-insight/dao/TraitDAO.ts b/src/breeding-insight/dao/TraitDAO.ts
index c319902e3..7e38ee72c 100644
--- a/src/breeding-insight/dao/TraitDAO.ts
+++ b/src/breeding-insight/dao/TraitDAO.ts
@@ -21,6 +21,7 @@ import * as api from "@/util/api";
 import {PaginationQuery} from "@/breeding-insight/model/PaginationQuery";
 import {TraitFilter, TraitSelector} from "@/breeding-insight/model/TraitSelector";
 import {OntologySort, SortOrder} from "@/breeding-insight/model/Sort";
+import {Result, ResultGenerator} from "@/breeding-insight/model/Result";
 
 export class TraitDAO {
     private activeOntologySortOrder!: SortOrder;
@@ -47,43 +48,17 @@ export class TraitDAO {
         }))
     }
 
-    static getFilteredTraits(programId: string,
-                             {page, pageSize}: PaginationQuery,
-                             full: boolean,
-                             sort: OntologySort,
-                             filters?: TraitFilter[]): Promise<BiResponse> {
-        const config: any = {
-            params: {
-                full,
-                page,
-                pageSize,
-                sortField: sort.field,
-                sortOrder: sort.order
-            }
-        };
-
-        if (filters) {
-            //
-            // get filtered list of traits
-            config.url = `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${programId}/traits/search`;
-            config.method = 'post';
-            config.data = new TraitSelector(filters);
-        } else {
-            // get all traits
-            config.url = `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${programId}/traits`;
-            config.method = 'get';
-        }
-
-        return new Promise<BiResponse>(((resolve, reject) => {
-            api.call(config)
-                .then((response: any) => {
-                    const biResponse = new BiResponse(response.data);
-                    resolve(biResponse);
-                }).catch((error) => {
-                reject(error);
-            })
-
-        }))
+    static async getFilteredTraits(programId: string, params: object): Promise<Result<Error,BiResponse>> {
+       try {
+           const { data } = await api.call({
+               url: `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${programId}/traits`,
+               method: 'get',
+               params
+       }) as Response;
+           return ResultGenerator.success(new BiResponse(data));
+       } catch (error) {
+           return ResultGenerator.err(error);
+       }
     }
 
   static async createTraits(programId: string, newTraits: Trait[]): Promise<BiResponse> {
@@ -129,5 +104,4 @@ export class TraitDAO {
     }) as Response;
     return new BiResponse(data);
   }
-
 }
diff --git a/src/breeding-insight/model/Sort.ts b/src/breeding-insight/model/Sort.ts
index 5acfa5ab0..0e5f4408a 100644
--- a/src/breeding-insight/model/Sort.ts
+++ b/src/breeding-insight/model/Sort.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+import Ontology from "@/views/ontology/Ontology.vue";
+
 export enum SortOrder {
   Ascending = 'ASC',
   Descending = 'DESC'
@@ -63,9 +65,17 @@ export class OntologySort {
   field: OntologySortField;
   order: SortOrder;
 
-  constructor(field: OntologySortField, order: SortOrder) {
-    this.field = field;
-    this.order = order;
+  constructor(field: string, order: SortOrder) {
+    this.field = OntologySortField.Name;
+    this.order = SortOrder.Ascending;
+    if (this.isSortField(field)) {
+      this.field = field;
+      this.order = order;
+    }
+  }
+
+  private isSortField(field: string): field is OntologySortField {
+    return Object.values(OntologySortField).includes(field);
   }
 }
 
diff --git a/src/breeding-insight/model/TraitSelector.ts b/src/breeding-insight/model/TraitSelector.ts
index 55e4db337..9f4ce8569 100644
--- a/src/breeding-insight/model/TraitSelector.ts
+++ b/src/breeding-insight/model/TraitSelector.ts
@@ -1,3 +1,5 @@
+import {OntologySortField} from "@/breeding-insight/model/Sort";
+
 export enum TraitField {
   NAME = 'name',
   MAIN_ABBREVIATION = 'mainAbbreviation',
@@ -7,6 +9,7 @@ export enum TraitField {
   METHOD_DESCRIPTION = 'methodDescription',
   METHOD_CLASS = 'methodClass',
   METHOD_FORMULA = 'methodFormula',
+  METHOD_HANDLE = 'methodHandle',
   SCALE_NAME = 'scaleName',
   SCALE_CLASS = 'scaleClass',
   SCALE_DECIMAL_PLACES = 'scaleDecimalPlaces',
@@ -19,7 +22,8 @@ export enum TraitField {
   CREATED_BY_USER_NAME = 'createdByUserName',
   UPDATED_BY_USER_ID = 'updatedByUserId',
   UPDATED_BY_USER_NAME = 'updatedByUserName',
-  TERM_TYPE = 'termType'
+  TERM_TYPE = 'termType',
+  ENTITY_ATTRIBUTE = 'entityAttribute'
 }
 
 export enum TermType {
@@ -31,6 +35,17 @@ export enum TermType {
 export class TraitFilter {
   field?: TraitField;
   value?: string | number | boolean;
+
+  constructor(field: string, value: any) {
+    if (this.isTraitField(field)) {
+      this.field = field;
+      this.value = value;
+    }
+  }
+
+  private isTraitField(field: string): field is TraitField {
+    return Object.values(TraitField).includes(field);
+  }
 }
 
 export class TraitSelector {
@@ -41,7 +56,9 @@ export class TraitSelector {
   }
 
   addFilter(filter: TraitFilter) {
-    this.filters.push(filter);
+    if (filter.field && filter.value !== '') {
+      this.filters.push(filter);
+    }
   }
 
 }
\ No newline at end of file
diff --git a/src/breeding-insight/service/TraitService.ts b/src/breeding-insight/service/TraitService.ts
index aab41b10b..6f3797a13 100644
--- a/src/breeding-insight/service/TraitService.ts
+++ b/src/breeding-insight/service/TraitService.ts
@@ -17,11 +17,13 @@
 
 import {TraitDAO} from "@/breeding-insight/dao/TraitDAO";
 import {Trait} from "@/breeding-insight/model/Trait";
-import {Metadata} from "@/breeding-insight/model/BiResponse";
+import {BiResponse, Metadata, Response} from "@/breeding-insight/model/BiResponse";
 import {PaginationQuery} from "@/breeding-insight/model/PaginationQuery";
 import {ValidationErrorService} from "@/breeding-insight/service/ValidationErrorService";
-import {TraitFilter} from "@/breeding-insight/model/TraitSelector";
+import {TraitField, TraitFilter, TraitSelector} from "@/breeding-insight/model/TraitSelector";
 import {OntologySort, OntologySortField, SortOrder} from "@/breeding-insight/model/Sort";
+import * as api from "@/util/api";
+import {Result, ResultGenerator} from "@/breeding-insight/model/Result";
 
 export class TraitService {
 
@@ -114,32 +116,29 @@ export class TraitService {
     }));
   }
 
-  static getFilteredTraits(programId: string,
-                           paginationQuery: PaginationQuery = new PaginationQuery(1, 50, true),
-                           full: boolean = false,
-                           filters?: TraitFilter[],
-                           sort: OntologySort = new OntologySort(OntologySortField.Name, SortOrder.Ascending)): Promise<[Trait[], Metadata]> {
-    return new Promise<[Trait[], Metadata]>(((resolve, reject) => {
-
-      if (programId) {
-        TraitDAO.getFilteredTraits(programId, paginationQuery, full, sort, filters).then((biResponse) => {
-
-          let traits: Trait[] = [];
+  static async getTraits(programId: string,
+                         sort: OntologySort,
+                         pagination: {pageSize: number, page: number},
+                         filters?: any): Promise<Result<Error, BiResponse>>{
+    if (!programId) {
+      throw 'Program ID required';
+    }
 
-          if (biResponse.result.data) {
-            traits = biResponse.result.data.map((trait: any) => {
-              return trait as Trait;
-            });
-          }
+    try {
+      let response: Result<Error, BiResponse> = await TraitDAO.getFilteredTraits(programId,
+          this.makeTraitParams(sort, pagination, filters));
 
-          resolve([traits, biResponse.metadata]);
+      if (response.isErr()) {
+        throw response.value;
+      }
 
-        }).catch((error) => reject(error));
+      return response.applyResult(biRes => {
+        return biRes;
+      });
 
-      } else {
-        reject();
-      }
-    }));
+    } catch (error) {
+      return ResultGenerator.err(error);
+    }
   }
 
   static async getTraitEditable(programId: string, traitId: string): Promise<[boolean, Metadata]> {
@@ -185,4 +184,27 @@ export class TraitService {
     }
     else throw 'Unable to get trait editable info';
   }
+
+  private static makeTraitParams(sort: OntologySort, pagination: {pageSize: number, page: number}, filters?: any) {
+    let params: any = {};
+
+    if (filters) {
+      params = filters;
+    }
+    if (sort.field) {
+      params['sortField'] = sort.field;
+    }
+    if (sort.order) {
+      params['sortOrder'] = sort.order;
+    }
+    if (pagination.page || pagination.page == 0) { //have to account for 0-index pagination since 0 falsy
+      params ['page'] = pagination.page;
+    }
+    if (pagination.pageSize) {
+      params['pageSize'] = pagination.pageSize;
+    }
+    params.full = true;
+
+    return params;
+  }
 }
diff --git a/src/components/germplasm/GermplasmTable.vue b/src/components/germplasm/GermplasmTable.vue
index 9d1974a19..55cbc5d87 100644
--- a/src/components/germplasm/GermplasmTable.vue
+++ b/src/components/germplasm/GermplasmTable.vue
@@ -190,6 +190,7 @@ export default class GermplasmTable extends Vue {
   }
 
   initSearch(filters: any) {
+    
     this.filters = filters;
 
     // When filtering the list, set a page to the first page.
diff --git a/src/components/ontology/OntologyActiveTable.vue b/src/components/ontology/OntologyActiveTable.vue
index 0b2730972..6c3193a59 100644
--- a/src/components/ontology/OntologyActiveTable.vue
+++ b/src/components/ontology/OntologyActiveTable.vue
@@ -19,8 +19,8 @@
   <ontology-table
       v-bind:active="true"
       v-bind:ontologySort="activeOntologySort"
-      v-on:newSortColumn="newSortColumn"
-      v-on:toggleSortOrder="toggleSortOrder"
+      v-bind:ontologyFetch="ontologyFetch"
+      v-on:updateSort="updateSort"
       @show-success-notification="$emit('show-success-notification', $event)"
       @show-info-notification="$emit('show-info-notification', $event)"
       @show-error-notification="$emit('show-error-notification', $event)"
@@ -31,12 +31,14 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import OntologyTable from "@/components/ontology/OntologyTable.vue";
-import {mapGetters, mapMutations} from 'vuex'
-import {
-  ACTIVE_ONT_NEW_SORT_COLUMN,
-  ACTIVE_ONT_TOGGLE_SORT_ORDER
-} from "@/store/sorting/mutation-types";
-import {OntologySort, OntologySortField} from "@/breeding-insight/model/Sort";
+import { mapGetters, mapMutations } from 'vuex'
+import { UPDATE_ACTIVE_ONT_SORT } from "@/store/sorting/mutation-types";
+import { OntologySort } from "@/breeding-insight/model/Sort";
+import { BackendPaginationController } from "@/breeding-insight/model/view_models/BackendPaginationController";
+import { BiResponse  } from "@/breeding-insight/model/BiResponse";
+import { TraitService } from '@/breeding-insight/service/TraitService';
+import { TraitField } from '@/breeding-insight/model/TraitSelector';
+import { Result } from '@/breeding-insight/model/Result';
 
 @Component({
   components: {OntologyTable},
@@ -47,8 +49,7 @@ import {OntologySort, OntologySortField} from "@/breeding-insight/model/Sort";
   },
   methods: {
     ...mapMutations('sorting', {
-      newSortColumn: ACTIVE_ONT_NEW_SORT_COLUMN,
-      toggleSortOrder: ACTIVE_ONT_TOGGLE_SORT_ORDER
+      updateSort: UPDATE_ACTIVE_ONT_SORT
     })
   }
 })
@@ -56,7 +57,18 @@ import {OntologySort, OntologySortField} from "@/breeding-insight/model/Sort";
 export default class OntologyActiveTable extends Vue {
 
   private activeOntologySort!: OntologySort;
-  private newSortColumn!: (field: OntologySortField) => void;
-  private toggleSortOrder!: () => void;
+
+  // Set the method used to populate the active ontology table
+  private ontologyFetch: (programId: string, sort: OntologySort, paginationController: BackendPaginationController) => (filters: any) => Promise<Result<Error, BiResponse>> =
+      function (programId: string, sort: OntologySort, paginationController: BackendPaginationController) {
+        return function (filters: any) {
+          filters[TraitField.STATUS] = true;  // only request active traits
+          return TraitService.getTraits(
+              programId,
+              sort,
+              { pageSize: paginationController.pageSize, page: paginationController.currentPage },
+              filters)
+        };
+      };
 }
 </script>
diff --git a/src/components/ontology/OntologyArchivedTable.vue b/src/components/ontology/OntologyArchivedTable.vue
index d3e1cf1f5..cab7e38dd 100644
--- a/src/components/ontology/OntologyArchivedTable.vue
+++ b/src/components/ontology/OntologyArchivedTable.vue
@@ -19,8 +19,8 @@
   <ontology-table
       v-bind:active="false"
       v-bind:ontologySort="archivedOntologySort"
-      v-on:newSortColumn="newSortColumn"
-      v-on:toggleSortOrder="toggleSortOrder"
+      v-bind:ontologyFetch="ontologyFetch"
+      v-on:updateSort="updateSort"
       @show-success-notification="$emit('show-success-notification', $event)"
       @show-info-notification="$emit('show-info-notification', $event)"
       @show-error-notification="$emit('show-error-notification', $event)"
@@ -29,14 +29,16 @@
 </template>
 
 <script lang="ts">
-import { Prop, Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from 'vue-property-decorator'
 import OntologyTable from "@/components/ontology/OntologyTable.vue";
-import {mapGetters, mapMutations} from 'vuex'
-import {
-  ARCHIVED_ONT_NEW_SORT_COLUMN,
-  ARCHIVED_ONT_TOGGLE_SORT_ORDER
-} from "@/store/sorting/mutation-types";
-import {OntologySort, OntologySortField} from "@/breeding-insight/model/Sort";
+import { mapGetters, mapMutations } from 'vuex'
+import { UPDATE_ARCHIVED_ONT_SORT } from "@/store/sorting/mutation-types";
+import { OntologySort } from "@/breeding-insight/model/Sort";
+import { BackendPaginationController } from "@/breeding-insight/model/view_models/BackendPaginationController";
+import { BiResponse } from "@/breeding-insight/model/BiResponse";
+import { TraitField } from "@/breeding-insight/model/TraitSelector";
+import {TraitService } from "@/breeding-insight/service/TraitService";
+import { Result } from '@/breeding-insight/model/Result';
 
 
 @Component({
@@ -48,15 +50,26 @@ import {OntologySort, OntologySortField} from "@/breeding-insight/model/Sort";
   },
   methods: {
     ...mapMutations('sorting', {
-      newSortColumn: ARCHIVED_ONT_NEW_SORT_COLUMN,
-      toggleSortOrder: ARCHIVED_ONT_TOGGLE_SORT_ORDER
+      updateSort: UPDATE_ARCHIVED_ONT_SORT
     })
   }
 })
 export default class OntologyArchivedTable extends Vue {
+
   private archivedOntologySort!: OntologySort;
-  private newSortColumn!: (field: OntologySortField) => void;
-  private toggleSortOrder!: () => void;
+
+  // Set the method used to populate the archived ontology table
+  private ontologyFetch: (programId: string, sort: OntologySort, paginationController: BackendPaginationController) => (filters: any) => Promise<Result<Error, BiResponse>> =
+      function (programId: string, sort: OntologySort, paginationController: BackendPaginationController) {
+        return function (filters: any) {
+          filters[TraitField.STATUS] = false; // only request archived traits
+          return TraitService.getTraits(
+              programId,
+              sort,
+              { pageSize: paginationController.pageSize, page: paginationController.currentPage },
+              filters)
+        };
+      };
 
 }
 </script>
diff --git a/src/components/ontology/OntologyTable.vue b/src/components/ontology/OntologyTable.vue
index 0ae2c148e..4967c4890 100644
--- a/src/components/ontology/OntologyTable.vue
+++ b/src/components/ontology/OntologyTable.vue
@@ -93,134 +93,82 @@
       </template>
     </NewDataForm>
 
-    <SidePanelTable
-      ref="sidePanelTable"
-      v-bind:records="traits"
-      v-bind:pagination="traitsPagination"
-      v-bind:auto-handle-close-panel-event="false"
-      v-bind:side-panel-state="traitSidePanelState"
-      v-bind:loading="traitsLoading"
-      v-on:paginate="paginationController.updatePage($event)"
-      v-on:paginate-toggle-all="paginationController.toggleShowAll(traitsPagination.totalCount.valueOf())"
-      v-on:paginate-page-size="paginationController.updatePageSize(parseInt($event,10))"
+    <SidePanelTableBuefy
+        v-bind:records.sync="traits"
+        v-bind:loading="traitsLoading"
+        v-bind:pagination="pagination"
+        v-bind:side-panel-state="traitSidePanelState"
+        v-on:show-error-notification="$emit('show-error-notification', $event)"
+        v-on:paginate="paginationController.updatePage($event)"
+        v-on:paginate-toggle-all="paginationController.toggleShowAll(pagination.totalCount.valueOf())"
+        v-on:paginate-page-size="paginationController.updatePageSize(parseInt($event,10))"
+        backend-sorting
+        backend-filtering
+        v-bind:default-sort="[ontologySortField.Name, 'ASC']"
+        v-on:sort="setSort"
+        v-on:search="initSearch"
+        v-bind:search-debounce="400"
     >
+      <b-table-column :field="traitField.NAME" label="Name" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})" searchable>
+        {{ props.row.data.observationVariableName }}
+      </b-table-column>
+      <b-table-column :field="traitField.TERM_TYPE" label="Term Type" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})" searchable>
+        {{ TraitStringFormatters.getTermTypeString(props.row.data.termType) }}
+      </b-table-column>
+      <b-table-column :field="traitField.ENTITY_ATTRIBUTE" label="Trait" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})" searchable>
+        {{ props.row.data.entity }} {{ props.row.data.attribute }}
+      </b-table-column>
+      <b-table-column :field="traitField.METHOD_HANDLE" label="Method" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})" searchable>
+        {{ (props.row.data.method.description ? props.row.data.method.description + " ": "") + props.row.data.method.methodClass }}
+      </b-table-column>
+      <b-table-column :field="traitField.SCALE_CLASS" label="Scale Class" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})" searchable>
+        {{ TraitStringFormatters.getScaleTypeString(props.row.data.scale) }}
+      </b-table-column>
+      <b-table-column :field="traitField.SCALE_NAME" label="Unit" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})" searchable>
+        <template v-if="props.row.data.scale.dataType === 'NUMERICAL'">
+          {{ props.row.data.scale.scaleName }}
+        </template>
+
+      </b-table-column>
+      <b-table-column v-slot="props" :th-attrs="(column) => ({scope:'col'})" :td-attrs="(column, row) => ({class:'has-text-right is-narrow'})">
+        <a v-if="!traitSidePanelState.openedRow && !checkIsOpen(props.row.data)"
+           data-testid="showDetails"
+           v-on:click.stop="traitSidePanelState.bus.$emit(traitSidePanelState.selectRowEvent, props.row.data)"
+           v-on:keypress.enter.space.stop="traitSidePanelState.bus.$emit(traitSidePanelState.selectRowEvent, props.row.data)"
+           tabindex="0"
 
-      <!-- 
-        Table row column slot specification
-        data: T
-      -->
-      <template v-slot:columns="data">
-        <TableColumn
-            name="name"
-            v-bind:label="'Name'"
-            v-bind:sortField="ontologySort.field"
-            v-bind:sortFieldLabel="nameSortLabel"
-            v-bind:sortable="true"
-            v-bind:sortOrder="ontologySort.order"
-            v-on:newSortColumn="$emit('newSortColumn', $event)"
-            v-on:toggleSortOrder="$emit('toggleSortOrder')"
-        >
-          {{ data.observationVariableName }}
-        </TableColumn>
-        <TableColumn
-            name="termType"
-            v-bind:label="'Term Type'"
-            v-bind:sortField="ontologySort.field"
-            v-bind:sortFieldLabel="termTypeSortLabel"
-            v-bind:sortable="true"
-            v-bind:sortOrder="ontologySort.order"
-            v-on:newSortColumn="$emit('newSortColumn', $event)"
-            v-on:toggleSortOrder="$emit('toggleSortOrder')"
-        >
-          {{ TraitStringFormatters.getTermTypeString(data.termType) }}
-        </TableColumn>
-        <TableColumn
-          name="trait"
-          v-bind:label="'Trait'"
-          v-bind:visible="!traitSidePanelState.collapseColumns"
-          v-bind:sortField="ontologySort.field"
-          v-bind:sortFieldLabel="entityAttributeSortLabel"
-          v-bind:sortable="true"
-          v-bind:sortOrder="ontologySort.order"
-          v-on:newSortColumn="$emit('newSortColumn', $event)"
-          v-on:toggleSortOrder="$emit('toggleSortOrder')"
-          class="display-case"
-        >
-          {{ data.entity }} {{data.attribute }}
-        </TableColumn>
-        <TableColumn
-            name="method"
-            v-bind:label="'Method'"
-            v-bind:visible="!traitSidePanelState.collapseColumns"
-            v-bind:sortField="ontologySort.field"
-            v-bind:sortFieldLabel="methodSortLabel"
-            v-bind:sortable="true"
-            v-bind:sortOrder="ontologySort.order"
-            v-on:newSortColumn="$emit('newSortColumn', $event)"
-            v-on:toggleSortOrder="$emit('toggleSortOrder')"
-            class="display-case"
-        >
-          {{ (data.method.description ? data.method.description + " ": "") + data.method.methodClass }}
-        </TableColumn>
-        <TableColumn
-            name="scaleClass"
-            v-bind:label="'Scale Class'"
-            v-bind:visible="!traitSidePanelState.collapseColumns"
-            v-bind:sortField="ontologySort.field"
-            v-bind:sortFieldLabel="scaleClassSortLabel"
-            v-bind:sortable="true"
-            v-bind:sortOrder="ontologySort.order"
-            v-on:newSortColumn="$emit('newSortColumn', $event)"
-            v-on:toggleSortOrder="$emit('toggleSortOrder')"
         >
-          {{ TraitStringFormatters.getScaleTypeString(data.scale) }}
-        </TableColumn>
-        <TableColumn
-            name="unit"
-            v-bind:label="'Unit'"
-            v-bind:visible="!traitSidePanelState.collapseColumns"
-            v-bind:sortField="ontologySort.field"
-            v-bind:sortFieldLabel="unitSortLabel"
-            v-bind:sortable="true"
-            v-bind:sortOrder="ontologySort.order"
-            v-on:newSortColumn="$emit('newSortColumn', $event)"
-            v-on:toggleSortOrder="$emit('toggleSortOrder')"
-        >
-          <template v-if="data.scale.dataType==='NUMERICAL'">
-            {{ data.scale.scaleName }}
-          </template>
-        </TableColumn>
-      </template>
+          Show details
+        </a>
+      </b-table-column>
 
-      <!-- 
-        Side panel data slot specification
-        data: T
-      -->
+      <!--ontology term details side-panel slot-->
       <template v-slot:side-panel="{tableRow}">
         <TraitDetailPanel
-          v-bind:data="traitSidePanelState.openedRow"
-          v-bind:tags="tagOptions"
-          v-bind:observation-level-options="observationLevelOptions"
-          v-bind:description-options="descriptionOptions"
-          v-bind:entity-options="entityOptions"
-          v-bind:attribute-options="attributeOptions"
-          v-bind:edit-active="traitSidePanelState.editActive"
-          v-bind:editable="$ability.can('update', 'Trait') && currentTraitEditable"
-          v-bind:loading-editable="loadingTraitEditable"
-          v-bind:edit-form-state="traitSidePanelState.dataFormState"
-          v-bind:client-validations="traitValidations"
-          v-bind:validation-handler="editValidationHandler"
-          v-bind:archivable="$ability.can('archive', 'Trait')"
-          v-on:activate-edit="activateEdit($event)"
-          v-on:deactivate-edit="traitSidePanelState.bus.$emit(traitSidePanelState.closePanelEvent)"
-          v-on:trait-change="changeTerm($event)"
-          v-on:submit="updateTerm"
-          v-on:archive="activateArchive($event)"
-          v-on:restore="activateArchive($event)"
-          v-on:show-error-notification="$emit('show-error-notification', $event)"
+            v-bind:data="traitSidePanelState.openedRow"
+            v-bind:tags="tagOptions"
+            v-bind:observation-level-options="observationLevelOptions"
+            v-bind:description-options="descriptionOptions"
+            v-bind:entity-options="entityOptions"
+            v-bind:attribute-options="attributeOptions"
+            v-bind:edit-active="traitSidePanelState.editActive"
+            v-bind:editable="$ability.can('update', 'Trait') && currentTraitEditable"
+            v-bind:loading-editable="loadingTraitEditable"
+            v-bind:edit-form-state="traitSidePanelState.dataFormState"
+            v-bind:client-validations="traitValidations"
+            v-bind:validation-handler="editValidationHandler"
+            v-bind:archivable="$ability.can('archive', 'Trait')"
+            v-on:activate-edit="activateEdit($event)"
+            v-on:deactivate-edit="traitSidePanelState.bus.$emit(traitSidePanelState.closePanelEvent)"
+            v-on:trait-change="changeTerm($event)"
+            v-on:submit="updateTerm"
+            v-on:archive="activateArchive($event)"
+            v-on:restore="activateArchive($event)"
+            v-on:show-error-notification="$emit('show-error-notification', $event)"
         />
       </template>
 
+      <!--no-ontology-defined message slot-->
       <template v-slot:emptyMessage>
         <EmptyTableMessage
             v-bind:button-view-toggle="!newTraitActive && active && !isSubscribed"
@@ -240,7 +188,11 @@
           </p>
         </EmptyTableMessage>
       </template>
-    </SidePanelTable>
+
+
+    </SidePanelTableBuefy>
+
+
   </section>
 </template>
 
@@ -250,7 +202,7 @@ import WarningModal from '@/components/modals/WarningModal.vue'
 import {PlusCircleIcon} from 'vue-feather-icons'
 import {validationMixin} from 'vuelidate';
 import {Trait} from '@/breeding-insight/model/Trait'
-import {mapActions, mapGetters} from 'vuex'
+import {mapActions, mapGetters, mapMutations} from 'vuex'
 import {Program} from "@/breeding-insight/model/Program";
 import NewDataForm from '@/components/forms/NewDataForm.vue'
 import BasicInputField from "@/components/forms/BasicInputField.vue";
@@ -259,8 +211,7 @@ import TraitDetailPanel from "@/components/trait/TraitDetailPanel.vue";
 import {TraitService} from "@/breeding-insight/service/TraitService";
 import EmptyTableMessage from "@/components/tables/EmtpyTableMessage.vue";
 import TableColumn from "@/components/tables/TableColumn.vue";
-import {Metadata, Pagination} from "@/breeding-insight/model/BiResponse";
-import {PaginationQuery} from "@/breeding-insight/model/PaginationQuery";
+import {BiResponse, Metadata, Pagination} from "@/breeding-insight/model/BiResponse";
 import {StringFormatters} from '@/breeding-insight/utils/StringFormatters';
 import {TraitStringFormatters} from '@/breeding-insight/utils/TraitStringFormatters';
 import BaseTraitForm from "@/components/trait/forms/BaseTraitForm.vue";
@@ -271,18 +222,22 @@ import {DataType, Scale} from "@/breeding-insight/model/Scale";
 import {SidePanelTableEventBusHandler} from "@/components/tables/SidePanelTableEventBus";
 import {DataFormEventBusHandler} from '@/components/forms/DataFormEventBusHandler';
 import {integer, maxLength} from "vuelidate/lib/validators";
-import {TermType, TraitField, TraitFilter} from "@/breeding-insight/model/TraitSelector";
-import {OntologySort, OntologySortField} from "@/breeding-insight/model/Sort";
+import {TermType, TraitField} from "@/breeding-insight/model/TraitSelector";
+import {OntologySort, OntologySortField, Sort} from "@/breeding-insight/model/Sort";
 import {BackendPaginationController} from "@/breeding-insight/model/view_models/BackendPaginationController";
 import {Category} from "@/breeding-insight/model/Category";
 import {EnumUtils} from "@/breeding-insight/utils/EnumUtils";
+import SidePanelTableBuefy from "@/components/tables/SidePanelTableBuefy.vue";
+import {CallStack} from "@/breeding-insight/utils/CallStack";
+import ChevronRightIcon from 'vue-feather-icons'
+import {UPDATE_ACTIVE_ONT_SORT} from "@/store/sorting/mutation-types";
 
 @Component({
   mixins: [validationMixin],
   components: {
-    BaseTraitForm, NewDataForm, BasicInputField, SidePanelTable, EmptyTableMessage, TableColumn,
+    BaseTraitForm, NewDataForm, BasicInputField, SidePanelTable, SidePanelTableBuefy, EmptyTableMessage, TableColumn,
                 WarningModal, TraitDetailPanel,
-                PlusCircleIcon },
+                PlusCircleIcon, ChevronRightIcon },
   computed: {
     ...mapGetters([
       'activeProgram'
@@ -294,19 +249,27 @@ import {EnumUtils} from "@/breeding-insight/utils/EnumUtils";
   methods: {
     ...mapActions('programManagement', {
         getSubscribedOntology: 'getSubscribedOntology'
+    }),
+    ...mapMutations('sorting', {
+      updateSort: UPDATE_ACTIVE_ONT_SORT
     })
   },
-  data: () => ({Trait, StringFormatters, TraitStringFormatters})
+  data: () => ({Trait, StringFormatters, TraitStringFormatters, Sort})
 })
 export default class OntologyTable extends Vue {
-  @Prop({default: () => true})
-  active?: boolean;
-
-  @Prop()
-  ontologySort!: OntologySort;
-
   private activeProgram?: Program;
+  private pagination?: Pagination = new Pagination();
+  private paginationController: BackendPaginationController = new BackendPaginationController();
+  private traitsLoading: Boolean = false;
   private traits: Trait[] = [];
+  private filters: any = {};
+  private ontologyCallStack?: CallStack;
+
+  private activeOntologySort!: OntologySort;
+  private updateSort!: (sort: OntologySort) => void;
+  private traitField = TraitField;
+  private ontologySortField = OntologySortField;
+
   private methodClassOptions: string[] = Object.values(MethodClass);
   private observationLevelOptions?: string[];
   private attributeOptions?: string[];
@@ -319,15 +282,6 @@ export default class OntologyTable extends Vue {
   private newTrait: Trait = new Trait();
   private currentTraitEditable = false;
   private loadingTraitEditable = true;
-  private traitsLoading = true;
-
-  // table column sorting
-  private nameSortLabel: string = OntologySortField.Name;
-  private methodSortLabel: string = OntologySortField.MethodDescription;
-  private scaleClassSortLabel: string = OntologySortField.ScaleClass;
-  private unitSortLabel: string = OntologySortField.ScaleName;
-  private entityAttributeSortLabel: string = OntologySortField.entityAttributeSortLabel;
-  private termTypeSortLabel: string = OntologySortField.TermType;
 
   // New trait form
   private newTraitActive: boolean = false;
@@ -349,13 +303,8 @@ export default class OntologyTable extends Vue {
   private isSubscribed?: boolean;
   private getSubscribedOntology!: () => any;
 
-  // TODO: Move these into an event bus in the future
-  private traitsPagination?: Pagination = new Pagination();
-  private paginationController: BackendPaginationController = new BackendPaginationController();
-
   shortCharLimit = 12;
   longCharLimit = 30;
-
   traitValidations = {
     observationVariableName: {
       maxLength: maxLength(this.shortCharLimit)
@@ -378,15 +327,56 @@ export default class OntologyTable extends Vue {
     }
   }
 
+  @Prop({default: () => true})
+  active?: boolean;
+  @Prop()
+  ontologyFetch!: (programId: string, sort: OntologySort, paginationController: BackendPaginationController) => (filters: any) => Promise<BiResponse>;
+  @Prop()
+  ontologySort!: OntologySort;
+
   mounted() {
     this.getSubscribedOntology();
-    this.updatePagination();
-    this.getTraits();
     this.getObservationLevels();
     this.getAttributesEntitiesDescriptions();
     this.getTraitTags();
+    this.ontologyCallStack = new CallStack(this.ontologyFetch(
+        this.activeProgram!.id!,
+        this.ontologySort,
+        this.paginationController
+    ));
+    this.paginationController.pageSize = 20;
+    this.registerSidePanelEventHandlers()
+  }
+
+  @Watch('paginationController', { deep: true})
+  @Watch('filters', {deep: true})
+  async getTraits() {
+    this.traitsLoading = true;
 
-    // Events
+    try {
+      //Only process the most recent call
+      const {call, callId} = this.ontologyCallStack.makeCall(this.filters);
+      const response = await call;
+      if (!this.ontologyCallStack.isCurrentCall(callId)) {
+        return;
+      }
+      if(response.isErr()) {
+        throw response.value;
+      }
+      this.pagination = new Pagination(response.value.metadata.pagination);
+
+      // Account for brapi 0 indexing of paging
+      this.pagination.currentPage = this.pagination.currentPage.valueOf();
+      this.traits = response.value.result.data;
+      this.traitsLoading = false;
+    } catch (e) {
+      this.$log.error(e);
+      this.$emit('show-error-notification', 'Error loading ontology');
+      this.traitsLoading = false;
+    }
+  }
+
+  registerSidePanelEventHandlers() {
     this.traitSidePanelState.bus.$on(this.traitSidePanelState.requestClosePanelEvent, (showWarningEvent: Function, confirmCloseEvent: Function) => {
       if (this.editTrait && !this.editTrait.equals(this.originalTrait)) {
         showWarningEvent();
@@ -394,6 +384,7 @@ export default class OntologyTable extends Vue {
         confirmCloseEvent();
       }
     });
+
     this.traitSidePanelState.bus.$on(this.traitSidePanelState.confirmCloseEditEvent, () => {
       this.clearSelectedRow();
     });
@@ -402,43 +393,13 @@ export default class OntologyTable extends Vue {
       if(this.$ability.can('update', 'Trait')) {
         this.editable(row);
       }
-    })
+    });
   }
 
   archiveWarning() {
     return this.editTrait && this.editTrait.active ? 'restore' : 'archive';
   }
 
-  @Watch('ontologySort', {deep: true})
-  @Watch('paginationController', { deep: true})
-  paginationChanges() {
-    this.updatePagination();
-    this.getTraits();
-  }
-
-  updatePagination() {
-    let paginationQuery: PaginationQuery = BackendPaginationController.getPaginationSelections(
-        this.paginationController.currentPage, this.paginationController.pageSize, this.paginationController.showAll);
-    this.paginationController.setCurrentCall(paginationQuery);
-  }
-
-  getTraits() {
-    // filter the terms pulled from the back-end
-    let filters: TraitFilter[] = [{ field: TraitField.STATUS, value: this.active}];
-    this.traitsLoading = true;
-
-    TraitService.getFilteredTraits(this.activeProgram!.id!, this.paginationController.currentCall, true, filters, this.ontologySort).then(([traits, metadata]) => {
-      if (this.paginationController.matchesCurrentRequest(metadata.pagination)){
-        this.traits = traits;
-        this.traitsPagination = metadata.pagination;
-      }
-    }).catch((error) => {
-      // Display error that traits cannot be loaded
-      this.$emit('show-error-notification', 'Error while trying to load traits');
-      throw error;
-    }).finally( () => this.traitsLoading =  false );
-  }
-
   async editable(trait: Trait) {
     let traitEditable = false;
     this.loadingTraitEditable = true;
@@ -681,6 +642,31 @@ export default class OntologyTable extends Vue {
     this.$emit('show-error-notification', 'Unable to retrieve existing trait tags');
   }
 
+  setSort(field: string, order: string) {
+    this.$emit('updateSort',new OntologySort(field, Sort.orderAsBI(order)))
+    this.getTraits();
+  }
+
+  initSearch(filters: any) {
+    this.filters = filters;
+
+    // When filtering the list, set a page to the first page.
+    this.paginationController.updatePage(1);
+  }
+
+  checkIsOpen(rowData: any): boolean {
+    // A match is either the exact row for import confirmations
+    // or id match. This will have to be fixed in the future.
+    // TODO: Get this to match on table rows, but still work with the editing
+    if (this.traitSidePanelState.openedRow) {
+      return rowData === this.traitSidePanelState.openedRow ||
+          (rowData.id && rowData.id === this.traitSidePanelState.openedRow.id);
+    } else {
+      return false;
+    }
+  }
+
+
 }
 
 </script>
diff --git a/src/components/tables/SidePanelTableBuefy.vue b/src/components/tables/SidePanelTableBuefy.vue
new file mode 100644
index 000000000..b97c6bb59
--- /dev/null
+++ b/src/components/tables/SidePanelTableBuefy.vue
@@ -0,0 +1,258 @@
+<!--
+  - See the NOTICE file distributed with this work for additional information
+  - regarding copyright ownership.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<template>
+  <div>
+    <WarningModal
+        v-bind:active.sync="sidePanelState.closeEditModalActive"
+        v-bind:msg-title="'Close edit panel?'"
+        v-on:deactivate="sidePanelState.bus.$emit(sidePanelState.cancelCloseEditEvent)"
+    >
+      <section>
+        <p class="has-text-dark" :class="this.$modalTextClass">
+          You will lose any edits you have made upon closing.
+        </p>
+      </section>
+      <div class="columns">
+        <div class="column is-whole has-text-centered buttons">
+          <button
+              class="button is-danger"
+              type="button"
+              v-on:click="sidePanelState.bus.$emit(sidePanelState.confirmCloseEditEvent)"
+          >
+            <strong>Yes, close</strong>
+          </button>
+          <button
+              class="button"
+              type="button"
+              v-on:click="sidePanelState.bus.$emit(sidePanelState.cancelCloseEditEvent)"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </WarningModal>
+    <div class="side-panel-table table-min-height" >
+      <div class="columns is-mobile">
+        <div class="column pr-0">
+          <b-table
+              :class="{'loading-active': loading}"
+              :data.sync="tableRows"
+              narrowed
+              :show-detail-icon="false"
+              :ref="tableRef"
+              paginated
+              :per-page.sync="pagination.pageSize"
+              :current-page.sync="pagination.currentPage"
+              striped
+              detailed
+              :mobile-cards="false"
+              :has-detailed-visible="detailsVisible"
+              :opened-detailed="openDetail"
+              v-on:details-open="detailsOpened"
+              aria-next-label="Next"
+              aria-previous-label="Previous"
+              aria-page-label="Page"
+              aria-current-label="Current"
+              v-bind="$attrs"
+              :default-sort="defaultSort"
+              v-on="$listeners"
+              v-bind:loading="loading"
+              :row-class="calculateRowClass"
+              v-bind:debounce-search="searchDebounce"
+              v-on:filters-change="cloneFilters"
+          >
+            <slot></slot>
+
+            <template v-slot:empty v-if="this.loading !== true">
+              <slot name="emptyMessage"/>
+            </template>
+
+            <template v-slot:pagination>
+              <pagination-controls v-show="records.length > 0" v-bind="$props" v-on="$listeners"/>
+            </template>
+
+          </b-table>
+        </div>
+        <div
+            class="column is-gapless pl-0"
+            v-bind:class="{'is-narrow': !sidePanelState.panelOpen,
+              'is-one-third-widescreen is-half-tablet is-half-mobile': (sidePanelState.panelOpen && !sidePanelState.editActive),
+              'is-one-half-desktop is-half-tablet is-half-mobile': (sidePanelState.panelOpen && sidePanelState.editActive)}"
+        >
+          <SidePanel
+              v-bind:state="sidePanelState"
+              v-show="records.length > 0"
+              class="side-panel-scroll"
+              v-if="sidePanelState.panelOpen"
+              v-bind:background-color-class="sidePanelState.editActive ? 'has-background-primary-light' : 'has-background-info-light'"
+          >
+            <slot
+                v-bind:table-row="sidePanelState.openedRow"
+                name="side-panel"
+            />
+          </SidePanel>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+
+import {Component, Prop, Vue, Watch, Mixins} from 'vue-property-decorator'
+import {Pagination} from "@/breeding-insight/model/BiResponse";
+import PaginationControls from '@/components/tables/PaginationControls.vue'
+import EditDataRowForm from '@/components/forms/EditDataRowForm.vue'
+import ValidationMixin from '@/mixins/ValidationMixin'
+import { DataFormEventBusHandler } from '@/components/forms/DataFormEventBusHandler';
+import {ChevronRightIcon, ChevronDownIcon} from 'vue-feather-icons'
+import { TableRow } from '@/breeding-insight/model/view_models/TableRow';
+import SidePanel from "@/components/tables/SidePanel.vue";
+import {SidePanelTableEventBusHandler} from "@/components/tables/SidePanelTableEventBus";
+import TraitDetailPanel from "@/components/trait/TraitDetailPanel.vue";
+import WarningModal from "@/components/modals/WarningModal.vue";
+
+@Component({
+  components: { EditDataRowForm, PaginationControls, ChevronRightIcon, ChevronDownIcon, SidePanel, TraitDetailPanel,
+  WarningModal }
+})
+export default class SidePanelTableBuefy extends Mixins(ValidationMixin) {
+
+  @Prop()
+  sidePanelState!: SidePanelTableEventBusHandler;
+  @Prop()
+  records!: Array<any>;
+  @Prop()
+  editable!: boolean;
+  @Prop()
+  rowEditable!: Function;
+  @Prop()
+  rowArchivable!: Function;
+  @Prop()
+  archivable!: boolean;
+  @Prop()
+  pagination!: Pagination;
+  @Prop()
+  dataFormState!: DataFormEventBusHandler;
+  @Prop()
+  defaultSort!: String[];
+  @Prop()
+  rowClasses: any;
+  @Prop()
+  loading!: boolean;
+  @Prop()
+  details!: boolean;
+  @Prop()
+  searchDebounce!: number;
+  @Prop({default: "Deactivate"})
+  deactivateLinkText?: string;
+
+  private tableRows: Array<TableRow<any>> = new Array<TableRow<any>>();
+  private openDetail: Array<TableRow<any>> = new Array<TableRow<any>>();
+  private initialUpdate: boolean = false;
+  private tableRef = "table-"+Math.random()*1000;
+
+  @Watch('records', {immediate: true, deep:true})
+  updateTableRows(newRecords: any, oldRecords: any) {
+    let difference: Array<string> = [];
+    let difference_direction: number | undefined = undefined;
+    if (oldRecords !== undefined) {
+      difference_direction = newRecords.length - oldRecords.length;
+    }
+    if (oldRecords !== null && this.initialUpdate) {
+      const newSet: Set<string> = new Set(newRecords
+          .filter( (record: any) => record.id !== undefined)
+          .map( (filteredRecord: any) => filteredRecord.id)
+      );
+      const oldSet: Set<string> = new Set(oldRecords
+          .filter( (record: any) => record.id !== undefined)
+          .map( (filteredRecord: any) => filteredRecord.id)
+      );
+      difference = [...newSet].filter( (record: any) => !oldSet.has(record));
+    }
+
+    const rowArray = new Array<TableRow<any>>();
+    for (const record of this.records){
+      const newTableRow = new TableRow<any>(this.editable, this.archivable, record);
+
+      // TODO: this is a hack to try and deal with pagination edge cases
+      // Should probably implement this in a different way or get rid of new row highlighting
+      const paginationCases = this.pagination.totalCount.valueOf() % this.pagination.pageSize.valueOf() === 1 &&
+                              this.pagination.currentPage === this.pagination.totalPages ||
+                              this.pagination.totalCount.valueOf() % this.pagination.pageSize.valueOf() === this.pagination.totalCount.valueOf() &&
+                              this.pagination.currentPage === this.pagination.totalPages &&
+                              this.pagination.currentPage === 1;
+
+      if (difference.length === 1 && difference_direction !== undefined && difference_direction > 0 && !paginationCases) {
+        if (record.id === difference[0]) {
+          newTableRow.toggleNew();
+        }
+      }
+
+      rowArray.push(newTableRow);
+    }
+    this.tableRows = rowArray;
+  }
+
+  detailsOpened(row: TableRow<any>) {
+    this.openDetail = [row]; //closes other opened row details
+    this.setValidationRow(row);
+  }
+
+  isVisibleDetailRow(row:any) {
+    // If data is passed in at same time as component loading, this ref won't be assigned yet. Check if assigned before referencing.
+    return this.$refs[this.tableRef] ? (this.$refs[this.tableRef] as Vue & { isVisibleDetailRow: (row:any) => boolean }).isVisibleDetailRow(row): false;
+  }
+
+  detailsVisible() {
+    return this.editable || this.archivable;
+  }
+
+  calculateRowClass(row: TableRow<any>, index: Number) {
+    if (this.isVisibleDetailRow(row)) {
+      return this.rowClasses && this.rowClasses[row.data.id] ? this.rowClasses[row.data.id] + " is-edited" : "is-edited";
+    } else if (row.new) {
+      return this.rowClasses && this.rowClasses[row.data.id] ? this.rowClasses[row.data.id] + " is-new" : "is-new";
+    }
+
+    return this.rowClasses && this.rowClasses[row.data.id] ? this.rowClasses[row.data.id] : "";
+  }
+
+  updated() {
+    this.initialUpdate = true;
+  }
+
+  cancelEditClicked(row:any) {
+    this.cancelEdit(row);
+    this.openDetail = [];
+  }
+
+  // A patch so if we're listening the filters, we can still debounce
+  cloneFilters(event: any) {
+    this.$emit('search', JSON.parse(JSON.stringify(event)));
+  }
+
+  isRowEditable(row: any) {
+    return ((typeof this.rowEditable === "function") ? this.rowEditable(row) : true) && this.editable;
+  }
+
+  isRowArchivable(row: any) {
+    return ((typeof this.rowArchivable === "function") ? this.rowArchivable(row) : true) && this.archivable;
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/store/sorting/mutation-types.ts b/src/store/sorting/mutation-types.ts
index a0e8e00ea..5d9f69d68 100644
--- a/src/store/sorting/mutation-types.ts
+++ b/src/store/sorting/mutation-types.ts
@@ -16,13 +16,10 @@
  */
 
 // active ontology table
-export const ACTIVE_ONT_NEW_SORT_COLUMN = 'activeOntNewSortColumn';
-export const ACTIVE_ONT_TOGGLE_SORT_ORDER = 'activeOntToggleSortOrder';
+export const UPDATE_ACTIVE_ONT_SORT = 'updateActiveOntologySort';
 
 // archived ontology table
 export const UPDATE_ARCHIVED_ONT_SORT = 'updateArchivedOntologySort';
-export const ARCHIVED_ONT_NEW_SORT_COLUMN = 'archivedOntNewSortColumn';
-export const ARCHIVED_ONT_TOGGLE_SORT_ORDER = 'archivedOntToggleSortOrder';
 
 // importPreview ontology table
 export const IMPORT_PREVIEW_ONT_NEW_SORT_COLUMN = 'importPreviewOntNewSortColumn';
diff --git a/src/store/sorting/mutations.ts b/src/store/sorting/mutations.ts
index dc11e5038..50850c547 100644
--- a/src/store/sorting/mutations.ts
+++ b/src/store/sorting/mutations.ts
@@ -17,19 +17,15 @@
 
 import {MutationTree} from 'vuex';
 import {
-    ARCHIVED_ONT_NEW_SORT_COLUMN,
-    ACTIVE_ONT_NEW_SORT_COLUMN,
     UPDATE_PROGRAM_USER_SORT,
     UPDATE_LOCATION_SORT,
     UPDATE_SYSTEM_USER_SORT,
     UPDATE_PROGRAM_SORT,
-    ACTIVE_ONT_TOGGLE_SORT_ORDER,
-    ARCHIVED_ONT_TOGGLE_SORT_ORDER,
     IMPORT_PREVIEW_ONT_TOGGLE_SORT_ORDER,
     IMPORT_PREVIEW_ONT_NEW_SORT_COLUMN,
     UPDATE_GERMPLASM_SORT,
     UPDATE_GERMPLASM_LIST_SORT,
-    UPDATE_EXPERIMENT_SORT
+    UPDATE_EXPERIMENT_SORT, UPDATE_ACTIVE_ONT_SORT, UPDATE_ARCHIVED_ONT_SORT
 } from "@/store/sorting/mutation-types";
 import {SortState} from "@/store/sorting/types";
 import {
@@ -44,19 +40,15 @@ import {
 
 export const mutations: MutationTree<SortState> = {
     // active ontology table
-    [ACTIVE_ONT_TOGGLE_SORT_ORDER](state: SortState) {
-        state.activeOntologySort.order = state.activeOntologySort.order === SortOrder.Ascending ? SortOrder.Descending : SortOrder.Ascending;
-    },
-    [ACTIVE_ONT_NEW_SORT_COLUMN](state: SortState, field: OntologySortField) {
-        state.activeOntologySort.field = field;
+    [UPDATE_ACTIVE_ONT_SORT](state: SortState, sort: OntologySort) {
+        state.activeOntologySort.field = sort.field;
+        state.activeOntologySort.order = sort.order;
     },
 
     // archived ontology table
-    [ARCHIVED_ONT_TOGGLE_SORT_ORDER](state: SortState) {
-        state.archivedOntologySort.order = state.archivedOntologySort.order === SortOrder.Ascending ? SortOrder.Descending : SortOrder.Ascending;
-    },
-    [ARCHIVED_ONT_NEW_SORT_COLUMN](state: SortState, field: OntologySortField) {
-        state.archivedOntologySort.field = field;
+    [UPDATE_ARCHIVED_ONT_SORT](state: SortState, sort: OntologySort) {
+        state.archivedOntologySort.field = sort.field;
+        state.archivedOntologySort.order = sort.order;
     },
 
     // importPreview ontology table