adding an error handling element

component/src/activeTableStyle.ts

@@ -855,6 +855,13 @@ export const activeTableStyle = css`
     width: 100%;
   }
 
+  .absolute-container {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 100%;
+  }
+
   .loading-spinner {
     width: 60px;
     height: 60px;
@@ -866,6 +873,22 @@ export const activeTableStyle = css`
     animation: rotation 1s linear infinite;
   }
 
+  #error-container {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background-color: #ff000006;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #error-text {
+    font-size: 24px;
+    color: red;
+  }
+
   @keyframes rotation {
     0% {
       transform: rotate(0deg);

component/src/types/activeOverlayElements.ts

@@ -17,4 +17,5 @@ export interface ActiveOverlayElements {
   // the reason why this is here and not in ColumnSizerT is because it is more efficient to access these values here
   selectedColumnSizer?: SelectedColumnSizerT;
   loading?: HTMLElement;
+  error?: HTMLElement;
 }

component/src/utils/outerTableComponents/error/errorElement.ts

@@ -0,0 +1,24 @@
+import {OuterContainerElements} from '../outerContainerElements';
+import {ActiveTable} from '../../../activeTable';
+
+export class ErrorElement {
+  public static create() {
+    const containerElement = document.createElement('div');
+    containerElement.id = 'error-container';
+    containerElement.classList.add(OuterContainerElements.ABSOULUTE_FULL_TABLE_CLASS);
+    const textElement = document.createElement('div');
+    textElement.id = 'error-text';
+    textElement.innerHTML = 'Error retrieving data';
+    containerElement.appendChild(textElement);
+    return containerElement;
+  }
+
+  public static display(at: ActiveTable) {
+    const {error} = at._activeOverlayElements;
+    if (error) at._tableElementRef?.appendChild(error);
+  }
+
+  public static remove(at: ActiveTable) {
+    at._activeOverlayElements.error?.remove();
+  }
+}