diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 7ddafe256..0f5260398 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -574,26 +574,6 @@ select {
   }
 }
 
-.table-frozen {
-  float: left;
-  width: auto;
-}
-
-.table-container {
-  // Placing the margin here rather than on the table so that the horizontal
-  // scrollbar appears immediately below the table, above the margin.
-  margin-bottom: $margin-bottom-table;
-  overflow-x: auto;
-
-  .table {
-    margin-bottom: 0;
-  }
-}
-
-.table-actions {
-  margin-bottom: 20px;
-}
-
 .empty-table-message {
   color: #555;
   font-size: 15px;
@@ -825,3 +805,11 @@ becomes more complicated.
     }
   }
 }
+
+
+
+////////////////////////////////////////////////////////////////////////////////
+// markRowsChanged()
+
+[data-mark-rows-changed="false"] { transition: background-color 0.6s 6s; }
+[data-mark-rows-changed="true"] { background-color: #faf1cd; }
diff --git a/src/components/entity/data-row.vue b/src/components/entity/data-row.vue
index fa156b6b7..35f5c592f 100644
--- a/src/components/entity/data-row.vue
+++ b/src/components/entity/data-row.vue
@@ -10,8 +10,8 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <tr>
-    <td v-for="property of properties" :key="property.id">
+  <tr class="entity-data-row">
+    <td v-for="property of properties" :key="property.name">
       <span v-tooltip.text>{{ entity[property.odataName] }}</span>
     </td>
     <td><span v-tooltip.text>{{ entity.label }}</span></td>
diff --git a/src/components/entity/list.vue b/src/components/entity/list.vue
index b2e139239..b4c9d8053 100644
--- a/src/components/entity/list.vue
+++ b/src/components/entity/list.vue
@@ -23,21 +23,24 @@ except according to the terms contained in the LICENSE file.
       </a>
     </div>
     <entity-table v-show="odataEntities.dataExists && odataEntities.value.length !== 0"
-      :properties="dataset.properties"/>
+      ref="table" :properties="dataset.properties" @update="showUpdate"/>
     <p v-show="odataEntities.dataExists && odataEntities.value.length === 0"
       class="empty-table-message">
       {{ $t('noEntities') }}
     </p>
     <loading :state="odataEntities.initiallyLoading"/>
+
+    <entity-update v-bind="update" @hide="hideUpdate" @success="afterUpdate"/>
   </div>
 </template>
 
 <script>
-
 import Loading from '../loading.vue';
 import Spinner from '../spinner.vue';
 import EntityTable from './table.vue';
+import EntityUpdate from './update.vue';
 
+import modal from '../../mixins/modal';
 import useEntities from '../../request-data/entities';
 import { useRequestData } from '../../request-data';
 import { apiPaths } from '../../util/request';
@@ -48,8 +51,11 @@ export default {
   components: {
     Loading,
     Spinner,
-    EntityTable
+    EntityTable,
+    EntityUpdate
   },
+  mixins: [modal()],
+  inject: ['alert'],
   provide() {
     return { projectId: this.projectId, datasetName: this.datasetName };
   },
@@ -72,7 +78,14 @@ export default {
   },
   data() {
     return {
-      refreshing: false
+      refreshing: false,
+      // The index of the entity being updated
+      updateIndex: null,
+      // Data to pass to the update modal
+      update: {
+        state: false,
+        entity: null
+      }
     };
   },
   computed: {
@@ -101,6 +114,47 @@ export default {
       })
         .finally(() => { this.refreshing = false; })
         .catch(noop);
+    },
+    showUpdate(index) {
+      if (this.refreshing) return;
+      this.updateIndex = index;
+      const odataEntity = this.odataEntities.value[index];
+      const data = Object.create(null);
+      for (const { name, odataName } of this.dataset.properties)
+        data[name] = odataEntity[odataName];
+      this.update.entity = {
+        uuid: odataEntity.__id,
+        currentVersion: { label: odataEntity.label, data }
+      };
+      this.showModal('update');
+    },
+    hideUpdate() {
+      this.hideModal('update');
+      this.update.entity = null;
+      this.updateIndex = null;
+    },
+    afterUpdate(updatedEntity) {
+      const index = this.updateIndex;
+      this.hideUpdate();
+      this.alert.success(this.$t('alert.updateEntity'));
+
+      // Update the OData using the REST response.
+      const oldOData = this.odataEntities.value[index];
+      const newOData = Object.assign(Object.create(null), {
+        __id: oldOData.__id,
+        label: updatedEntity.currentVersion.label,
+        __system: {
+          ...oldOData.__system,
+          updates: oldOData.__system.updates + 1,
+          updatedAt: updatedEntity.updatedAt
+        }
+      });
+      const { data: updatedData } = updatedEntity.currentVersion;
+      for (const { name, odataName } of this.dataset.properties)
+        newOData[odataName] = updatedData[name];
+      this.odataEntities.value[index] = newOData;
+
+      this.$refs.table.afterUpdate(index);
     }
   }
 };
diff --git a/src/components/entity/metadata-row.vue b/src/components/entity/metadata-row.vue
index f429a03fa..78c553132 100644
--- a/src/components/entity/metadata-row.vue
+++ b/src/components/entity/metadata-row.vue
@@ -11,16 +11,37 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <tr class="entity-metadata-row">
-    <td class="row-number">
-      <router-link v-slot="{ href }"
-        :to="entityPath(projectId, datasetName, entity.__id)" custom>
-        <a :href="href" target="_blank">{{ $n(rowNumber, 'noGrouping') }}</a>
-      </router-link>
-    </td>
+    <td class="row-number">{{ $n(rowNumber, 'noGrouping') }}</td>
     <td class="creator-name">
       <span v-tooltip.text>{{ entity.__system.creatorName }}</span>
     </td>
     <td><date-time :iso="entity.__system.createdAt"/></td>
+    <td>
+      <div class="col-content">
+        <date-time :iso="entity.__system.updatedAt" class="updated-at"/>
+        <span class="updates">
+          <template v-if="entity.__system.updates !== 0">
+            <span class="icon-pencil"></span>
+            <span>{{ $n(entity.__system.updates, 'default') }}</span>
+          </template>
+        </span>
+        <span class="icon-angle-right"></span>
+      </div>
+      <div class="btn-group">
+        <button v-if="canUpdate" type="button"
+          class="update-button btn btn-default" :aria-label="updateLabel"
+          v-tooltip.aria-label>
+          <span class="icon-pencil"></span>
+        </button>
+        <router-link v-slot="{ href }"
+          :to="entityPath(projectId, datasetName, entity.__id)" custom>
+          <a class="more-button btn btn-default" :href="href" target="_blank">
+            <span>{{ $t('action.more') }}</span>
+            <span class="icon-angle-right"></span>
+          </a>
+        </router-link>
+      </div>
+    </td>
   </tr>
 </template>
 
@@ -30,13 +51,13 @@ export default {
 };
 </script>
 <script setup>
-import { inject } from 'vue';
+import { computed, inject } from 'vue';
 
 import DateTime from '../date-time.vue';
 
 import useRoutes from '../../composables/routes';
 
