diff --git a/docs/docs/async-table.md b/docs/docs/async-table.md
index 146d29e4..f4c88138 100644
--- a/docs/docs/async-table.md
+++ b/docs/docs/async-table.md
@@ -18,6 +18,8 @@ import '../static/c/async-table.css';
 | showArrangingColumns |              |            `boolean`            |                should the button for arranging columns be shown                 |
 |      showExport      |              |            `boolean`            |                      should the button for export be shown                      |
 |  dropdownMenuExport  |              |            `boolean`            | should the button for export download csv or can you have more download options |
+|  showResetToDefault  |              |            `boolean`            |                should the button for reseting to default be shown               |
+|    defaultHeaders    |              | [`TableHeader[]`](#tableheader) |                              default table headers.                             |
 <br></br>
 ****
 
@@ -76,6 +78,8 @@ Defines methods for fetching and loading more table data.
 |        export         | `function` |     retrieves all data that should be included when export is triggered by the table      |
 |    arrangeColumns     | `function` |                This method is intended for persisting column organization                 |
 | additionalExportTypes | `function` |          This method is intended for adding additional export types to function           |
+|      setDefault       | `function` |                 This method is intended for adding default Headers state                  |
+|      getDefault       | `function` |                This method is intended for getting default Headers state                  |
 <br></br>
 ****
 
diff --git a/packages/demo/src/OtherDemos/AsyncTableDemo.svelte b/packages/demo/src/OtherDemos/AsyncTableDemo.svelte
index dbc3aa52..314d2317 100644
--- a/packages/demo/src/OtherDemos/AsyncTableDemo.svelte
+++ b/packages/demo/src/OtherDemos/AsyncTableDemo.svelte
@@ -39,7 +39,7 @@
   onMount(() => {
     const asyncTable = document.createElement('jp-async-table') as any;
     asyncTable.dropdownMenuExport = true;
-    asyncTable.headers = [
+    asyncTable.defaultHeaders = [
       {
         key: '/name',
         label: 'Name'
@@ -71,6 +71,7 @@
         disabled: true
       }
     ];
+    asyncTable.headers =  JSON.parse(JSON.stringify(asyncTable.defaultHeaders));
     asyncTable.service = {
       get: async () => {
         let rows = [...Array(100).keys()].map(() => ({
@@ -110,6 +111,13 @@
         const storedValue = localStorage.getItem(id);
         return storedValue ? JSON.parse(storedValue) : null;
       },
+      setDefault: async () => {
+        localStorage.setItem('default', JSON.stringify(asyncTable.defaultHeaders));
+      },
+      getDefault: async () => {
+        const storedValue = localStorage.getItem('default');
+        return storedValue ? JSON.parse(storedValue) : null;
+      },
       adjustPageSize: async () => {},
       adjustSort: async () => {}
     };
@@ -120,7 +128,9 @@
     asyncTable.height = '500px';
     asyncTable.freezeFirstColumn = true;
     asyncTable.freezeLastColumn = true;
+    asyncTable.showResetToDefault = true;
     el.appendChild(asyncTable);
+    asyncTable.service.setDefault();
   });
 
   function applyFilters() {
diff --git a/packages/lib/src/async-table/async-table.wc.svelte b/packages/lib/src/async-table/async-table.wc.svelte
index 00de5d1e..c22814a0 100644
--- a/packages/lib/src/async-table/async-table.wc.svelte
+++ b/packages/lib/src/async-table/async-table.wc.svelte
@@ -23,7 +23,8 @@
     LOADING: 'Loading',
     LOAD_MORE: 'Load more',
     PAGE_SIZE: 'Page size',
-    SAVE: 'Save'
+    SAVE: 'Save',
+    RESET: 'Reset'
   };
 
   export let allowArrangeColumns = true;
@@ -41,10 +42,10 @@
   export let service: TableService;
   export let id: string;
   export let height: string | null = null;
-
+  export let showResetToDefault = true;
+  export let defaultHeaders: TableHeader[] = [];
   let additionalExportTypes = [];
   let activeHeaders: TableHeader[] = [];
-
   let isOpen = false;
   let resolved: string[] = [];
 
@@ -134,7 +135,7 @@
     const { key, fallback, pipes } = header;
 
     let value: any;
-    
+
     try {
       value = get(row, key);
     } catch {
@@ -480,6 +481,9 @@
           });
       }
     }
+    if (service.getDefault) {
+      defaultHeaders = await service.getDefault();
+    }
 
     activeHeaders = headers.filter((it) => !it.disabled);
     await getData();
@@ -489,11 +493,21 @@
     exportDataGeneric(option);
     isOpen = false;
   };
+
+  async function handleReset() {
+    headers = [...defaultHeaders];
+    activeHeaders = headers.filter((it) => !it.disabled);
+  }
 </script>
 
 <div class="jp-async-table">
   {#if showArrangingColumns || showImport || showExport}
     <div class="jp-async-table-header">
+      {#if showResetToDefault}
+        <button on:click={handleReset} class="jp-async-table-button">
+          {wording.RESET}
+        </button>
+      {/if}
       {#if showArrangingColumns}
         &nbsp;
         <button type="button" on:click={arrangeColumns} class="jp-async-table-button">
@@ -566,7 +580,7 @@
                 class:jp-async-table-sticky-last={index === headers.length - 1 && freezeLastColumn}
                 class:jp-async-table-no-cursor={header.disableOrganize}
                 class:jp-async-table-hover-over={hoveringOverColumnIndex === index}
-                class={`jp-async-table-header-cell-${header.key.slice(1).replace(/\//g, '(?!^)\/')}`}
+                class={`jp-async-table-header-cell-${header.key.slice(1).replace(/\//g, '(?!^)/')}`}
                 draggable={allowArrangeColumns && !header.disableOrganize}
                 on:click={() => adjustSort(header)}
                 on:dragstart={(e) => {
@@ -615,7 +629,7 @@
                   class:jp-async-table-sticky-last={columnIndex === headers.length - 1 &&
                     freezeLastColumn}
                   class:jp-async-table-hover-over={hoveringOverColumnIndex === columnIndex}
-                  class={`jp-async-table-cell-${header.key.slice(1).replace(/\//g, '(?!^)\/')}`}
+                  class={`jp-async-table-cell-${header.key.slice(1).replace(/\//g, '(?!^)/')}`}
                   on:click={(e) => rowClick(row, rowIndex, header, e)}
                 >
                   {#await handleColumn(header, row, rowIndex) then val}
@@ -699,7 +713,7 @@
                   if (!column.disableOrganize) drop(e, index);
                 }}
               >
-              {@html dragHandleIcon}
+                {@html dragHandleIcon}
               </span><input type="checkbox" value={true} bind:checked={column.enabled} />
               <span>{@html column.label}</span>
             </label>{/if}
diff --git a/packages/lib/src/types/table.service.ts b/packages/lib/src/types/table.service.ts
index 2e392585..03795a96 100644
--- a/packages/lib/src/types/table.service.ts
+++ b/packages/lib/src/types/table.service.ts
@@ -13,4 +13,7 @@ export interface TableService<T = any> {
   adjustSort?: (sort: TableSort) => Promise<void>;
   export?: () => Promise<T[]>;
   import?: (file: File) => Promise<T[]>;
+  setDefault?: (
+  ) => Promise<void>;
+  getDefault?: () => Promise<Array<{ key: string; disabled?: boolean; label: string }>>;	
 }