diff --git a/src/css/metacatui-common.css b/src/css/metacatui-common.css
index ff98c8648..30cd653db 100644
--- a/src/css/metacatui-common.css
+++ b/src/css/metacatui-common.css
@@ -3519,11 +3519,13 @@ add font awesome close icon */
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
-  padding: 1rem;
+  padding: 0.7rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .table-editor .spreadsheet {
-  margin: 1rem 0 0.5rem 0;
+  margin: 0.7rem 0 0.5rem 0;
   width: 100%;
   max-width: 90vw;
   height: 100%;
@@ -3533,6 +3535,12 @@ add font awesome close icon */
   border-radius: 5px;
 }
 
+.table-editor .alert {
+  margin: -10px 0 0 0;
+  padding: 0.2rem 0.5rem;
+  font-size: 0.85rem;
+}
+
 .table-editor .table {
   /* undo bootstrap margin */
   margin-bottom: 0;
@@ -9656,4 +9664,19 @@ body > #extension-is-installed {
 ******************************************/
 .object-view {
   height: 100%;
+  display: grid;
+  align-items: center;
+  > .notification {
+    font-size: 1.6rem;
+    margin: 3rem;
+  }
+  > .alert-container {
+    margin: 3rem;
+  }
+  > .btn.download {
+    grid-row: 2;
+    justify-self: right;
+    margin-right: 1rem;
+    margin-top: 1rem;
+  }
 }
diff --git a/src/js/models/SolrResult.js b/src/js/models/SolrResult.js
index fd8c2ddeb..2b66880a8 100644
--- a/src/js/models/SolrResult.js
+++ b/src/js/models/SolrResult.js
@@ -281,36 +281,14 @@ define(["jquery", "underscore", "backbone"], ($, _, Backbone) => {
       /**
        * Download this object while sending the user's auth token in the
        * request.
+       * @returns {Promise} A promise that resolves to the response object
+       * @since 0.0.0
        */
       async downloadWithCredentials() {
-        const model = this;
-
         // Call the new getBlob method and handle the response
-        const response = await this.fetchDataObjectWithCredentials();
-        const blob = await response.blob();
-        const filename = this.getFileNameFromResponse(response);
-
-        // For IE, we need to use the navigator API
-        if (navigator && navigator.msSaveOrOpenBlob) {
-          navigator.msSaveOrOpenBlob(blob, filename);
-        } else {
-          // Other browsers can download it via a link
-          const a = document.createElement("a");
-          a.href = window.URL.createObjectURL(blob);
-          a.download = filename;
-          a.style.display = "none";
-          document.body.appendChild(a);
-          a.click();
-          a.remove();
-        }
-
-        // Track this event
-        model.trigger("downloadComplete");
-        MetacatUI.analytics?.trackEvent(
-          "download",
-          "Download DataONEObject",
-          model.get("id"),
-        );
+        return this.fetchDataObjectWithCredentials()
+          .then((response) => this.downloadFromResponse(response))
+          .catch((error) => this.handleDownloadError(error));
       },
 
       /**
@@ -370,6 +348,58 @@ define(["jquery", "underscore", "backbone"], ($, _, Backbone) => {
         return filename;
       },
 
+      /**
+       * Download data onto the user's computer from the response object
+       * @param {Response} response - The response object from the fetch request
+       * @returns {Response} The response object
+       * @since 0.0.0
+       */
+      async downloadFromResponse(response) {
+        const model = this;
+        const blob = await response.blob();
+        const filename = this.getFileNameFromResponse(response);
+
+        // For IE, we need to use the navigator API
+        if (navigator && navigator.msSaveOrOpenBlob) {
+          navigator.msSaveOrOpenBlob(blob, filename);
+        } else {
+          // Other browsers can download it via a link
+          const a = document.createElement("a");
+          const url = URL.createObjectURL(blob);
+          a.href = url;
+          a.download = filename;
+          a.click();
+          a.remove();
+          URL.revokeObjectURL(url);
+        }
+
+        // Track this event
+        model.trigger("downloadComplete");
+        MetacatUI.analytics?.trackEvent(
+          "download",
+          "Download DataONEObject",
+          model.get("id"),
+        );
+
+        return response;
+      },
+
+      /**
+       * Handle an error that occurs when downloading the object
+       * @param {Error} e - The error that occurred
+       * @since 0.0.0
+       */
+      handleDownloadError(e) {
+        const model = this;
+        model.trigger("downloadError");
+        // Track the error
+        MetacatUI.analytics?.trackException(
+          `Download DataONEObject error: ${e || ""}`,
+          model.get("id"),
+          true,
+        );
+      },
+
       getInfo: function (fields) {
         var model = this;
 
@@ -550,7 +580,7 @@ define(["jquery", "underscore", "backbone"], ($, _, Backbone) => {
             model.set("size", $(data).find("size").text() || "");
 
             //Get the entity name
-            model.set("filename", $(data).find("filename").text() || "");
+            model.set("fileName", $(data).find("filename").text() || "");
 
             //Check if this is a metadata doc
             var formatId = $(data).find("formatid").text() || "",
diff --git a/src/js/templates/tableEditor.html b/src/js/templates/tableEditor.html
index c514d303d..45db27912 100644
--- a/src/js/templates/tableEditor.html
+++ b/src/js/templates/tableEditor.html
@@ -22,12 +22,15 @@
              </tbody>
       </table>
     </section>
+    <!-- if view mode -->
+    <% if (!viewMode) { %>
     <section class="<%= controlsClass %>">
       <button class="btn btn-danger btn-small"
               id="reset">
               Clear & reset table
       </button>
     </section>
+    <% } %>
   <!-- </div>
   <div class="tab-pane" id="insert-table-csv-<%=cid%>">
     <textarea class="table-text"></textarea>
diff --git a/src/js/views/DataObjectView.js b/src/js/views/DataObjectView.js
index 569d0cb6d..c2cd0f7f1 100644
--- a/src/js/views/DataObjectView.js
+++ b/src/js/views/DataObjectView.js
@@ -1,8 +1,46 @@
 "use strict";
 
-define(["backbone", "views/TableEditorView"], (Backbone, TableEditorView) => {
-  // The base class for the view
+define([
+  "underscore",
+  "backbone",
+  "models/SolrResult",
+  "views/TableEditorView",
+  "text!templates/loading.html",
+  "text!templates/alert.html",
+], (
+  _,
+  Backbone,
+  SolrResult,
+  TableEditorView,
+  LoadingTemplate,
+  AlertTemplate,
+) => {
+  // The classes used by this view
   const BASE_CLASS = "object-view";
+  const CLASS_NAMES = {
+    base: BASE_CLASS,
+    well: "well", // Bootstrap class
+    downloadButton: ["btn", "download"],
+    downloadIcon: ["icon", "icon-cloud-download"],
+    loadingContainer: ["notification", "loading"],
+  };
+
+  // User-facing text
+  const DOWNLOAD_BUTTON_TEXT = "Download";
+  const LOADING_MESSAGE = "Downloading data...";
+  const PARSE_RESPONSE_MESSAGE = "Parsing data...";
+  const ERROR_TITLE = "Uh oh 😕";
+  const ERROR_MESSAGE =
+    "There was an error displaying the object. Please try again later or send us an email.";
+  const MORE_DETAILS_PREFIX = "<strong>More details: </strong>";
+  const FILE_TYPE_ERROR = "This file type is not supported.";
+  const FILE_SIZE_ERROR = "This file is too large to display.";
+  const GETINFO_ERROR =
+    "There was an error retrieving metadata for this data object.";
+
+  // Fields for metadata values that we require to display the object
+  const REQUIRED_FIELDS = ["formatId", "size"];
+  const OPTIONAL_FIELDS = ["fileName"];
 
   /**
    * @class DataObjectView
@@ -21,46 +59,249 @@ define(["backbone", "views/TableEditorView"], (Backbone, TableEditorView) => {
       type: "DataObjectView",
 
       /** @inheritdoc */
-      className: BASE_CLASS,
+      className: CLASS_NAMES.base,
 
       /** @inheritdoc */
       tagName: "div",
 
+      /**
+       * The template for the loading spinner
+       * @type {UnderscoreTemplate}
+       */
+      loadingTemplate: _.template(LoadingTemplate),
+
+      /**
+       * The template for the alert message
+       * @type {UnderscoreTemplate}
+       */
+      alertTemplate: _.template(AlertTemplate),
+
+      /**
+       * The file size limit for viewing files, in bytes. If the file is larger
+       * than this limit, the object will not be displayed. Default is 20 megabytes.
+       * @type {number|null}
+       */
+      sizeLimit: 20971520,
+
+      /**
+       * The data formats that are supported by this view, mapped to the
+       * functions that render them, i.e. { renderFunction: [format1, format2]
+       * }. Formats should include all relevant DataONE object formats as well
+       * as the possible Content-Type values from the headers of the response.
+       * @type {object}
+       */
+      formatMap: {
+        renderTable: ["text/csv", "text/tsv", "text/tab-separated-values"],
+      },
+
       /**
        * Initializes the DataObjectView
        * @param {object} options - Options for the view
        * @param {SolrResult} options.model - A SolrResult model
+       * @param {string} options.id - The ID of the DataONE object to view. Used
+       * to create a SolrResult model if one is not provided.
+       * @param {Element} [options.buttonContainer] - The container for the
+       * download button (defaults to the view's element)
        */
       initialize(options) {
         this.model = options.model;
-        // TODO: We get format from the response headers, should we compare it,
-        // or prevent downloading the object if it's not a supported type?
-        // this.format = this.model.get("formatId") ||
-        // this.model.get("mediaType");
+        this.buttonContainer = options.buttonContainer || this.el;
+        if (!this.model && options.id) {
+          this.model = new SolrResult({ id: options.id });
+        }
+      },
+
+      /**
+       * Checks if the size and format of the object are valid
+       * @returns {boolean|object} True if the size and format are valid, or an
+       * object with error messages if they are not
+       */
+      isValidSizeAndFormat() {
+        const format =
+          this.model.get("formatId") || this.model.get("mediaType");
+        const size = this.model.get("size");
+
+        const sizeValid = !this.sizeLimit || size <= this.sizeLimit;
+
+        const supportedFormats = Object.values(this.formatMap).flat();
+        const formatValid = supportedFormats.includes(format);
+        if (sizeValid && formatValid) {
+          return true;
+        }
+        const errors = {};
+        if (!sizeValid) {
+          errors.sizeValid = FILE_SIZE_ERROR;
+        }
+        if (!formatValid) {
+          errors.formatValid = FILE_TYPE_ERROR;
+        }
+        return errors;
       },
 
       /** @inheritdoc */
       render() {
+        // If missing formatId, size, filename, query Solr first
+        if (!this.hasRequiredMetadata()) {
+          this.fetchMetadata(this.render);
+          return this;
+        }
+
+        const valid = this.isValidSizeAndFormat();
+
+        if (valid !== true) {
+          this.showError(Object.values(valid).join(" "));
+          return this;
+        }
         this.$el.empty();
-        this.downloadObject().then((response) => this.renderObject(response));
+        this.showLoading(LOADING_MESSAGE);
+        this.downloadObject()
+          .then((response) => this.handleResponse(response))
+          .catch((error) => this.showError(error?.message || error));
         return this;
       },
 
+      /**
+       * Checks if the model has the required metadata fields
+       * @returns {boolean} True if the model has the required metadata fields
+       * and they are not empty
+       */
+      hasRequiredMetadata() {
+        if (!this.model) return false;
+        return REQUIRED_FIELDS.every((field) => {
+          const val = this.model.get(field);
+          return val && val !== 0;
+        });
+      },
+
+      /**
+       * Fetches the metadata for the object
+       * @param {Function} callback - The function to call when the metadata is
+       * fetched
+       */
+      fetchMetadata(callback) {
+        const view = this;
+        const { model } = view;
+        view.stopListening(model);
+        const fields = REQUIRED_FIELDS.concat(OPTIONAL_FIELDS).join(",");
+
+        view.listenTo(model, "sync", () => {
+          if (view.hasRequiredMetadata()) {
+            callback.call(view);
+          } else {
+            view.showError(GETINFO_ERROR);
+          }
+          view.stopListening(model);
+        });
+
+        view.listenTo(model, "getInfoError", () => {
+          view.showError(GETINFO_ERROR);
+          view.stopListening(model);
+        });
+
+        model.getInfo(fields);
+      },
+
+      /**
+       * Indicate that the data is loading
+       * @param {string} [message] - The message to display while loading
+       */
+      showLoading(message) {
+        this.$el.html(
+          this.loadingTemplate({
+            msg: message || LOADING_MESSAGE,
+          }),
+        );
+        this.el.classList.add(CLASS_NAMES.well);
+      },
+
+      /** Remove the loading spinner */
+      hideLoading() {
+        this.el.classList.remove(CLASS_NAMES.well);
+        this.$el.find(`.${CLASS_NAMES.loadingContainer.join(".")}`).remove();
+      },
+
+      /**
+       * Display an error message to the user
+       * @param {string} message - The error message to display
+       */
+      showError(message) {
+        this.hideLoading();
+        const alertTitle = `<center><h3>${ERROR_TITLE}</h3></center>`;
+        let alertMessage = alertTitle + ERROR_MESSAGE;
+        if (message) {
+          alertMessage += `<br><br>${MORE_DETAILS_PREFIX}${message}`;
+        }
+        this.$el.html(
+          this.alertTemplate({
+            includeEmail: true,
+            msg: alertMessage,
+            remove: false,
+          }),
+        );
+      },
+
+      /**
+       * Handle the response from the DataONE object API. Renders the data and
+       * shows the download button if the response is successful.
+       * @param {Response} response - The response from the DataONE object API
+       */
+      handleResponse(response) {
+        if (response.ok) {
+          this.hideLoading();
+          this.$el.html("");
+          // Response can only be consumed once (e.g. to text), so keep a copy
+          // to convert to a blob for downloading if user requests it.
+          this.response = response.clone();
+          this.renderObject(response);
+          this.renderDownloadButton();
+        } else {
+          this.showError(response.statusText);
+        }
+      },
+
       /**
        * With the already fetched DataONE object, check the format and render
        * the object accordingly.
        * @param {Response} response - The response from the DataONE object API
        */
       renderObject(response) {
-        const format = response.headers.get("Content-Type");
-        if (format === "text/csv") {
-          response.text().then((text) => {
-            this.csv = text;
-            this.showTable();
-          });
+        try {
+          this.showLoading(PARSE_RESPONSE_MESSAGE);
+          const format = response.headers.get("Content-Type");
+
+          // Map format to render function
+          const methods = this.formatMap;
+          // Find the key which includes the format in the array value
+          const method = Object.keys(methods).find((key) =>
+            methods[key].includes(format),
+          );
+          if (!method) {
+            throw new Error(FILE_TYPE_ERROR);
+          }
+
+          this[method](response);
+        } catch (error) {
+          this.showError(error?.message || error);
         }
       },
 
+      /** Renders a download button */
+      renderDownloadButton() {
+        const view = this;
+        const downloadButton = document.createElement("a");
+        downloadButton.textContent = DOWNLOAD_BUTTON_TEXT;
+        downloadButton.classList.add(...CLASS_NAMES.downloadButton);
+        const icon = document.createElement("i");
+        icon.classList.add(...CLASS_NAMES.downloadIcon);
+        downloadButton.appendChild(icon);
+        downloadButton.onclick = (e) => {
+          e.preventDefault();
+          const response = view.response.clone();
+          view.model.downloadFromResponse(response);
+        };
+        this.buttonContainer.appendChild(downloadButton);
+      },
+
       /**
        * Downloads the DataONE object
        * @returns {Promise} Promise that resolves with the Response from DataONE
@@ -69,14 +310,25 @@ define(["backbone", "views/TableEditorView"], (Backbone, TableEditorView) => {
         return this.model.fetchDataObjectWithCredentials();
       },
 
-      /** Shows the CSV file as a table */
-      showTable() {
-        this.table = new TableEditorView({
-          viewMode: true,
-          csv: this.csv,
+      /**
+       * Shows the CSV file as a table
+       * @param {Response} response - The response from the DataONE object API
+       */
+      renderTable(response) {
+        response.text().then((text) => {
+          this.csv = text;
+          this.hideLoading();
+          this.table = new TableEditorView({
+            viewMode: true,
+            csv: this.csv,
+          });
+          this.listenTo(this.table, "error", (message) => {
+            this.showError(message);
+            requestAnimationFrame(() => this.table.remove());
+          });
+          this.table.render();
+          this.el.appendChild(this.table.el);
         });
-        this.el.innerHTML = "";
-        this.el.appendChild(this.table.render().el);
       },
     },
   );
diff --git a/src/js/views/TableEditorView.js b/src/js/views/TableEditorView.js
index aa80e2526..8ad9c0bee 100644
--- a/src/js/views/TableEditorView.js
+++ b/src/js/views/TableEditorView.js
@@ -6,6 +6,7 @@ define([
   "markdownTableToJson",
   "papaParse",
   "text!templates/tableEditor.html",
+  "text!templates/alert.html",
 ], (
   _,
   $,
@@ -14,6 +15,7 @@ define([
   markdownTableToJson,
   PapaParse,
   Template,
+  AlertTemplate,
 ) => {
   // Classes used for elements we will manipulate
   const CLASS_NAMES = {
@@ -26,6 +28,11 @@ define([
   // a utility function to check if a value is empty for sorting
   const valIsEmpty = (x) =>
     x === "" || x === undefined || x === null || Number.isNaN(x);
+  // Alert message for too many cells
+  const tooManyCellsMessage = (newRowCount, originalRowCount) =>
+    `<strong>Note:</strong> This table has been truncated to ${newRowCount} rows (from the original ${originalRowCount} rows) to prevent performance issues.`;
+  // The maximum number of cells allowed in the table
+  const NUM_CELL_LIMIT = 50000;
   /**
    * @class TableEditorView
    * @classdesc A view of an HTML textarea with markdown editor UI and preview
@@ -57,6 +64,13 @@ define([
        */
       template: _.template(Template),
 
+      /**
+       * The template for the alert message
+       * @type {Underscore.Template}
+       * @since 0.0.0
+       */
+      alertTemplate: _.template(AlertTemplate),
+
       /**
        * The current number of rows displayed in the spreadsheet, including the
        * header row
@@ -133,6 +147,7 @@ define([
             this.template({
               cid: this.cid,
               controlsClass: CLASS_NAMES.controls,
+              viewMode: this.viewMode,
             }),
           )
           .data("view", this);
@@ -188,6 +203,15 @@ define([
         this.rowCount = spreadsheetData.length - 1 || this.initialRowCount;
         this.colCount = spreadsheetData[0].length - 1 || this.initialColCount;
 
+        if (this.rowCount * this.colCount > NUM_CELL_LIMIT) {
+          const newRowCount = Math.ceil(NUM_CELL_LIMIT / this.colCount);
+          this.originalRowCount = this.rowCount;
+          this.rowCount = newRowCount;
+          this.showMessage(
+            tooManyCellsMessage(newRowCount, this.originalRowCount),
+          );
+        }
+
         const tableHeaderElement = this.$el.find(".table-headers")[0];
         const tableBodyElement = this.$el.find(".table-body")[0];
 
@@ -203,14 +227,7 @@ define([
         tableBody.innerHTML = "";
 
         tableHeaders.appendChild(this.createHeaderRow(this.colCount));
-        this.createTableBody(tableBody, this.rowCount, this.colCount);
-
-        this.populateTable();
-
-        // If in view mode, remove editing functionality
-        if (this.viewMode) {
-          this.deactivateEditing();
-        }
+        this.createTableBody(tableBody);
       },
 
       /**
@@ -246,10 +263,13 @@ define([
        */
       populateTable() {
         const data = this.getData();
-        if (data === undefined || data === null) return;
+        if (!data?.length) return;
+
+        const rows = this.rowCount + 1 || data.length;
+        const cols = this.colCount + 1 || data[0].length;
 
-        for (let i = 0; i < data.length; i += 1) {
-          for (let j = 1; j < data[i].length; j += 1) {
+        for (let i = 0; i < rows; i += 1) {
+          for (let j = 1; j < cols; j += 1) {
             const cell = this.$el.find(`#r-${i}-${j}`)[0];
             let value = data[i][j];
             if (i > 0) {
@@ -352,34 +372,24 @@ define([
        * @returns {HTMLElement} The header row element
        */
       createHeaderRow() {
+        const headerData = this.getData()[0];
         const tr = document.createElement("tr");
         tr.setAttribute("id", "r-0");
         for (let i = 0; i <= this.colCount; i += 1) {
           const th = document.createElement("th");
+          tr.appendChild(th);
           th.setAttribute("id", `r-0-${i}`);
           th.setAttribute("class", `${i === 0 ? "" : "column-header"}`);
           if (i !== 0) {
             const span = document.createElement("span");
-            span.innerHTML = `Col ${i}`;
-            span.setAttribute("class", "column-header-span");
-            span.setAttribute("contentEditable", "true");
-            const dropDownDiv = document.createElement("div");
-            dropDownDiv.setAttribute("class", "dropdown");
-            dropDownDiv.innerHTML = `
-            <button class="${CLASS_NAMES.button}" id="col-dropbtn-${i}">
-              <i class="icon pointer icon-caret-down"></i>
-            </button>
-              <div id="col-dropdown-${i}" class="dropdown-content">
-                <button class="${CLASS_NAMES.colOption} col-insert-left"><i class="icon icon-long-arrow-left icon-on-left"></i>Insert 1 column left</button>
-                <button class="${CLASS_NAMES.colOption} col-insert-right"><i class="icon icon-long-arrow-right icon-on-left"></i>Insert 1 column right</button>
-                <button class="${CLASS_NAMES.colOption} ${CLASS_NAMES.sortButton}"><i class="icon icon-sort-by-attributes icon-on-left"></i>Sort column</button>
-                <button class="${CLASS_NAMES.colOption} col-delete"><i class="icon icon-remove icon-on-left"></i>Delete column</button>
-              </div>
-            `;
             th.appendChild(span);
-            th.appendChild(dropDownDiv);
+            span.innerHTML = headerData[i] || `Col ${i}`;
+            span.setAttribute("class", "column-header-span");
+            if (!this.viewMode) {
+              span.setAttribute("contentEditable", "true");
+            }
+            th.appendChild(this.createColDropdown(i));
           }
-          tr.appendChild(th);
         }
         return tr;
       },
@@ -388,40 +398,41 @@ define([
        * Create a row for the table
        * @param {number} rowNum The table row number to add to the table, where
        * 0 is the header row
+       * @param {Array} rowData The data for the row
        * @returns {HTMLElement} The row element
        */
-      createTableBodyRow(rowNum) {
+      createTableBodyRow(rowNum, rowData) {
+        const fragment = document.createDocumentFragment(); // Create a document fragment
         const tr = document.createElement("tr");
         tr.setAttribute("id", `r-${rowNum}`);
+
         for (let i = 0; i <= this.colCount; i += 1) {
-          const cell = document.createElement(`${i === 0 ? "th" : "td"}`);
-          // header
+          const cell = document.createElement(i === 0 ? "th" : "td");
+          cell.setAttribute("id", `r-${rowNum}-${i}`);
+          tr.appendChild(cell);
+          cell.contentEditable = false;
+
           if (i === 0) {
-            cell.contentEditable = false;
             const span = document.createElement("span");
-            const dropDownDiv = document.createElement("div");
-            span.innerHTML = rowNum;
-            dropDownDiv.setAttribute("class", "dropdown");
-            dropDownDiv.innerHTML = `
-            <button class="dropbtn" id="row-dropbtn-${rowNum}">
-              <i class="icon pointer icon-caret-right"></i>
-            </button>
-              <div id="row-dropdown-${rowNum}" class="dropdown-content">
-                <button class="row-dropdown-option row-insert-top"><i class="icon icon-long-arrow-up icon-on-left"></i>Insert 1 row above</button>
-                <button class="row-dropdown-option row-insert-bottom"><i class="icon icon-long-arrow-down icon-on-left"></i>Insert 1 row below</button>
-                <button class="row-dropdown-option row-delete"><i class="icon icon-remove icon-on-left"></i>Delete row</button>
-              </div>
-            `;
+            span.textContent = rowNum;
+
+            // Append elements to the cell
             cell.appendChild(span);
-            cell.appendChild(dropDownDiv);
-            cell.setAttribute("class", CLASS_NAMES.rowHeader);
+            cell.classList.add(CLASS_NAMES.rowHeader);
+
+            if (!this.viewMode) {
+              cell.appendChild(this.createRowDropdown(rowNum));
+            }
           } else {
-            cell.contentEditable = true;
+            cell.innerHTML = rowData[i] || "";
+            if (!this.viewMode) {
+              cell.contentEditable = true;
+            }
           }
-          cell.setAttribute("id", `r-${rowNum}-${i}`);
-          tr.appendChild(cell);
         }
-        return tr;
+
+        fragment.appendChild(tr);
+        return fragment;
       },
 
       /**
@@ -429,9 +440,112 @@ define([
        * @param  {HTMLElement} tableBody A table HTML Element
        */
       createTableBody(tableBody) {
+        const data = this.getData();
+        if (!data?.length) return;
+        const fragment = document.createDocumentFragment();
+
         for (let rowNum = 1; rowNum <= this.rowCount; rowNum += 1) {
-          tableBody.appendChild(this.createTableBodyRow(rowNum));
+          const rowData = data[rowNum];
+          const rowFragment = this.createTableBodyRow(rowNum, rowData);
+          fragment.appendChild(rowFragment);
         }
+
+        tableBody.appendChild(fragment);
+      },
+
+      /**
+       * Create a dropdown menu for the row
+       * @param {number} rowNum The row number to add the dropdown to
+       * @returns {HTMLElement} The dropdown element
+       * @since 0.0.0
+       */
+      createRowDropdown(rowNum) {
+        const dropDownDiv = document.createElement("div");
+        dropDownDiv.classList.add("dropdown");
+
+        const button = document.createElement("button");
+        button.classList.add("dropbtn");
+        button.id = `row-dropbtn${this.cid}-${rowNum}`;
+        button.innerHTML = '<i class="icon pointer icon-caret-right"></i>';
+
+        const dropdownContent = document.createElement("div");
+        dropdownContent.id = `row-dropdown${this.cid}-${rowNum}`;
+        dropdownContent.classList.add("dropdown-content");
+
+        // Add the dropdown options
+        const insertTop = document.createElement("button");
+        insertTop.classList.add("row-dropdown-option", "row-insert-top");
+        insertTop.innerHTML =
+          '<i class="icon icon-long-arrow-up icon-on-left"></i>Insert 1 row above';
+
+        const insertBottom = document.createElement("button");
+        insertBottom.classList.add("row-dropdown-option", "row-insert-bottom");
+        insertBottom.innerHTML =
+          '<i class="icon icon-long-arrow-down icon-on-left"></i>Insert 1 row below';
+
+        const deleteRow = document.createElement("button");
+        deleteRow.classList.add("row-dropdown-option", "row-delete");
+        deleteRow.innerHTML =
+          '<i class="icon icon-remove icon-on-left"></i>Delete row';
+
+        // Append the options to the dropdown
+        dropdownContent.append(insertTop, insertBottom, deleteRow);
+        dropDownDiv.append(button, dropdownContent);
+        return dropDownDiv;
+      },
+
+      /**
+       * Create a dropdown menu for the header row
+       * @param {number} colNum The column number to add the dropdown to
+       * @returns {HTMLElement} The dropdown element
+       * @since 0.0.0
+       */
+      createColDropdown(colNum) {
+        const dropDownDiv = document.createElement("div");
+        dropDownDiv.setAttribute("class", "dropdown");
+        let buttons = [
+          {
+            class: "col-insert-left",
+            icon: "long-arrow-left",
+            text: "Insert 1 column left",
+            viewMode: false,
+          },
+          {
+            class: "col-insert-right",
+            icon: "long-arrow-right",
+            text: "Insert 1 column right",
+            viewMode: false,
+          },
+          {
+            class: "col-delete",
+            icon: "remove",
+            text: "Delete column",
+            viewMode: false,
+          },
+          {
+            class: "col-sort",
+            icon: "sort",
+            text: "Sort column",
+            viewMode: true,
+          },
+        ];
+        if (this.viewMode) {
+          buttons = buttons.filter((button) => button.viewMode);
+        }
+        const buttonEls = buttons.map(
+          (button) =>
+            `<button class="${CLASS_NAMES.colOption} ${button.class}"><i class="icon icon-${button.icon} icon-on-left"></i>${button.text}</button>`,
+        );
+
+        dropDownDiv.innerHTML = `
+          <button class="${CLASS_NAMES.button}" id="col-dropbtn-${colNum}">
+            <i class="icon pointer icon-caret-down"></i>
+          </button>
+            <div id="col-dropdown${this.cid}-${colNum}" class="dropdown-content">
+              ${buttonEls.join("")}
+            </div>
+          `;
+        return dropDownDiv;
       },
 
       /**
@@ -645,13 +759,32 @@ define([
       /**
        * Converts data to an array of arrays from a CSV
        * @param  {string} csv The table data as a CSV string
-       * @returns {string} The table data as a CSV string
+       * @param {boolean} addRowNumbers - if true, adds a row number column to
+       * the left of the table
+       * @returns {Array} The table data as a CSV string
        * @since 0.0.0
        */
-      getJSONfromCSV(csv) {
-        const parsedCSV = PapaParse.parse(csv);
+      getJSONfromCSV(csv, addRowNumbers = true) {
+        const view = this;
+        // https://www.papaparse.com/docs#config
+        const parsedCSV = PapaParse.parse(csv, {
+          skipEmptyLines: "greedy",
+          error: (err) =>
+            view.showMessage("error", err?.message || err, false, true),
+        });
         if (!parsedCSV) return null;
-        return parsedCSV.data;
+        const { data, errors } = parsedCSV;
+
+        if (addRowNumbers) {
+          for (let i = 0; i < data.length; i += 1) {
+            data[i].unshift(i);
+          }
+        }
+        if (errors?.length) {
+          const triggerError = !data?.length;
+          this.showMessage(errors[0].message, "warning", false, triggerError);
+        }
+        return data;
       },
 
       /**
@@ -672,6 +805,36 @@ define([
         return firstColEmpty;
       },
 
+      /**
+       * Display an alert at the top of the table
+       * @param {string} message The message to display
+       * @param {string} [type] The class to apply to the alert
+       * @param {boolean} [showEmail] Whether to show the email address
+       * @param {boolean} [triggerError] Set to true to trigger an error event
+       * on the view with the message
+       * @since 0.0.0
+       */
+      showMessage(
+        message,
+        type = "info",
+        showEmail = false,
+        triggerError = false,
+      ) {
+        if (this.alert) {
+          this.alert.remove();
+        }
+        this.alert = document.createElement("div");
+        this.alert.innerHTML = this.alertTemplate({
+          classes: `alert-${type}`,
+          msg: message,
+          includeEmail: showEmail,
+        });
+        this.el.prepend(this.alert);
+        if (triggerError) {
+          this.trigger("error", message);
+        }
+      },
+
       /**
        * Close the dropdown menu if the user clicks outside of it
        * @param  {type} e The event that triggered this function
@@ -705,11 +868,10 @@ define([
           } else if (classes.contains("dropbtn")) {
             const idArr = e.target.id.split("-");
             document
-              .getElementById(`col-dropdown-${idArr[2]}`)
+              .getElementById(`col-dropdown${this.cid}-${idArr[2]}`)
               .classList.toggle("show");
           } else if (classes.contains(CLASS_NAMES.colOption)) {
-            const index = e.target.parentNode.id.split("-")[2];
-
+            const index = parseInt(e.target.parentNode.id.split("-")[2], 10);
             if (classes.contains("col-insert-left")) {
               view.addColumn(index, "left");
             } else if (classes.contains("col-insert-right")) {
@@ -737,10 +899,10 @@ define([
           if (classes.contains("dropbtn")) {
             const idArr = e.target.id.split("-");
             view.$el
-              .find(`#row-dropdown-${idArr[2]}`)[0]
+              .find(`#row-dropdown${this.cid}-${idArr[2]}`)[0]
               .classList.toggle("show");
           } else if (classes.contains("row-dropdown-option")) {
-            const index = parseInt(e.target.parentNode.id.split("-"), 10)[2];
+            const index = parseInt(e.target.parentNode.id.split("-")[2], 10);
             if (classes.contains("row-insert-top")) {
               view.addRow(index, "top");
             }
diff --git a/src/js/views/ViewObjectButtonView.js b/src/js/views/ViewObjectButtonView.js
index 167208a52..d0bbae169 100644
--- a/src/js/views/ViewObjectButtonView.js
+++ b/src/js/views/ViewObjectButtonView.js
@@ -8,15 +8,18 @@ define(["jquery", "backbone", "views/DataObjectView"], (
   // The base class for the view
   const BASE_CLASS = "view-data-button";
   const CLASS_NAMES = {
-    button: [BASE_CLASS, "btn"],
+    base: [BASE_CLASS, "btn"],
+    button: ["btn"],
     icon: ["icon", "icon-eye-open"],
     modal: ["modal", "hide", "fade", "full-screen"],
     header: ["modal-header"],
     closeButton: ["close"],
     body: ["modal-body"],
     footer: ["modal-footer"],
+    titleIcon: ["icon", "icon-on-left"],
   };
   const BUTTON_TEXT = "View";
+  const CLOSE_BUTTON_TEXT = "Close";
 
   /**
    * @class ViewDataButtonView
@@ -35,7 +38,7 @@ define(["jquery", "backbone", "views/DataObjectView"], (
       type: "ViewDataButtonView",
 
       /** @inheritdoc */
-      className: CLASS_NAMES.button.join(" "),
+      className: CLASS_NAMES.base.join(" "),
 
       /** @inheritdoc */
       tagName: "a",
@@ -50,19 +53,22 @@ define(["jquery", "backbone", "views/DataObjectView"], (
        * clicked. The modal will contain a DataObjectView.
        * @param {object} options - Options for the modal
        * @param {string} options.title - The title of the modal
+       * @param {string} options.icon - The icon for the title
        * @returns {string} The HTML for the modal
        */
-      modalTemplate({ title = "Data" } = {}) {
+      modalTemplate({ title = "Data", icon = "file-text" } = {}) {
         const id = `modal-${this.model.cid}`;
         return `<div id="${id}" class="${CLASS_NAMES.modal.join(" ")}">
             <div class="${CLASS_NAMES.header.join(" ")}">
               <button type="button" class="${CLASS_NAMES.closeButton.join(" ")}" data-dismiss="modal">&times;</button>
-              <h3>${title}</h3>
+              <h3><i class="${CLASS_NAMES.titleIcon.join(" ")} icon-${icon}"></i>${title}</h3>
             </div>
             <div class="${CLASS_NAMES.body.join(" ")}">
               <p>loading...</p>
             </div>
-            <div class="${CLASS_NAMES.footer.join(" ")}"></div>
+            <div class="${CLASS_NAMES.footer.join(" ")}">
+              <button class="${CLASS_NAMES.button.join(" ")}" data-dismiss="modal" aria-hidden="true">${CLOSE_BUTTON_TEXT}</button>
+            </div>
           </div>`;
       },
 
@@ -75,8 +81,22 @@ define(["jquery", "backbone", "views/DataObjectView"], (
         this.modalContainer = options.modalContainer || document.body;
       },
 
+      /**
+       * @see DataObjectView#checkSizeAndFormat
+       * @returns {boolean} True if the object is a valid type and size
+       */
+      isValidSizeAndFormat() {
+        this.formatMap = DataObjectView.prototype.formatMap;
+        this.sizeLimit = DataObjectView.prototype.sizeLimit;
+        return DataObjectView.prototype.isValidSizeAndFormat.call(this);
+      },
+
       /** @inheritdoc */
       render() {
+        if (this.isValidSizeAndFormat() !== true) {
+          this.el.style.display = "none";
+          return this;
+        }
         this.el.innerHTML = BUTTON_TEXT;
         const icon = document.createElement("i");
         icon.classList.add(...CLASS_NAMES.icon);
@@ -90,12 +110,16 @@ define(["jquery", "backbone", "views/DataObjectView"], (
        */
       renderModal() {
         const modalHTML = this.modalTemplate({
-          title: this.model.get("title") || "Data",
+          title:
+            this.model.get("title") || this.model.get("fileName") || "Data",
+          icon: "table",
         });
         const modal = $(modalHTML).modal();
         const modalBody = modal.find(`.${CLASS_NAMES.body.join(".")}`);
+        const modalFooter = modal.find(`.${CLASS_NAMES.footer.join(".")}`)[0];
         const objectView = new DataObjectView({
           model: this.model,
+          buttonContainer: modalFooter,
         });
         modalBody.empty();
         modalBody.append(objectView.render().el);