-defineProps({
+const props = defineProps({
   entity: {
     type: Object,
     required: true
@@ -44,11 +65,17 @@ defineProps({
   rowNumber: {
     type: Number,
     required: true
-  }
+  },
+  canUpdate: Boolean
 });
 const projectId = inject('projectId');
 const datasetName = inject('datasetName');
 
+const { i18n } = inject('container');
+const updateLabel = computed(() => i18n.t('submission.action.edit', {
+  count: i18n.n(props.entity.__system.updates, 'default')
+}));
+
 const { entityPath } = useRoutes();
 </script>
 
@@ -69,5 +96,27 @@ const { entityPath } = useRoutes();
     @include text-overflow-ellipsis;
     max-width: 250px;
   }
+
+  .col-content {
+    align-items: flex-start;
+    display: flex;
+  }
+  .updated-at {
+    margin-right: 21px;
+
+    &:empty { width: 75px; }
+  }
+  .updates {
+    color: #777;
+    margin-left: auto;
+    width: 41px;
+
+    .icon-pencil { margin-right: 5px; }
+  }
+  .col-content .icon-angle-right {
+    color: $color-accent-primary;
+    font-size: 20px;
+    margin-top: -1px;
+  }
 }
 </style>
diff --git a/src/components/entity/table.vue b/src/components/entity/table.vue
index 4e3623193..8055d438c 100644
--- a/src/components/entity/table.vue
+++ b/src/components/entity/table.vue
@@ -10,85 +10,72 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <div>
-    <table id="entity-table-metadata" class="table table-frozen">
-      <thead>
-        <tr>
-          <th><!-- Row number --></th>
-          <th>{{ $t('header.createdBy') }}</th>
-          <th>{{ $t('header.createdAt') }}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <template v-if="odataEntities.dataExists">
-          <entity-metadata-row v-for="(entity, index) in odataEntities.value"
-            :key="entity.__id" :entity="entity"
-            :row-number="odataEntities.value.length - index"/>
-        </template>
-      </tbody>
-    </table>
-    <div class="table-container">
-      <table id="entity-table-data" class="table">
-        <thead>
-          <tr v-if="properties != null">
-            <th v-for="property of properties" :key="property.id">
-              <span v-tooltip.text>{{ property.name }}</span>
-            </th>
-            <th>{{ $t('entity.label') }}</th>
-            <th>{{ $t('entity.entityId') }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <template v-if="odataEntities.dataExists && properties != null">
-            <entity-data-row v-for="(entity) in odataEntities.value"
-              :key="entity.__id" :entity="entity"
-              :properties="properties"/>
-          </template>
-        </tbody>
-      </table>
-    </div>
-  </div>
+  <table-freeze id="entity-table" ref="table" :data="odataEntities.value"
+    key-prop="__id" :frozen-only="properties == null" divider @action="update">
+    <template #head-frozen>
+      <th><!-- Row number --></th>
+      <th>{{ $t('header.createdBy') }}</th>
+      <th>{{ $t('header.createdAt') }}</th>
+      <th>{{ $t('header.updatedAtAndActions') }}</th>
+    </template>
+    <template #head-scrolling>
+      <template v-if="properties != null">
+        <th v-for="property of properties" :key="property.name">
+          <span v-tooltip.text>{{ property.name }}</span>
+        </th>
+      </template>
+      <th>{{ $t('entity.label') }}</th>
+      <th>{{ $t('entity.entityId') }}</th>
+    </template>
+
+    <template #data-frozen="{ data, index }">
+      <entity-metadata-row :entity="data"
+        :row-number="odataEntities.value.length - index"
+        :can-update="canUpdate"/>
+    </template>
+    <template #data-scrolling="{ data }">
+      <entity-data-row :entity="data" :properties="properties"/>
+    </template>
+  </table-freeze>
 </template>
 
 <script>
+export default {
+  name: 'EntityTable'
+};
+</script>
+<script setup>
+import { computed, ref } from 'vue';
+
 import EntityDataRow from './data-row.vue';
 import EntityMetadataRow from './metadata-row.vue';
+import TableFreeze from '../table-freeze.vue';
 
+import { markRowsChanged } from '../../util/dom';
 import { useRequestData } from '../../request-data';
 
+defineProps({
+  properties: Array
+});
+const emit = defineEmits(['update']);
 
-export default {
-  name: 'EntityTable',
-  components: { EntityDataRow, EntityMetadataRow },
-  props: {
-    properties: Array
-  },
-  setup() {
-    // The component does not assume that this data will exist when the
-    // component is created.
-    const { odataEntities } = useRequestData();
-    return { odataEntities };
-  }
+// The component does not assume that this data will exist when the component is
+// created.
+const { project, odataEntities } = useRequestData();
+
+const canUpdate = computed(() => project.permits(['entity.update']));
+const update = ({ target, index }) => {
+  if (target.classList.contains('update-button')) emit('update', index);
 };
+const table = ref(null);
+const afterUpdate = (index) => { markRowsChanged(table.value.getRowPair(index)); };
+defineExpose({ afterUpdate });
 </script>
 
 <style lang="scss">
 @import '../../assets/scss/mixins';
 
-#entity-table-metadata {
-  box-shadow: 3px 0 0 rgba(0, 0, 0, 0.04);
-  position: relative;
-  // Adding z-index so that the background color of the other table's thead does
-  // not overlay the box shadow.
-  z-index: 1;
-
-  th:last-child { border-right: $border-bottom-table-heading; }
-  td:last-child { border-right: $border-top-table-data; }
-}
-
-#entity-table-data {
-  width: auto;
-
+#entity-table .table-freeze-scrolling {
   th, td {
     @include text-overflow-ellipsis;
     max-width: 250px;
@@ -96,3 +83,16 @@ export default {
   }
 }
 </style>
+
+<i18n lang="json5">
+{
+  "en": {
+    "header": {
+      // This is the text of a column header of a table of Entities. The column
+      // shows when each Entity was last updated, as well as actions that can be
+      // taken on the Entity.
+      "updatedAtAndActions": "Last Updated / Actions"
+    }
+  }
+}
+</i18n>
diff --git a/src/components/entity/update.vue b/src/components/entity/update.vue
index c50c9fec4..6b4ae4e92 100644
--- a/src/components/entity/update.vue
+++ b/src/components/entity/update.vue
@@ -59,7 +59,7 @@ export default {
 };
 </script>
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 
 import EntityUpdateRow from './update/row.vue';
 import Modal from '../modal.vue';
@@ -108,12 +108,18 @@ const { resize: resizeLabelCells } = useColumnGrow(labelCellHeader, 1.5);
 const labelRow = ref(null);
 const propertyRows = ref([]);
 const afterShown = () => {
-  resizeLabelCells();
+  labelRow.value.textarea.focus();
 
-  labelRow.value.textarea.resize();
-  for (const row of propertyRows.value) row.textarea.resize();
+  // Resize elements. We wait a tick in case props.entity was changed at the
+  // same time as props.state. If a change to props.entity results in changes to
+  // the DOM, we need those changes to the DOM to be made before resizing
+  // elements based on content in the DOM.
+  nextTick(() => {
+    resizeLabelCells();
 
-  labelRow.value.textarea.focus();
+    labelRow.value.textarea.resize();
+    for (const row of propertyRows.value) row.textarea.resize();
+  });
 };
 
 const noEntity = {
diff --git a/src/components/project/form-access/table.vue b/src/components/project/form-access/table.vue
index 6b163551e..46a7cedfc 100644
--- a/src/components/project/form-access/table.vue
+++ b/src/components/project/form-access/table.vue
@@ -10,56 +10,49 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <div id="project-form-access-table" class="clearfix">
-    <table class="table table-frozen"
-      :class="{ 'no-field-keys': fieldKeys.withToken.length === 0 }">
-      <thead>
-        <tr>
-          <th>{{ $t('header.form') }}</th>
-          <th>
-            <span>{{ $t('header.state') }}</span>
-            <button type="button" class="btn btn-link"
-              @click="$emit('show-states')">
-              <span class="icon-question-circle"></span>
-            </button>
-          </th>
-        </tr>
-      </thead>
-      <tbody v-if="forms.length !== 0">
-        <project-form-access-row v-for="form of forms" :key="form.xmlFormId"
-          :form="form" :changes="changesByForm[form.xmlFormId]" frozen
-          @update:state="updateState"/>
-      </tbody>
-    </table>
-    <div v-if="fieldKeys.withToken.length !== 0" class="table-container">
-      <table class="table">
-        <thead>
-          <tr>
-            <th><div>{{ $t('resource.appUsers') }}</div></th>
-            <th v-for="fieldKey of fieldKeys.withToken" :key="fieldKey.id">
-              <div><span v-tooltip.text>{{ fieldKey.displayName }}</span></div>
-            </th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody v-if="forms.length !== 0">
-          <project-form-access-row v-for="form of forms" :key="form.xmlFormId"
-            :form="form" :changes="changesByForm[form.xmlFormId]"
-            @update:field-key-access="updateFieldKeyAccess"/>
-        </tbody>
-      </table>
-    </div>
-  </div>
+  <table-freeze id="project-form-access-table"
+    :class="{ 'no-field-keys': noFieldKeys }" :data="forms.data"
+    key-prop="xmlFormId" :frozen-only="noFieldKeys">
+    <template #head-frozen>
+      <th>{{ $t('header.form') }}</th>
+      <th>
+        <span>{{ $t('header.state') }}</span>
+        <button type="button" class="btn btn-link"
+          @click="$emit('show-states')">
+          <span class="icon-question-circle"></span>
+        </button>
+      </th>
+    </template>
+    <template #head-scrolling>
+      <th><div>{{ $t('resource.appUsers') }}</div></th>
+      <th v-for="fieldKey of fieldKeys.withToken" :key="fieldKey.id">
+        <div><span v-tooltip.text>{{ fieldKey.displayName }}</span></div>
+      </th>
+      <th></th>
+    </template>
+
+    <template #data-frozen="{ data: form }">
+      <project-form-access-row :form="form"
+        :changes="changesByForm[form.xmlFormId]" frozen
+        @update:state="updateState"/>
+    </template>
+    <template #data-scrolling="{ data: form }">
+      <project-form-access-row :form="form"
+        :changes="changesByForm[form.xmlFormId]"
+        @update:field-key-access="updateFieldKeyAccess"/>
+    </template>
+  </table-freeze>
 </template>
 
 <script>
 import ProjectFormAccessRow from './row.vue';
+import TableFreeze from '../../table-freeze.vue';
 
 import { useRequestData } from '../../../request-data';
 
 export default {
   name: 'ProjectFormAccessTable',
-  components: { ProjectFormAccessRow },
+  components: { ProjectFormAccessRow, TableFreeze },
   props: {
     changesByForm: {
       type: Object,
@@ -71,6 +64,11 @@ export default {
     const { forms, fieldKeys } = useRequestData();
     return { forms, fieldKeys };
   },
+  computed: {
+    noFieldKeys() {
+      return this.fieldKeys.dataExists && this.fieldKeys.withToken.length === 0;
+    }
+  },
   methods: {
     updateState(form, state) {
       this.$emit('update:state', form, state);
@@ -87,14 +85,14 @@ export default {
 
 #project-form-access-table {
   // Space above the tables
-  .table-frozen {
+  .table-freeze-frozen {
     margin-top: 70px;
 
     &.no-field-keys {
       margin-top: 0;
     }
   }
-  .table-container {
+  .table-freeze-scrolling-container {
     // Using padding rather than margin so that the rotated column header text
     // does not overflow the container, which would cause the text to be hidden.
     padding-top: 70px;
@@ -111,7 +109,7 @@ export default {
     }
   }
 
-  .table-frozen {
+  .table-freeze-frozen {
     $form-name-width: 250px;
     $state-width: 200px;
 
@@ -133,9 +131,7 @@ export default {
     }
   }
 
-  .table-container .table {
-    width: auto;
-
+  .table-freeze-scrolling {
     thead {
       background-color: transparent;
     }
diff --git a/src/components/submission/data-row.vue b/src/components/submission/data-row.vue
index 6c54ecc12..828c33af8 100644
--- a/src/components/submission/data-row.vue
+++ b/src/components/submission/data-row.vue
@@ -176,7 +176,7 @@ export default {
 <style lang="scss">
 @import '../../assets/scss/variables';
 
-#submission-table-data {
+#submission-table {
   .int-field, .decimal-field { text-align: right; }
   .geopoint-field { max-width: 500px; }
 
diff --git a/src/components/submission/metadata-row.vue b/src/components/submission/metadata-row.vue
index 585d401e4..4cb4fc743 100644
--- a/src/components/submission/metadata-row.vue
+++ b/src/components/submission/metadata-row.vue
@@ -11,21 +11,22 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <tr class="submission-metadata-row">
-    <!-- ^^^ SubmissionTable assumes that this element does not have a class
-    binding. -->
-
     <td class="row-number">{{ $n(rowNumber, 'noGrouping') }}</td>
     <td v-if="!draft" class="submitter-name">
       <span v-tooltip.text>{{ submission.__system.submitterName }}</span>
     </td>
     <td><date-time :iso="submission.__system.submissionDate"/></td>
     <td v-if="!draft" class="state-and-actions">
-      <span class="state"><span :class="stateIcon"></span>{{ stateText }}</span>
-      <span v-if="submission.__system.edits !== 0" class="edits">
-        <span class="icon-pencil"></span>
-        <span>{{ $n(submission.__system.edits, 'default') }}</span>
-      </span>
-      <span class="icon-angle-right"></span>
+      <div class="col-content">
+        <span class="state"><span :class="stateIcon"></span>{{ stateText }}</span>
+        <span class="edits">
+          <template v-if="submission.__system.edits !== 0">
+            <span class="icon-pencil"></span>
+            <span>{{ $n(submission.__system.edits, 'default') }}</span>
+          </template>
+        </span>
+        <span class="icon-angle-right"></span>
+      </div>
       <div class="btn-group">
         <template v-if="canUpdate">
           <button type="button" class="review-button btn btn-default"
@@ -126,13 +127,6 @@ export default {
 @import '../../assets/scss/mixins';
 
 .submission-metadata-row {
-  transition: background-color 0.6s 6s;
-
-  &.updated {
-    background-color: #faf1cd;
-    transition: none;
-  }
-
   .row-number {
     color: #999;
     font-size: 11px;
@@ -146,26 +140,13 @@ export default {
     max-width: 250px;
   }
 
-  .state-and-actions {
-    min-width: 205px;
-    position: relative;
-
-    > .icon-angle-right {
-      bottom: #{$padding-bottom-table-data + 1px};
-      color: $color-accent-primary;
-      font-size: 20px;
-      // Using `position: absolute` rather than `float: right` so that the icon
-      // does not increase the row's height.
-      position: absolute;
-      right: $padding-right-table-data;
-    }
+  .state-and-actions { min-width: 205px; }
+  .col-content {
+    align-items: flex-start;
+    display: flex;
   }
-
-  $edits-and-angle-width: 48px;
   .state {
-    // Ensure that there is space for the edit count and angle icon if the
-    // column exceeds its min width.
-    margin-right: #{$edits-and-angle-width + 15px};
+    margin-right: 15px;
 
     .icon-comments { margin-right: $margin-right-icon; }
     .icon-circle-o, .icon-dot-circle-o, .icon-pencil, .icon-check-circle, .icon-times-circle {
@@ -179,50 +160,17 @@ export default {
     .icon-check-circle { color: $color-success; }
     .icon-times-circle { color: $color-danger; }
   }
-
   .edits {
     color: #777;
-    // Positioning from the left rather than the right so that the icon is
-    // aligned across rows.
-    left: calc(100% - #{$edits-and-angle-width + $padding-right-table-data});
-    position: absolute;
+    margin-left: auto;
+    width: 41px;
 
     .icon-pencil { margin-right: 5px; }
   }
-
-  .btn-group {
-    // Setting the background color in case the edit button is disabled.
-    background-color: $color-page-background;
-    left: -1000px;
-    position: absolute;
-    top: 4px;
-  }
-
-  .btn {
-    .icon-check { margin-right: -1px; }
-
-    .icon-pencil {
-      margin-left: 1px;
-      margin-right: 0;
-    }
+  .col-content .icon-angle-right {
+    color: $color-accent-primary;
+    font-size: 20px;
+    margin-top: -1px;
   }
-
-  .more-button {
-    span:first-child { margin-right: 13px; }
-
-    .icon-angle-right {
-      font-size: 18px;
-      position: absolute;
-      right: $hpadding-btn;
-      top: #{$padding-top-btn - 2px};
-    }
-  }
-}
-
-.submission-table-actions-trigger-hover tr:hover .btn-group,
-.submission-table-actions-trigger-hover .data-hover .btn-group,
-.submission-table-actions-trigger-focus .btn-group:focus-within {
-  left: auto;
-  right: $padding-right-table-data;
 }
 </style>
diff --git a/src/components/submission/table.vue b/src/components/submission/table.vue
index 539bf90f4..8c667771f 100644
--- a/src/components/submission/table.vue
+++ b/src/components/submission/table.vue
@@ -10,196 +10,85 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <div>
-    <table id="submission-table-metadata" class="table table-frozen">
-      <thead>
-        <tr>
-          <th><!-- Row number --></th>
-          <th v-if="!draft">{{ $t('header.submitterName') }}</th>
-          <th>{{ $t('header.submissionDate') }}</th>
-          <th v-if="!draft">{{ $t('header.stateAndActions') }}</th>
-        </tr>
-      </thead>
-      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
-      <tbody ref="metadataBody"
-        :class="`submission-table-actions-trigger-${actionsTrigger}`"
-        @mousemove="setActionsTrigger('hover')"
-        @focusin="setActionsTrigger('focus')" @click="review">
-        <template v-if="odata.dataExists">
-          <submission-metadata-row v-for="(submission, index) in chunkyOData"
-            :key="submission.__id" :project-id="projectId"
-            :xml-form-id="xmlFormId" :draft="draft" :submission="submission"
-            :row-number="odata.originalCount - index" :can-update="canUpdate"
-            :data-index="index"/>
-        </template>
-      </tbody>
-    </table>
-    <div class="table-container">
-      <table id="submission-table-data" class="table">
-        <thead>
-          <tr v-if="fields != null">
-            <th v-for="field of fields" :key="field.path">
-              <span v-tooltip.text>{{ field.header }}</span>
-            </th>
-            <th>{{ $t('header.instanceId') }}</th>
-          </tr>
-        </thead>
-        <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->
-        <tbody @mousemove="setActionsTrigger('hover')"
-          @mouseover="toggleHoverClass" @mouseleave="removeHoverClass">
-          <template v-if="odata.dataExists && fields != null">
-            <submission-data-row v-for="(submission, index) in chunkyOData"
-              :key="submission.__id" :project-id="projectId"
-              :xml-form-id="xmlFormId" :draft="draft" :submission="submission"
-              :fields="fields" :data-index="index"/>
-          </template>
-        </tbody>
-      </table>
-    </div>
-  </div>
+  <table-freeze id="submission-table" ref="table" :data="chunkyOData"
+    key-prop="__id" :frozen-only="fields == null" divider @action="review">
+    <template #head-frozen>
+      <th><!-- Row number --></th>
+      <th v-if="!draft">{{ $t('header.submitterName') }}</th>
+      <th>{{ $t('header.submissionDate') }}</th>
+      <th v-if="!draft">{{ $t('header.stateAndActions') }}</th>
+    </template>
+    <template #head-scrolling>
+      <template v-if="fields != null">
+        <th v-for="field of fields" :key="field.path">
+          <span v-tooltip.text>{{ field.header }}</span>
+        </th>
+      </template>
+      <th>{{ $t('header.instanceId') }}</th>
+    </template>
+
+    <template #data-frozen="{ data, index }">
+      <submission-metadata-row :project-id="projectId" :xml-form-id="xmlFormId"
+        :draft="draft" :submission="data"
+        :row-number="odata.originalCount - index" :can-update="canUpdate"/>
+    </template>
+    <template #data-scrolling="{ data }">
+      <submission-data-row :project-id="projectId" :xml-form-id="xmlFormId"
+        :draft="draft" :submission="data" :fields="fields"/>
+    </template>
+  </table-freeze>
 </template>
 
 <script>
-import { computed } from 'vue';
+export default {
+  name: 'SubmissionTable'
+};
+</script>
+<script setup>
+import { computed, ref } from 'vue';
 
 import SubmissionDataRow from './data-row.vue';
 import SubmissionMetadataRow from './metadata-row.vue';
+import TableFreeze from '../table-freeze.vue';
 
 import useChunkyArray from '../../composables/chunky-array';
+import { markRowsChanged } from '../../util/dom';
 import { useRequestData } from '../../request-data';
 
-// We may render many rows, so this component makes use of event delegation and
-// other optimizations.
-
-export default {
-  name: 'SubmissionTable',
-  components: { SubmissionDataRow, SubmissionMetadataRow },
-  props: {
-    projectId: {
-      type: String,
-      required: true
-    },
-    xmlFormId: {
-      type: String,
-      required: true
-    },
-    draft: Boolean,
-    fields: Array
+defineProps({
+  projectId: {
+    type: String,
+    required: true
   },
-  emits: ['review'],
-  setup() {
-    // The component does not assume that this data will exist when the
-    // component is created.
-    const { project, odata } = useRequestData();
-    const chunkyOData = useChunkyArray(computed(() => odata.value));
-    return { project, odata, chunkyOData };
+  xmlFormId: {
+    type: String,
+    required: true
   },
-  data() {
-    return {
-      /*
-      Actions are shown for a row if the cursor is over the row or if one of the
-      actions is focused. However, it is possible for the cursor to be over one
-      row while an action is focused in a different row. In that case, we show
-      the actions for one of the two rows depending on the type of the most
-      recent event.
-
-      I tried other approaches before landing on this one. However, sequences of
-      events like the following were a challenge:
+  draft: Boolean,
+  fields: Array
+});
+const emit = defineEmits(['review']);
 
-        - Click the More button for a row.
-        - Next, press tab to focus the Review button in the next row.
-        - Actions are shown for the next row and are no longer shown beneath the
-          cursor. However, that will trigger a mouseover event, which depending
-          on the approach may cause actions to be shown beneath the cursor
-          again.
-      */
-      actionsTrigger: 'hover',
-      dataHover: null
-    };
-  },
-  computed: {
-    canUpdate() {
-      return this.project.dataExists && this.project.permits('submission.update');
-    }
-  },
-  watch: {
-    /*
-    We remove the data-hover class after the submissions are refreshed, with the
-    following cases in mind:
+// The component does not assume that this data will exist when the component is
+// created.
+const { project, odata } = useRequestData();
 
-      - There may be fewer submissions after the refresh than before. In that
-        case, it is possible that this.odata.value.length <= this.dataHover.
-      - A submission may be in a different row after the refresh. For example,
-        if the user hovers over the first row, and after the refresh, that
-        submission is in the second row, then the second row will incorrectly
-        have the data-hover class.
+const chunkyOData = useChunkyArray(computed(() => odata.value));
+const canUpdate = computed(() =>
+  project.dataExists && project.permits('submission.update'));
 
-    In some cases, it would be ideal not to remove the class or to add the class
-    to the row for a different submission. That logic is not in place right now.
-    */
-    'odata.data': 'removeHoverClass'
-  },
-  methods: {
-    setActionsTrigger(trigger) {
-      this.actionsTrigger = trigger;
-    },
-    toggleHoverClass(event) {
-      const dataRow = event.target.closest('tr');
-      const index = Number.parseInt(dataRow.dataset.index, 10);
-      if (index === this.dataHover) return;
-      const { metadataBody } = this.$refs;
-      if (this.dataHover != null)
-        metadataBody.querySelector('.data-hover').classList.remove('data-hover');
-      const metadataRow = metadataBody.querySelector(`tr:nth-child(${index + 1})`);
-      // The SubmissionMetadataRow element does not have a class binding, so I
-      // think we can add this class without Vue removing it.
-      metadataRow.classList.add('data-hover');
-      this.dataHover = index;
-    },
-    removeHoverClass() {
-      if (this.dataHover != null) {
-        const tr = this.$refs.metadataBody.querySelector('.data-hover');
-        tr.classList.remove('data-hover');
-        this.dataHover = null;
-      }
-    },
-    review(event) {
-      if (!this.canUpdate) return;
-      const tr = event.target.closest('tr');
-      if (tr.querySelector('.review-button').contains(event.target))
-        this.$emit('review', this.odata.value[tr.dataset.index]);
-    },
-    // Using a method instead of a prop in case the same submission is updated
-    // twice in a row.
-    afterReview(index) {
-      const { metadataBody } = this.$refs;
-      const tr = metadataBody.querySelector(`tr:nth-child(${index + 1})`);
-      tr.classList.add('updated');
-      setTimeout(() => {
-        tr.classList.remove('updated');
-      });
-    }
-  }
+const review = ({ target, data }) => {
+  if (target.classList.contains('review-button')) emit('review', data);
 };
+const table = ref(null);
+const afterReview = (index) => { markRowsChanged(table.value.getRowPair(index)); };
+defineExpose({ afterReview });
 </script>
 
 <style lang="scss">
 @import '../../assets/scss/mixins';
 
-#submission-table-metadata {
-  box-shadow: 3px 0 0 rgba(0, 0, 0, 0.04);
-  position: relative;
-  // Adding z-index so that the background color of the other table's thead does
-  // not overlay the box shadow.
-  z-index: 1;
-
-  th:last-child { border-right: $border-bottom-table-heading; }
-  td:last-child { border-right: $border-top-table-data; }
-}
-
-#submission-table-data {
-  width: auto;
-
+#submission-table .table-freeze-scrolling {
   th, td {
     @include text-overflow-ellipsis;
     max-width: 250px;
diff --git a/src/components/table-freeze.vue b/src/components/table-freeze.vue
new file mode 100644
index 000000000..187eb0ada
--- /dev/null
+++ b/src/components/table-freeze.vue
@@ -0,0 +1,199 @@
+<!--
+Copyright 2023 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <div class="table-freeze">
+    <table class="table table-freeze-frozen" :class="{ divider }">
+      <thead>
+        <tr>
+          <slot name="head-frozen"></slot>
+        </tr>
+      </thead>
+      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
+      <tbody v-if="data != null" ref="frozenBody"
+        :class="`actions-trigger-${actionsTrigger}`"
+        @mousemove="setActionsTrigger('hover')"
+        @focusin="setActionsTrigger('focus')" @click="actionClick">
+        <slot v-for="(element, index) in data" :key="element[keyProp]"
+          name="data-frozen" :data="element" :index="index">
+        </slot>
+      </tbody>
+    </table>
+    <div v-if="!frozenOnly" class="table-freeze-scrolling-container">
+      <table class="table table-freeze-scrolling">
+        <thead>
+          <tr>
+            <slot name="head-scrolling"></slot>
+          </tr>
+        </thead>
+        <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->
+        <tbody v-if="data != null" ref="scrollingBody"
+          @mousemove="setActionsTrigger('hover')" @mouseover="toggleHoverClass"
+          @mouseleave="removeHoverClass">
+          <slot v-for="(element, index) in data" :key="element[keyProp]"
+            name="data-scrolling" :data="element" :index="index">
+          </slot>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, shallowRef, watch } from 'vue';
+
+// We may render many rows, so this component makes use of event delegation and
+// other optimizations.
+
+const props = defineProps({
+  data: Array,
+  keyProp: {
+    type: String,
+    required: true
+  },
+  frozenOnly: Boolean,
+  divider: Boolean
+});
+const emit = defineEmits(['action']);
+
+/*
+Actions are shown for a row if the cursor is over the row or if one of the
+actions is focused. However, it is possible for the cursor to be over one row
+while an action is focused in a different row. In that case, we show the actions
+for one of the two rows depending on the type of the most recent event.
+
+I tried other approaches before landing on this one. However, some sequences of
+events were a challenge. For example, in SubmissionTable:
+
+  - Click the More button for a row.
+  - Next, press tab to focus the Review button in the next row.
+  - Actions are shown for the next row and are no longer shown beneath the
+    cursor. However, that will trigger a mouseover event, which depending on the
+    approach may cause actions to be shown beneath the cursor again.
+*/
+const actionsTrigger = ref('hover');
+const setActionsTrigger = (trigger) => { actionsTrigger.value = trigger; };
+
+// When hovering over a row of the scrolling table, add a class to the
+// corresponding row of the frozen table. Note that the class may be overwritten
+// if the <tr> element in the data-frozen slot uses v-bind:class.
+const correspondingRow = shallowRef(null);
+const frozenBody = ref(null);
+const toggleHoverClass = (event) => {
+  const scrollingRow = event.target.closest('tr');
+  if (correspondingRow.value != null) {
+    if (scrollingRow.rowIndex === correspondingRow.value.rowIndex) return;
+    correspondingRow.value.classList.remove('scrolling-hover');
+  }
+  correspondingRow.value = frozenBody.value.rows[scrollingRow.rowIndex - 1];
+  correspondingRow.value.classList.add('scrolling-hover');
+};
+const removeHoverClass = () => {
+  if (correspondingRow.value != null) {
+    correspondingRow.value.classList.remove('scrolling-hover');
+    correspondingRow.value = null;
+  }
+};
+/*
+We remove the scrolling-hover class after the table is refreshed, with the
+following cases in mind:
+
+  - There may be fewer rows after the refresh than before.
+  - The rows may be reordered.
+*/
+watch(() => props.data, removeHoverClass);
+
+const actionClick = (event) => {
+  const action = event.target.closest('.btn-group .btn');
+  if (action != null) {
+    const index = action.closest('tr').rowIndex - 1;
+    emit('action', { target: action, data: props.data[index], index });
+  }
+};
+
+const scrollingBody = ref(null);
+const getRowPair = (index) =>
+  [frozenBody.value.rows[index], scrollingBody.value.rows[index]];
+defineExpose({ getRowPair });
+</script>
+
+<style lang="scss">
+@import '../assets/scss/mixins';
+
+.table-freeze { @include clearfix; }
+
+.table-freeze-frozen {
+  float: left;
+  width: auto;
+}
+
+.table-freeze-scrolling-container {
+  // Placing the margin here rather than on the table so that the horizontal
+  // scrollbar appears immediately below the table, above the margin.
+  margin-bottom: $margin-bottom-table;
+  overflow-x: auto;
+
+  .table {
+    margin-bottom: 0;
+    width: auto;
+  }
+}
+
+.table-freeze-frozen.divider {
+  box-shadow: 3px 0 0 rgba(0, 0, 0, 0.04);
+  position: relative;
+  // Adding z-index so that the background color of the other table's thead does
+  // not overlay the box shadow.
+  z-index: 1;
+
+  th:last-child { border-right: $border-bottom-table-heading; }
+  td:last-child { border-right: $border-top-table-data; }
+}
+
+// Styles related to actions (buttons and links). If there are actions, they
+// should be in a .btn-group.
+.table-freeze-frozen {
+  // If the table has a .btn-group, it will probably be in the last column.
+  td:last-child { position: relative; }
+
+  .btn-group {
+    // Setting the background color in case an action is transparent.
+    background-color: $color-page-background;
+    left: -1000px;
+    position: absolute;
+    top: 4px;
+  }
+
+  .actions-trigger-hover tr:hover .btn-group,
+  .actions-trigger-hover .scrolling-hover .btn-group,
+  .actions-trigger-focus .btn-group:focus-within {
+    left: auto;
+    right: $padding-right-table-data;
+  }
+
+  .btn-group .btn {
+    [class^="icon-"] { margin-right: 0; }
+    .icon-check { margin-right: -1px; }
+    .icon-pencil { margin-left: 1px; }
+  }
+
+  .more-button {
+    span:first-child { margin-right: 13px; }
+
+    .icon-angle-right {
+      font-size: 18px;
+      position: absolute;
+      right: $hpadding-btn;
+      top: #{$padding-top-btn - 2px};
+    }
+  }
+}
+</style>
diff --git a/src/util/dom.js b/src/util/dom.js
index 1930b3730..a6f5b56d3 100644
--- a/src/util/dom.js
+++ b/src/util/dom.js
@@ -48,3 +48,13 @@ export const requiredLabel = (text, required) => {
   const star = required ? ' *' : '';
   return `${text}${star}`;
 };
+
+export const markRowsChanged = (trs) => {
+  for (const tr of trs) tr.dataset.markRowsChanged = 'true';
+  // Toggling data-mark-rows-changed from 'true' to 'false' will trigger a CSS
+  // transition: see app.scss. The CSS specifies the duration of the transition.
+  setTimeout(() => {
+    for (const tr of trs) tr.dataset.markRowsChanged = 'false';
+  });
+};
+export const markRowChanged = (tr) => { markRowsChanged([tr]); };
diff --git a/test/components/entity/list.spec.js b/test/components/entity/list.spec.js
index 86d844e0f..bee22359b 100644
--- a/test/components/entity/list.spec.js
+++ b/test/components/entity/list.spec.js
@@ -1,6 +1,8 @@
+import DateTime from '../../../src/components/date-time.vue';
 import EntityDataRow from '../../../src/components/entity/data-row.vue';
 import EntityList from '../../../src/components/entity/list.vue';
 import EntityMetadataRow from '../../../src/components/entity/metadata-row.vue';
+import EntityUpdate from '../../../src/components/entity/update.vue';
 
 import testData from '../../data';
 import { load } from '../../util/http';
@@ -61,4 +63,143 @@ describe('EntityList', () => {
         .respondWithData(testData.entityOData);
     });
   });
+
+  describe('update', () => {
+    it('toggles the Modal', () => {
+      testData.extendedEntities.createPast(1);
+      return load('/projects/1/datasets/trees/entities', { root: false })
+        .testModalToggles({
+          modal: EntityUpdate,
+          show: '.entity-metadata-row .update-button',
+          hide: ['.btn-link']
+        });
+    });
+
+    it('passes the correct entity to the modal', async () => {
+      testData.extendedEntities
+        .createPast(1, { uuid: 'e1' })
+        .createPast(1, { uuid: 'e2' });
+      const component = await load('/projects/1/datasets/trees/entities', {
+        root: false
+      });
+      const modal = component.getComponent(EntityUpdate);
+      should.not.exist(modal.props().entity);
+      const buttons = component.findAll('.entity-metadata-row .update-button');
+      buttons.length.should.equal(2);
+      await buttons[0].trigger('click');
+      modal.props().entity.uuid.should.equal('e2');
+      await modal.get('.btn-link').trigger('click');
+      await buttons[1].trigger('click');
+      modal.props().entity.uuid.should.equal('e1');
+    });
+
+    it('passes a REST-format entity to the modal', async () => {
+      testData.extendedDatasets.createPast(1, {
+        properties: [
+          { name: 'height' },
+          { name: 'circumference.cm', odataName: 'circumference_cm' }
+        ]
+      });
+      testData.extendedEntities.createPast(1, {
+        uuid: 'abc',
+        label: 'My Entity',
+        data: { height: '1', 'circumference.cm': '2' }
+      });
+      const component = await load('/projects/1/datasets/trees/entities', {
+        root: false
+      });
+      await component.get('.entity-metadata-row .update-button').trigger('click');
+      component.getComponent(EntityUpdate).props().entity.should.eql({
+        uuid: 'abc',
+        currentVersion: {
+          label: 'My Entity',
+          data: Object.assign(Object.create(null), {
+            height: '1',
+            'circumference.cm': '2'
+          })
+        }
+      });
+    });
+
+    it('does not show the modal during a refresh of the table', () => {
+      testData.extendedEntities.createPast(1);
+      return load('/projects/1/datasets/trees/entities', { root: false })
+        .complete()
+        .request(component =>
+          component.get('#entity-list-refresh-button').trigger('click'))
+        .beforeEachResponse(async (component) => {
+          await component.get('.entity-metadata-row .update-button').trigger('click');
+          component.getComponent(EntityUpdate).props().state.should.be.false();
+        })
+        .respondWithData(testData.entityOData)
+        .afterResponse(component => {
+          component.getComponent(EntityUpdate).props().state.should.be.false();
+        });
+    });
+
+    describe('after a successful response', () => {
+      const submit = () => {
+        testData.extendedDatasets.createPast(1, {
+          properties: [
+            { name: 'height' },
+            { name: 'circumference.cm', odataName: 'circumference_cm' }
+          ]
+        });
+        testData.extendedEntities.createPast(1, { uuid: 'e1' });
+        testData.extendedEntities.createPast(1, {
+          uuid: 'e2',
+          label: 'My Entity',
+          data: { height: '1', 'circumference.cm': '2' }
+        });
+        testData.extendedEntities.createPast(1, { uuid: 'e3' });
+        return load('/projects/1/datasets/trees/entities', { root: false })
+          .complete()
+          .request(async (component) => {
+            await component.get('.entity-metadata-row:nth-child(2) .update-button').trigger('click');
+            const form = component.get('#entity-update form');
+            const textareas = form.findAll('textarea');
+            textareas.length.should.equal(3);
+            await textareas[0].setValue('Updated Entity');
+            await textareas[1].setValue('3');
+            await textareas[2].setValue('4');
+            return form.trigger('submit');
+          })
+          .respondWithData(() => {
+            const { currentVersion } = testData.extendedEntities.get(1);
+            testData.extendedEntities.update(1, {
+              currentVersion: {
+                ...currentVersion,
+                label: 'Updated Entity',
+                data: { height: '3', 'circumference.cm': '4' }
+              }
+            });
+            return testData.standardEntities.get(1);
+          });
+      };
+
+      it('hides the modal', async () => {
+        const component = await submit();
+        component.getComponent(EntityUpdate).props().state.should.be.false();
+      });
+
+      it('shows a success alert', async () => {
+        const component = await submit();
+        component.should.alert('success');
+      });
+
+      it('updates the EntityDataRow', async () => {
+        const component = await submit();
+        const tds = component.findAll('.entity-data-row:nth-child(2) td');
+        tds.map(td => td.text()).should.eql(['3', '4', 'Updated Entity', 'e2']);
+      });
+
+      it('updates the EntityMetadataRow', async () => {
+        const component = await submit();
+        const td = component.get('.entity-metadata-row:nth-child(2) td:last-child');
+        should.exist(td.getComponent(DateTime).props().iso);
+        td.get('.updates').text().should.equal('1');
+        td.get('.update-button').attributes('aria-label').should.equal('Edit (1)');
+      });
+    });
+  });
 });
diff --git a/test/components/entity/metadata-row.spec.js b/test/components/entity/metadata-row.spec.js
index e218f8c53..f3bb3d672 100644
--- a/test/components/entity/metadata-row.spec.js
+++ b/test/components/entity/metadata-row.spec.js
@@ -3,6 +3,8 @@ import EntityMetadataRow from '../../../src/components/entity/metadata-row.vue';
 import DateTime from '../../../src/components/date-time.vue';
 
 import testData from '../../data';
+import { load } from '../../util/http';
+import { mockLogin } from '../../util/session';
 import { mockRouter } from '../../util/router';
 import { mount } from '../../util/lifecycle';
 
@@ -18,7 +20,7 @@ const mountComponent = (props = undefined) => {
     },
     props: mergedProps,
     container: {
-      router: mockRouter('/projects/1/datasets/trees/entities/e')
+      router: mockRouter('/projects/1/datasets/trees/entities')
     }
   });
 };
@@ -48,4 +50,53 @@ describe('EntityMetadataRow', () => {
     const { createdAt } = testData.extendedEntities.createPast(1).last();
     mountComponent().getComponent(DateTime).props().iso.should.equal(createdAt);
   });
+
+  describe('last updated date', () => {
+    it('shows the date', () => {
+      const { updatedAt } = testData.extendedEntities.createPast(1)
+        .update(-1, { updates: 1 });
+      should.exist(updatedAt);
+      const dateTimes = mountComponent().findAllComponents(DateTime);
+      dateTimes.length.should.equal(2);
+      dateTimes[1].classes('updated-at').should.be.true();
+      dateTimes[1].props().iso.should.equal(updatedAt);
+    });
+
+    it('does not show a date if there has not been an update', () => {
+      testData.extendedEntities.createPast(1);
+      mountComponent().get('.updated-at').text().should.equal('');
+    });
+  });
+
+  describe('update count', () => {
+    it('shows the count if there has been an update', () => {
+      testData.extendedEntities.createPast(1).update(-1, { updates: 1000 });
+      mountComponent().get('.updates').text().should.equal('1,000');
+    });
+
+    it('does not show the count if there has not been an update', () => {
+      testData.extendedEntities.createPast(1);
+      mountComponent().get('.updates').text().should.equal('');
+    });
+  });
+
+  it('renders the edit button correctly', async () => {
+    testData.extendedEntities.createPast(1).update(-1, { updates: 1000 });
+    const button = mountComponent({ canUpdate: true }).get('.update-button');
+    button.attributes('aria-label').should.equal('Edit (1,000)');
+    await button.should.have.tooltip('Edit (1,000)');
+  });
+
+  it('renders the More button correctly', async () => {
+    mockLogin();
+    testData.extendedDatasets.createPast(1, { name: 'á', entities: 1 });
+    testData.extendedEntities.createPast(1, { uuid: 'e' });
+    // Using load() rather than mountComponent() because RouterLinkStub doesn't
+    // use the <router-link> slot.
+    const app = await load('/projects/1/datasets/%C3%A1/entities');
+    const btn = app.get('.entity-metadata-row .more-button');
+    btn.element.tagName.should.equal('A');
+    btn.attributes('target').should.equal('_blank');
+    btn.attributes('href').should.equal('/projects/1/datasets/%C3%A1/entities/e');
+  });
 });
diff --git a/test/components/entity/table.spec.js b/test/components/entity/table.spec.js
index 9acf9403c..d8cc0c955 100644
--- a/test/components/entity/table.spec.js
+++ b/test/components/entity/table.spec.js
@@ -6,6 +6,7 @@ import useProject from '../../../src/request-data/project';
 import useEntities from '../../../src/request-data/entities';
 
 import testData from '../../data';
+import { mockLogin } from '../../util/session';
 import { mockRouter } from '../../util/router';
 import { mount } from '../../util/lifecycle';
 import { testRequestData } from '../../util/request-data';
@@ -19,7 +20,7 @@ const mountComponent = (props = undefined) => mount(EntityTable, {
     ...props
   },
   container: {
-    router: mockRouter('/projects/1/datasets/trees/entities/e'),
+    router: mockRouter('/projects/1/datasets/trees/entities'),
     requestData: testRequestData([useProject, useEntities], {
       project: testData.extendedProjects.last(),
       odataEntities: testData.entityOData()
@@ -31,12 +32,12 @@ const headers = (table) => table.findAll('th').map(th => th.text());
 
 describe('EntityTable', () => {
   describe('metadata headers', () => {
-    it('renders the correct headers for a form', () => {
+    it('renders the correct headers', () => {
       testData.extendedDatasets.createPast(1);
       testData.extendedEntities.createPast(1);
       const component = mountComponent();
-      const table = component.get('#entity-table-metadata');
-      headers(table).should.eql(['', 'Created by', 'Created at']);
+      const table = component.get('.table-freeze-frozen');
+      headers(table).should.eql(['', 'Created by', 'Created at', 'Last Updated / Actions']);
     });
   });
 
@@ -48,7 +49,7 @@ describe('EntityTable', () => {
       });
       testData.extendedEntities.createPast(1);
 
-      const table = mountComponent().get('#entity-table-data');
+      const table = mountComponent().get('.table-freeze-scrolling');
       headers(table).should.eql(['p1', 'p2', 'Label', 'Entity ID']);
     });
   });
@@ -69,4 +70,23 @@ describe('EntityTable', () => {
     const rows = component.findAllComponents(EntityMetadataRow);
     rows.map(row => row.props().rowNumber).should.eql([3, 2, 1]);
   });
+
+  describe('visibility of edit buttons', () => {
+    it('renders the button for a sitewide administrator', () => {
+      mockLogin();
+      testData.extendedEntities.createPast(1);
+      const row = mountComponent().getComponent(EntityMetadataRow);
+      row.props().canUpdate.should.be.true();
+      row.find('.update-button').exists().should.be.true();
+    });
+
+    it('does not render the button for a project viewer', () => {
+      mockLogin({ role: 'none' });
+      testData.extendedProjects.createPast(1, { role: 'viewer', datasets: 1 });
+      testData.extendedEntities.createPast(1);
+      const row = mountComponent().getComponent(EntityMetadataRow);
+      row.props().canUpdate.should.be.false();
+      row.find('.update-button').exists().should.be.false();
+    });
+  });
 });
diff --git a/test/components/entity/update.spec.js b/test/components/entity/update.spec.js
index 2ac92d607..f4e422fda 100644
--- a/test/components/entity/update.spec.js
+++ b/test/components/entity/update.spec.js
@@ -83,6 +83,7 @@ describe('EntityUpdate', () => {
     const textareas = modal.findAll('textarea');
     textareas.map(({ element }) => element.style.height).should.eql(['', '']);
     await modal.setProps({ state: true });
+    await modal.vm.$nextTick();
     const heights = textareas.map(({ element }) => element.style.height);
     heights[0].should.not.equal('');
     heights[1].should.not.equal('');
diff --git a/test/components/entity/update/row.spec.js b/test/components/entity/update/row.spec.js
index 01c675aed..1c5609e87 100644
--- a/test/components/entity/update/row.spec.js
+++ b/test/components/entity/update/row.spec.js
@@ -137,6 +137,7 @@ describe('EntityUpdateRow', () => {
       attachTo: document.body
     });
     await modal.vm.$nextTick();
+    await modal.vm.$nextTick();
     const minHeights = modal.findAllComponents(TextareaAutosize)
       .map(textarea => textarea.props().minHeight);
     should.exist(minHeights[0]);
diff --git a/test/components/submission/metadata-row.spec.js b/test/components/submission/metadata-row.spec.js
index d88c4e5f5..658e38bbc 100644
--- a/test/components/submission/metadata-row.spec.js
+++ b/test/components/submission/metadata-row.spec.js
@@ -1,9 +1,7 @@
-import sinon from 'sinon';
 import { RouterLinkStub } from '@vue/test-utils';
 
 import DateTime from '../../../src/components/date-time.vue';
 import SubmissionMetadataRow from '../../../src/components/submission/metadata-row.vue';
-import SubmissionTable from '../../../src/components/submission/table.vue';
 import SubmissionUpdateReviewState from '../../../src/components/submission/update-review-state.vue';
 
 import testData from '../../data';
@@ -133,7 +131,7 @@ describe('SubmissionMetadataRow', () => {
 
     it('does not show the count if there has not been an edit', () => {
       testData.extendedSubmissions.createPast(1, { edits: 0 });
-      mountComponent().find('.edits').exists().should.be.false();
+      mountComponent().get('.edits').text().should.equal('');
     });
   });
 
@@ -190,18 +188,6 @@ describe('SubmissionMetadataRow', () => {
         submission.__id.should.equal('foo');
         submission.__system.submitterId.should.equal('1');
       });
-
-      it('calls SubmissionTable.methods.afterReview()', () => {
-        const afterReview = sinon.fake();
-        return submit()
-          .beforeAnyResponse(component => {
-            const table = component.getComponent(SubmissionTable);
-            sinon.replace(table.vm, 'afterReview', afterReview);
-          })
-          .afterResponse(() => {
-            afterReview.called.should.be.true();
-          });
-      });
     });
   });
 
diff --git a/test/components/submission/table.spec.js b/test/components/submission/table.spec.js
index 487d8a418..2279e0ac5 100644
--- a/test/components/submission/table.spec.js
+++ b/test/components/submission/table.spec.js
@@ -49,7 +49,7 @@ describe('SubmissionTable', () => {
       const component = mountComponent({
         props: { draft: false }
       });
-      const table = component.get('#submission-table-metadata');
+      const table = component.get('.table-freeze-frozen');
       headers(table).should.eql(['', 'Submitted by', 'Submitted at', 'State and actions']);
     });
 
@@ -59,7 +59,7 @@ describe('SubmissionTable', () => {
       const component = mountComponent({
         props: { draft: true }
       });
-      const table = component.get('#submission-table-metadata');
+      const table = component.get('.table-freeze-frozen');
       headers(table).should.eql(['', 'Submitted at']);
     });
   });
@@ -71,7 +71,7 @@ describe('SubmissionTable', () => {
         submissions: 1
       });
       testData.extendedSubmissions.createPast(1);
-      const table = mountComponent().get('#submission-table-data');
+      const table = mountComponent().get('.table-freeze-scrolling');
       headers(table).should.eql(['s1', 's2', 'Instance ID']);
     });
 
@@ -83,7 +83,7 @@ describe('SubmissionTable', () => {
       testData.extendedForms.createPast(1, { fields, submissions: 1 });
       testData.extendedSubmissions.createPast(1);
       const component = mountComponent();
-      const table = component.get('#submission-table-data');
+      const table = component.get('.table-freeze-scrolling');
       headers(table).should.eql(['g-s', 'Instance ID']);
     });
   });
@@ -132,53 +132,4 @@ describe('SubmissionTable', () => {
       row.props().canUpdate.should.be.false();
     });
   });
-
-  describe('visibility of actions', () => {
-    it('shows actions if user hovers over a SubmissionDataRow', async () => {
-      testData.extendedForms.createPast(1, { submissions: 2 });
-      testData.extendedSubmissions.createPast(2);
-      const component = mountComponent();
-      await component.getComponent(SubmissionDataRow).trigger('mouseover');
-      const metadataRows = component.findAllComponents(SubmissionMetadataRow);
-      metadataRows[0].classes('data-hover').should.be.true();
-      metadataRows[1].classes('data-hover').should.be.false();
-    });
-
-    it('toggles actions if user hovers over a new SubmissionDataRow', async () => {
-      testData.extendedForms.createPast(1, { submissions: 2 });
-      testData.extendedSubmissions.createPast(2);
-      const component = mountComponent();
-      const dataRows = component.findAllComponents(SubmissionDataRow);
-      await dataRows[0].trigger('mouseover');
-      await dataRows[1].trigger('mouseover');
-      const metadataRows = component.findAllComponents(SubmissionMetadataRow);
-      metadataRows[0].classes('data-hover').should.be.false();
-      metadataRows[1].classes('data-hover').should.be.true();
-    });
-
-    it('hides the actions if the cursor leaves the table', async () => {
-      testData.extendedForms.createPast(1, { submissions: 2 });
-      testData.extendedSubmissions.createPast(2);
-      const component = mountComponent();
-      await component.getComponent(SubmissionDataRow).trigger('mouseover');
-      await component.get('#submission-table-data tbody').trigger('mouseleave');
-      const metadataRow = component.getComponent(SubmissionMetadataRow);
-      metadataRow.classes('data-hover').should.be.false();
-    });
-
-    it('adds a class for the actions trigger', async () => {
-      testData.extendedSubmissions.createPast(1);
-      const component = mountComponent({ attachTo: document.body });
-      const tbody = component.get('#submission-table-metadata tbody');
-      tbody.classes('submission-table-actions-trigger-hover').should.be.true();
-      const btn = tbody.findAll('.btn');
-      await btn[0].trigger('focusin');
-      tbody.classes('submission-table-actions-trigger-focus').should.be.true();
-      await component.getComponent(SubmissionMetadataRow).trigger('mousemove');
-      tbody.classes('submission-table-actions-trigger-hover').should.be.true();
-      await btn[1].trigger('focusin');
-      await component.getComponent(SubmissionDataRow).trigger('mousemove');
-      tbody.classes('submission-table-actions-trigger-hover').should.be.true();
-    });
-  });
 });
diff --git a/test/components/table-freeze.spec.js b/test/components/table-freeze.spec.js
new file mode 100644
index 000000000..ad31ac442
--- /dev/null
+++ b/test/components/table-freeze.spec.js
@@ -0,0 +1,73 @@
+import TableFreeze from '../../src/components/table-freeze.vue';
+
+import { mergeMountOptions, mount } from '../util/lifecycle';
+
+const mountComponent = (options) =>
+  mount(TableFreeze, mergeMountOptions(options, {
+    props: {
+      data: [{ id: 1, name: 'foo' }, { id: 1, name: 'bar' }],
+      keyProp: 'id'
+    },
+    slots: {
+      'head-frozen': '<th>id</th>',
+      'head-scrolling': '<th>name</th>',
+      'data-frozen': '<tr><td>{{ params.id }}</td></tr>',
+      'data-scrolling': '<tr><td>{{ params.name }}</td></tr>'
+    }
+  }));
+
+describe('TableFreeze', () => {
+  describe('visibility of actions', () => {
+    const slots = {
+      'head-frozen': '<th>Actions</th>',
+      'data-frozen': `<tr>
+        <td>
+          Hover or focus to see actions
+          <div class="btn-group">
+            <button type="button" class="btn btn-default">Some button</button>
+          </div>
+        </td>
+      </tr>`
+    };
+
+    it('shows actions if user hovers over a scrolling row', async () => {
+      const component = mountComponent({ slots });
+      await component.get('.table-freeze-scrolling td').trigger('mouseover');
+      const frozenRows = component.findAll('.table-freeze-frozen tbody tr');
+      frozenRows[0].classes('scrolling-hover').should.be.true();
+      frozenRows[1].classes('scrolling-hover').should.be.false();
+    });
+
+    it('toggles actions if user hovers over a new scrolling row', async () => {
+      const component = mountComponent({ slots });
+      const scrollingRows = component.findAll('.table-freeze-scrolling tbody tr');
+      await scrollingRows[0].trigger('mouseover');
+      await scrollingRows[1].trigger('mouseover');
+      const frozenRows = component.findAll('.table-freeze-frozen tbody tr');
+      frozenRows[0].classes('scrolling-hover').should.be.false();
+      frozenRows[1].classes('scrolling-hover').should.be.true();
+    });
+
+    it('hides the actions if the cursor leaves the table', async () => {
+      const component = mountComponent({ slots });
+      await component.get('.table-freeze-scrolling td').trigger('mouseover');
+      await component.get('.table-freeze-scrolling tbody').trigger('mouseleave');
+      const frozenRow = component.get('.table-freeze-frozen tbody tr');
+      frozenRow.classes('scrolling-hover').should.be.false();
+    });
+
+    it('adds a class for the actions trigger', async () => {
+      const component = mountComponent({ slots, attachTo: document.body });
+      const tbody = component.get('.table-freeze-frozen tbody');
+      tbody.classes('actions-trigger-hover').should.be.true();
+      const btn = tbody.findAll('.btn');
+      await btn[0].trigger('focusin');
+      tbody.classes('actions-trigger-focus').should.be.true();
+      await tbody.get('td').trigger('mousemove');
+      tbody.classes('actions-trigger-hover').should.be.true();
+      await btn[1].trigger('focusin');
+      await component.get('.table-freeze-scrolling td').trigger('mousemove');
+      tbody.classes('actions-trigger-hover').should.be.true();
+    });
+  });
+});
diff --git a/test/data/entities.js b/test/data/entities.js
index 11344df8e..097ba0de8 100644
--- a/test/data/entities.js
+++ b/test/data/entities.js
@@ -23,6 +23,8 @@ export const extendedEntities = dataStore({
 
     uuid = faker.random.uuid(),
     label = faker.random.word(),
+    updates = 0,
+    updatedAt = null,
     ...options
   }) => {
     if (extendedDatasets.size === 0) {
@@ -43,10 +45,11 @@ export const extendedEntities = dataStore({
     return {
       uuid,
       currentVersion: { label, data, current: true },
+      updates,
       creatorId: creator.id,
       creator: toActor(creator),
       createdAt,
-      updatedAt: null
+      updatedAt
     };
   },
   sort: comparator((entity1, entity2) =>
@@ -69,6 +72,7 @@ export const entityOData = (top = 250, skip = 0) => {
         label: entity.currentVersion.label,
         __id: entity.uuid,
         __system: {
+          updates: entity.updates,
           creatorId: entity.creator.id.toString(),
           creatorName: entity.creator.displayName,
           createdAt: entity.createdAt,
diff --git a/test/unit/dom.js b/test/unit/dom.js
deleted file mode 100644
index 07fd618df..000000000
--- a/test/unit/dom.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { px, requiredLabel, styleBox } from '../../src/util/dom';
-
-describe('util/dom', () => {
-  describe('px()', () => {
-    it("appends 'px' to a number", () => {
-      px(1).should.equal('1px');
-    });
-  });
-
-  describe('styleBox()', () => {
-    it('converts px styles to numbers', () => {
-      const box = styleBox({
-        paddingTop: '1px',
-        borderRightWidth: '2px',
-        marginBottom: '3.14px'
-      });
-      box.paddingTop.should.equal(1);
-      box.borderRight.should.equal(2);
-      box.marginBottom.should.equal(3.14);
-    });
-
-    it('returns 0 for an empty style property', () => {
-      styleBox({ paddingTop: '' }).paddingTop.should.equal(0);
-    });
-  });
-
-  describe('requiredLabel()', () => {
-    it('appends * to the text if required is true', () => {
-      requiredLabel('My Label', true).should.equal('My Label *');
-    });
-
-    it('does not append * if required is false', () => {
-      requiredLabel('My Label', false).should.equal('My Label');
-    });
-  });
-});
diff --git a/test/unit/dom.spec.js b/test/unit/dom.spec.js
new file mode 100644
index 000000000..1a1bf5b1f
--- /dev/null
+++ b/test/unit/dom.spec.js
@@ -0,0 +1,74 @@
+import { markRowChanged, markRowsChanged, px, requiredLabel, styleBox } from '../../src/util/dom';
+
+import { mount } from '../util/lifecycle';
+import { wait } from '../util/util';
+
+describe('util/dom', () => {
+  describe('px()', () => {
+    it("appends 'px' to a number", () => {
+      px(1).should.equal('1px');
+    });
+  });
+
+  describe('styleBox()', () => {
+    it('converts px styles to numbers', () => {
+      const box = styleBox({
+        paddingTop: '1px',
+        borderRightWidth: '2px',
+        marginBottom: '3.14px'
+      });
+      box.paddingTop.should.equal(1);
+      box.borderRight.should.equal(2);
+      box.marginBottom.should.equal(3.14);
+    });
+
+    it('returns 0 for an empty style property', () => {
+      styleBox({ paddingTop: '' }).paddingTop.should.equal(0);
+    });
+  });
+
+  describe('requiredLabel()', () => {
+    it('appends * to the text if required is true', () => {
+      requiredLabel('My Label', true).should.equal('My Label *');
+    });
+
+    it('does not append * if required is false', () => {
+      requiredLabel('My Label', false).should.equal('My Label');
+    });
+  });
+
+  describe('markRowChanged(), markRowsChanged()', () => {
+    it('toggles data-mark-rows-changed for a single row', async () => {
+      const table = mount({
+        template: `<table>
+          <tbody>
+            <tr><td>foo</td></tr>
+          </tbody>
+        </table>`
+      });
+      const row = table.get('tr').element;
+      markRowChanged(row);
+      row.dataset.markRowsChanged.should.equal('true');
+      await wait();
+      row.dataset.markRowsChanged.should.equal('false');
+    });
+
+    it('toggles data-mark-rows-changed for multiple rows', async () => {
+      const table = mount({
+        template: `<table>
+          <tbody>
+            <tr><td>foo</td></tr>
+            <tr><td>bar</td></tr>
+          </tbody>
+        </table>`
+      });
+      const rows = table.findAll('tr').map(row => row.element);
+      markRowsChanged(rows);
+      rows[0].dataset.markRowsChanged.should.equal('true');
+      rows[1].dataset.markRowsChanged.should.equal('true');
+      await wait();
+      rows[0].dataset.markRowsChanged.should.equal('false');
+      rows[1].dataset.markRowsChanged.should.equal('false');
+    });
+  });
+});
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index e133d2b87..3f8576237 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -1531,6 +1531,14 @@
         }
       }
     },
+    "EntityTable": {
+      "header": {
+        "updatedAtAndActions": {
+          "string": "Last Updated / Actions",
+          "developer_comment": "This is the text of a column header of a table of Entities. The column shows when each Entity was last updated, as well as actions that can be taken on the Entity."
+        }
+      }
+    },
     "EntityUpdate": {
       "title": {
         "string": "Update {label}",