diff --git a/README.md b/README.md
index 54048fd4..03047e12 100644
--- a/README.md
+++ b/README.md
@@ -19,14 +19,6 @@
 - Overflow handling
 - Everything is customizable!
 
-### :tada: Latest update: Data filtering
-
-<br />
-
-https://github.com/OvidijusParsiunas/active-table/assets/18709577/e6471759-8330-4e4f-ba40-3a52ec880700
-
-<br />
-
 ### :computer: Getting started
 
 ```
@@ -45,7 +37,15 @@ Then simply add this to your markup:
 <active-table content='[["Planet", "Diameter"], ["Earth", 12756]]'/>
 ```
 
-The exact syntax for the above example will vary depending on the framework of your choice ([see here](https://activetable.io/examples/frameworks)).
+The exact syntax for the above example will vary depending on the framework of your choice.
+
+### :beginner: Examples
+
+Check out the live codepen examples for your UI framework/library of choice:
+
+| React                                                                                                                                                         | Vue 2                                                                                                                                                      | Vue 3                                                                                                                                                      | Svelte                                                                                                                                        | Angular                                                                                                                                                                          | Solid                                                                                                                                                                                | Next                                                                                                                                                                                                                                                                                                       | VanillaJS                                                                                                                                                            |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <a href="https://codesandbox.io/s/active-table-react-cstm7k?file=/src/App.tsx" target="_blank"><img src="./website/static/img/reactLogo.png" width="60"/></a> | <a href="https://codesandbox.io/s/active-table-vue2-32f04e?file=/src/App.vue" target="_blank"><img src="./website/static/img/vueLogo.png" width="60"/></a> | <a href="https://codesandbox.io/s/active-table-vue3-z729vs?file=/src/App.vue" target="_blank"><img src="./website/static/img/vueLogo.png" width="60"/></a> | <a href="https://codesandbox.io/s/active-table-svelte-dbd0qp" target="_blank"><img src="./website/static/img/svelteLogo.png" width="45"/></a> | <a href="https://codesandbox.io/s/active-table-angular-9v8nfe?file=/src/app/app.component.html" target="_blank"><img src="./website/static/img/angularLogo.png" width="66"/></a> | <a href="https://codesandbox.io/p/sandbox/active-table-solidjs-wjg6h7?file=%2Fsrc%2FApp.tsx%3A41%2C5" target="_blank"><img src="./website/static/img/solidLogo.png" width="60"/></a> | <a href="https://codesandbox.io/p/sandbox/deep-chat-nextjs-9pv25f?file=%2Fpackage.json%3A6%2C19&selection=%5B%7B%22endColumn%22%3A30%2C%22endLineNumber%22%3A28%2C%22startColumn%22%3A30%2C%22startLineNumber%22%3A28%7D%5D" target="_blank"><img src="./website/static/img/nextLogo.png" width="60"/></a> | <a href="https://codesandbox.io/s/active-table-vanillajs-62yrrj?file=/index.html" target="_blank"><img src="./website/static/img/vanillaJSLogo.png" width="60"/></a> |
 
 ### :dart: Roadmap
 
diff --git a/assets/social-media/media.gif b/assets/social-media/media.gif
new file mode 100644
index 00000000..14ec37f7
Binary files /dev/null and b/assets/social-media/media.gif differ
diff --git a/component/index.html b/component/index.html
index 987a0ad0..de098dfb 100644
--- a/component/index.html
+++ b/component/index.html
@@ -3,304 +3,38 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>Active Table Component Demo</title>
-    <!-- <script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js"></script> -->
+    <title>Active Table Development</title>
     <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script src="../node_modules/lit/polyfill-support.js"></script>
     <script type="module" src="../dist/activeTable.js"></script>
-    <style>
-      p {
-        border: solid 1px blue;
-        padding: 8px;
-      }
-    </style>
+    <!-- https://activetable.io/examples/files -->
+    <!-- Need this when exporting file formats that are other than csv -->
+    <!-- <script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js"></script> -->
   </head>
   <body>
-    <div style="width: 100%; height: 40px"></div>
-    <!-- <div style="width: 20px; height: 20px; float: left"></div> -->
-    <!-- when the table reaches the parent limit it does a jump down because of the above :/ -->
-    <div>
-      <active-table id="active-element"></active-table>
-    </div>
+    <!-- Attributes can be set as strings either directly on the element (headerStyles) or via a `setAttribute` method on its reference (tableStyle).
+      When passing JSON objects make sure that they are first correctly stringified (use the following tool https://jsonlint.com/), functions assigned
+      to properties must not have external references and all regex values are properly escaped.
+      You can also pass values into the component via properties by using the element reference (content).
+      -->
+    <active-table id="active-table-element" headerStyles='{"default":{"backgroundColor": "#d6d6d630"}}'></active-table>
     <script>
-      const myValue = [
-        [1, 2, 3, 4],
-        [1, 2, 3, 5],
+      const element = document.getElementById('active-table-element');
+      // Setting value via a property (easiest way)
+      element.content = [
+        ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
+        ['Earth', 12756, 5.97, 1, 5514],
+        ['Mars', 6792, 0.642, 2, 3934],
+        ['Jupiter', 142984, 1898, 79, 1326],
+        ['Saturn', 120536, 568, 82, 687],
+        ['Neptune', 49528, 102, 14, 1638],
       ];
-      const element = document.getElementById('active-element');
-      const aa = (cellUpdate) => {
-        console.log(cellUpdate);
-      };
-      const columnsUpdate = (columnsUpdate) => {
-        console.log(columnsUpdate);
-      };
-      const tableUpdate = (tableUpdate) => {
-        console.log(tableUpdate);
-      };
-      setTimeout(() => {
-        if (element) {
-          // element.setAttribute('content', `[[${myValue[0]}],[${myValue[1]}]]`);
-          element.setAttribute('tableStyle', JSON.stringify({border: '20px solid black'}));
-          element.setAttribute(
-            'cellStyle',
-            JSON.stringify({borderRight: '4px solid grey', borderLeft: '8px solid red', backgroundColor: 'blue'})
-          );
-          element.setAttribute('defaultText', '-');
-          element.setAttribute(
-            'customColumnTypes',
-            JSON.stringify([
-              {
-                name: 'Custom type 1',
-                textValidation: {
-                  func: `(cellText) => {
-                      return !isNaN(cellText)
-                    }`,
-                  setTextToDefaultOnFail: false,
-                  failedStyle: {backgroundColor: 'yellow'},
-                },
-              },
-            ])
-          );
-          element.setAttribute('isDefaultTextRemovable', 'false');
-          element.setAttribute(
-            'headerStyles',
-            JSON.stringify({
-              default: {color: 'grey', paddingTop: '12px', paddingBottom: '12px'},
-            })
-          );
-          element.setAttribute(
-            'customColumnsSettings',
-            JSON.stringify([
-              {
-                headerName: 'Planet',
-                width: '100px',
-                cellStyle: {color: 'red'},
-                headerStyles: {
-                  default: {
-                    color: 'green',
-                  },
-                },
-              },
-              {
-                headerName: 'Ga',
-                defaultText: 'A',
-                isDefaultTextRemovable: false,
-                isCellTextEditable: false,
-                customColumnTypes: [
-                  {
-                    name: 'Custom type 2',
-                    textValidation: {
-                      func: `(cellText) => {
-                        return cellText !== 'red'
-                      }`,
-                      setTextToDefaultOnFail: false,
-                      failedStyle: {color: 'red'},
-                    },
-                    customTextProcessing: {
-                      // changeTextFunc: `(cellText) => {
-                      //   return 'aa';
-                      // }`,
-                      changeStyleFunc: `(cellText) => {
-                        if (cellText === 'green') {
-                          return {backgroundColor: 'green'}
-                        }
-                        if (cellText === 'purple') {
-                          return {color: 'purple'}
-                        }
-                        return {color: 'black'}
-                      }`,
-                    },
-                    iconSettings: {
-                      reusableIconName: `Select`,
-                    },
-                  },
-                ],
-                isInsertLeftAvailable: false,
-                isInsertRightAvailable: false,
-                defaultColumnTypeName: 'Custom type 2',
-              },
-              {
-                headerName: 'Diameter',
-                defaultText: 'A',
-                cellStyle: {
-                  borderLeft: '1px solid red',
-                  borderRight: '1px solid red',
-                  borderBottom: '1px solid red',
-                  backgroundColor: 'orange',
-                  minWidth: '500px',
-                },
-                headerStyles: {
-                  default: {
-                    border: '1px solid green',
-                  },
-                },
-                isDefaultTextRemovable: false,
-                // availableDefaultColumnTypes: ['number'],
-                customColumnTypes: [
-                  {
-                    name: 'Custom type 2',
-                    textValidation: {
-                      func: `(cellText) => {
-                        return !isNaN(cellText)
-                      }`,
-                      setTextToDefaultOnFail: false,
-                      failedStyle: {color: 'yellow'},
-                    },
-                    iconSettings: {
-                      reusableIconName: `Select`,
-                    },
-                  },
-                  {
-                    name: 'Custom type Calendar',
-                    calendar: {
-                      toYMDFunc: `(cellText) => {
-                        return ['2012', '4', '8'];
-                      }`,
-                      fromYMDFunc: `(YMD) => {
-                        return '2012, 2, 2';
-                      }`,
-                    },
-                  },
-                  // {
-                  //   name: 'Custom Label',
-                  //   label: {
-                  //     options: [{text: 'bb', backgroundColor: 'red'}],
-                  //   },
-                  // },
-                ],
-                isMoveAvailable: true,
-                defaultColumnTypeName: 'Custom type 2',
-                isHeaderTextEditable: true,
-                headerIconStyle: {
-                  filterColor:
-                    'brightness(0) saturate(100%) invert(52%) sepia(63%) saturate(2567%) hue-rotate(74deg) brightness(100%) contrast(89%)',
-                  scale: {
-                    x: 1.5,
-                    y: 1.5,
-                  },
-                },
-              },
-              {
-                headerName: 'C',
-                cellStyle: {
-                  borderLeft: '1px solid red',
-                  borderRight: '1px solid red',
-                  borderBottom: '1px solid red',
-                  width: '1000px',
-                  // backgroundColor: 'orange',
-                },
-                customColumnTypes: [
-                  {
-                    name: 'Custom type 3',
-                    textValidation: {
-                      func: `(cellText) => {
-                      return !isNaN(cellText)
-                    }`,
-                      setTextToDefaultOnFail: false,
-                      failedStyle: {color: 'green'},
-                    },
-                  },
-                  {
-                    name: 'Custom type 8',
-                    textValidation: {
-                      func: `(cellText) => {
-                        return !isNaN(cellText)
-                      }`,
-                      setTextToDefaultOnFail: false,
-                      failedStyle: {color: 'brown'},
-                    },
-                  },
-                ],
-                defaultColumnTypeName: 'Custom type 3',
-                // headerStyles: {
-                //   default: {
-                //     border: '1px solid green',
-                //   },
-                // },
-              },
-              // {
-              //   headerName: 'B',
-              //   width: '400px',
-              //   cellStyle: {backgroundColor: 'red'},
-              //   headerStyles: {hoverColors: {backgroundColor: 'yellow'}},
-              // },
-            ])
-          );
-          element.setAttribute('rowDropdown', JSON.stringify({isMoveAvailable: true}));
-          element.setAttribute(
-            'pagination',
-            JSON.stringify({
-              // displayPrevNext: false,
-              // displayFirstLast: false,
-              rowsPerPage: 10,
-              maxNumberOfVisiblePageButtons: 7,
-              style: {
-                pageButtons: {
-                  buttons: {
-                    default: {backgroundColor: 'purple'},
-                    hover: {backgroundColor: 'orange'},
-                    click: {backgroundColor: 'red'},
-                  },
-                  activeButton: {
-                    default: {backgroundColor: 'brown'},
-                    hover: {backgroundColor: 'violet'},
-                    click: {backgroundColor: 'green'},
-                  },
-                  actionButtons: {
-                    default: {backgroundColor: 'blue'},
-                    hover: {backgroundColor: 'skyblue'},
-                    click: {backgroundColor: 'deepskyblue'},
-                  },
-                  disabledButtons: {
-                    backgroundColor: 'yellow',
-                  },
-                },
-                rowsPerPageSelect: {
-                  // container: {backgroundColor: 'green'},
-                },
-              },
-              // positions: {
-              //   numberOfVisibleRows: {
-              //     position: 'top-left',
-              //   },
-              //   rowsPerPageSelect: {
-              //     order: 4,
-              //   },
-              // },
-              // rowsPerPageSelect: {
-              //   options: [1, 2, 3, 4],
-              //   prefixText: 'Example prefix:',
-              // },
-            })
-          );
-          // element.setAttribute(
-          //   'stripedRows',
-          //   JSON.stringify({
-          //     even: {color: 'green', backgroundColor: 'grey'},
-          //     odd: {backgroundColor: 'red', color: 'brown'},
-          //   })
-          // );
-          // element.setAttribute(
-          //   'rowHoverStyles',
-          //   JSON.stringify({
-          //     style: {backgroundColor: 'yellow'},
-          //     header: true,
-          //     addNewRowButton: true,
-          //   })
-          // );
-          // element.setAttribute(
-          //   'columnResizerColors',
-          //   JSON.stringify({hover: {backgroundColor: 'red'}, click: {backgroundColor: 'green'}})
-          // );
-          // element.setAttribute('onCellUpdate', aa);
-          // element.setAttribute('onContentUpdate', tableUpdate);
-          // element.setAttribute('onColumnsUpdate', columnsUpdate);
-          // element.setAttribute('overwriteColumnWidths', JSON.stringify({columns: [100, 200]}));
-          // setTimeout(() => {
-          //   element.updateCell({newText: 'test', rowIndex: 2, columnIndex: 2});
-          // }, 100);
-        }
-      }, 5);
+      element.setAttribute(
+        'tableStyle',
+        JSON.stringify({
+          border: '1px solid black',
+        })
+      );
     </script>
   </body>
 </html>
diff --git a/component/package-lock.json b/component/package-lock.json
index 54557b16..8c57bb98 100644
--- a/component/package-lock.json
+++ b/component/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "active-table",
-  "version": "0.3.19",
+  "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "active-table",
-      "version": "0.3.19",
+      "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
         "lit": "^2.2.4"
diff --git a/component/package.json b/component/package.json
index e295234b..dffe842e 100644
--- a/component/package.json
+++ b/component/package.json
@@ -1,6 +1,6 @@
 {
   "name": "active-table",
-  "version": "0.3.19",
+  "version": "1.0.0",
   "description": "Framework agnostic table component for editable data experience",
   "main": "./dist/activeTable.js",
   "module": "./dist/activeTable.js",
diff --git a/component/src/elements/pagination/rowsPerPageSelect/dropdown/rowsPerPageDropdownItem.ts b/component/src/elements/pagination/rowsPerPageSelect/dropdown/rowsPerPageDropdownItem.ts
index 909a61e4..91ae340a 100644
--- a/component/src/elements/pagination/rowsPerPageSelect/dropdown/rowsPerPageDropdownItem.ts
+++ b/component/src/elements/pagination/rowsPerPageSelect/dropdown/rowsPerPageDropdownItem.ts
@@ -3,7 +3,6 @@ import {RowsPerPageDropdownItemEvents} from './rowsPerPageDropdownItemEvents';
 import {DropdownItem} from '../../../dropdown/dropdownItem';
 import {ActiveTable} from '../../../../activeTable';
 
-// WORK - when one row and changing, the 1 page button changes style
 export class RowsPerPageDropdownItem {
   private static readonly ITEM_CLASS = 'number-of-rows-dropdown-item';
   public static readonly ALL_ITEM_TEXT = 'all'; // lower case as it will be compared against user set text
diff --git a/other-packages/react/package-lock.json b/other-packages/react/package-lock.json
index 456fc75b..3839ff39 100644
--- a/other-packages/react/package-lock.json
+++ b/other-packages/react/package-lock.json
@@ -1,16 +1,16 @@
 {
   "name": "active-table-react",
-  "version": "0.3.19",
+  "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "active-table-react",
-      "version": "0.3.19",
+      "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
         "@lit-labs/react": "^1.1.1",
-        "active-table": "^0.3.19"
+        "active-table": "^1.0.0"
       },
       "devDependencies": {
         "@types/react": "^18.0.28",
@@ -67,9 +67,9 @@
       "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g=="
     },
     "node_modules/active-table": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/active-table/-/active-table-0.3.19.tgz",
-      "integrity": "sha512-n6DUX+4Aobwjvnly57jMcZ0C9TDP53qcnLA4aAUBNFgOkX1+PIJm7CmWj/cUDcF5YddBMQ5sjxFKbWSYwz4jLw==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/active-table/-/active-table-1.0.0.tgz",
+      "integrity": "sha512-ipg9wJbPOeFXrfP6CEvWS42UqK/FxaU+BIBEcAAuyAwtA45WqslwL2ZGqZM/8n/D+E5Gz8675NjsAKCOY4zp0A==",
       "dependencies": {
         "lit": "^2.2.4"
       }
@@ -200,9 +200,9 @@
       "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g=="
     },
     "active-table": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/active-table/-/active-table-0.3.19.tgz",
-      "integrity": "sha512-n6DUX+4Aobwjvnly57jMcZ0C9TDP53qcnLA4aAUBNFgOkX1+PIJm7CmWj/cUDcF5YddBMQ5sjxFKbWSYwz4jLw==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/active-table/-/active-table-1.0.0.tgz",
+      "integrity": "sha512-ipg9wJbPOeFXrfP6CEvWS42UqK/FxaU+BIBEcAAuyAwtA45WqslwL2ZGqZM/8n/D+E5Gz8675NjsAKCOY4zp0A==",
       "requires": {
         "lit": "^2.2.4"
       }
diff --git a/other-packages/react/package.json b/other-packages/react/package.json
index eb935f6a..9193f79f 100644
--- a/other-packages/react/package.json
+++ b/other-packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "active-table-react",
-  "version": "0.3.19",
+  "version": "1.0.0",
   "description": "Active Table wrapper for React",
   "main": "./dist/activeTable.js",
   "module": "./dist/activeTable.js",
@@ -33,7 +33,7 @@
   "license": "MIT",
   "dependencies": {
     "@lit-labs/react": "^1.1.1",
-    "active-table": "^0.3.19"
+    "active-table": "^1.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
diff --git a/website/docs/docs/installation.mdx b/website/docs/docs/installation.mdx
index 805e017c..b3198abc 100644
--- a/website/docs/docs/installation.mdx
+++ b/website/docs/docs/installation.mdx
@@ -19,5 +19,5 @@ npm install active-table-react
 Access the component via CDN:
 
 ```
-https://unpkg.com/active-table@0.3.19/dist/activeTable.bundle.js
+https://unpkg.com/active-table@1.0.0/dist/activeTable.bundle.js
 ```
diff --git a/website/docs/examples/frameworks.mdx b/website/docs/examples/frameworks.mdx
index 16fd89ef..5348f551 100644
--- a/website/docs/examples/frameworks.mdx
+++ b/website/docs/examples/frameworks.mdx
@@ -53,7 +53,7 @@ as `import 'active-table';`. See this [blog](https://www.thisdot.co/blog/how-to-
 
 Make sure to declare a `solid-js` module when working with TypeScript and use hyphen-case syntax for properties that are accessed directly through markup.
 
-[Click for Live Example](https://codesandbox.io/p/sandbox/magical-smoke-1ntsqs?file=%2Fsrc%2FApp.tsx&selection=%5B%7B%22endColumn%22%3A41%2C%22endLineNumber%22%3A16%2C%22startColumn%22%3A41%2C%22startLineNumber%22%3A16%7D%5D)
+[Click for Live Example](https://codesandbox.io/p/sandbox/active-table-solidjs-wjg6h7?file=%2Fsrc%2FApp.tsx%3A41%2C5)
 
 <img src={nextLogo} width="28" style={{float: 'left', marginRight: '12px', marginTop: '25px'}} />
 
@@ -61,7 +61,7 @@ Make sure to declare a `solid-js` module when working with TypeScript and use hy
 
 Use the `active-table-react` package and lazy load it using Next's `dynamic` extension.
 
-[Click for Live Example](https://codesandbox.io/p/sandbox/old-pond-qegoh8?selection=%5B%7B%22endColumn%22%3A30%2C%22endLineNumber%22%3A28%2C%22startColumn%22%3A30%2C%22startLineNumber%22%3A28%7D%5D&file=%2Fpages%2Findex.tsx)
+[Click for Live Example](https://codesandbox.io/p/sandbox/deep-chat-nextjs-9pv25f?file=%2Fpackage.json%3A6%2C19&selection=%5B%7B%22endColumn%22%3A30%2C%22endLineNumber%22%3A28%2C%22startColumn%22%3A30%2C%22startLineNumber%22%3A28%7D%5D)
 
 <img src={vanillaJSLogo} width="28" style={{float: 'left', marginRight: '12px', marginTop: '25px'}} />
 
diff --git a/website/package-lock.json b/website/package-lock.json
index 72eb93b4..ef53c252 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -12,7 +12,7 @@
         "@docusaurus/preset-classic": "^2.3.0",
         "@docusaurus/theme-search-algolia": "^2.3.1",
         "@mdx-js/react": "^1.6.22",
-        "active-table-react": "^0.3.19",
+        "active-table-react": "^1.0.0",
         "clsx": "^1.2.1",
         "prism-react-renderer": "^1.3.5",
         "react": "^17.0.2",
@@ -3777,20 +3777,20 @@
       }
     },
     "node_modules/active-table": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/active-table/-/active-table-0.3.19.tgz",
-      "integrity": "sha512-n6DUX+4Aobwjvnly57jMcZ0C9TDP53qcnLA4aAUBNFgOkX1+PIJm7CmWj/cUDcF5YddBMQ5sjxFKbWSYwz4jLw==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/active-table/-/active-table-1.0.0.tgz",
+      "integrity": "sha512-ipg9wJbPOeFXrfP6CEvWS42UqK/FxaU+BIBEcAAuyAwtA45WqslwL2ZGqZM/8n/D+E5Gz8675NjsAKCOY4zp0A==",
       "dependencies": {
         "lit": "^2.2.4"
       }
     },
     "node_modules/active-table-react": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/active-table-react/-/active-table-react-0.3.19.tgz",
-      "integrity": "sha512-YegtJf2V+bBRuNyTdExWqkgerlgpGwpsCxQMdWcfHvIQJyoQ+mWE6ULk7Fq8WZ22aBx/JcJe5lEH/N42Rn9wwg==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/active-table-react/-/active-table-react-1.0.0.tgz",
+      "integrity": "sha512-WIuDakR/aX/0smg7akaTxgA7nT7xgs7Q5AQn+RHL+sJkvuIW8dbTj0lIY8LkC2mUcIznXYTEpNs+8QslX3fmYA==",
       "dependencies": {
         "@lit-labs/react": "^1.1.1",
-        "active-table": "^0.3.19"
+        "active-table": "^1.0.0"
       },
       "peerDependencies": {
         "react": ">=16.8.0 || >=17.0.0 || >=18.0.0"
@@ -15564,20 +15564,20 @@
       "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA=="
     },
     "active-table": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/active-table/-/active-table-0.3.19.tgz",
-      "integrity": "sha512-n6DUX+4Aobwjvnly57jMcZ0C9TDP53qcnLA4aAUBNFgOkX1+PIJm7CmWj/cUDcF5YddBMQ5sjxFKbWSYwz4jLw==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/active-table/-/active-table-1.0.0.tgz",
+      "integrity": "sha512-ipg9wJbPOeFXrfP6CEvWS42UqK/FxaU+BIBEcAAuyAwtA45WqslwL2ZGqZM/8n/D+E5Gz8675NjsAKCOY4zp0A==",
       "requires": {
         "lit": "^2.2.4"
       }
     },
     "active-table-react": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/active-table-react/-/active-table-react-0.3.19.tgz",
-      "integrity": "sha512-YegtJf2V+bBRuNyTdExWqkgerlgpGwpsCxQMdWcfHvIQJyoQ+mWE6ULk7Fq8WZ22aBx/JcJe5lEH/N42Rn9wwg==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/active-table-react/-/active-table-react-1.0.0.tgz",
+      "integrity": "sha512-WIuDakR/aX/0smg7akaTxgA7nT7xgs7Q5AQn+RHL+sJkvuIW8dbTj0lIY8LkC2mUcIznXYTEpNs+8QslX3fmYA==",
       "requires": {
         "@lit-labs/react": "^1.1.1",
-        "active-table": "^0.3.19"
+        "active-table": "^1.0.0"
       }
     },
     "address": {
diff --git a/website/package.json b/website/package.json
index 07672907..97494c89 100644
--- a/website/package.json
+++ b/website/package.json
@@ -18,7 +18,7 @@
     "@docusaurus/preset-classic": "^2.3.0",
     "@docusaurus/theme-search-algolia": "^2.3.1",
     "@mdx-js/react": "^1.6.22",
-    "active-table-react": "^0.3.19",
+    "active-table-react": "^1.0.0",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",