diff --git a/pydatalab/pydatalab/routes/v0_1/collections.py b/pydatalab/pydatalab/routes/v0_1/collections.py
index 37d26f0f2..d0ab54d26 100644
--- a/pydatalab/pydatalab/routes/v0_1/collections.py
+++ b/pydatalab/pydatalab/routes/v0_1/collections.py
@@ -359,6 +359,8 @@ def add_items_to_collection(collection_id):
                     "relation": None,
                     "type": "collections",
                     "immutable_id": ObjectId(collection["_id"]),
+                    "item_id": None,
+                    "refcode": None,
                 }
             }
         },
diff --git a/pydatalab/pydatalab/routes/v0_1/items.py b/pydatalab/pydatalab/routes/v0_1/items.py
index ad1890bdc..81d1e8983 100644
--- a/pydatalab/pydatalab/routes/v0_1/items.py
+++ b/pydatalab/pydatalab/routes/v0_1/items.py
@@ -129,6 +129,7 @@ def get_starting_materials():
                         "date": 1,
                         "chemform": 1,
                         "name": 1,
+                        "type": 1,
                         "chemical_purity": 1,
                         "supplier": 1,
                         "location": 1,
@@ -300,7 +301,8 @@ def search_items():
     nresults = request.args.get("nresults", default=100, type=int)
     types = request.args.get("types", default=None)
     if isinstance(types, str):
