diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 6003102f3..f553567e7 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -906,3 +906,19 @@ label.environment-option-label {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.missing-data {
+  /* using an opacity instead of a muted color (for example
+    'gray') to preserve some difference in row color when
+    a table is striped.
+   */
+  background-color: black;
+  opacity: 17%;
+  }
+
+#data_set th {
+  min-width: 5em;
+}
+
+
+
diff --git a/src/breeding-insight/dao/ExperimentDAO.ts b/src/breeding-insight/dao/ExperimentDAO.ts
index c344fa5c8..536c6a924 100644
--- a/src/breeding-insight/dao/ExperimentDAO.ts
+++ b/src/breeding-insight/dao/ExperimentDAO.ts
@@ -46,7 +46,7 @@ export class ExperimentDAO {
         config.experimentId = experimentId;
         config.datasetId = datasetId;
         config.params = {
-            stat : stats,
+            stats : stats,
         };
         return new Promise<Result<Error, DatasetModel>>(((resolve, reject) => {
             api.call(config)
diff --git a/src/breeding-insight/model/DatasetModel.ts b/src/breeding-insight/model/DatasetModel.ts
index d2feeb5ab..1acd5016b 100644
--- a/src/breeding-insight/model/DatasetModel.ts
+++ b/src/breeding-insight/model/DatasetModel.ts
@@ -20,21 +20,22 @@ import {ObservationUnit} from "@/breeding-insight/model/ObservationUnit";
 import {ObservationVariable} from "@/breeding-insight/model/ObservationVariable";
 
 export class DatasetModel {
-  id?: string;
-  experimentId?: string;
+  id: string;
+  experimentId: string;
+  data: Observation[];
+  observationUnits: ObservationUnit[];
+  observationVariables: ObservationVariable[];
   additionalInfo?: any;
-  data?: Observation[];
-  observationUnits?: ObservationUnit[];
-  observationVariables?: ObservationVariable[];
-
-
-  constructor(id?: string,
-              experimentId?: string,
-              additionalInfo?: any,
-              data?: Observation[],
-              observationUnits?: ObservationUnit[],
-              observationVariables?: ObservationVariable[]
-              ) {
+
+
+
+  constructor(id: string,
+              experimentId: string,
+              data: Observation[],
+              observationUnits: ObservationUnit[],
+              observationVariables: ObservationVariable[],
+              additionalInfo?: any
+  ) {
     this.id = id;
     this.experimentId = experimentId;
     this.additionalInfo = additionalInfo;
@@ -48,10 +49,10 @@ export class DatasetModel {
     return new DatasetModel(
         dataset.id,
         dataset.experimentId,
-        dataset.additionalInfo,
         dataset.data,
-        dataset.observationUnits
-        );
+        dataset.observationUnits,
+        dataset.additionalInfo
+    );
   }
 
   equals(dataset?: DatasetModel): boolean {
diff --git a/src/breeding-insight/model/DatasetTableRow.ts b/src/breeding-insight/model/DatasetTableRow.ts
new file mode 100644
index 000000000..74594c042
--- /dev/null
+++ b/src/breeding-insight/model/DatasetTableRow.ts
@@ -0,0 +1,83 @@
+/*
+ * 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.
+ */
+
+export class DatasetTableRow {
+  germplasmName?: string;
+  gid?: string;
+  testOrCheck?: string;
+  env?: string;
+  envLocation?: string;
+  envYear?: string;
+  expUnitId?: string;
+  expReplicate?: number;
+  expBlock?: number;
+  row?: string;
+  column?: string;
+  obsUnitId?: string;
+  traitValues?: string[] = [];
+
+
+  constructor(germplasmName?: string,
+              gid?: string,
+              testOrCheck?: string,
+              env?: string,
+              envLocation?: string,
+              envYear?: string,
+              expUnitId?: string,
+              expReplicate?: number,
+              expBlock?: number,
+              row?: string,
+              column?: string,
+              obsUnitId?: string,
+              traitValues?: string[]) {
+    this.germplasmName = germplasmName;
+    this.gid = gid;
+    this.testOrCheck = testOrCheck;
+    this.env = env;
+    this.envLocation = envLocation;
+    this.envYear = envYear;
+    this.expUnitId = expUnitId;
+    this.expReplicate = expReplicate;
+    this.expBlock = expBlock;
+    this.row = row;
+    this.column = column;
+    this.obsUnitId = obsUnitId;
+    this.traitValues = traitValues;
+
+  }
+
+  static assign(dataset: DatasetTableRow): DatasetTableRow {
+
+    return new DatasetTableRow(
+        dataset.germplasmName,
+        dataset.gid,
+        dataset.testOrCheck,
+        dataset.env,
+        dataset.envLocation,
+        dataset.envYear,
+        dataset.expUnitId,
+        dataset.expReplicate,
+        dataset.expBlock,
+        dataset.row,
+        dataset.column,
+        dataset.obsUnitId,
+        dataset.traitValues
+        );
+  }
+
+
+}
\ No newline at end of file
diff --git a/src/breeding-insight/model/Observation.ts b/src/breeding-insight/model/Observation.ts
index 3611b5963..1826d3165 100644
--- a/src/breeding-insight/model/Observation.ts
+++ b/src/breeding-insight/model/Observation.ts
@@ -17,10 +17,10 @@
 
 export class Observation {
   id?: string;
-  studyId?: string;
-  germplasmId?: string;
-  observationUnitId?: string;
-  observationVariableId?: string;
+  studyDbId?: string;
+  germplasmDbId?: string;
+  observationUnitDbId?: string;
+  observationVariableDbId?: string;
   germplasmName?: string;
   observationUnitName?: string;
   observationVariableName?: string;
@@ -33,10 +33,10 @@ export class Observation {
   observationTimeStamp?: string;
 
   constructor(id?: string,
-              studyId?: string,
-              germplasmId?: string,
-              observationUnitId?: string,
-              observationVariableId?: string,
+              studyDbId?: string,
+              germplasmDbId?: string,
+              observationUnitDbId?: string,
+              observationVariableDbId?: string,
               germplasmName?: string,
               observationUnitName?: string,
               observationVariableName?: string,
@@ -48,10 +48,10 @@ export class Observation {
               value?: any
               ) {
     this.id = id;
-    this.studyId = studyId;
-    this.germplasmId = germplasmId;
-    this.observationUnitId = observationUnitId;
-    this.observationVariableId = observationVariableId;
+    this.studyDbId = studyDbId;
+    this.germplasmDbId = germplasmDbId;
+    this.observationUnitDbId = observationUnitDbId;
+    this.observationVariableDbId = observationVariableDbId;
     this.germplasmName = germplasmName;
     this.observationUnitName = observationUnitName;
     this.observationVariableName = observationVariableName;
@@ -72,10 +72,10 @@ export class Observation {
     const stamp: string | undefined = observation.timeStamp ? observation.timeStamp.toISOString() : undefined;
 
     return new Observation(observation.id,
-                           observation.studyId,
-                           observation.germplasmId,
-                           observation.observationUnitId,
-                           observation.observationVariableId,
+                           observation.studyDbId,
+                           observation.germplasmDbId,
+                           observation.observationUnitDbId,
+                           observation.observationVariableDbId,
                            observation.germplasmName,
                            observation.observationUnitName,
                            observation.observationVariableName,
@@ -90,10 +90,10 @@ export class Observation {
   equals(observation?: Observation): boolean {
     if (!observation) {return false;}
     return (this.id === observation.id) &&
-      (this.studyId === observation.studyId) &&
-      (this.germplasmId === observation.germplasmId) &&
-      (this.observationUnitId === observation.observationUnitId) &&
-      (this.observationVariableId === observation.observationVariableId) &&
+      (this.studyDbId === observation.studyDbId) &&
+      (this.germplasmDbId === observation.germplasmDbId) &&
+      (this.observationUnitDbId === observation.observationUnitDbId) &&
+      (this.observationVariableDbId === observation.observationVariableDbId) &&
       (this.germplasmName === observation.germplasmName) &&
       (this.observationUnitName === observation.observationUnitName) &&
       (this.observationVariableName === observation.observationVariableName) &&
diff --git a/src/breeding-insight/model/ObservationUnit.ts b/src/breeding-insight/model/ObservationUnit.ts
index 14a24fc67..c6736b73c 100644
--- a/src/breeding-insight/model/ObservationUnit.ts
+++ b/src/breeding-insight/model/ObservationUnit.ts
@@ -15,22 +15,72 @@
  * limitations under the License.
  */
 
+import {ExternalReferences} from "@/breeding-insight/brapi/model/externalReferences";
+
 export class ObservationUnit {
-  id?: string;
-  name?: string;
-  position?: ObservationUnitPosition;
-  
-  constructor(id?:string, name?:string, position?:ObservationUnitPosition) {
-    this.id = id;
-    this.name = name;
-    this.position = position;
+  observationUnitDbId: string;
+  germplasmDbId?: string;
+  germplasmName: string;
+  locationDbI?: string;
+  locationName: string;
+  observationUnitName?: string;
+  observationUnitPUI?: string;
+  programDbId?: string;
+  programName?: string;
+  studyDbId?: string;
+  studyName: string;
+  trialDbId?: string;
+  trialName?: string;
+  observationUnitPosition?: ObservationUnitPosition;
+  externalReferences?: ExternalReferences;
+  additionalInfo?: any;
+  treatments?: any;
+
+
+  constructor(observationUnitDbId:string, observationUnitName?:string, observationUnitPosition?:ObservationUnitPosition, externalReferences?: ExternalReferences) {
+    this.observationUnitDbId = observationUnitDbId;
+    this.observationUnitName = observationUnitName;
+    this.observationUnitPosition = observationUnitPosition;
+    this.externalReferences = externalReferences;
   }
 }
 
 export class ObservationUnitPosition {
   level?: string;
+  observationLevelRelationships?: ObservationLevelRelationship[];
+  positionCoordinateXType?: string;
+  positionCoordinateX?: string;
+  positionCoordinateYType?: string;
+  positionCoordinateY?: string;
+  entryType?: string;
 
-  constructor(level?:string) {
+  constructor(level?:string,
+              observationLevelRelationships?: ObservationLevelRelationship[],
+              positionCoordinateXType?: string,
+              positionCoordinateX?: string,
+              positionCoordinateYType?: string,
+              positionCoordinateY?: string,
+              entryType?: string,
+              ) {
     this.level = level;
+    this.observationLevelRelationships = observationLevelRelationships;
+    this.positionCoordinateXType = positionCoordinateXType;
+    this.positionCoordinateX = positionCoordinateX;
+    this.positionCoordinateYType = positionCoordinateYType;
+    this.positionCoordinateY = positionCoordinateY;
+    this.entryType = entryType
+  }
+}
+
+
+export class ObservationLevelRelationship {
+  levelName?: string;
+  levelOrder?: string;
+  levelCode?: number;
+
+  constructor(levelName?: string, levelOrder?: string, levelCode?: number) {
+    this.levelName = levelName;
+    this.levelOrder = levelOrder;
+    this.levelCode = levelCode;
   }
 }
\ No newline at end of file
diff --git a/src/breeding-insight/model/ObservationVariable.ts b/src/breeding-insight/model/ObservationVariable.ts
index 828028ad4..7e044399a 100644
--- a/src/breeding-insight/model/ObservationVariable.ts
+++ b/src/breeding-insight/model/ObservationVariable.ts
@@ -21,20 +21,20 @@ import {Scale} from "@/breeding-insight/model/Scale";
 
 // TODO: eventually refactor Trait into Observation Variable to be consistent with the BrAPI model
 export class ObservationVariable {
-  id?: string;
+  observationVariableDbId?: string;
   observationVariableName?: string;
   additionalInfo?: OVAdditionalInfo;
   trait?: Trait;
   method?: Method;
   scale?: Scale;
   
-  constructor(id?:string,
+  constructor(observationVariableDbId?:string,
               observationVariableName?:string,
               additionalInfo?:OVAdditionalInfo,
               trait?:Trait,
               method?:Method,
               scale?:Scale) {
-    this.id = id;
+    this.observationVariableDbId = observationVariableDbId;
     this.observationVariableName = observationVariableName;
     if (additionalInfo){
       this.additionalInfo = OVAdditionalInfo.assign({...additionalInfo} as OVAdditionalInfo);
diff --git a/src/breeding-insight/utils/BrAPIUtils.ts b/src/breeding-insight/utils/BrAPIUtils.ts
index 1f9b3cf78..2825b8326 100644
--- a/src/breeding-insight/utils/BrAPIUtils.ts
+++ b/src/breeding-insight/utils/BrAPIUtils.ts
@@ -18,7 +18,10 @@
 import {ExternalReferences} from "@/breeding-insight/brapi/model/externalReferences";
 
 export class BrAPIUtils {
-    static getBreedingInsightId(references: ExternalReferences, referenceSourcePath: string = ""): string | undefined {
+    static getBreedingInsightId(references: ExternalReferences|undefined, referenceSourcePath: string = ""): string | undefined {
+        if(!references){
+            return undefined;
+        }
         let val = references.find(ref => ref.referenceSource === process.env.VUE_APP_BI_REFERENCE_SOURCE + referenceSourcePath);
         return val ? val.referenceID : "";
     }
diff --git a/src/components/observations/ObservationsListTable.vue b/src/components/observations/ObservationsListTable.vue
new file mode 100644
index 000000000..b63d881bd
--- /dev/null
+++ b/src/components/observations/ObservationsListTable.vue
@@ -0,0 +1,240 @@
+<!--
+  - 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>
+  <section id="observationsTableLabel">
+    <WarningModal
+      v-bind:active.sync="deactivateActive"
+      v-bind:msg-title="deactivateWarningTitle"
+      v-on:deactivate="deactivateActive = false"
+    >
+      <section>
+        <p class="has-text-dark">
+          Program-related data referencing this observation will not be affected by this change.
+        </p>
+      </section>
+      <div class="columns">
+        <div class="column is-whole has-text-centered buttons">
+          <button v-on:click="modalDeleteHandler()" class="button is-danger"><strong>Yes, remove</strong></button>
+          <button v-on:click="deactivateActive = false" class="button">Cancel</button>
+        </div>
+      </div>              
+    </WarningModal>
+
+    <ExpandableTable
+      v-bind:records.sync="observations"
+      v-bind:loading="this.observationsLoading"
+      v-bind:row-validations="observationValidations"
+      v-bind:pagination="paginationController"
+      v-bind:data-form-state="editObservationFormState"
+      v-on:submit="updateObservation($event)"
+      v-on:remove="displayWarning($event)"
+      v-on:show-error-notification="$emit('show-error-notification', $event)"
+    >
+      <b-table-column field="data.germplasmName" label="Germplasm" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        <p>{{ props.row.data.germplasmName }}</p>
+      </b-table-column>
+      <b-table-column field="data.observationUnitName" label="Observation Unit" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        <p>{{ props.row.data.name }}</p>
+      </b-table-column>
+      <b-table-column field="data.observationVariableName" label="Trait" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        <p>{{ props.row.data.observationVariableName }}</p>
+      </b-table-column>
+      <b-table-column field="data.value" label="Value" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        <p>{{ props.row.data.value }}</p>
+      </b-table-column>
+      <b-table-column field="data.season" label="Season" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        <template v-if="props.row.data.season.id">
+          <template v-if="(props.row.data.season.name != props.row.data.season.year)" >
+            <p>{{ props.row.data.season.name + " - " + props.row.data.season.year }}</p>
+          </template>
+          <template v-else>
+            <p>{{ props.row.data.season.name}}</p>
+          </template>
+        </template>
+      </b-table-column>
+      <b-table-column :custom-sort="sortTimestamp" label="Timestamp" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        <p>{{ props.row.data.timeStamp | dmyFormat}}</p>
+      </b-table-column>
+      <b-table-column field="data.collector" label="Collector" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        <p>{{ props.row.data.collector }}</p>
+      </b-table-column>
+      <b-table-column field="data.uploadedBy" label="Uploaded By" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        <p>{{ props.row.data.uploadedBy }}</p>
+      </b-table-column>
+      <template v-slot:edit="{editData, validations}">
+        <div class="columns">
+          <div class="column is-two-fifths">
+            <BasicInputField
+              v-model="editData.name"
+              v-bind:validations="validations.name"
+              v-bind:field-name="'Name'"
+              v-bind:field-help="'Observation name as preferred. All Unicode special characters accepted.'"
+            />
+          </div>
+        </div>
+      </template>
+      <template v-slot:emptyMessage>
+          <p class="has-text-weight-bold">
+            No observations are currently defined for this program.
+          </p>
+      </template>
+    </ExpandableTable>
+  </section>
+</template>
+
+<script lang="ts">
+  import {Component, Prop, Vue, Watch} from 'vue-property-decorator'
+  import WarningModal from '@/components/modals/WarningModal.vue'
+  import {PlusCircleIcon} from 'vue-feather-icons'
+  import {validationMixin} from 'vuelidate';
+  import {Validations} from 'vuelidate-property-decorators'
+  import {required} from 'vuelidate/lib/validators'
+  import { mapGetters } from 'vuex'
+  import {Program} from "@/breeding-insight/model/Program";
+  import NewDataForm from '@/components/forms/NewDataForm.vue'
+  import BasicInputField from "@/components/forms/BasicInputField.vue";
+  import {ObservationService} from "@/breeding-insight/service/ObservationService";
+  import EmptyTableMessage from "@/components/tables/EmtpyTableMessage.vue";
+  import TableColumn from "@/components/tables/TableColumn.vue";
+  import {Metadata} from "@/breeding-insight/model/BiResponse";
+  import {PaginationController} from "@/breeding-insight/model/view_models/PaginationController";
+  import {PaginationQuery} from "@/breeding-insight/model/PaginationQuery";
+  import { DataFormEventBusHandler } from '@/components/forms/DataFormEventBusHandler';
+  import {Observation} from '@/breeding-insight/model/Observation'
+  import {Result, Err, Success, ResultGenerator } from "@/breeding-insight/model/Result";
+  import { dmyFormat } from '@/breeding-insight/utils/filters';
+  import ExpandableTable from '@/components/tables/expandableTable/ExpandableTable.vue';
+  import {DataType, Scale} from "@/breeding-insight/model/Scale";
+  import {Method, MethodClass} from "@/breeding-insight/model/Method";
+
+@Component({
+  mixins: [validationMixin],
+  components: { ExpandableTable, NewDataForm, BasicInputField, EmptyTableMessage, TableColumn,
+                WarningModal, 
+                PlusCircleIcon },
+  computed: {
+    ...mapGetters([
+      'activeProgram'
+    ])
+  },
+  filters: {
+    dmyFormat
+  }
+})
+export default class ObservationsTable extends Vue {
+
+  private activeProgram?: Program;
+  private programId?: string = this.$route.params.programId;
+  private studyId?: string = this.$route.params.studyId;
+  private observations: Observation[] = [];
+  private deactivateActive: boolean = false;
+  private newObservationActive: boolean = false;
+  private deactivateWarningTitle: string = "Remove location from Program name?";
+  private newObservation = new Observation();
+  private programName: string = "Program Name";
+  private deleteObservation?: Observation;
+
+  private observationsLoading = true;
+
+  private paginationController: PaginationController = new PaginationController();
+
+  private newObservationFormState: DataFormEventBusHandler = new DataFormEventBusHandler();
+  private editObservationFormState: DataFormEventBusHandler = new DataFormEventBusHandler();
+
+  observationValidations = {
+    name: {required}
+  }
+
+  mounted() {
+    this.getObservations();
+  }
+
+  @Watch('paginationController', { deep: true})
+  async getObservations() {
+    let currentCall = this.paginationController.currentCall
+    let paginationQuery: PaginationQuery = this.paginationController.getPaginationSelections();
+    if(currentCall && currentCall!.page == paginationQuery.page && currentCall!.pageSize == paginationQuery.pageSize && currentCall!.showAll == paginationQuery.showAll) {
+      return;
+    }
+    this.paginationController.setCurrentCall(paginationQuery);
+
+    try {
+      const response: Result<Error, [Observation[], Metadata]> = await ObservationService.getByStudy(this.programId!, this.studyId!, paginationQuery);
+      if(response.isErr()) throw response.value;
+      let [observations, metadata] = response.value;
+
+      if (this.paginationController.matchesCurrentRequest(metadata.pagination)) {
+        this.observations = observations;
+        this.paginationController.setPaginationInfo(metadata.pagination);
+      }
+    } catch (err) {
+      // Display error that observations cannot be loaded
+      this.$emit('show-error-notification', 'Error while trying to load observations');
+    } finally {
+      this.observationsLoading = false;
+    }
+  }
+
+  cancelNewObservation() {
+    this.newObservation = new Observation();
+    this.newObservationActive = false;
+  }
+
+  displayWarning(observation: Observation) {
+
+    if (observation){
+      this.deleteObservation = observation;
+      this.deactivateWarningTitle = "Remove " + observation.value + " from " + this.activeProgram!.name + "?";
+      this.deactivateActive = true;
+    } else {
+      Vue.$log.error('Could not find object to delete')
+    }
+  }
+
+  sortTimestamp(a: any, b: any, isAsc: boolean) {
+    if(isAsc) {
+      return dmyFormat(a.data.timeStamp)!.localeCompare(dmyFormat(b.data.timeStamp)!);
+    } else {
+      return dmyFormat(b.data.timeStamp)!.localeCompare(dmyFormat(a.data.timeStamp)!);
+    }
+  }
+
+  // modalDeleteHandler() {
+  //   this.deactivateActive = false;
+
+  //   if (this.deleteObservation) {
+  //     if (this.deleteObservation.id) {
+  //       if (this.deleteObservation.observationName) {
+  //         const deleteId: string = this.deleteObservation.id;
+  //         const deleteName: string = this.deleteObservation.observationName;
+  //         ObservationService.delete(this.activeProgram!.id!, deleteId).then(() => {
+  //           this.getObservations();
+  //           this.$emit('show-success-notification', `${deleteName} removed from program`);
+  //         }).catch((error) => {
+  //           this.$emit('show-error-notification', error['errorMessage']);
+  //         })
+  //         return;
+  //       }
+  //     }
+  //   }
+  //   this.$emit('show-error-notification', `Unable to remove observation`);
+  // }
+
+}
+
+</script>
diff --git a/src/views/import/Dataset.vue b/src/views/import/Dataset.vue
index 8644384d5..316e24fcd 100644
--- a/src/views/import/Dataset.vue
+++ b/src/views/import/Dataset.vue
@@ -18,30 +18,184 @@
 <template>
   <div id="data_set">
     <div v-if="loading">
-      loading dataset...
-      <progress class="progress is-normal" max="80"></progress>
+      <ProgressBar
+          v-bind:label="'loading dataset'"
+      />
     </div>
-    <article
-      v-if="!loading"
-      class="message is-success"
-    >
-      <div class="message-body">
-        <div class="columns is-multiline">
-          <div class="column is-one-fifth">
-            <div class="has-text-right">
-              <b>Observation unit: </b> <span style="width: 30px;" class="is-inline-block has-text-left">{{ observationUnit }}</span><br>
-              <b>Phenotypes: </b> <span style="width: 30px;" class="is-inline-block has-text-left">{{ phenotypesCount }}</span><br>
-              <b>Total observations: </b> <span style="width: 30px;" class="is-inline-block has-text-left">{{ totalObservationsCount }}</span><br>
-              <b>Observations with data: </b> <span style="width: 30px;" class="is-inline-block has-text-left">{{ observationsWithData }}</span><br>
-              <b>Observations without data: </b> <span style="width: 30px;" class="is-inline-block has-text-left">{{ observationsWithoutData }}</span><br>
+    <div v-if="!loading">
+      <article
+          class="message is-success"
+      >
+        <div class="message-body">
+          <div class="columns is-multiline">
+            <div class="column is-one-third">
+              <div class="has-text-right">
+                <b>Observation unit: </b> <span style="width: 30px;"
+                                                class="is-inline-block has-text-left">{{ observationUnit }}</span><br>
+                <b>Phenotypes: </b> <span style="width: 30px;" class="is-inline-block has-text-left">{{
+                  phenotypesCount
+                }}</span><br>
+                <b>Total observations: </b> <span style="width: 30px;" class="is-inline-block has-text-left">{{
+                  totalObservationsCount
+                }}</span><br>
+                <b>Observations with data: </b> <span style="width: 30px;" class="is-inline-block has-text-left">{{
+                  observationsWithData
+                }}</span><br>
+                <b>Observations without data: </b> <span style="width: 30px;" class="is-inline-block has-text-left">{{
+                  observationsWithoutData
+                }}</span><br>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </article>
+      </article>
+      <ExpandableTable
+          scrollable
+          v-bind:records.sync="datasetTableRows"
+          v-bind:loading=false
+          v-bind:pagination="paginationController"
+          v-bind:default-sort="['data.germplasmName', 'asc']"
+          v-bind:debounce-search="400"
+          v-on:show-error-notification="$emit('show-error-notification', $event)"
+      >
+        <b-table-column
+            v-slot="props"
+            field="data.germplasmName"
+            label="Germplasm Name"
+            sortable
+            searchable
+            :th-attrs="(column) => ({scope:'col'})"
+        >
+          {{ props.row.data.germplasmName }}
+        </b-table-column>
+        <b-table-column
+            v-slot="props"
+            field="data.gid"
+            :custom-sort="sortGID"
+            label="GID"
+            sortable
+            searchable
+            :th-attrs="(column) => ({scope:'col'})"
+        >
+          {{ props.row.data.gid }}
+        </b-table-column>
+        <b-table-column
+          v-slot="props"
+          field="data.testOrCheck"
+          label="Test(T) or Check (C)
+"
+          sortable
+          searchable
+          :th-attrs="(column) => ({scope:'col'})"
+      >
+        {{ props.row.data.testOrCheck }}
+      </b-table-column>
+        <b-table-column
+            v-slot="props"
+            field="data.env"
+            label="Env"
+            sortable
+            searchable
+            :th-attrs="(column) => ({scope:'col'})"
+        >
+          {{ props.row.data.env }}
+        </b-table-column>
+        <b-table-column
+            v-slot="props"
+            field="data.envLocation"
+            label="Env Location"
+            sortable
+            searchable
+            :th-attrs="(column) => ({scope:'col'})"
+        >
+          {{ props.row.data.envLocation }}
+        </b-table-column>
+        <b-table-column
+            v-slot="props"
+            field="data.expUnitId"
+            label="Exp Unit ID"
+            sortable
+            searchable
+            :th-attrs="(column) => ({scope:'col'})"
+        >
+          {{ props.row.data.expUnitId }}
+        </b-table-column>
+        <b-table-column
+            v-slot="props"
+            field="data.expReplicate"
+            label="Exp Replicate #"
+            sortable
+            searchable
+            :th-attrs="(column) => ({scope:'col'})"
+        >
+          {{ props.row.data.expReplicate }}
+        </b-table-column>
+        <b-table-column
+            v-slot="props"
+            field="data.expBlock"
+            label="Exp Block #"
+            sortable
+            searchable
+            :th-attrs="(column) => ({scope:'col'})"
+        >
+          {{ props.row.data.expBlock }}
+        </b-table-column>
+        <b-table-column
+            v-slot="props"
+            field="data.row"
+            label="Row"
+            sortable
+            searchable
+            :th-attrs="(column) => ({scope:'col'})"
+        >
+          {{ props.row.data.row }}
+        </b-table-column>
+        <b-table-column
+            v-slot="props"
+            field="data.column"
+            label="Column"
+            sortable
+            searchable
+            :th-attrs="(column) => ({scope:'col'})"
+        >
+          {{ props.row.data.column }}
+        </b-table-column>
+        <b-table-column
+            v-slot="props"
+            field="data.obsUnitId"
+            label="ObsUnitID"
+            sortable
+            searchable
+            :th-attrs="(column) => ({scope:'col'})"
+        >
+          {{ props.row.data.obsUnitId }}
+        </b-table-column>
+        <b-table-column
+            v-for="( observationVariable, index ) in this.datasetModel.observationVariables" :key="observationVariable.observationVariableName"
+            v-slot="props"
+            :custom-sort="(a,b,isAsc) => sortObservations(index, a, b, isAsc)"
+            :custom-search="(propsRow, filterString) => filterByObservations(index, propsRow, filterString)"
+            :field="observationVariable.observationVariableName"
+            :label="removeUnique( observationVariable.observationVariableName )"
+            sortable
+            searchable
+            :th-attrs="(column) => ({scope:'col'})"
+            :td-attrs="cellClassIfEmpty"
+            :meta="{'index': index}"
+        >
+            {{ props.row.data.traitValues[index] }}
+        </b-table-column>
+        <template v-slot:emptyMessage>
+          <p class="has-text-weight-bold">
+            No datasets exist.
+          </p>
+        </template>
+      </ExpandableTable>
+    </div>
   </div>
 </template>
 
+
 <script lang="ts">
 import {Component, Prop, Vue, Watch} from 'vue-property-decorator'
 import ProgramsBase from "@/components/program/ProgramsBase.vue";
@@ -50,9 +204,20 @@ import {DatasetModel} from "@/breeding-insight/model/DatasetModel";
 import {ExperimentService} from "@/breeding-insight/service/ExperimentService";
 import {Program} from "@/breeding-insight/model/Program";
 import {mapGetters} from "vuex";
+import {ObservationUnit} from "@/breeding-insight/model/ObservationUnit";
+import {PaginationController} from "@/breeding-insight/model/view_models/PaginationController";
+import ExpandableTable from "@/components/tables/expandableTable/ExpandableTable.vue";
+import {BrAPIUtils} from "@/breeding-insight/utils/BrAPIUtils";
+import {ExternalReferences} from "@/breeding-insight/brapi/model/externalReferences";
+import {DatasetTableRow} from "@/breeding-insight/model/DatasetTableRow";
 import {Trial} from "@/breeding-insight/model/Trial";
+import ProgressBar from '@/components/forms/ProgressBar.vue'
 
 @Component({
+  components: {
+    ExpandableTable,
+    ProgressBar
+  },
   computed: {
     ...mapGetters([
       'activeProgram'
@@ -63,12 +228,15 @@ export default class Dataset extends ProgramsBase {
   private activeProgram: Program;
   private datasetModel: DatasetModel;
   private experiment: Trial;
-  private loading: boolean = true;
-  private resultDatasetId: string;
+  private loading = true;
+  private resultDatasetId: string | undefined;
+  private paginationController: PaginationController = new PaginationController();
+  private datasetTableRows: DatasetTableRow[] = [];
 
+  private unitDbId_to_traitValues = {};
 
-  mounted () {
-    this.getDatasetModelAndExperiment();
+  mounted() {
+    this.load();
   }
 
   @Prop()
@@ -78,63 +246,233 @@ export default class Dataset extends ProgramsBase {
     return this.$route.params.experimentId;
   }
 
-  get observationUnit(): string{
+  get observationUnit(): string {
     let ou = "NA"
-    if(this.experiment && this.experiment.additionalInfo && this.experiment.additionalInfo.defaultObservationLevel){
+    if (this.experiment && this.experiment.additionalInfo && this.experiment.additionalInfo.defaultObservationLevel) {
       ou = this.experiment.additionalInfo.defaultObservationLevel;
     }
     return ou;
   }
 
-  get phenotypesCount(): number{
+  get phenotypesCount(): number {
     let count = 0;
 
-    if(this.datasetModel && this.datasetModel.observationVariables){
+    if (this.datasetModel && this.datasetModel.observationVariables) {
       count = this.datasetModel.observationVariables.length;
     }
     return count
   }
 
   // Total observations
-  get totalObservationsCount(): number {
-    let count = 0;
-
-    if(this.datasetModel && this.datasetModel.observationUnits){
-      let ouCount = this.datasetModel.observationUnits.length;
-      count = ouCount * this.phenotypesCount;
+  get totalObservationsCount(): string {
+    let count = "0";
+    if (this.datasetModel && this.datasetModel.additionalInfo) {
+      count = this.datasetModel.additionalInfo.observations;
     }
     return count
   }
 
   // Observations with data
-  get observationsWithData(): number {
-    let count = 0;
-    if(this.datasetModel && this.datasetModel.data){
-      count = this.datasetModel.data.length;
+  get observationsWithData(): string {
+    let count = "0";
+    if (this.datasetModel && this.datasetModel.additionalInfo) {
+      count = this.datasetModel.additionalInfo.observationsWithData;
     }
     return count
   }
 
   // Observations without data
-  get observationsWithoutData(): number {
-    return this.totalObservationsCount-this.observationsWithData
+  get observationsWithoutData(): string {
+    let count = "0";
+    if (this.datasetModel && this.datasetModel.additionalInfo) {
+      count = this.datasetModel.additionalInfo.observationsWithoutData;
+    }
+    return count
+  }
+
+  getBreedingInsightId(refs: ExternalReferences, source: string): string | undefined {
+    return BrAPIUtils.getBreedingInsightId(refs, source);
+  }
+
+  filterByObservations(index: number, propsRow: any, input: string) {
+    let obsValue = propsRow.data.traitValues[index];
+    obsValue = obsValue ? obsValue : "";  //convert null or undefined to an empty string
+    return obsValue.includes(input);
+  }
+
+  sortObservations(index: number, a: any, b: any, isAsc: boolean) {
+    let first = a.data.traitValues[index];
+    first = first ? first : "";  //convert null or undefined to an empty string
+    let second = b.data.traitValues[index];
+    second = second ? second : "";  //convert null or undefined to an empty string
+    if (isAsc) {
+      return first.localeCompare(second);
+    } else {
+      return second.localeCompare(first);
+    }
+  }
+
+  //sort GIDs numerically
+  sortGID(a: any, b: any, isAsc: boolean){
+    let first :number = parseInt(a.data.gid);
+    let second :number = parseInt(b.data.gid);
+    if (isAsc) {
+      if( first > second){ return 1; }
+      else if (first < second){ return -1;}
+      else return 0;
+    } else {
+      if( second > first ){ return 1; }
+      else if ( second < first){ return -1;}
+      else return 0;
+    }
+  }
+
+  /*
+  * remove the '[....]' found at the end of the string
+  * */
+  removeUnique(str: string|undefined): string {
+    if(!str){ return "";}
+    str = str.trim();
+    const reg = /\[[^\]]*\]$/;
+    return str.replace(reg, '').trim();
+  }
+
+  createDatasetTableRows() {
+    for (let unit of this.datasetModel.observationUnits) {
+      let datasetTableRow: DatasetTableRow = new DatasetTableRow();
+      datasetTableRow.germplasmName = this.removeUnique(unit.germplasmName);
+
+      // GID
+      datasetTableRow.gid = "";
+      if (unit.additionalInfo) {
+        datasetTableRow.gid = unit.additionalInfo.gid;
+      }
+      // T or C
+      datasetTableRow.testOrCheck='T'; // default to 'T'
+      if(unit.observationUnitPosition && unit.observationUnitPosition.entryType) {
+        datasetTableRow.testOrCheck = unit.observationUnitPosition.entryType;
+      }
+
+
+      datasetTableRow.env = this.removeUnique(unit.studyName);
+      datasetTableRow.envLocation = this.removeUnique(unit.locationName);
+      datasetTableRow.expUnitId = this.removeUnique(unit.observationUnitName);
+      datasetTableRow.obsUnitId = BrAPIUtils.getBreedingInsightId(unit.externalReferences, "/observationunits");
+
+      //Exp Replicate # and Exp Block #
+      datasetTableRow.expReplicate = "";
+      datasetTableRow.expBlock = "";
+      if (unit.observationUnitPosition && unit.observationUnitPosition.observationLevelRelationships) {
+        for (const relationship of unit.observationUnitPosition.observationLevelRelationships) {
+          if (relationship.levelName === 'replicate') {
+            datasetTableRow.expReplicate = relationship.levelCode;
+          }
+          if (relationship.levelName === 'block') {
+            datasetTableRow.expBlock = relationship.levelCode;
+          }
+        }
+      }
+
+      // Column and Row
+      if (unit.observationUnitPosition) {
+        // Column
+        datasetTableRow.column = "";
+        if (unit.observationUnitPosition.positionCoordinateXType && unit.observationUnitPosition.positionCoordinateXType === 'GRID_COL') {
+          datasetTableRow.column = unit.observationUnitPosition.positionCoordinateX;
+        } else if (unit.observationUnitPosition.positionCoordinateYType && unit.observationUnitPosition.positionCoordinateYType === 'GRID_COL') {
+          datasetTableRow.column = unit.observationUnitPosition.positionCoordinateY;
+        }
+
+        // Row
+        datasetTableRow.row = "";
+        if (unit.observationUnitPosition.positionCoordinateXType && unit.observationUnitPosition.positionCoordinateXType === 'GRID_ROW') {
+          datasetTableRow.row = unit.observationUnitPosition.positionCoordinateX;
+        } else if (unit.observationUnitPosition.positionCoordinateYType && unit.observationUnitPosition.positionCoordinateYType === 'GRID_ROW') {
+          datasetTableRow.row = unit.observationUnitPosition.positionCoordinateY;
+        }
+      }
+
+      datasetTableRow.traitValues = this.unitDbId_to_traitValues[unit.observationUnitDbId];
+      this.datasetTableRows.push(datasetTableRow);
+    }
+  }
+
+  createUnitDbId_to_traitValues(): {} {
+    let unitDbId_to_traitValues = {};
+    let arrayLength: number = this.phenotypesCount;
+
+    let units: ObservationUnit[] = this.datasetModel.observationUnits;
+
+    // create a Hash Table with the key being each observationUnit's DbId
+    // and the value being an (initially) empty array of observation values.
+    for (let unit of units) {
+      unitDbId_to_traitValues[unit.observationUnitDbId] = new Array<string>(arrayLength);
+    }
+
+    let variableDbId_to_index = this.createVariableDbId_to_index();
+
+    // populate each array of observation values found in the unitDbId_to_traitValues Hash Table
+    for (let observation of this.datasetModel.data) {
+      // find the index (ie table column) of each observation
+      // NOTE: the first observation column will have an index of 0.
+      let obsVar_index = variableDbId_to_index[observation.observationVariableDbId];
+
+      let obs_value = observation.value;
+      let unitDbId = observation.observationUnitDbId;
+      let traitValueArray = unitDbId_to_traitValues[unitDbId];
+      traitValueArray[obsVar_index] = obs_value;
+
+    }
+    return unitDbId_to_traitValues;
+  }
+
+
+  createVariableDbId_to_index(): {} {
+    let variableDbId_to_index = {}
+    for (let index = 0; index < this.datasetModel.observationVariables.length; index++) {
+      variableDbId_to_index[this.datasetModel.observationVariables[index].observationVariableDbId] = index;
+    }
+    return variableDbId_to_index;
+  }
+
+  cellClassIfEmpty(row: any, column: any) {
+    let index = column.meta.index
+    if(row.data.traitValues[index]) {
+      return {};
+    } else {
+      return {'class': 'missing-data'};
+    }
   }
 
   @Watch('$route')
-  async getDatasetModelAndExperiment () {
+  async load() {
     this.loading = true;
-    let experimentResult =  await ExperimentService.getSingleExperiment(this.activeProgram!.id!, this.experimentUUID,false);
+
+    //Set this.experiment
+    let experimentResult = await ExperimentService.getSingleExperiment(this.activeProgram!.id!, this.experimentUUID, false);
     this.experiment = experimentResult.value;
 
-    if( this.datasetId==='observation'){
+    if (this.datasetId === 'observation') {
       this.resultDatasetId = this.experiment.additionalInfo.observationDatasetId;
-    }
-    else{
+    } else {
       this.resultDatasetId = this.datasetId;
     }
+
     try {
+      // Set this.datasetModel
       const response: Result<Error, DatasetModel> = await ExperimentService.getDatasetModel(this.activeProgram!.id!, this.experimentUUID, this.resultDatasetId);
       this.datasetModel = response.result;
+      // Use this.datasetModel to initialize this.unitDbId_to_traitValues
+      this.unitDbId_to_traitValues = this.createUnitDbId_to_traitValues();
+
+      // Use this.datasetModel to initialize this.datasetTableRows
+      this.createDatasetTableRows();
+
+      //Initialize the paginationController
+      this.paginationController.totalCount = this.datasetModel.observationUnits.length;
+      this.paginationController.currentPage = 1;
+      this.paginationController.pageSize = 200;
+      this.paginationController.totalPages = this.paginationController.totalCount.valueOf() / this.paginationController.pageSize.valueOf();
     } catch (err) {
       // Display error that experiment cannot be loaded
       this.$emit('show-error-notification', 'Error while trying to load data set' + err.message());
@@ -144,4 +482,4 @@ export default class Dataset extends ProgramsBase {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>