-        types = types.split(",")  # should figure out how to parse as list automatically
+        # should figure out how to parse as list automatically
+        types = types.split(",")
 
     match_obj = {
         "$text": {"$search": query},
@@ -428,10 +430,10 @@ def _create_sample(
         raise RuntimeError("Invalid type")
     model = ITEM_MODELS[type_]
 
-    ## the following code was used previously to explicitely check schema properties.
-    ## it doesn't seem to be necessary now, with extra = "ignore" turned on in the pydantic models,
-    ## and it breaks in instances where the models use aliases (e.g., in the starting_material model)
-    ## so we are taking it out now, but leaving this comment in case it needs to be reverted.
+    # the following code was used previously to explicitely check schema properties.
+    # it doesn't seem to be necessary now, with extra = "ignore" turned on in the pydantic models,
+    # and it breaks in instances where the models use aliases (e.g., in the starting_material model)
+    # so we are taking it out now, but leaving this comment in case it needs to be reverted.
     # schema = model.schema()
     # new_sample = {k: sample_dict[k] for k in schema["properties"] if k in sample_dict}
     new_sample = sample_dict
diff --git a/webapp/cypress.config.ts b/webapp/cypress.config.ts
index 1c8625e90..f79ca653b 100644
--- a/webapp/cypress.config.ts
+++ b/webapp/cypress.config.ts
@@ -6,6 +6,7 @@ export default defineConfig({
     baseUrl: "http://localhost:8080",
     apiUrl: "http://localhost:5001",
     experimentalMemoryManagement: true,
+    numTestsKeptInMemory: 0,
     defaultCommandTimeout: 10000,
   },
   component: {
diff --git a/webapp/cypress/e2e/batchSampleFeature.cy.js b/webapp/cypress/e2e/batchSampleFeature.cy.js
index c01802dc1..2a4d7cc27 100644
--- a/webapp/cypress/e2e/batchSampleFeature.cy.js
+++ b/webapp/cypress/e2e/batchSampleFeature.cy.js
@@ -103,9 +103,7 @@ describe("Batch sample creation", () => {
     cy.verifySample("testB", "this sample has a name");
     cy.verifySample("testC");
 
-    cy.deleteSample("testA");
-    cy.deleteSample("testB");
-    cy.deleteSample("testC");
+    cy.deleteSamples(["testA", "testB", "testC"]);
   });
 
   it("adds two valid samples", () => {
@@ -154,6 +152,7 @@ describe("Batch sample creation", () => {
   });
 
   it("modifies some data in the first sample", () => {
+    cy.get('[data-testid="search-input"]').type("baseA");
     cy.findByText("baseA").click();
     cy.findByLabelText("Description").type("this is a description of baseA.");
     cy.findByText("Add a block").click();
@@ -166,6 +165,7 @@ describe("Batch sample creation", () => {
   });
 
   it("modifies some data in the second sample", () => {
+    cy.get('[data-testid="search-input"]').type("baseB");
     cy.findByText("baseB").click();
     cy.findByLabelText("Description").type("this is a description of baseB.");
     cy.findByText("Add a block").click();
@@ -437,9 +437,7 @@ describe("Batch sample creation", () => {
     cy.verifySample("test_2", "testing 1,2");
     cy.verifySample("test_3", "testing 1,2,3");
 
-    cy.deleteSample("test_1");
-    cy.deleteSample("test_2");
-    cy.deleteSample("test_3");
+    cy.deleteSamples(["test_1", "test_2", "test_3"]);
   });
 
   it("uses the template id, name, and date", () => {
@@ -462,9 +460,7 @@ describe("Batch sample creation", () => {
     cy.verifySample("test_6", "this is the test sample #6", "1980-02-01T05:35");
     cy.verifySample("test_7", "this is the test sample #7", "1980-02-01T05:35");
 
-    cy.deleteSample("test_5");
-    cy.deleteSample("test_6");
-    cy.deleteSample("test_7");
+    cy.deleteSamples(["test_5", "test_6", "test_7"]);
   });
 
   it("uses the template id, name, date, copyFrom, and components", () => {
@@ -522,6 +518,7 @@ describe("Batch sample creation", () => {
     cy.get("[data-testid=batch-modal-container]").contains("Close").click();
 
     function checkCreatedSample(item_id) {
+      cy.get('[data-testid="search-input"]').type(item_id);
       cy.contains(item_id).click();
       cy.contains("this is a description of baseB.");
       cy.get("#synthesis-information table").contains("component3");
@@ -652,8 +649,7 @@ describe("Batch sample creation", () => {
     cy.verifySample("test2", "name2");
     checkCreatedSample("test1");
     checkCreatedSample("test2");
-    cy.deleteSample("test1");
-    cy.deleteSample("test2");
+    cy.deleteSamples(["test1", "test2"]);
   });
 
   it("checks errors on the row", () => {
@@ -832,6 +828,7 @@ describe("Batch cell creation", () => {
     cy.verifySample("cell_3", "this is the test cell #3", "1980-02-01T23:59");
 
     function checkCreatedCell(item_id) {
+      cy.get('[data-testid="search-input"]').type(item_id);
       cy.contains(item_id).click();
       cy.get("#pos-electrode-table").contains("comp1");
       cy.get("#pos-electrode-table").contains("tagged");
diff --git a/webapp/cypress/e2e/editPage.cy.js b/webapp/cypress/e2e/editPage.cy.js
index 404c2a47f..2b08f3f1f 100644
--- a/webapp/cypress/e2e/editPage.cy.js
+++ b/webapp/cypress/e2e/editPage.cy.js
@@ -35,7 +35,7 @@ describe("Edit Page", () => {
 
   it("Adds a valid sample", () => {
     cy.createSample("editable_sample", "This is a sample name", "1990-01-07T00:00");
-    cy.get("tr>td").eq(7).contains(0); // 0 blocks are present
+    cy.get("tr>td").eq(8).contains(0); // 0 blocks are present
   });
 
   it("Add some more samples, to use as components", () => {
@@ -44,6 +44,7 @@ describe("Edit Page", () => {
   });
 
   it("Checks editing the sample edit page", () => {
+    cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample").click();
     cy.findByLabelText("Name").should("have.value", "This is a sample name");
     cy.findByLabelText("Chemical formula").type("NaCoO2", { force: true });
@@ -51,12 +52,13 @@ describe("Edit Page", () => {
     cy.findByText("Unsaved changes");
     cy.get(".fa-save").click();
     cy.contains("Unsaved changes").should("not.exist");
-    cy.contains("Home").click();
+    cy.findByText("Home").click();
 
+    cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample");
     cy.findByText("This is a sample name");
     cy.findByText("1990-01-07");
-    cy.get("tbody tr:nth-of-type(3)").contains("NaCoO2"); // sorta check the formula
+    cy.findByText("NaCoO2"); // sorta check the formula
   });
 
   it("adds a chemical formula to component1", () => {
@@ -69,6 +71,7 @@ describe("Edit Page", () => {
   });
 
   it("adds some synthesis information", () => {
+    cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample").click();
     cy.get("#synthesis-information .vs__search").first().type("component1");
     cy.get(".vs__dropdown-menu").contains(".badge", "component1").click();
@@ -122,6 +125,7 @@ describe("Edit Page", () => {
   });
 
   it("deletes synthesis components and re-adds them", () => {
+    cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample").click();
     cy.get("#synthesis-information tbody > tr:nth-of-type(1) .close").click();
     cy.get("#synthesis-information tbody > tr").should("have.length", 2);
@@ -160,6 +164,7 @@ describe("Edit Page", () => {
   });
 
   it("tries to add a non-numeric value into quantity", () => {
+    cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample").click();
     cy.get("#synthesis-information tbody > tr:nth-of-type(1) td:nth-of-type(2) input").type(
       "100.001",
@@ -196,6 +201,7 @@ describe("Edit Page", () => {
   });
 
   it("Add some blocks to the sample and checks unsaved warning behavior", () => {
+    cy.get('[data-testid="search-input"]').type("editable_sample");
     cy.findByText("editable_sample").click();
     cy.findByLabelText("Name").should("have.value", "This is a sample name");
 
@@ -237,6 +243,7 @@ describe("Edit Page", () => {
     cy.contains("Unsaved changes").should("not.exist");
 
     cy.findByText("Home").click();
-    cy.get("[data-testid=sample-table] tr:nth-of-type(3) > td:nth-of-type(8)").contains(2); // 2 blocks are present
+    cy.get('[data-testid="search-input"]').type("editable_sample");
+    cy.get("[data-testid=sample-table] tr:nth-of-type(1) > td:nth-of-type(9)").contains(2); // 2 blocks are present
   });
 });
diff --git a/webapp/cypress/e2e/equipment.cy.js b/webapp/cypress/e2e/equipment.cy.js
index d74ec3ca5..6a38c1752 100644
--- a/webapp/cypress/e2e/equipment.cy.js
+++ b/webapp/cypress/e2e/equipment.cy.js
@@ -73,7 +73,10 @@ describe("Equipment table page", () => {
 
   it("Attempts to Add an item with the same name", () => {
     cy.findByText("Add an item").click();
-    cy.findByLabelText("ID:").type("test_e3");
+    cy.get('[data-testid="create-equipment-form"]').within(() => {
+      cy.findByText("Add equipment").should("exist");
+      cy.findByLabelText("ID:").type("test_e3");
+    });
 
     cy.contains("already in use").should("exist");
     cy.get(".form-error a").contains("test_e3");
@@ -82,7 +85,19 @@ describe("Equipment table page", () => {
   });
 
   it("Deletes an item", function () {
-    cy.get("tr#test_e2 button.close").click();
+    cy.get("[data-testid=equipment-table]")
+      .contains(new RegExp("^" + "test_e2" + "$", "g"))
+      .parents("tr")
+      .find("input[type='checkbox']")
+      .click();
+
+    cy.get("[data-testid=delete-selected-button]").click();
+
+    cy.on("window:confirm", (text) => {
+      expect(text).to.contains("test_e2");
+      return true;
+    });
+
     cy.contains("test_e2").should("not.exist");
 
     cy.request({ url: `${API_URL}/get-item-data/test_e2`, failOnStatusCode: false }).then(
@@ -113,7 +128,7 @@ describe("Equipment table page", () => {
 
 describe("Equipment edit page", () => {
   beforeEach(() => {
-    cy.visit("/equipment/");
+    cy.visit("/equipment");
   });
 
   it("Checks the equipment edit page", () => {
diff --git a/webapp/cypress/support/commands.js b/webapp/cypress/support/commands.js
index 4de1d85ab..2aaf92865 100644
--- a/webapp/cypress/support/commands.js
+++ b/webapp/cypress/support/commands.js
@@ -68,17 +68,28 @@ Cypress.Commands.add("verifySample", (item_id, name = null, date = null) => {
     });
 });
 
-Cypress.Commands.add("deleteSample", (item_id) => {
-  cy.log("search for and delete: " + item_id);
-  cy.get("[data-testid=sample-table]")
-    .contains(new RegExp("^" + item_id + "$", "g"))
-    .parents("tr")
-    .find("button.close")
-    .click();
+Cypress.Commands.add("deleteSamples", (items_id) => {
+  cy.log("search for and delete: " + items_id);
+  items_id.forEach((item_id) => {
+    cy.get("[data-testid=sample-table]")
+      .contains(new RegExp("^" + item_id + "$", "g"))
+      .parents("tr")
+      .find("input[type='checkbox']")
+      .click();
+  });
 
-  cy.get("[data-testid=sample-table]")
-    .contains(new RegExp("^" + item_id + "$", "g"))
-    .should("not.exist");
+  cy.get("[data-testid=delete-selected-button]").click();
+
+  cy.on("window:confirm", (text) => {
+    expect(text).to.contains(items_id);
+    return true;
+  });
+
+  items_id.forEach((item_id) => {
+    cy.get("[data-testid=sample-table]")
+      .contains(new RegExp("^" + item_id + "$", "g"))
+      .should("not.exist");
+  });
 });
 
 Cypress.Commands.add("deleteSampleViaAPI", (item_id) => {
@@ -103,6 +114,7 @@ Cypress.Commands.add("searchAndSelectItem", (search_text, selector, clickPlus =
 
 Cypress.Commands.add("createEquipment", (item_id, name = null, date = null) => {
   cy.findByText("Add an item").click();
+
   cy.get('[data-testid="create-equipment-form"]').within(() => {
     cy.findByText("Add equipment").should("exist");
     cy.findByLabelText("ID:").type(item_id);
diff --git a/webapp/src/components/AddToCollectionModal.vue b/webapp/src/components/AddToCollectionModal.vue
index 874cedb61..17ab1c56e 100644
--- a/webapp/src/components/AddToCollectionModal.vue
+++ b/webapp/src/components/AddToCollectionModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <form class="modal-enclosure" data-testid="create-equipment-form" @submit.prevent="submitForm">
+  <form class="modal-enclosure" data-testid="add-to-collection-form" @submit.prevent="submitForm">
     <Modal :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)">
       <template #header> Add to collections </template>
       <template #body>
@@ -38,7 +38,12 @@ import Modal from "@/components/Modal.vue";
 import FormattedItemName from "@/components/FormattedItemName";
 import CollectionSelect from "@/components/CollectionSelect.vue";
 
-import { addItemsToCollection } from "@/server_fetch_utils";
+import {
+  addItemsToCollection,
+  getSampleList,
+  getStartingMaterialList,
+  getEquipmentList,
+} from "@/server_fetch_utils";
 
 export default {
   name: "AddToCollectionsModal",
@@ -70,7 +75,13 @@ export default {
           await addItemsToCollection(collectionId, refcodes);
         }
         this.$emit("itemsUpdated");
-
+        if (this.itemsSelected.some((item) => item.type === "samples")) {
+          getSampleList();
+        } else if (this.itemsSelected.some((item) => item.type === "startingMaterials")) {
+          getStartingMaterialList();
+        } else if (this.itemsSelected.some((item) => item.type === "equipment")) {
+          getEquipmentList();
+        }
         console.log("Items added successfully.");
         this.$emit("update:modelValue", false);
       } catch (error) {
diff --git a/webapp/src/components/CollectionInformation.vue b/webapp/src/components/CollectionInformation.vue
index f12dacbdd..04660715d 100644
--- a/webapp/src/components/CollectionInformation.vue
+++ b/webapp/src/components/CollectionInformation.vue
@@ -31,13 +31,11 @@
         <CollectionRelationshipVisualization :collection_id="collection_id" />
       </div>
     </div>
-    <FancyCollectionSampleTable :collection_id="collection_id" />
   </div>
 </template>
 
 <script>
 import { createComputedSetterForCollectionField } from "@/field_utils.js";
-import FancyCollectionSampleTable from "@/components/FancyCollectionSampleTable";
 import TinyMceInline from "@/components/TinyMceInline";
 import Creators from "@/components/Creators";
 import CollectionRelationshipVisualization from "@/components/CollectionRelationshipVisualization";
@@ -45,7 +43,6 @@ import CollectionRelationshipVisualization from "@/components/CollectionRelation
 export default {
   components: {
     TinyMceInline,
-    FancyCollectionSampleTable,
     Creators,
     CollectionRelationshipVisualization,
   },
diff --git a/webapp/src/components/CollectionSelect.vue b/webapp/src/components/CollectionSelect.vue
index 2b5b9a318..2e3341d7e 100644
--- a/webapp/src/components/CollectionSelect.vue
+++ b/webapp/src/components/CollectionSelect.vue
@@ -2,23 +2,27 @@
   <vSelect
     ref="selectComponent"
     v-model="value"
-    :options="collections"
+    :options="collectionOrNewCollection"
     multiple
     label="collection_id"
     :filterable="false"
     @search="debouncedAsyncSearch"
   >
     <template #no-options="{ searching }">
-      <span v-if="searching"> Sorry, no matches found. </span>
+      <span v-if="searching"> Collection already selected </span>
       <span v-else class="empty-search"> Search for a collection... </span>
     </template>
     <template #option="{ collection_id, title }">
       <FormattedCollectionName
+        v-if="collection_id"
         :collection_id="collection_id"
         :title="title"
         enable-modified-click
         :max-length="formattedItemNameMaxLength"
       />
+      <div v-else @click="handleCreateNewCollection">
+        {{ title }}
+      </div>
     </template>
     <template #selected-option="{ collection_id }">
       <FormattedCollectionName
@@ -33,7 +37,7 @@
 <script>
 import vSelect from "vue-select";
 import FormattedCollectionName from "@/components/FormattedCollectionName.vue";
-import { searchCollections } from "@/server_fetch_utils.js";
+import { searchCollections, createNewCollection } from "@/server_fetch_utils.js";
 import { debounceTime } from "@/resources.js";
 
 export default {
@@ -43,8 +47,8 @@ export default {
   },
   props: {
     modelValue: {
-      type: String,
-      default: "",
+      type: Array,
+      default: () => [],
     },
     formattedItemNameMaxLength: {
       type: Number,
@@ -57,6 +61,7 @@ export default {
       debounceTimeout: null,
       collections: [],
       isSearchFetchError: false,
+      searchQuery: "",
     };
   },
   computed: {
@@ -69,12 +74,29 @@ export default {
         this.$emit("update:modelValue", newValue);
       },
     },
+    collectionOrNewCollection() {
+      if (
+        this.searchQuery &&
+        !this.collections.some((item) => item.collection_id === this.searchQuery) &&
+        !this.value.some((item) => item.collection_id === this.searchQuery)
+      ) {
+        return [
+          ...this.collections,
+          {
+            collection_id: null,
+            title: `Create new collection: "${this.searchQuery}"`,
+          },
+        ];
+      }
+      return this.collections;
+    },
   },
   methods: {
     async debouncedAsyncSearch(query, loading) {
       // if (query == "") {
       //   return;
       // }
+      this.searchQuery = query;
       loading(true);
       clearTimeout(this.debounceTimeout); // reset the timer
       // start the timer
@@ -97,6 +119,23 @@ export default {
         loading(false);
       }, debounceTime);
     },
+    async handleCreateNewCollection() {
+      try {
+        let collection_id = this.searchQuery;
+        const newCollection = await createNewCollection(this.searchQuery);
+        if (newCollection) {
+          this.value = [
+            ...this.value.filter((item) => item.collection_id !== null),
+            {
+              collection_id: collection_id,
+            },
+          ];
+        }
+      } catch (error) {
+        console.error("Error:", error);
+        alert("An error occurred while creating the collection. Please try again.");
+      }
+    },
   },
 };
 </script>
diff --git a/webapp/src/components/CollectionTable.vue b/webapp/src/components/CollectionTable.vue
index 6a57eb5df..aa588e2db 100644
--- a/webapp/src/components/CollectionTable.vue
+++ b/webapp/src/components/CollectionTable.vue
@@ -1,106 +1,42 @@
 <template>
-  <div v-if="isFetchError" class="alert alert-danger">
-    Server Error. Collection list not retreived.
-  </div>
-  <table class="table table-hover table-sm" data-testid="collection-table">
-    <thead>
-      <tr>
-        <th scope="col">ID</th>
-        <th scope="col">Title</th>
-        <th scope="col">Creators</th>
-        <th scope="col"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        v-for="collection in collections"
-        :id="collection.collection_id"
-        :key="collection.collection_id"
-        @click.exact="goToEditPage(collection.collection_id)"
-        @click.meta="openEditPageInNewTab(collection.collection_id)"
-        @click.ctrl="openEditPageInNewTab(collection.collection_id)"
-      >
-        <td align="left">
-          <FormattedItemName
-            :item_id="collection.collection_id"
-            :item-type="collection.type"
-            enable-modified-click
-          />
-        </td>
-        <td align="left">{{ collection.title }}</td>
-        <td align="center"><Creators :creators="collection.creators" /></td>
-        <td align="right">
-          <button
-            type="button"
-            class="close"
-            aria-label="delete"
-            @click.stop="deleteCollection(collection)"
-          >
-            <span aria-hidden="true" style="color: grey">&times;</span>
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <DynamicDataTable
+    :columns="collectionColumn"
+    :data="collections"
+    :data-type="'collections'"
+    :global-filter-fields="['collection_id', 'title', 'creatorsList']"
+  />
 </template>
 
 <script>
-import { getCollectionList, deleteCollection } from "@/server_fetch_utils.js";
-import FormattedItemName from "@/components/FormattedItemName";
-import Creators from "@/components/Creators";
-import { GRAVATAR_STYLE } from "@/resources.js";
+import DynamicDataTable from "@/components/DynamicDataTable";
+import { getCollectionList } from "@/server_fetch_utils.js";
 
 export default {
-  components: {
-    FormattedItemName,
-    Creators,
-  },
+  components: { DynamicDataTable },
   data() {
     return {
-      isFetchError: false,
-      gravatar_style: GRAVATAR_STYLE,
+      collectionColumn: [
+        { field: "collection_id", header: "ID", body: "FormattedCollectionName", filter: true },
+        { field: "title", header: "Title" },
+        { field: "creators", header: "Creators", body: "Creators" },
+      ],
     };
   },
   computed: {
     collections() {
-      return this.$store.state.collection_list;
+      return this.$store.state.collection_list.map((sample) => ({
+        ...sample,
+        creatorsList: sample.creators.map((creator) => creator.display_name).join(", "),
+      }));
     },
   },
   created() {
     this.getCollections();
   },
   methods: {
-    goToEditPage(collection_id) {
-      this.$router.push(`/collections/${collection_id}`);
-    },
-    openEditPageInNewTab(collection_id) {
-      window.open(`/collections/${collection_id}`, "_blank");
-    },
-    // should also check response.OK? And retry if
     getCollections() {
-      getCollectionList().catch(() => {
-        this.isFetchError = true;
-      });
-    },
-    deleteCollection(collection) {
-      if (
-        confirm(
-          `Are you sure you want to delete collection "${collection.collection_id}"?\nThis will not delete any items.`,
-        )
-      ) {
-        deleteCollection(collection.collection_id, collection);
-      }
+      getCollectionList();
     },
   },
 };
 </script>
-
-<style scoped>
-.avatar {
-  border: 2px solid grey;
-  border-radius: 50%;
-}
-.avatar:hover {
-  border: 2px solid skyblue;
-}
-</style>
diff --git a/webapp/src/components/CreateEquipmentModal.vue b/webapp/src/components/CreateEquipmentModal.vue
index cd784f304..d90ae74ad 100644
--- a/webapp/src/components/CreateEquipmentModal.vue
+++ b/webapp/src/components/CreateEquipmentModal.vue
@@ -187,7 +187,9 @@ export default {
       )
         .then(() => {
           this.$emit("update:modelValue", false); // close this modal
-          document.getElementById(this.item_id).scrollIntoView({ behavior: "smooth" });
+          if (document.getElementById(this.item_id)) {
+            document.getElementById(this.item_id).scrollIntoView({ behavior: "smooth" });
+          }
           this.item_id = null;
           this.name = null;
           this.date = this.now(); // reset date to the new current time
diff --git a/webapp/src/components/DynamicButtonDataTable.vue b/webapp/src/components/DynamicButtonDataTable.vue
new file mode 100644
index 000000000..e030f270a
--- /dev/null
+++ b/webapp/src/components/DynamicButtonDataTable.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="button-group d-flex justify-content-between align-items-center">
+    <div class="button-left">
+      <button
+        v-if="dataType === 'samples'"
+        class="btn btn-default"
+        @click="$emit('open-create-item-modal')"
+      >
+        Add an item
+      </button>
+      <button
+        v-if="dataType === 'samples'"
+        class="btn btn-default ml-2"
+        @click="$emit('open-batch-create-item-modal')"
+      >
+        Add batch of items
+      </button>
+      <button
+        v-if="dataType === 'samples'"
+        class="btn btn-default ml-2"
+        @click="$emit('open-qr-scanner-modal')"
+      >
+        <font-awesome-icon icon="qrcode" /> Scan QR
+      </button>
+      <button
+        v-if="dataType === 'collections'"
+        class="btn btn-default"
+        @click="$emit('open-create-collection-modal')"
+      >
+        Create new collection
+      </button>
+      <button
+        v-if="dataType === 'startingMaterials' && editableInventory"
+        class="btn btn-default"
+        @click="$emit('open-create-item-modal')"
+      >
+        Add a starting material
+      </button>
+      <button
+        v-if="dataType === 'equipment'"
+        class="btn btn-default"
+        @click="$emit('open-create-equipment-modal')"
+      >
+        Add an item
+      </button>
+    </div>
+    <div class="button-right d-flex">
+      <button
+        v-if="itemsSelected.length > 0 && dataType != 'collections'"
+        class="btn btn-default"
+        :disabled="itemsSelected.length === 0"
+        @click="$emit('open-add-to-collection-modal')"
+      >
+        Add to collection
+      </button>
+      <button
+        v-if="itemsSelected.length > 0"
+        class="btn btn-default ml-2"
+        data-testid="delete-selected-button"
+        :disabled="itemsSelected.length === 0"
+        @click="confirmDeletion"
+      >
+        Delete selected
+      </button>
+
+      <IconField>
+        <InputIcon>
+          <i class="pi pi-search"></i>
+        </InputIcon>
+        <InputText
+          v-model="localFilters.global.value"
+          data-testid="search-input"
+          placeholder="Search"
+          @input="updateFilters"
+        />
+      </IconField>
+    </div>
+  </div>
+</template>
+
+<script>
+import IconField from "primevue/iconfield";
+import InputIcon from "primevue/inputicon";
+import InputText from "primevue/inputtext";
+import "primeicons/primeicons.css";
+
+import {
+  deleteSample,
+  deleteCollection,
+  deleteStartingMaterial,
+  deleteEquipment,
+} from "@/server_fetch_utils.js";
+
+export default {
+  components: {
+    IconField,
+    InputIcon,
+    InputText,
+  },
+  props: {
+    dataType: {
+      type: String,
+      required: true,
+    },
+    itemsSelected: {
+      type: Array,
+      required: true,
+    },
+    filters: {
+      type: Object,
+      required: true,
+    },
+    editableInventory: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  emits: [
+    "open-create-item-modal",
+    "open-batch-create-item-modal",
+    "open-qr-scanner-modal",
+    "open-create-collection-modal",
+    "open-create-equipment-modal",
+    "open-add-to-collection-modal",
+    "delete-selected-items",
+    "update:filters",
+  ],
+  data() {
+    return {
+      localFilters: { ...this.filters },
+    };
+  },
+  methods: {
+    updateFilters() {
+      this.$emit("update:filters", this.localFilters);
+    },
+    confirmDeletion() {
+      if (this.dataType === "samples") {
+        this.deleteSamples();
+      } else if (this.dataType === "collections") {
+        this.deleteCollections();
+      } else if (this.dataType === "startingMaterials") {
+        this.deleteStartingMaterials();
+      } else if (this.dataType === "equipment") {
+        this.deleteEquipments();
+      }
+      this.$emit("delete-selected-items");
+    },
+    deleteSamples() {
+      const idsSelected = this.itemsSelected.map((x) => x.item_id);
+      if (
+        confirm(
+          `Are you sure you want to delete ${this.itemsSelected.length} selected sample(s) (${idsSelected})?`,
+        )
+      ) {
+        idsSelected.forEach((item_id) => {
+          deleteSample(item_id);
+        });
+      }
+    },
+    deleteCollections() {
+      const idsSelected = this.itemsSelected.map((x) => x.collection_id);
+      if (
+        confirm(
+          `Are you sure you want to delete ${this.itemsSelected.length} selected collection(s) (${idsSelected})?`,
+        )
+      ) {
+        idsSelected.forEach((collection_id) => {
+          deleteCollection(collection_id, { collection_id: collection_id });
+        });
+      }
+    },
+    deleteStartingMaterials() {
+      const idsSelected = this.itemsSelected.map((x) => x.item_id);
+      if (
+        confirm(
+          `Are you sure you want to delete ${this.itemsSelected.length} selected starting material(s) (${idsSelected})?`,
+        )
+      ) {
+        idsSelected.forEach((item_id) => {
+          deleteStartingMaterial(item_id);
+        });
+      }
+    },
+    deleteEquipments() {
+      const idsSelected = this.itemsSelected.map((x) => x.item_id);
+      if (
+        confirm(
+          `Are you sure you want to delete ${this.itemsSelected.length} selected equipment(s) (${idsSelected})?`,
+        )
+      ) {
+        idsSelected.forEach((item_id) => {
+          deleteEquipment(item_id);
+        });
+      }
+    },
+  },
+};
+</script>
diff --git a/webapp/src/components/DynamicDataTable.vue b/webapp/src/components/DynamicDataTable.vue
new file mode 100644
index 000000000..6b726c259
--- /dev/null
+++ b/webapp/src/components/DynamicDataTable.vue
@@ -0,0 +1,314 @@
+<template>
+  <div>
+    <div v-if="isSampleFetchError" class="alert alert-danger">
+      Server Error. Sample list not retrieved.
+    </div>
+
+    <DataTable
+      v-model:filters="filters"
+      v-model:selection="itemsSelected"
+      :value="data"
+      :data-testid="computedDataTestId"
+      selection-mode="multiple"
+      paginator
+      :rows="20"
+      :rows-per-page-options="[10, 20, 50, 100]"
+      filter-display="menu"
+      :global-filter-fields="globalFilterFields"
+      removable-sort
+      sort-mode="multiple"
+      @row-click="goToEditPage"
+    >
+      <!-- v-model:expandedRows="expandedRows" -->
+
+      <template #header>
+        <DynamicButtonDataTable
+          :data-type="dataType"
+          :items-selected="itemsSelected"
+          :filters="filters"
+          :editable-inventory="editable_inventory"
+          @open-create-item-modal="createItemModalIsOpen = true"
+          @open-batch-create-item-modal="batchCreateItemModalIsOpen = true"
+          @open-qr-scanner-modal="qrScannerModalIsOpen = true"
+          @open-create-collection-modal="createCollectionModalIsOpen = true"
+          @open-create-equipment-modal="createEquipmentModalIsOpen = true"
+          @open-add-to-collection-modal="addToCollectionModalIsOpen = true"
+          @delete-selected-items="deleteSelectedItems"
+        />
+      </template>
+      <template #empty> No data found. </template>
+      <template #loading> Loading data. Please wait. </template>
+
+      <Column selection-mode="multiple"></Column>
+      <!-- <Column expander style="width: 5rem" /> -->
+      <Column
+        v-for="column in columns"
+        :key="column.field"
+        :field="column.field"
+        :header="column.header"
+        sortable
+        :class="{ 'filter-active': isFilterActive(column.field) }"
+      >
+        <!-- <template v-if="column.field === 'item_id'" #body="slotProps">
+          <component
+            :is="column.body"
+            v-bind="{
+              item_id: slotProps.data.item_id,
+              item_type: slotProps.data.type,
+              enable_click: true,
+            }"
+        /></template> -->
+
+        <template v-if="column.body" #body="slotProps">
+          <component :is="column.body" v-bind="getComponentProps(column.body, slotProps.data)" />
+        </template>
+        <template v-else-if="column.field === 'date'" #body="slotProps">
+          {{ $filters.IsoDatetimeToDate(slotProps.data[column.field]) }}
+        </template>
+        <template v-else #body="slotProps">
+          {{ slotProps.data[column.field] }}
+        </template>
+        <template v-if="column.filter" #filter="{ filterModel }">
+          <InputText
+            v-model="filterModel.value"
+            type="text"
+            :placeholder="'Search by ' + column.header"
+          />
+        </template>
+      </Column>
+
+      <!-- <template #expansion="slotProps">
+        <div class="p-4">
+          <h5>Test Expandable {{ slotProps.data.item_id }}</h5>
+        </div>
+      </template> -->
+    </DataTable>
+  </div>
+  <CreateItemModal
+    v-model="createItemModalIsOpen"
+    :allowed-types="dataType == 'startingMaterials' ? allowedTypes : undefined"
+  />
+  <BatchCreateItemModal v-model="batchCreateItemModalIsOpen" />
+  <QRScannerModal v-model="qrScannerModalIsOpen" />
+  <CreateCollectionModal v-model="createCollectionModalIsOpen" />
+  <CreateEquipmentModal v-model="createEquipmentModalIsOpen" />
+  <AddToCollectionModal
+    v-model="addToCollectionModalIsOpen"
+    :items-selected="itemsSelected"
+    @items-updated="handleItemsUpdated"
+  />
+</template>
+
+<script>
+import DynamicButtonDataTable from "@/components/DynamicButtonDataTable";
+import CreateItemModal from "@/components/CreateItemModal";
+import BatchCreateItemModal from "@/components/BatchCreateItemModal";
+import QRScannerModal from "@/components/QRScannerModal";
+import CreateCollectionModal from "@/components/CreateCollectionModal";
+import CreateEquipmentModal from "@/components/CreateEquipmentModal";
+import AddToCollectionModal from "@/components/AddToCollectionModal";
+
+import { INVENTORY_TABLE_TYPES, EDITABLE_INVENTORY } from "@/resources.js";
+
+import FormattedItemName from "@/components/FormattedItemName";
+import FormattedCollectionName from "@/components/FormattedCollectionName";
+import ChemicalFormula from "@/components/ChemicalFormula";
+import CollectionList from "@/components/CollectionList";
+import Creators from "@/components/Creators";
+
+import { FilterMatchMode, FilterOperator } from "@primevue/core/api";
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+import InputText from "primevue/inputtext";
+
+export default {
+  components: {
+    DynamicButtonDataTable,
+    CreateItemModal,
+    BatchCreateItemModal,
+    QRScannerModal,
+    CreateCollectionModal,
+    CreateEquipmentModal,
+    AddToCollectionModal,
+    DataTable,
+    Column,
+    InputText,
+    FormattedItemName,
+    FormattedCollectionName,
+    ChemicalFormula,
+    CollectionList,
+    Creators,
+  },
+  props: {
+    columns: {
+      type: Array,
+      required: true,
+    },
+    data: {
+      type: Array,
+      required: true,
+    },
+    dataType: {
+      type: String,
+      required: true,
+    },
+    globalFilterFields: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      createItemModalIsOpen: false,
+      batchCreateItemModalIsOpen: false,
+      qrScannerModalIsOpen: false,
+      createCollectionModalIsOpen: false,
+      createEquipmentModalIsOpen: false,
+      addToCollectionModalIsOpen: false,
+      isSampleFetchError: false,
+      itemsSelected: [],
+      filters: {
+        global: { value: null },
+        item_id: {
+          operator: FilterOperator.AND,
+          constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }],
+        },
+        collection_id: {
+          operator: FilterOperator.AND,
+          constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }],
+        },
+        type: {
+          operator: FilterOperator.AND,
+          constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }],
+        },
+      },
+      allowedTypes: INVENTORY_TABLE_TYPES,
+    };
+  },
+  computed: {
+    computedDataTestId() {
+      const dataTestIdMap = {
+        samples: "sample-table",
+        collections: "collection-table",
+        startingMaterials: "starting-material-table",
+        equipment: "equipment-table",
+      };
+      return dataTestIdMap[this.dataType] || "default-table";
+    },
+  },
+  watch: {
+    itemsSelected(newSelection) {
+      console.log("Selected items:", newSelection);
+    },
+  },
+  created() {
+    this.editable_inventory = EDITABLE_INVENTORY;
+  },
+  methods: {
+    goToEditPage(event) {
+      const { item_id, collection_id } = event.data;
+
+      if (item_id) {
+        this.$router.push(`/edit/${item_id}`);
+      } else if (collection_id) {
+        window.open(`/collections/${collection_id}`, "_blank");
+      }
+    },
+    getComponentProps(componentName, data) {
+      const propsConfig = {
+        FormattedItemName: {
+          item_id: "item_id",
+          itemType: "type",
+          enableModifiedClick: true,
+        },
+        FormattedCollectionName: {
+          collection_id: "collection_id",
+          enableModifiedClick: true,
+        },
+        ChemicalFormula: {
+          formula: "chemform",
+        },
+        CollectionList: {
+          collections: "collections",
+        },
+        Creators: {
+          creators: "creators",
+        },
+      };
+
+      const config = propsConfig[componentName] || {};
+
+      const props = Object.entries(config).reduce((acc, [prop, dataKey]) => {
+        if (dataKey !== true) {
+          if (prop === "itemType") {
+            acc[prop] = data.type !== undefined ? data.type : "starting_materials";
+          } else if (data[dataKey] !== undefined) {
+            acc[prop] = data[dataKey];
+          }
+        }
+        return acc;
+      }, {});
+
+      Object.keys(config).forEach((prop) => {
+        if (config[prop] === true) {
+          props[prop] = true;
+        }
+      });
+
+      return props;
+    },
+    isFilterActive(field) {
+      const filter = this.filters[field];
+      if (filter && filter.constraints) {
+        return filter.constraints.some((constraint) => constraint.value);
+      }
+      return false;
+    },
+    deleteSelectedItems() {
+      this.itemsSelected = [];
+    },
+    handleItemsUpdated() {
+      this.itemsSelected = [];
+    },
+  },
+};
+</script>
+
+<style>
+.customize-table .ag-header {
+  font-size: 1rem;
+}
+
+.p-datatable-column-header-content .p-datatable-sort-icon {
+  visibility: hidden !important;
+}
+.p-datatable-column-header-content:hover .p-datatable-sort-icon {
+  visibility: visible !important;
+}
+
+.p-datatable .p-datatable-tbody > tr > td {
+  min-width: 1em;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.p-datatable .p-datatable-thead > tr > th {
+  min-width: 1em;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.button-right {
+  gap: 0.5em;
+}
+
+.p-datatable-header-cell.filter-active svg {
+  color: #10b981;
+}
+.p-datatable-header-cell.filter-active {
+  color: #047857;
+}
+</style>
diff --git a/webapp/src/components/EquipmentTable.vue b/webapp/src/components/EquipmentTable.vue
index 2dcfb2eba..0de1f4f67 100644
--- a/webapp/src/components/EquipmentTable.vue
+++ b/webapp/src/components/EquipmentTable.vue
@@ -1,105 +1,44 @@
 <template>
-  <div v-if="isEquipmentFetchError" class="alert alert-danger">
-    <font-awesome-icon icon="exclamation-circle" />&nbsp;Server Error. Equipment list could not be
-    retreived.
-  </div>
-  <table class="table table-hover table-sm" data-testid="equipment-table">
-    <thead>
-      <tr>
-        <th scope="col">ID</th>
-        <th scope="col">Name</th>
-        <th class="text-center" scope="col">Date created</th>
-        <th class="text-center" scope="col">Location</th>
-        <th class="text-left" scope="col">Maintainers</th>
-
-        <th scope="col"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        v-for="equipment in equipments"
-        :id="equipment.item_id"
-        :key="equipment.item_id"
-        @click.exact="goToEditPage(equipment.item_id)"
-        @click.meta="openEditPageInNewTab(equipment.item_id)"
-        @click.ctrl="openEditPageInNewTab(equipment.item_id)"
-      >
-        <td align="left" class="table-item-id">
-          <FormattedItemName
-            :item_id="equipment.item_id"
-            :item-type="equipment?.type"
-            enable-modified-click
-          />
-        </td>
-        <td align="left">{{ equipment.name }}</td>
-        <td class="text-center">{{ $filters.IsoDatetimeToDate(equipment.date) }}</td>
-        <td class="left">{{ equipment.location }}</td>
-        <td align="center"><Creators :creators="equipment.creators" /></td>
-        <td align="right">
-          <button
-            type="button"
-            class="close"
-            aria-label="delete"
-            @click.stop="deleteEquipment(equipment)"
-          >
-            <span aria-hidden="true" style="color: grey">&times;</span>
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <DynamicDataTable
+    :columns="equipmentColumn"
+    :data="equipment"
+    :data-type="'equipment'"
+    :global-filter-fields="['item_id', 'name', 'location', 'creatorsList']"
+  />
 </template>
 
 <script>
-import FormattedItemName from "@/components/FormattedItemName";
-import Creators from "@/components/Creators";
-import { getEquipmentList, deleteEquipment } from "@/server_fetch_utils.js";
-import { itemTypes } from "@/resources.js";
+import DynamicDataTable from "@/components/DynamicDataTable";
+import { getEquipmentList } from "@/server_fetch_utils.js";
 
 export default {
-  components: {
-    FormattedItemName,
-    Creators,
-  },
+  components: { DynamicDataTable },
   data() {
     return {
-      isEquipmentFetchError: false,
-      itemTypes: itemTypes,
+      equipmentColumn: [
+        { field: "item_id", header: "ID", body: "FormattedItemName", filter: true },
+        { field: "name", header: "Name" },
+        { field: "date", header: "Date" },
+        { field: "location", header: "Location" },
+        { field: "creators", header: "Maintainers", body: "Creators" },
+      ],
     };
   },
   computed: {
-    equipments() {
-      return this.$store.state.equipment_list;
+    equipment() {
+      return this.$store.state.equipment_list.map((equipment) => ({
+        ...equipment,
+        // creatorsList: equipment.creators.map((creator) => creator.display_name).join(", "),
+      }));
     },
   },
-  created() {
+  mounted() {
     this.getEquipment();
   },
   methods: {
-    goToEditPage(item_id) {
-      this.$router.push(`/edit/${item_id}`);
-    },
-    openEditPageInNewTab(item_id) {
-      window.open(`/edit/${item_id}`, "_blank");
-    },
     getEquipment() {
-      getEquipmentList().catch(() => {
-        this.isEquipmentFetchError = true;
-      });
-    },
-    deleteEquipment(equipment) {
-      if (confirm(`Are you sure you want to delete equipment "${equipment.item_id}"?`)) {
-        console.log("deleting...");
-        deleteEquipment(equipment.item_id);
-      }
-      console.log("delete cancelled...");
+      getEquipmentList();
     },
   },
 };
 </script>
-
-<style scoped>
-.clickable {
-  cursor: pointer;
-}
-</style>
diff --git a/webapp/src/components/FancyCollectionSampleTable.vue b/webapp/src/components/FancyCollectionSampleTable.vue
deleted file mode 100644
index cec79e755..000000000
--- a/webapp/src/components/FancyCollectionSampleTable.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<template>
-  <div v-if="isSampleFetchError" class="alert alert-danger">
-    Server Error. Sample list could not be retreived for collection.
-  </div>
-
-  <div class="form-inline mb-2 ml-auto mt-2">
-    <div class="form-group">
-      <label for="sample-table-search" class="sr-only">Search items</label>
-      <input
-        id="sample-table-search"
-        v-model="searchValue"
-        type="text"
-        class="form-control"
-        placeholder="Search within collection"
-      />
-    </div>
-  </div>
-
-  <Vue3EasyDataTable
-    :headers="headers"
-    :items="samples"
-    :loading="!sampleTableIsReady"
-    :no-hover="true"
-    :expand-column-width="40"
-    :search-value="searchValue"
-    table-class-name="customize-table"
-    header-class-name="customize-table-header"
-    buttons-pagination
-    @click-row="goToEditPage"
-  >
-    <template #empty-message>Collection is empty.</template>
-
-    <template #item-item_id="item">
-      <FormattedItemName :item_id="item.item_id" :item-type="item?.type" enable-modified-click />
-    </template>
-
-    <template #item-type="item">
-      {{ itemTypes[item.type].display }}
-    </template>
-
-    <template #item-chemform="item">
-      <ChemicalFormula :formula="item.chemform" />
-    </template>
-
-    <template #item-date="item">
-      {{ $filters.IsoDatetimeToDate(item.date) }}
-    </template>
-
-    <template #item-creators="item">
-      <Creators :creators="item.creators" />
-    </template>
-  </Vue3EasyDataTable>
-</template>
-
-<script>
-import Vue3EasyDataTable from "vue3-easy-data-table";
-import "vue3-easy-data-table/dist/style.css";
-import FormattedItemName from "@/components/FormattedItemName";
-import ChemicalFormula from "@/components/ChemicalFormula";
-import Creators from "@/components/Creators";
-import { getCollectionSampleList } from "@/server_fetch_utils.js";
-// eslint-disable-next-line no-unused-vars
-import { itemTypes } from "@/resources.js";
-
-export default {
-  components: {
-    Vue3EasyDataTable,
-    ChemicalFormula,
-    Creators,
-    FormattedItemName,
-  },
-  props: {
-    collection_id: {
-      type: String,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      isSampleFetchError: false,
-      itemTypes: itemTypes,
-      sampleTableIsReady: false,
-      itemsSelected: [],
-      headers: [
-        { text: "ID", value: "item_id", sortable: true },
-        { text: "Type", value: "type", sortable: true },
-        { text: "Name", value: "name", sortable: true },
-        { text: "Formula", value: "chemform", sortable: true },
-        { text: "Date", value: "date", sortable: true },
-        { text: "Creators", value: "creators", sortable: true },
-        { text: "# of blocks", value: "nblocks", sortable: true },
-      ],
-      searchValue: "",
-    };
-  },
-  computed: {
-    samples() {
-      return this.$store.state.all_collection_children[this.collection_id] || [];
-    },
-  },
-  created() {
-    this.getCollectionSamples();
-  },
-  methods: {
-    getCollectionSamples() {
-      getCollectionSampleList(this.collection_id)
-        .then(() => {
-          this.sampleTableIsReady = true;
-        })
-        .catch(() => {
-          this.isSampleFetchError = true;
-        });
-    },
-    goToEditPage(row, event) {
-      // don't actually go to editpage is this click is in the select column, because
-      // that is easy to accidentally do. in future, could try to actuate the checkbox, too.
-      if (event.target.querySelector(".easy-checkbox")) {
-        return null;
-      }
-      // if using a modifier key (ctr, meta, alt), open in new tab
-      // otherwise, go in this tab
-      if (event.ctrl || event.metaKey || event.altKey) {
-        window.open(`/edit/${row.item_id}`, "_blank");
-      } else {
-        this.$router.push(`/edit/${row.item_id}`);
-      }
-    },
-    deleteSelectedItems() {
-      const idsSelected = this.itemsSelected.map((x) => x.item_id);
-      if (
-        confirm(
-          `Are you sure you want to remove ${this.itemsSelected.length} selected items (${idsSelected}) from this collection?`,
-        )
-      ) {
-        console.log("deleting...");
-        idsSelected.forEach((item_id) => {
-          console.log(`deleting item ${item_id}`);
-        });
-      } else {
-        console.log("delete cancelled...");
-      }
-    },
-  },
-};
-</script>
-
-<style>
-.customize-table th {
-  --easy-table-row-border: 2px solid #dee2e6;
-  border-top: 0.5px solid #dee2e6 !important;
-}
-
-.customize-table tr {
-  cursor: pointer;
-}
-
-.customize-table {
-  --easy-table-border: none;
-  --easy-table-row-border: 1px solid #dee2e6;
-  --easy-table-header-font-size: 1rem;
-  --easy-table-body-row-font-size: 1rem;
-  --easy-table-footer-font-size: 1rem;
-  --easy-table-message-font-size: 1rem;
-}
-
-.btn:disabled {
-  cursor: not-allowed;
-}
-</style>
diff --git a/webapp/src/components/FancySampleTable.vue b/webapp/src/components/FancySampleTable.vue
deleted file mode 100644
index c99d8511d..000000000
--- a/webapp/src/components/FancySampleTable.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<template>
-  <div v-if="isSampleFetchError" class="alert alert-danger">
-    Server Error. Sample list not retreived.
-  </div>
-
-  <div class="form-inline mb-2 ml-auto">
-    <button
-      class="btn btn-default ml-auto mr-2"
-      :disabled="!Boolean(itemsSelected.length)"
-      @click="deleteSelectedItems"
-    >
-      Delete selected...
-    </button>
-    <div class="form-group">
-      <label for="sample-table-search" class="sr-only">Search items</label>
-      <input
-        id="sample-table-search"
-        v-model="searchValue"
-        type="text"
-        class="form-control"
-        placeholder="search"
-      />
-    </div>
-  </div>
-
-  <Vue3EasyDataTable
-    v-model:items-selected="itemsSelected"
-    :headers="headers"
-    :items="samples"
-    :search-value="searchValue"
-    table-class-name="customize-table"
-    header-class-name="customize-table-header"
-    buttons-pagination
-    @click-row="goToEditPage"
-  >
-    <template #item-item_id="item">
-      <FormattedItemName :item_id="item.item_id" :item-type="item?.type" enable-modified-click />
-    </template>
-
-    <template #item-type="item">
-      {{ itemTypes[item.type].display }}
-    </template>
-
-    <template #item-chemform="item">
-      <ChemicalFormula :formula="item.chemform" />
-    </template>
-
-    <template #item-date="item">
-      {{ $filters.IsoDatetimeToDate(item.date) }}
-    </template>
-
-    <template #item-creators="item">
-      <Creators :creators="item.creators" />
-    </template>
-  </Vue3EasyDataTable>
-</template>
-
-<script>
-import Vue3EasyDataTable from "vue3-easy-data-table";
-import "vue3-easy-data-table/dist/style.css";
-import FormattedItemName from "@/components/FormattedItemName";
-import ChemicalFormula from "@/components/ChemicalFormula";
-import Creators from "@/components/Creators";
-// eslint-disable-next-line no-unused-vars
-import { getSampleList, deleteSample } from "@/server_fetch_utils.js";
-import { GRAVATAR_STYLE, itemTypes } from "@/resources.js";
-
-export default {
-  components: {
-    Vue3EasyDataTable,
-    ChemicalFormula,
-    Creators,
-    FormattedItemName,
-  },
-  data() {
-    return {
-      isSampleFetchError: false,
-      gravatar_style: GRAVATAR_STYLE,
-      itemTypes: itemTypes,
-      sampleTableIsReady: false,
-      itemsSelected: [],
-      headers: [
-        { text: "ID", value: "item_id", sortable: true },
-        { text: "type", value: "type", sortable: true },
-        { text: "Sample name", value: "name", sortable: true },
-        { text: "Formula", value: "chemform", sortable: true },
-        { text: "Date", value: "date", sortable: true },
-        { text: "Creators", value: "creators", sortable: true },
-        { text: "# of blocks", value: "nblocks", sortable: true },
-      ],
-      searchValue: "",
-    };
-  },
-  computed: {
-    samples() {
-      return this.$store.state.sample_list;
-    },
-  },
-  created() {
-    this.getSamples();
-  },
-  methods: {
-    goToEditPage(row, event) {
-      // don't actually go to editpage is this click is in the select column, because
-      // that is easy to accidentally do. in future, could try to actuate the checkbox, too.
-      if (event.target.querySelector(".easy-checkbox")) {
-        return null;
-      }
-      // if using a modifier key (ctr, meta, alt), open in new tab
-      // otherwise, go in this tab
-      if (event.ctrl || event.metaKey || event.altKey) {
-        window.open(`/edit/${row.item_id}`, "_blank");
-      } else {
-        this.$router.push(`/edit/${row.item_id}`);
-      }
-    },
-    getSamples() {
-      getSampleList()
-        .then(() => {
-          console.log("sample list received!");
-          this.sampleTableIsReady = true;
-        })
-        .catch(() => {
-          this.isSampleFetchError = true;
-        });
-    },
-    deleteSelectedItems() {
-      const idsSelected = this.itemsSelected.map((x) => x.item_id);
-      if (
-        confirm(
-          `Are you sure you want to delete ${this.itemsSelected.length} selected items (${idsSelected})?`,
-        )
-      ) {
-        console.log("deleting...");
-        idsSelected.forEach((item_id) => {
-          console.log(`deleting item ${item_id}`);
-          deleteSample(item_id);
-        });
-      } else {
-        console.log("delete cancelled...");
-      }
-    },
-  },
-};
-</script>
-
-<style scoped>
-.avatar {
-  border: 2px solid grey;
-  border-radius: 50%;
-}
-.avatar:hover {
-  border: 2px solid skyblue;
-}
-</style>
-
-<style>
-.customize-table th {
-  --easy-table-row-border: 2px solid #dee2e6;
-  border-top: 0.5px solid #dee2e6 !important;
-}
-
-.customize-table tr {
-  cursor: pointer;
-}
-
-.customize-table {
-  --easy-table-border: none;
-  --easy-table-row-border: 1px solid #dee2e6;
-  --easy-table-header-font-size: 1rem;
-  --easy-table-body-row-font-size: 1rem;
-  --easy-table-footer-font-size: 1rem;
-  --easy-table-message-font-size: 1rem;
-}
-
-.btn:disabled {
-  cursor: not-allowed;
-}
-</style>
diff --git a/webapp/src/components/FancyStartingMaterialTable.vue b/webapp/src/components/FancyStartingMaterialTable.vue
deleted file mode 100644
index d3f37a805..000000000
--- a/webapp/src/components/FancyStartingMaterialTable.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-  <div v-if="isFetchError" class="alert alert-danger">
-    <font-awesome-icon icon="exclamation-circle" />&nbsp;Server error: inventory could not be
-    retrieved.
-  </div>
-  <div class="form-inline ml-auto col-3 mb-2">
-    <div class="form-group">
-      <label for="sample-table-search" class="sr-only">Search items</label>
-      <input
-        id="sample-table-search"
-        v-model="searchValue"
-        type="text"
-        class="form-control"
-        placeholder="search"
-      />
-    </div>
-  </div>
-
-  <Vue3EasyDataTable
-    :headers="headers"
-    :items="startingMaterials"
-    :search-value="searchValue"
-    table-class-name="customize-table"
-    header-class-name="customize-table-header"
-    buttons-pagination
-    @click-row="goToEditPage"
-  >
-    <template #item-item_id="item">
-      <FormattedItemName
-        :item_id="item.item_id"
-        :item-type="item?.type || 'starting_materials'"
-        enable-modified-click
-      />
-    </template>
-    <template #item-chemform="item">
-      <ChemicalFormula :formula="item.chemform" />
-    </template>
-
-    <template #item-date="item">
-      {{ $filters.IsoDatetimeToDate(item.date) }}
-    </template>
-  </Vue3EasyDataTable>
-</template>
-
-<script>
-import Vue3EasyDataTable from "vue3-easy-data-table";
-import "vue3-easy-data-table/dist/style.css";
-
-import ChemicalFormula from "@/components/ChemicalFormula";
-import FormattedItemName from "@/components/FormattedItemName";
-import { getStartingMaterialList } from "@/server_fetch_utils.js";
-
-export default {
-  components: {
-    ChemicalFormula,
-    FormattedItemName,
-    Vue3EasyDataTable,
-  },
-  data() {
-    return {
-      isFetchError: false,
-      searchValue: "",
-      headers: [
-        { text: "ID", value: "item_id", sortable: true },
-        { text: "Name", value: "name", sortable: true },
-        { text: "Formula", value: "chemform", sortable: true },
-        { text: "Date Acquired", value: "date", sortable: true },
-        { text: "# of blocks", value: "nblocks", sortable: true },
-      ],
-    };
-  },
-  computed: {
-    startingMaterials() {
-      return this.$store.state.starting_material_list;
-    },
-  },
-  created() {
-    this.getStartingMaterials();
-  },
-  methods: {
-    goToEditPage(row, event) {
-      // don't actually go to editpage is this click is in the select column, because
-      // that is easy to accidentally do. in future, could try to actuate the checkbox, too.
-      if (event.target.querySelector(".easy-checkbox")) {
-        return null;
-      }
-      // if using a modifier key (ctr, meta, alt), open in new tab
-      // otherwise, go in this tab
-      if (event.ctrl || event.metaKey || event.altKey) {
-        window.open(`/edit/${row.item_id}`, "_blank");
-      } else {
-        this.$router.push(`/edit/${row.item_id}`);
-      }
-    },
-    getStartingMaterials() {
-      getStartingMaterialList().catch(() => {
-        this.isFetchError = true;
-      });
-    },
-  },
-};
-</script>
-
-<style scoped>
-.customize-table th {
-  --easy-table-row-border: 2px solid #dee2e6;
-  border-top: 0.5px solid #dee2e6 !important;
-}
-
-.customize-table tr {
-  cursor: pointer;
-}
-
-.customize-table {
-  --easy-table-border: none;
-  --easy-table-row-border: 1px solid #dee2e6;
-  --easy-table-header-font-size: 1rem;
-  --easy-table-body-row-font-size: 1rem;
-  --easy-table-footer-font-size: 1rem;
-  --easy-table-message-font-size: 1rem;
-}
-</style>
diff --git a/webapp/src/components/SampleTable.vue b/webapp/src/components/SampleTable.vue
index 670331805..7bfaa5ec1 100644
--- a/webapp/src/components/SampleTable.vue
+++ b/webapp/src/components/SampleTable.vue
@@ -1,116 +1,61 @@
 <template>
-  <div v-if="isSampleFetchError" class="alert alert-danger">
-    <font-awesome-icon icon="exclamation-circle" />&nbsp;Server Error. Sample list could not be
-    retreived.
-  </div>
-  <table class="table table-hover table-sm" data-testid="sample-table">
-    <thead>
-      <tr>
-        <th scope="col">ID</th>
-        <th scope="col">Type</th>
-        <th scope="col">Sample name</th>
-        <th scope="col">Formula</th>
-        <th class="text-center" scope="col">Date</th>
-        <th scope="col">Collections</th>
-        <th class="text-center" scope="col">Creators</th>
-        <th class="text-center" scope="col"># of blocks</th>
-        <th scope="col"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        v-for="sample in samples"
-        :id="sample.item_id"
-        :key="sample.item_id"
-        @click.exact="goToEditPage(sample.item_id)"
-        @click.meta="openEditPageInNewTab(sample.item_id)"
-        @click.ctrl="openEditPageInNewTab(sample.item_id)"
-      >
-        <td align="left" class="table-item-id">
-          <FormattedItemName
-            :item_id="sample.item_id"
-            :item-type="sample?.type"
-            enable-modified-click
-          />
-        </td>
-        <td align="center">{{ itemTypes[sample.type].display }}</td>
-        <td align="left">{{ sample.name }}</td>
-        <td><ChemicalFormula :formula="sample.chemform" /></td>
-        <td class="text-center">{{ $filters.IsoDatetimeToDate(sample.date) }}</td>
-        <td><CollectionList :collections="sample.collections" /></td>
-        <td align="center"><Creators :creators="sample.creators" /></td>
-        <td class="text-right">{{ sample.nblocks }}</td>
-        <td align="right">
-          <button
-            type="button"
-            class="close"
-            aria-label="delete"
-            @click.stop="deleteSample(sample)"
-          >
-            <span aria-hidden="true" style="color: grey">&times;</span>
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <DynamicDataTable
+    :columns="sampleColumns"
+    :data="samples"
+    :data-type="'samples'"
+    :global-filter-fields="[
+      'item_id',
+      'type',
+      'name',
+      'chemform',
+      'collectionsList',
+      'creatorsList',
+      'nblocks',
+    ]"
+  />
 </template>
 
 <script>
-import ChemicalFormula from "@/components/ChemicalFormula";
-import FormattedItemName from "@/components/FormattedItemName";
-import CollectionList from "@/components/CollectionList";
-import Creators from "@/components/Creators";
-import { getSampleList, deleteSample } from "@/server_fetch_utils.js";
-import { itemTypes } from "@/resources.js";
+import DynamicDataTable from "@/components/DynamicDataTable";
+import { getSampleList } from "@/server_fetch_utils.js";
 
 export default {
-  components: {
-    ChemicalFormula,
-    FormattedItemName,
-    Creators,
-    CollectionList,
-  },
+  components: { DynamicDataTable },
   data() {
     return {
-      isSampleFetchError: false,
-      itemTypes: itemTypes,
+      sampleColumns: [
+        {
+          field: "item_id",
+          header: "ID",
+          body: "FormattedItemName",
+          filter: true,
+        },
+        { field: "type", header: "Type", filter: true },
+        { field: "name", header: "Sample name" },
+        { field: "chemform", header: "Formula", body: "ChemicalFormula" },
+        { field: "date", header: "Date" },
+        { field: "collections", header: "Collections", body: "CollectionList" },
+        { field: "creators", header: "Creators", body: "Creators" },
+        { field: "nblocks", header: "# of blocks" },
+      ],
     };
   },
   computed: {
     samples() {
-      return this.$store.state.sample_list;
+      return this.$store.state.sample_list.map((sample) => ({
+        ...sample,
+        collectionsList: sample.collections.join(", "),
+        creatorsList: sample.creators.map((creator) => creator.display_name).join(", "),
+      }));
     },
   },
-  created() {
+  mounted() {
     this.getSamples();
   },
   methods: {
-    goToEditPage(item_id) {
-      this.$router.push(`/edit/${item_id}`);
-    },
-    openEditPageInNewTab(item_id) {
-      window.open(`/edit/${item_id}`, "_blank");
-    },
-    // should also check response.OK? And retry if
     getSamples() {
-      getSampleList().catch(() => {
-        this.isSampleFetchError = true;
-      });
-    },
-    deleteSample(sample) {
-      if (confirm(`Are you sure you want to delete sample "${sample.item_id}"?`)) {
-        console.log("deleting...");
-        deleteSample(sample.item_id);
-      }
-      console.log("delete cancelled...");
+      getSampleList();
     },
   },
 };
 </script>
-
-<style scoped>
-.table-item-id {
-  font-size: 1.2em;
-  font-weight: normal;
-}
-</style>
diff --git a/webapp/src/components/SampleTablePrime.vue b/webapp/src/components/SampleTablePrime.vue
deleted file mode 100644
index 9e9b66d30..000000000
--- a/webapp/src/components/SampleTablePrime.vue
+++ /dev/null
@@ -1,272 +0,0 @@
-<template>
-  <div>
-    <div v-if="isSampleFetchError" class="alert alert-danger">
-      Server Error. Sample list not retrieved.
-    </div>
-
-    <DataTable
-      v-model:filters="filters"
-      v-model:selection="itemsSelected"
-      selection-mode="multiple"
-      :value="samples"
-      paginator
-      :rows="10"
-      :rows-per-page-options="[10, 20, 50, 100]"
-      filter-display="menu"
-      :global-filter-fields="[
-        'item_id',
-        'type',
-        'name',
-        'chemform',
-        'collectionsList',
-        'creatorsList',
-        'nblocks',
-      ]"
-      removable-sort
-      sort-mode="multiple"
-      @v-on:filter="onFilter"
-      @filter="onFilter"
-      @row-click="goToEditPage"
-    >
-      <!-- v-model:expandedRows="expandedRows" -->
-
-      <template #header>
-        <div class="button-group d-flex justify-content-between align-items-center">
-          <div>
-            <button class="btn btn-default" @click="createItemModalIsOpen = true">
-              Add an item
-            </button>
-            <button class="btn btn-default" @click="batchCreateItemModalIsOpen = true">
-              Add batch of samples
-            </button>
-          </div>
-          <div>
-            <button
-              v-if="itemsSelected.length > 0"
-              class="btn btn-default"
-              :disabled="itemsSelected.length === 0"
-              @click="addToCollectionModalIsOpen = true"
-            >
-              Add to collection
-            </button>
-            <button
-              v-if="itemsSelected.length > 0"
-              class="btn btn-default"
-              :disabled="itemsSelected.length === 0"
-              @click="deleteSelectedItems"
-            >
-              Delete selected
-            </button>
-            <IconField>
-              <InputIcon>
-                <i class="pi pi-search"></i>
-              </InputIcon>
-              <InputText v-model="filters['global'].value" placeholder="Search" />
-            </IconField>
-          </div>
-        </div>
-      </template>
-      <template #empty> No samples found. </template>
-      <template #loading> Loading samples data. Please wait. </template>
-
-      <Column selection-mode="multiple"></Column>
-      <!-- <Column expander style="width: 5rem" /> -->
-      <Column field="item_id" header="ID" sortable>
-        <template #body="slotProps">
-          <FormattedItemName
-            :item_id="slotProps.data.item_id"
-            :item-type="slotProps.data.type"
-            enable-click
-          />
-        </template>
-        <template #filter="{ filterModel }">
-          <InputText v-model="filterModel.value" type="text" placeholder="Search by ID" />
-        </template>
-      </Column>
-      <Column field="type" header="Type" sortable>
-        <template #filter="{ filterModel }">
-          <InputText v-model="filterModel.value" type="text" placeholder="Search by type" />
-        </template>
-      </Column>
-      <Column field="name" header="Sample name" sortable> </Column>
-      <Column field="chemform" header="Formula" sortable>
-        <template #body="slotProps">
-          <ChemicalFormula :formula="slotProps.data.chemform" />
-        </template>
-      </Column>
-      <Column field="date" header="Date" sortable>
-        <template #body="slotProps">
-          {{ $filters.IsoDatetimeToDate(slotProps.data.date) }}
-        </template>
-      </Column>
-      <Column field="collectionsList" header="Collections" sortable>
-        <template #body="slotProps">
-          <CollectionList :collections="slotProps.data.collections" />
-        </template>
-      </Column>
-      <Column field="creatorsList" header="Creators" sortable>
-        <template #body="slotProps">
-          <Creators :creators="slotProps.data.creators" />
-        </template>
-      </Column>
-      <Column field="nblocks" header="# of blocks" sortable> ></Column>
-
-      <!-- <template #expansion="slotProps">
-        <div class="p-4">
-          <h5>Test Expandable {{ slotProps.data.item_id }}</h5>
-        </div>
-      </template> -->
-    </DataTable>
-  </div>
-  <CreateItemModal v-model="createItemModalIsOpen" />
-  <BatchCreateItemModal v-model="batchCreateItemModalIsOpen" />
-  <AddToCollectionModal
-    v-model="addToCollectionModalIsOpen"
-    :items-selected="itemsSelected"
-    @items-updated="refreshDataTable"
-  />
-</template>
-
-<script>
-import CreateItemModal from "@/components/CreateItemModal";
-import BatchCreateItemModal from "@/components/BatchCreateItemModal";
-import AddToCollectionModal from "@/components/AddToCollectionModal";
-
-import DataTable from "primevue/datatable";
-import Column from "primevue/column";
-import IconField from "primevue/iconfield";
-import InputIcon from "primevue/inputicon";
-import InputText from "primevue/inputtext";
-import { FilterMatchMode, FilterOperator } from "@primevue/core/api";
-import "primeicons/primeicons.css";
-
-import { getSampleList, deleteSample } from "@/server_fetch_utils.js";
-import FormattedItemName from "@/components/FormattedItemName";
-import ChemicalFormula from "@/components/ChemicalFormula";
-import CollectionList from "@/components/CollectionList";
-import Creators from "@/components/Creators";
-
-export default {
-  components: {
-    CreateItemModal,
-    BatchCreateItemModal,
-    AddToCollectionModal,
-    DataTable,
-    Column,
-    IconField,
-    InputIcon,
-    InputText,
-    FormattedItemName,
-    ChemicalFormula,
-    CollectionList,
-    Creators,
-  },
-  data() {
-    return {
-      createItemModalIsOpen: false,
-      batchCreateItemModalIsOpen: false,
-      addToCollectionModalIsOpen: false,
-      isSampleFetchError: false,
-      itemsSelected: [],
-      expandedRows: [],
-      availableColumns: [
-        { field: "item_id", header: "ID" },
-        { field: "type", header: "Type" },
-        { field: "name", header: "Sample name" },
-        { field: "chemform", header: "Formula" },
-        { field: "date", header: "Date" },
-        {
-          field: "collections",
-          header: "Collections",
-        },
-        { field: "creators", header: "Creators" },
-        { field: "nblocks", header: "# of blocks" },
-      ],
-      filters: {
-        global: { value: null },
-        item_id: {
-          operator: FilterOperator.AND,
-          constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }],
-        },
-        type: {
-          operator: FilterOperator.AND,
-          constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }],
-        },
-      },
-    };
-  },
-  computed: {
-    samplesWithComputedFields() {
-      return this.$store.state.sample_list.map((sample) => ({
-        ...sample,
-        collectionsList: sample.collections.map((collection) => collection.collection_id).join(" "),
-        creatorsList: sample.creators.map((creator) => creator.display_name).join(" "),
-      }));
-    },
-    samples() {
-      return this.samplesWithComputedFields;
-    },
-  },
-  mounted() {
-    this.getSamples();
-  },
-  methods: {
-    onFilter: function (event) {
-      console.log(event.filteredValue);
-    },
-    goToEditPage(event) {
-      const item_id = event.data.item_id;
-      window.open(`/edit/${item_id}`, "_blank");
-    },
-    getSamples() {
-      getSampleList()
-        .then(() => {
-          console.log("sample list received!");
-        })
-        .catch(() => {
-          this.isSampleFetchError = true;
-        });
-    },
-    applyFilter() {
-      this.gridOptions.api.setQuickFilter(this.searchValue);
-    },
-    onSelectionChanged(event) {
-      this.itemsSelected = event.api.getSelectedRows();
-    },
-    deleteSelectedItems() {
-      const idsSelected = this.itemsSelected.map((x) => x.item_id);
-      if (
-        confirm(
-          `Are you sure you want to delete ${this.itemsSelected.length} selected items (${idsSelected})?`,
-        )
-      ) {
-        idsSelected.forEach((item_id) => {
-          deleteSample(item_id);
-        });
-        this.itemsSelected = [];
-      }
-    },
-    refreshDataTable() {
-      this.getSamples();
-    },
-  },
-};
-</script>
-
-<style>
-.customize-table .ag-header {
-  font-size: 1rem;
-}
-
-.p-datatable-column-header-content .p-datatable-sort-icon {
-  visibility: hidden !important;
-}
-.p-datatable-column-header-content:hover .p-datatable-sort-icon {
-  visibility: visible !important;
-}
-
-.button-group > * {
-  display: flex;
-  gap: 0.5em;
-}
-</style>
diff --git a/webapp/src/components/StartingMaterialTable.vue b/webapp/src/components/StartingMaterialTable.vue
index d81020d03..4097e9552 100644
--- a/webapp/src/components/StartingMaterialTable.vue
+++ b/webapp/src/components/StartingMaterialTable.vue
@@ -1,64 +1,28 @@
 <template>
-  <div v-if="isFetchError" class="alert alert-danger">
-    <font-awesome-icon icon="exclamation-circle" />&nbsp;Server error: inventory could not be
-    retrieved.
-  </div>
-  <table class="table table-hover table-sm">
-    <thead>
-      <tr align="center">
-        <th scope="col">ID</th>
-        <th scope="col">Name</th>
-        <th scope="col">Formula</th>
-        <th scope="col">Date acquired</th>
-        <th scope="col">Purity</th>
-        <th scope="col"># of blocks</th>
-        <th scope="col"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        v-for="item in startingMaterials"
-        :id="item.item_id"
-        :key="item.item_id"
-        @click.exact="goToEditPage(item.item_id)"
-        @click.meta="openEditPageInNewTab(item.item_id)"
-        @click.ctrl="openEditPageInNewTab(item.item_id)"
-      >
-        <td>
-          <FormattedItemName
-            :item_id="item.item_id"
-            :item-type="item?.type || 'starting_materials'"
-            enable-modified-click
-          />
-        </td>
-        <td>{{ item.name }}</td>
-        <td><ChemicalFormula :formula="item.chemform" /></td>
-        <td>{{ $filters.IsoDatetimeToDate(item.date) }}</td>
-        <td>{{ item.chemical_purity }}</td>
-        <td>{{ item.nblocks }}</td>
-        <td align="right">
-          <button type="button" class="close" aria-label="delete" @click.stop="deleteItem(item)">
-            <span aria-hidden="true" style="color: grey">&times;</span>
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <DynamicDataTable
+    :columns="startingMaterialColumn"
+    :data="startingMaterials"
+    :data-type="'startingMaterials'"
+    :global-filter-fields="['item_id', 'name', 'chemform', 'chemical_purity', 'nblocks']"
+  />
 </template>
 
 <script>
-import ChemicalFormula from "@/components/ChemicalFormula";
-import FormattedItemName from "@/components/FormattedItemName";
-import { getStartingMaterialList, deleteStartingMaterial } from "@/server_fetch_utils.js";
+import DynamicDataTable from "@/components/DynamicDataTable";
+import { getStartingMaterialList } from "@/server_fetch_utils.js";
 
 export default {
-  components: {
-    ChemicalFormula,
-    FormattedItemName,
-  },
+  components: { DynamicDataTable },
   data() {
     return {
-      isFetchError: false,
+      startingMaterialColumn: [
+        { field: "item_id", header: "ID", body: "FormattedItemName", filter: true },
+        { field: "name", header: "Name" },
+        { field: "chemform", header: "Formula", body: "ChemicalFormula" },
+        { field: "date", header: "Date" },
+        { field: "chemical_purity", header: "Purity" },
+        { field: "nblocks", header: "# of blocks" },
+      ],
     };
   },
   computed: {
@@ -66,27 +30,12 @@ export default {
       return this.$store.state.starting_material_list;
     },
   },
-  created() {
+  mounted() {
     this.getStartingMaterials();
   },
   methods: {
-    goToEditPage(item_id) {
-      this.$router.push(`/edit/${item_id}`);
-    },
-    openEditPageInNewTab(item_id) {
-      window.open(`/edit/${item_id}`, "_blank");
-    },
     getStartingMaterials() {
-      getStartingMaterialList().catch(() => {
-        this.isFetchError = true;
-      });
-    },
-    deleteItem(item) {
-      if (confirm(`Are you sure you want to delete starting material "${item.item_id}"?`)) {
-        console.log("deleting...");
-        deleteStartingMaterial(item.item_id);
-      }
-      console.log("delete cancelled.");
+      getStartingMaterialList();
     },
   },
 };
diff --git a/webapp/src/router/index.js b/webapp/src/router/index.js
index 502a8bff0..d2166daa8 100644
--- a/webapp/src/router/index.js
+++ b/webapp/src/router/index.js
@@ -1,9 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import Samples from "../views/Samples.vue";
 import Equipment from "../views/Equipment.vue";
-import SamplePrime from "../views/SamplePrime.vue";
 import StartingMaterials from "../views/StartingMaterials.vue";
-import StartingMaterialsNext from "../views/StartingMaterialsNext.vue";
 import Collections from "@/views/Collections.vue";
 import NotFound from "../views/NotFound.vue";
 import EditPage from "../views/EditPage.vue";
@@ -11,6 +9,7 @@ import CollectionPage from "../views/CollectionPage.vue";
 import ExampleGraph from "@/views/ExampleGraph.vue";
 import ItemGraphPage from "@/views/ItemGraphPage.vue";
 import Admin from "@/views/Admin.vue";
+
 const routes = [
   {
     path: "/about",
@@ -32,7 +31,6 @@ const routes = [
     alias: "/",
     component: Equipment,
   },
-  { path: "/next/samples", name: "samples-next", alias: "/next", component: SamplePrime },
   {
     path: "/edit/:id",
     name: "edit",
@@ -48,11 +46,6 @@ const routes = [
     name: "starting-materials",
     component: StartingMaterials,
   },
-  {
-    path: "/next/starting-materials",
-    name: "starting-materials-next",
-    component: StartingMaterialsNext,
-  },
   {
     path: "/collections",
     name: "collections",
diff --git a/webapp/src/store/index.js b/webapp/src/store/index.js
index b565c613c..8b28cd6c5 100644
--- a/webapp/src/store/index.js
+++ b/webapp/src/store/index.js
@@ -97,7 +97,9 @@ export default createStore({
       }
     },
     deleteFromCollectionList(state, collection_summary) {
-      const index = state.collection_list.indexOf(collection_summary);
+      const index = state.collection_list
+        .map((e) => e.collection_id)
+        .indexOf(collection_summary.collection_id);
       if (index > -1) {
         state.collection_list.splice(index, 1);
       } else {
diff --git a/webapp/src/views/Collections.vue b/webapp/src/views/Collections.vue
index aaa615fd7..15fde57a8 100644
--- a/webapp/src/views/Collections.vue
+++ b/webapp/src/views/Collections.vue
@@ -3,37 +3,22 @@
 
   <div id="tableContainer" class="container">
     <div class="row">
-      <div class="col-sm-10 mx-auto mb-3">
-        <button class="btn btn-default" @click="createCollectionModalIsOpen = true">
-          Create new collection
-        </button>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-sm-10 mx-auto">
+      <div class="col-sm-12 mx-auto">
         <CollectionTable />
       </div>
     </div>
   </div>
-  <CreateCollectionModal v-model="createCollectionModalIsOpen" />
 </template>
 
 <script>
 import Navbar from "@/components/Navbar";
 import CollectionTable from "@/components/CollectionTable";
-import CreateCollectionModal from "@/components/CreateCollectionModal";
 
 export default {
   name: "Collections",
   components: {
     Navbar,
     CollectionTable,
-    CreateCollectionModal,
-  },
-  data() {
-    return {
-      createCollectionModalIsOpen: false,
-    };
   },
 };
 </script>
diff --git a/webapp/src/views/Equipment.vue b/webapp/src/views/Equipment.vue
index 72ad32b4d..35b25106c 100644
--- a/webapp/src/views/Equipment.vue
+++ b/webapp/src/views/Equipment.vue
@@ -2,38 +2,23 @@
   <Navbar />
 
   <div id="tableContainer" class="container">
-    <div class="row">
-      <div class="col-sm-12 mx-auto mb-3">
-        <button class="btn btn-default" @click="createEquipmentModalIsOpen = true">
-          Add an item
-        </button>
-      </div>
-    </div>
     <div class="row">
       <div class="col-sm-12 mx-auto">
         <EquipmentTable />
       </div>
     </div>
   </div>
-  <CreateEquipmentModal v-model="createEquipmentModalIsOpen" />
 </template>
 
 <script>
 import Navbar from "@/components/Navbar";
 import EquipmentTable from "@/components/EquipmentTable";
-import CreateEquipmentModal from "@/components/CreateEquipmentModal";
 
 export default {
-  name: "Equipments",
+  name: "Equipment",
   components: {
     Navbar,
     EquipmentTable,
-    CreateEquipmentModal,
-  },
-  data() {
-    return {
-      createEquipmentModalIsOpen: false,
-    };
   },
 };
 </script>
diff --git a/webapp/src/views/SamplePrime.vue b/webapp/src/views/SamplePrime.vue
deleted file mode 100644
index cb4769bec..000000000
--- a/webapp/src/views/SamplePrime.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <Navbar />
-
-  <div id="tableContainer" class="container">
-    <div class="row">
-      <div class="col-sm-12 mx-auto">
-        <SampleTablePrime />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Navbar from "@/components/Navbar";
-import SampleTablePrime from "@/components/SampleTablePrime";
-
-export default {
-  name: "Samples",
-  components: {
-    Navbar,
-    SampleTablePrime,
-  },
-};
-</script>
-
-<style scoped>
-#tableContainer.overlay:after {
-  content: "";
-  display: block;
-  position: fixed; /* could also be absolute */
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 10;
-  background-color: rgba(0, 0, 0, 0.2);
-}
-</style>
diff --git a/webapp/src/views/Samples.vue b/webapp/src/views/Samples.vue
index c67d00272..2879f3a1c 100644
--- a/webapp/src/views/Samples.vue
+++ b/webapp/src/views/Samples.vue
@@ -2,52 +2,23 @@
   <Navbar />
 
   <div id="tableContainer" class="container">
-    <div class="row">
-      <div class="col-sm-12 mx-auto mb-3">
-        <button class="btn btn-default" @click="createItemModalIsOpen = true">Add an item</button>
-        <button class="btn btn-default ml-2" @click="batchCreateItemModalIsOpen = true">
-          Add batch of items
-        </button>
-        <button class="btn btn-default ml-2" @click="qrScannerModalisOpen = true">
-          <font-awesome-icon icon="qrcode" /> Scan QR
-        </button>
-      </div>
-    </div>
     <div class="row">
       <div class="col-sm-12 mx-auto">
         <SampleTable />
       </div>
     </div>
   </div>
-  <CreateItemModal v-model="createItemModalIsOpen" :allowed-types="allowedTypes" />
-  <BatchCreateItemModal v-model="batchCreateItemModalIsOpen" />
-  <QRScannerModal v-model="qrScannerModalisOpen" />
 </template>
 
 <script>
 import Navbar from "@/components/Navbar";
 import SampleTable from "@/components/SampleTable";
-import CreateItemModal from "@/components/CreateItemModal";
-import BatchCreateItemModal from "@/components/BatchCreateItemModal";
-import QRScannerModal from "@/components/QRScannerModal";
-import { SAMPLE_TABLE_TYPES } from "@/resources.js";
 
 export default {
   name: "Samples",
   components: {
     Navbar,
     SampleTable,
-    CreateItemModal,
-    BatchCreateItemModal,
-    QRScannerModal,
-  },
-  data() {
-    return {
-      createItemModalIsOpen: false,
-      batchCreateItemModalIsOpen: false,
-      qrScannerModalisOpen: false,
-      allowedTypes: SAMPLE_TABLE_TYPES,
-    };
   },
 };
 </script>
diff --git a/webapp/src/views/SamplesNext.vue b/webapp/src/views/SamplesNext.vue
deleted file mode 100644
index 0be36955f..000000000
--- a/webapp/src/views/SamplesNext.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <Navbar />
-
-  <div id="tableContainer" class="container">
-    <div class="row">
-      <div class="col-sm-12 mx-auto mb-3">
-        <button class="btn btn-default" @click="createItemModalIsOpen = true">Add an item</button>
-        <button class="btn btn-default ml-2" @click="BatchCreateItemModalIsOpen = true">
-          Add batch of samples
-        </button>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-sm-12 mx-auto">
-        <FancySampleTable />
-      </div>
-    </div>
-  </div>
-  <CreateItemModal v-model="createItemModalIsOpen" />
-  <BatchCreateItemModal v-model="BatchCreateItemModalIsOpen" />
-</template>
-
-<script>
-import Navbar from "@/components/Navbar";
-import FancySampleTable from "@/components/FancySampleTable";
-import CreateItemModal from "@/components/CreateItemModal";
-import BatchCreateItemModal from "@/components/BatchCreateItemModal";
-
-export default {
-  name: "Samples",
-  components: {
-    Navbar,
-    FancySampleTable,
-    CreateItemModal,
-    BatchCreateItemModal,
-  },
-  data() {
-    return {
-      createItemModalIsOpen: false,
-      BatchCreateItemModalIsOpen: false,
-    };
-  },
-};
-</script>
-
-<style scoped>
-#tableContainer.overlay:after {
-  content: "";
-  display: block;
-  position: fixed; /* could also be absolute */
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 10;
-  background-color: rgba(0, 0, 0, 0.2);
-}
-</style>
diff --git a/webapp/src/views/StartingMaterials.vue b/webapp/src/views/StartingMaterials.vue
index 8208f2b8d..60c4f624d 100644
--- a/webapp/src/views/StartingMaterials.vue
+++ b/webapp/src/views/StartingMaterials.vue
@@ -1,47 +1,24 @@
 <template>
   <Navbar />
+
   <div id="tableContainer" class="container">
-    <div class="row">
-      <div class="col-sm-12 mx-auto mb-3">
-        <button
-          v-if="editable_inventory"
-          class="btn btn-default"
-          @click="createItemModalIsOpen = true"
-        >
-          Add a starting material
-        </button>
-      </div>
-    </div>
     <div class="row">
       <div class="col-sm-12 mx-auto">
-        <StartingMaterialTable></StartingMaterialTable>
+        <StartingMaterialTable />
       </div>
     </div>
   </div>
-  <CreateItemModal v-model="createItemModalIsOpen" :allowed-types="allowedTypes" />
 </template>
 
 <script>
 import Navbar from "@/components/Navbar";
 import StartingMaterialTable from "@/components/StartingMaterialTable";
-import CreateItemModal from "@/components/CreateItemModal";
-import { INVENTORY_TABLE_TYPES, EDITABLE_INVENTORY } from "@/resources.js";
 
 export default {
   name: "StartingMaterials",
   components: {
     Navbar,
     StartingMaterialTable,
-    CreateItemModal,
-  },
-  data() {
-    return {
-      createItemModalIsOpen: false,
-      allowedTypes: INVENTORY_TABLE_TYPES,
-    };
-  },
-  created() {
-    this.editable_inventory = EDITABLE_INVENTORY;
   },
 };
 </script>
diff --git a/webapp/src/views/StartingMaterialsNext.vue b/webapp/src/views/StartingMaterialsNext.vue
deleted file mode 100644
index c34976e7c..000000000
--- a/webapp/src/views/StartingMaterialsNext.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <Navbar />
-  <div id="tableContainer" class="container">
-    <div class="row">
-      <div class="col-sm-10 mx-auto">
-        <FancyStartingMaterialTable />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Navbar from "@/components/Navbar";
-import FancyStartingMaterialTable from "@/components/FancyStartingMaterialTable";
-
-export default {
-  components: {
-    Navbar,
-    FancyStartingMaterialTable,
-  },
-};
-</script>