diff --git a/README.md b/README.md
index 1b093ed9..9f5bbd11 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@ npm install active-table-react
 Then simply add this to your markup:
 
 ```
-<active-table content='[["Planet", "Diameter"], ["Earth", 12756]]'/>
+<active-table data='[["Planet", "Diameter"], ["Earth", 12756]]'/>
 ```
 
 The exact syntax for the above example will vary depending on the framework of your choice.
diff --git a/component/README.md b/component/README.md
index 88225003..8f9e7fe3 100644
--- a/component/README.md
+++ b/component/README.md
@@ -36,7 +36,7 @@ npm install active-table-react
 Then simply add this to your markup:
 
 ```
-<active-table content='[["Planet", "Diameter"], ["Earth", 12756]]'/>
+<active-table data='[["Planet", "Diameter"], ["Earth", 12756]]'/>
 ```
 
 The exact syntax for the above example will vary depending on the framework of your choice.
diff --git a/component/index.html b/component/index.html
index de098dfb..4191c66b 100644
--- a/component/index.html
+++ b/component/index.html
@@ -15,13 +15,13 @@
     <!-- 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).
+      You can also pass values into the component via properties by using the element reference (data).
       -->
     <active-table id="active-table-element" headerStyles='{"default":{"backgroundColor": "#d6d6d630"}}'></active-table>
     <script>
       const element = document.getElementById('active-table-element');
       // Setting value via a property (easiest way)
-      element.content = [
+      element.data = [
         ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
         ['Earth', 12756, 5.97, 1, 5514],
         ['Mars', 6792, 0.642, 2, 3934],
diff --git a/component/package-lock.json b/component/package-lock.json
index 9731da99..8846d205 100644
--- a/component/package-lock.json
+++ b/component/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "active-table",
-  "version": "1.0.16",
+  "version": "1.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "active-table",
-      "version": "1.0.16",
+      "version": "1.1.0",
       "license": "MIT",
       "dependencies": {
         "lit": "^3.0.2"
diff --git a/component/package.json b/component/package.json
index 6c409462..4241a492 100644
--- a/component/package.json
+++ b/component/package.json
@@ -1,6 +1,6 @@
 {
   "name": "active-table",
-  "version": "1.0.16",
+  "version": "1.1.0",
   "description": "Framework agnostic table component for editable data experience",
   "main": "./dist/activeTable.js",
   "module": "./dist/activeTable.js",
diff --git a/other-packages/react/README.md b/other-packages/react/README.md
index b838b961..34625180 100644
--- a/other-packages/react/README.md
+++ b/other-packages/react/README.md
@@ -32,7 +32,7 @@ npm install active-table-react
 Then simply add this to your markup:
 
 ```
-<ActiveTable content={[["Planet", "Diameter"], ["Earth", 12756]]} />
+<ActiveTable data={[["Planet", "Diameter"], ["Earth", 12756]]} />
 ```
 
 ### :beginner: Examples
diff --git a/other-packages/react/package-lock.json b/other-packages/react/package-lock.json
index 1dc7f2d1..6cad772c 100644
--- a/other-packages/react/package-lock.json
+++ b/other-packages/react/package-lock.json
@@ -1,16 +1,16 @@
 {
   "name": "active-table-react",
-  "version": "1.0.16",
+  "version": "1.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "active-table-react",
-      "version": "1.0.16",
+      "version": "1.1.0",
       "license": "MIT",
       "dependencies": {
         "@lit-labs/react": "^1.1.1",
-        "active-table": "1.0.16"
+        "active-table": "1.1.0"
       },
       "devDependencies": {
         "@types/react": "^18.0.28",
@@ -67,9 +67,9 @@
       "integrity": "sha512-HYtNooPvUY9WAVRBr4u+4Qa9fYD1ze2IUlAD3HoA6oehn1taGwBx3Oa52U4mTslTS+GAExKpaFu39Y5xUEwfjg=="
     },
     "node_modules/active-table": {
-      "version": "1.0.16",
-      "resolved": "https://registry.npmjs.org/active-table/-/active-table-1.0.16.tgz",
-      "integrity": "sha512-7XM5jb7UFjrl+n3ZBFVZIhRzh++xUQPtAJEmulpZs/y7XmZ7j13sVa3o51hgGRxo3ISZMzQh0jZ54NeQ3f/MxQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/active-table/-/active-table-1.1.0.tgz",
+      "integrity": "sha512-zOSSRWjlirCa978zmQQja1zQnREsfX19qr+FTaPMXrbSBmOYezaXIsDSAlvxKUOOyhsVqohcDLQKkX8BxhOQEA==",
       "dependencies": {
         "lit": "^3.0.2"
       }
@@ -200,9 +200,9 @@
       "integrity": "sha512-HYtNooPvUY9WAVRBr4u+4Qa9fYD1ze2IUlAD3HoA6oehn1taGwBx3Oa52U4mTslTS+GAExKpaFu39Y5xUEwfjg=="
     },
     "active-table": {
-      "version": "1.0.16",
-      "resolved": "https://registry.npmjs.org/active-table/-/active-table-1.0.16.tgz",
-      "integrity": "sha512-7XM5jb7UFjrl+n3ZBFVZIhRzh++xUQPtAJEmulpZs/y7XmZ7j13sVa3o51hgGRxo3ISZMzQh0jZ54NeQ3f/MxQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/active-table/-/active-table-1.1.0.tgz",
+      "integrity": "sha512-zOSSRWjlirCa978zmQQja1zQnREsfX19qr+FTaPMXrbSBmOYezaXIsDSAlvxKUOOyhsVqohcDLQKkX8BxhOQEA==",
       "requires": {
         "lit": "^3.0.2"
       }
diff --git a/other-packages/react/package.json b/other-packages/react/package.json
index f0b334ea..37c36b13 100644
--- a/other-packages/react/package.json
+++ b/other-packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "active-table-react",
-  "version": "1.0.16",
+  "version": "1.1.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": "1.0.16"
+    "active-table": "1.1.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
diff --git a/website/docs/docs/column.mdx b/website/docs/docs/column.mdx
index 7493e7e5..625926b5 100644
--- a/website/docs/docs/column.mdx
+++ b/website/docs/docs/column.mdx
@@ -13,10 +13,10 @@ Properties related to table columns.
   &nbsp;&nbsp;&nbsp;&nbsp; [`defaultColumnTypeName?: string`](/docs/columnType#defaultColumnTypeName), <br />
   &nbsp;&nbsp;&nbsp;&nbsp; [`availableDefaultColumnTypes?: DEFAULT_COLUMN_TYPES[]`](/docs/columnType#availableDefaultColumnTypes), <br />
   &nbsp;&nbsp;&nbsp;&nbsp; [`customColumnTypes?: ColumnType[]`](/docs/columnType#customColumnTypes), <br />
-  &nbsp;&nbsp;&nbsp;&nbsp; [`defaultText?: string|number`](/docs/content#defaultText), <br />
-  &nbsp;&nbsp;&nbsp;&nbsp; [`isDefaultTextRemovable?: boolean`](/docs/content#isDefaultTextRemovable), <br />
-  &nbsp;&nbsp;&nbsp;&nbsp; [`cellStyle?: cellStyle`](/docs/content#cellStyle), <br />
-  &nbsp;&nbsp;&nbsp;&nbsp; [`isCellTextEditable?: boolean`](/docs/content#isCellTextEditable), <br />
+  &nbsp;&nbsp;&nbsp;&nbsp; [`defaultText?: string|number`](/docs/data#defaultText), <br />
+  &nbsp;&nbsp;&nbsp;&nbsp; [`isDefaultTextRemovable?: boolean`](/docs/data#isDefaultTextRemovable), <br />
+  &nbsp;&nbsp;&nbsp;&nbsp; [`cellStyle?: cellStyle`](/docs/data#cellStyle), <br />
+  &nbsp;&nbsp;&nbsp;&nbsp; [`isCellTextEditable?: boolean`](/docs/data#isCellTextEditable), <br />
   &nbsp;&nbsp;&nbsp;&nbsp; [`isColumnResizable?: boolean`](#isColumnResizable), <br />
   &nbsp;&nbsp;&nbsp;&nbsp; [`headerStyles?: headerStyles`](/docs/header#headerStyles), <br />
   &nbsp;&nbsp;&nbsp;&nbsp; [`isHeaderTextEditable?: boolean`](/docs/header#isHeaderTextEditable), <br />
@@ -61,7 +61,7 @@ import Tabs from '@theme/Tabs';
         isHeaderTextEditable: false,
       },
     ]}
-    content={[
+    data={[
       ['Planet', 'Number', 'Shape', 'Date Created'],
       ['', 12756, 'Sphere', '01-02-2012'],
       ['', 6792, 'Dinosaur', '14-05-1990'],
@@ -100,7 +100,7 @@ import Tabs from '@theme/Tabs';
     { "headerName": "Shape", "cellStyle": {"backgroundColor": "#f8f8f8"}, "defaultColumnTypeName": "Select", "isHeaderTextEditable": false },
     { "headerName": "Date Created", "cellStyle": {"backgroundColor": "#f1f1f1"}, "defaultColumnTypeName": "Date d-m-y", "isHeaderTextEditable": false }
   ]'
-  content='[
+  data='[
     ["Planet", "Number", "Shape", "Date Created"],
     ["", 12756, "Sphere", "01-02-2012"],
     ["", 6792, "Dinosaur", "14-05-1990"],
@@ -121,7 +121,7 @@ import Tabs from '@theme/Tabs';
 - Type: `boolean`
 - Default: _true_
 
-Determines if columns can be resized via the use of the overlay between header cells. When `width` is defined in [`cellStyle`](/docs/content#cellStyle)
+Determines if columns can be resized via the use of the overlay between header cells. When `width` is defined in [`cellStyle`](/docs/data#cellStyle)
 and [`tableStyle`](/docs/table#tableStyle) properties, and this is set to _true_ - the column `width` will be automatically overwritten to
 meet the set table `width`. However if this is set to _false_, columns will permanently hold the initially set `width`.
 
@@ -130,7 +130,7 @@ meet the set table `width`. However if this is set to _false_, columns will perm
 <TableContainer>
   <ActiveTable
     isColumnResizable={true}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -157,7 +157,7 @@ meet the set table `width`. However if this is set to _false_, columns will perm
 
 <active-table
   isColumnResizable="true"
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -185,7 +185,7 @@ Column width resizer overlay background color style for hover and click events.
 <TableContainer>
   <ActiveTable
     columnResizerColors={{hover: '#87ddff', click: '#369cfd'}}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -212,7 +212,7 @@ Column width resizer overlay background color style for hover and click events.
 
 <active-table
   columnResizerColors='{ "hover": "#87ddff", "click": "#369cfd" }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -258,7 +258,7 @@ appear over it.
       isSortAvailable: false,
       isMoveAvailable: false,
     }}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -297,7 +297,7 @@ appear over it.
     "isSortAvailable": false,
     "isMoveAvailable": false
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -325,7 +325,7 @@ Maximum number of columns allowed (not including the index and add columns colum
 <TableContainer>
   <ActiveTable
     maxColumns={4}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -352,7 +352,7 @@ Maximum number of columns allowed (not including the index and add columns colum
 
 <active-table
   maxColumns="4"
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -375,7 +375,7 @@ Maximum number of columns allowed (not including the index and add columns colum
 
 When [`tableStyle`](/docs/table#tableStyle) is set with a `width` or `maxWidth` property to limit its size, the insertion of new columns will
 cause all existing column widths to automatically be reduced to make space for the new ones (except columns set with `isColumnResizable` as _false_
-inside [`cellStyle`](/docs/content#cellStyle) of the [`customColumnsSettings`](#customColumnsSettings) object). This can however become problematic when
+inside [`cellStyle`](/docs/data#cellStyle) of the [`customColumnsSettings`](#customColumnsSettings) object). This can however become problematic when
 existing column widths eventually become too narrow\* and their widths cannot be reduced any further. <br />
 When `preserveNarrowColumns` is _true_ and column widths are too narrow\*, the table width will be increased to allow new columns to be inserted. <br />
 When `preserveNarrowColumns` is _false_ and column widths are too narow\*, no new columns will be allowed to be inserted.
@@ -386,7 +386,7 @@ _\*Minimal column size is recognised as 33px_
 
 <TableContainer minHeight="189">
   <ActiveTable
-    content={[
+    data={[
       [
         '1',
         '2',
@@ -475,7 +475,7 @@ _\*Minimal column size is recognised as 33px_
 <active-table
   preserveNarrowColumns="true"
   tableStyle='{"width":"300px"}'
-  content='[
+  data='[
     ["1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2"],
     ["1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2"]]'
 ></active-table>
@@ -488,7 +488,7 @@ _\*Minimal column size is recognised as 33px_
 <!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
 
 <active-table
-  content='[
+  data='[
       ["1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2"],
       ["1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2","1","2"]]'
   tableStyle='{"width":"300px", "boxShadow": "rgb(172 172 172 / 17%) 0px 0.5px 1px 0px", "borderRadius":"2px"}'
@@ -518,7 +518,7 @@ You can set the add new column style via [`frameComponentsStyles`](/docs/table#f
 <TableContainer>
   <ActiveTable
     displayAddNewColumn={true}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -545,7 +545,7 @@ You can set the add new column style via [`frameComponentsStyles`](/docs/table#f
 
 <active-table
   displayAddNewColumn="true"
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -579,7 +579,7 @@ You can set the index column style via [`frameComponentsStyles`](/docs/table#fra
 <TableContainer>
   <ActiveTable
     displayIndexColumn={{wrapIndexCellText: false}}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -606,7 +606,7 @@ You can set the index column style via [`frameComponentsStyles`](/docs/table#fra
 
 <active-table
   displayIndexColumn='{"wrapIndexCellText": false}'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -661,7 +661,7 @@ Shared object property types related to columns:
       isInsertLeftAvailable: false,
       isInsertRightAvailable: true,
     }}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -700,7 +700,7 @@ Shared object property types related to columns:
     "isInsertLeftAvailable": false,
     "isInsertRightAvailable": true
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
diff --git a/website/docs/docs/columnType.mdx b/website/docs/docs/columnType.mdx
index 6063d5d1..a929d419 100644
--- a/website/docs/docs/columnType.mdx
+++ b/website/docs/docs/columnType.mdx
@@ -27,7 +27,7 @@ import Tabs from '@theme/Tabs';
 <TableContainer>
   <ActiveTable
     defaultColumnTypeName={'Label'}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -54,7 +54,7 @@ import Tabs from '@theme/Tabs';
 
 <active-table
   defaultColumnTypeName="Label"
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -83,7 +83,7 @@ will be automatically set to _"Text"_.
 <TableContainer>
   <ActiveTable
     availableDefaultColumnTypes={['Number']}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['1', 12756, 5.97, 1, 5514],
       ['2', 6792, 0.642, 2, 3934],
@@ -110,7 +110,7 @@ will be automatically set to _"Text"_.
 
 <active-table
   availableDefaultColumnTypes='["Number"]'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["1", 12756, 5.97, 1, 5514],
     ["2", 6792, 0.642, 2, 3934],
@@ -150,7 +150,7 @@ An array of custom column types which are automatically appended to the [`availa
         },
       },
     ]}
-    content={[
+    data={[
       ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5'],
       ['Pass', 'Pass', 'Fail', 'Fail', 'Fail'],
       ['Fail', 'Pass', 'Pass', 'Fail', 'Fail'],
@@ -197,7 +197,7 @@ An array of custom column types which are automatically appended to the [`availa
       "reusableIconName": "select"
     }}]'
   availableDefaultColumnTypes="[]"
-  content='[
+  data='[
     ["Category 1", "Category 2", "Category 3", "Category 4", "Category 5"],
     ["Pass", "Pass", "Fail", "Fail", "Fail"],
     ["Fail", "Pass", "Pass", "Fail", "Fail"],
@@ -255,7 +255,7 @@ more than one of these is provided - only the first one will be used in that ord
 Used to enforce cell text validation. This operates only in the data cells and not the header. <br />
 The `func` property takes a function that will be called when the text is initially placed in the cell and when
 it changes. The function must return _true_ if the text is correct or _false_ if it is incorrect.
-`setTextToDefaultOnFail` will reset the cell text to value defined inside [`defaultText`](/docs/content#defaultText)
+`setTextToDefaultOnFail` will reset the cell text to value defined inside [`defaultText`](/docs/data#defaultText)
 if the function returns _false_. <br />
 `failedStyle` is used to change the cell styling if the function returns _false_.
 
@@ -274,7 +274,7 @@ if the function returns _false_. <br />
       },
     ]}
     defaultColumnTypeName={'Custom type'}
-    content={[
+    data={[
       ['Gravity', 'Diameter', 'Mass', 'Moons', 'Density'],
       [9.8, 12756, 5.97, 1, 5514],
       [3.7, 6792, 0.642, 2, 3934],
@@ -318,7 +318,7 @@ if the function returns _false_. <br />
         "failedStyle":{"color":"red"}
   }}]'
   defaultColumnTypeName="Custom type"
-  content='[
+  data='[
     ["Gravity", "Diameter", "Mass", "Moons", "Density"],
     [9.8, 12756, 5.97, 1, 5514],
     [3.7, 6792, 0.642, 2, 3934],
@@ -365,7 +365,7 @@ returns a styling object for the cell depenging on its contents.
       },
     ]}
     defaultColumnTypeName={'Custom type'}
-    content={[
+    data={[
       ['Gravity', 'Diameter', 'Mass', 'Moons', 'Density'],
       [9.8, 12756, 5.97, 1, 5514],
       [3.7, 6792, 0.642, 2, 3934],
@@ -417,7 +417,7 @@ returns a styling object for the cell depenging on its contents.
       }"
   }}]'
   defaultColumnTypeName="Custom type"
-  content='[
+  data='[
     ["Gravity", "Diameter", "Mass", "Moons", "Density"],
     [9.8, 12756, 5.97, 1, 5514],
     [3.7, 6792, 0.642, 2, 3934],
@@ -459,7 +459,7 @@ are equal, or a positive value (> 0) if cellText1 is greater than cellText2.
       },
     ]}
     defaultColumnTypeName={'Custom type'}
-    content={[
+    data={[
       ['Gravity', 'Diameter', 'Mass', 'Moons', 'Density'],
       [9.8, 12756, 5.97, 1, 5514],
       [3.7, 6792, 0.642, 2, 3934],
@@ -501,7 +501,7 @@ are equal, or a positive value (> 0) if cellText1 is greater than cellText2.
         "descendingFunc": "(cellText1, cellText2) => Number(cellText2) - Number(cellText1)"
   }}]'
   defaultColumnTypeName="Custom type"
-  content='[
+  data='[
     ["Gravity", "Diameter", "Mass", "Moons", "Density"],
     [9.8, 12756, 5.97, 1, 5514],
     [3.7, 6792, 0.642, 2, 3934],
@@ -552,7 +552,7 @@ properties are also used for the header however if they don't fit the `headerCor
       },
     ]}
     defaultColumnTypeName={'Custom type'}
-    content={[
+    data={[
       ['Gravity', 'Diameter', 'Mass', 'Moons', 'Density'],
       [9.8, 12756, 5.97, 1, 5514],
       [3.7, 6792, 0.642, 2, 3934],
@@ -599,7 +599,7 @@ properties are also used for the header however if they don't fit the `headerCor
         "headerCorrections": {"marginTop": "-1px", "marginLeft": "-2px"}
   }}}]'
   defaultColumnTypeName="Custom type"
-  content='[
+  data='[
     ["Gravity", "Diameter", "Mass", "Moons", "Density"],
     [9.8, 12756, 5.97, 1, 5514],
     [3.7, 6792, 0.642, 2, 3934],
@@ -671,7 +671,7 @@ Styling properties for the select and label dropdowns.
       },
     ]}
     defaultColumnTypeName={'Custom select type'}
-    content={[
+    data={[
       ['Animal 1', 'Animal 2', 'Animal 3', 'Animal 4', 'Animal 5'],
       ['Elephant', 'Giraffe', 'Elephant', 'Giraffe', 'Tiger'],
       ['Tiger', 'Elephant', 'Tiger', 'Tiger', 'Giraffe'],
@@ -716,7 +716,7 @@ Styling properties for the select and label dropdowns.
         "canAddMoreOptions": false
     }}]'
   defaultColumnTypeName="Custom select type"
-  content='[
+  data='[
     ["Animal 1", "Animal 2", "Animal 3", "Animal 4", "Animal 5"],
     ["Elephant", "Giraffe", "Elephant", "Giraffe", "Tiger"],
     ["Tiger", "Elephant", "Tiger", "Tiger", "Giraffe"],
@@ -752,7 +752,7 @@ Styling properties for the select and label dropdowns.
       },
     ]}
     defaultColumnTypeName={'Custom label type'}
-    content={[
+    data={[
       ['Animal 1', 'Animal 2', 'Animal 3', 'Animal 4', 'Animal 5'],
       ['Elephant', 'Giraffe', 'Elephant', 'Giraffe', 'Tiger'],
       ['Tiger', 'Elephant', 'Tiger', 'Tiger', 'Giraffe'],
@@ -793,7 +793,7 @@ Styling properties for the select and label dropdowns.
         "canAddMoreOptions": true
     }}]'
   defaultColumnTypeName="Custom label type"
-  content='[
+  data='[
     ["Animal 1", "Animal 2", "Animal 3", "Animal 4", "Animal 5"],
     ["Elephant", "Giraffe", "Elephant", "Giraffe", "Tiger"],
     ["Tiger", "Elephant", "Tiger", "Tiger", "Giraffe"],
@@ -844,7 +844,7 @@ for a custom [`Calendar`](#Calendar) type).
       },
     ]}
     defaultColumnTypeName={'Custom d/m/y type'}
-    content={[
+    data={[
       ['Date 1', 'Date 2', 'Date 3', 'Date 4'],
       ['3/2/2052', '4/2/1993', '6/12/2012', '2/2/2012'],
       ['18/12/0001', '2/4/1689', '16/2/2029', '1/02/2004'],
@@ -885,7 +885,7 @@ for a custom [`Calendar`](#Calendar) type).
         "fromYMDFunc": "(YMD) => { return [YMD[2], YMD[1], YMD[0]].join(`/`); }"
     }}]'
   defaultColumnTypeName="Custom d/m/y type"
-  content='[
+  data='[
     ["Date 1", "Date 2", "Date 3", "Date 4"],
     ["3/2/2052", "4/2/1993", "6/12/2012", "2/2/2012"],
     ["18/12/0001", "2/4/1689", "16/2/2029", "1/02/2004"],
@@ -915,7 +915,7 @@ This type automatically comes with a predefined [`customTextProcessing`](#Custom
 uses _""_, _"0"_, _"00"_ and _"false"_ values to represent the checkbox as unchecked and all the other values as checked. You can overwite it
 with your own `changeTextFunc` function that would return a string of _"true"_ when the checkbox should be checked and _"false"_ when it should
 be unchecked. <br />
-The [`onCellUpdate`](/docs/events#onCellUpdate) and [`onContentUpdate`](/docs/events#onContentUpdate) properties will return string _"true"_ if the checkbox
+The [`onCellUpdate`](/docs/events#onCellUpdate) and [`onDataUpdate`](/docs/events#onDataUpdate) properties will return string _"true"_ if the checkbox
 is checked and _"false"_ if unchecked.
 
 #### Example
@@ -929,7 +929,7 @@ is checked and _"false"_ if unchecked.
       },
     ]}
     defaultColumnTypeName={'Custom checkbox type'}
-    content={[
+    data={[
       ['Criteria 1', 'Criteria 2', 'Criteria 3', 'Criteria 4'],
       ['positive', 'true', 'positive', 'false'],
       ['true', 'false', '00', ''],
@@ -966,7 +966,7 @@ is checked and _"false"_ if unchecked.
       "checkbox": true
     }]'
   defaultColumnTypeName="Custom checkbox type"
-  content='[
+  data='[
     ["Criteria 1", "Criteria 2", "Criteria 3", "Criteria 4"],
     ["positive", "true", "positive", "false"],
     ["true", "false", "00", ""],
diff --git a/website/docs/docs/content.mdx b/website/docs/docs/data.mdx
similarity index 96%
rename from website/docs/docs/content.mdx
rename to website/docs/docs/data.mdx
index 911dbb6a..3c8a3fdd 100644
--- a/website/docs/docs/content.mdx
+++ b/website/docs/docs/data.mdx
@@ -2,14 +2,13 @@
 sidebar_position: 3
 ---
 
-# Content
+# Data
 
-Properties related to content cells displayed in the table.
+Properties related to data cells displayed in the table.
 
-### `content` {#content}
+### `data` {#data}
 
 - Type: `(string|number)[][]`
-<!-- TableContent -->
 
 Header and data text to be displayed in the table. First array represents the header row, following arrays represent data rows.
 
@@ -26,7 +25,7 @@ import Tabs from '@theme/Tabs';
 
 <TableContainer>
   <ActiveTable
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -43,7 +42,7 @@ import Tabs from '@theme/Tabs';
 
 ```html
 <active-table
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -60,7 +59,7 @@ import Tabs from '@theme/Tabs';
 <!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
 
 <active-table
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -88,7 +87,7 @@ Text that is displayed when a cell is empty or its type validation has failed. <
 <TableContainer>
   <ActiveTable
     defaultText={'-'}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['', '', 5.97, 1, 5514],
       ['', '', 0.642, 2, 3934],
@@ -115,7 +114,7 @@ Text that is displayed when a cell is empty or its type validation has failed. <
 
 <active-table
   defaultText="-"
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["", "", 5.97, 1, 5514],
     ["", "", 0.642, 2, 3934],
@@ -144,7 +143,7 @@ Removes default text when a cell containg one is focused.
   <ActiveTable
     defaultText={'Click'}
     isDefaultTextRemovable={'true'}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['', '', 5.97, 1, 5514],
       ['', '', 0.642, 2, 3934],
@@ -172,7 +171,7 @@ Removes default text when a cell containg one is focused.
 <active-table
   defaultText="Click"
   isDefaultTextRemovable="true"
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["", "", 5.97, 1, 5514],
     ["", "", 0.642, 2, 3934],
@@ -204,7 +203,7 @@ will be overriden to reach the set table `width`, hence to prevent this make sur
 <TableContainer>
   <ActiveTable
     cellStyle={{borderBottom: '1px solid black', borderRight: '1px solid black', backgroundColor: '#fafafa'}}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -233,7 +232,7 @@ will be overriden to reach the set table `width`, hence to prevent this make sur
 
 <active-table
   cellStyle='{"borderBottom": "1px solid black", "borderRight": "1px solid black", "backgroundColor": "#fafafa"}'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -259,7 +258,7 @@ new row) can be set via the [`frameComponentsStyles`](/docs/table#frameComponent
 - Type: {`text: string`, [`styles: StatefulCSS`](/docs/sharedTypes#StatefulCSS)}
 - Default: _{text: "+"}_
 
-Configuration for the default cell when there is no content inside the table. <br />
+Configuration for the default cell when there is no data inside the table. <br />
 `text` defines the content inside the cell. <br />
 `styles` is used to define the cell's appearance for various mouse states. This is particularly useful for controlling the cell _width_ if you
 have set a _width_ property inside [`tableStyle`](/docs/table#tableStyle) as the root cell will by default be stretched to match it (all documentation examples actually use
@@ -313,7 +312,7 @@ Controls if cell text can be edited for both data and header cells. This propert
 <TableContainer>
   <ActiveTable
     isCellTextEditable={false}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -340,7 +339,7 @@ Controls if cell text can be edited for both data and header cells. This propert
 
 <active-table
   isCellTextEditable="false"
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -368,7 +367,7 @@ Checks table text for spelling mistakes (based on the browser's language setting
 <TableContainer>
   <ActiveTable
     spellCheck={true}
-    content={[
+    data={[
       ['Planetasdasd', 'Diamasdasdeter', 'Masssdfsdf', 'Mooffns', 'Denssdsdfdsfity'],
       ['asdasdasd', 12756, 5.97, 1, 5514],
       ['Msadasdars', 6792, 0.642, 2, 3934],
@@ -395,7 +394,7 @@ Checks table text for spelling mistakes (based on the browser's language setting
 
 <active-table
   spellCheck="true"
-  content='[
+  data='[
     ["Planetasdasd", "Diamasdasdeter", "Masssdfsdf", "Mooffns", "Denssdsdfdsfity"],
     ["asdasdasd", 12756, 5.97, 1, 5514],
     ["Msadasdars", 6792, 0.642, 2, 3934],
diff --git a/website/docs/docs/events.mdx b/website/docs/docs/events.mdx
index a818a26f..97f71b7f 100644
--- a/website/docs/docs/events.mdx
+++ b/website/docs/docs/events.mdx
@@ -21,7 +21,7 @@ Take care not to re-render the component when using event information to update
   &nbsp;&nbsp;&nbsp;&nbsp;`updateType: "add"|"update"|"remove"` <br />
   }
 
-Triggered when any content within the table has changed. Both `rowIndex` and `columnIndex` begin at _0_
+Triggered when any data within the table has changed. Both `rowIndex` and `columnIndex` begin at _0_
 where it is the header row for `rowIndex` and the left-most column for `columnIndex`.
 
 #### Example
@@ -37,7 +37,7 @@ import Tabs from '@theme/Tabs';
 
 <TableContainerEvents propertyName={"onCellUpdate"}>
   <ActiveTable
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -52,17 +52,19 @@ import Tabs from '@theme/Tabs';
 <Tabs>
 <TabItem value="js" label="Function">
 
-```html
+```javascript
 tableElementRef.onCellUpdate = (cellUpdate) => { console.log(cellUpdate); });
 ```
 
 </TabItem>
 <TabItem value="py" label="Event">
 
-```html
-<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
+```javascript
+// This example is for Vanilla JS and should be tailored to your framework (see Examples)
 
-tableElementRef.addEventListener('cell-update', (cellUpdate) => { console.log(cellUpdate.detail); });
+tableElementRef.addEventListener('cell-update', (cellUpdate) => {
+  console.log(cellUpdate.detail);
+});
 ```
 
 </TabItem>
@@ -70,19 +72,19 @@ tableElementRef.addEventListener('cell-update', (cellUpdate) => { console.log(ce
 
 <LineBreak></LineBreak>
 
-### `onContentUpdate` {#onContentUpdate}
+### `onDataUpdate` {#onDataUpdate}
 
-- Function: (`contentUpdate: Body`) => `void`
-- Event: `content-update`
+- Function: (`dataUpdate: Body`) => `void`
+- Event: `data-update`
 - Body: `(string|number)[][]`
 
-Similarly to [`onCellUpdate`](#onCellUpdate) this is triggered when any cell is updated - however this property returns the full table contents 2D array instead.
+Similarly to [`onCellUpdate`](#onCellUpdate) this is triggered when any cell is updated - however this property returns the full table data in a 2D array instead.
 
 #### Example
 
-<TableContainerEvents propertyName={"onContentUpdate"}>
+<TableContainerEvents propertyName={"onDataUpdate"}>
   <ActiveTable
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -97,17 +99,21 @@ Similarly to [`onCellUpdate`](#onCellUpdate) this is triggered when any cell is
 <Tabs>
 <TabItem value="js" label="Function">
 
-```html
-tableElementRef.onContentUpdate = (contentUpdate) => { console.log(contentUpdate); };
+```javascript
+tableElementRef.onDataUpdate = (dataUpdate) => {
+  console.log(dataUpdate);
+};
 ```
 
 </TabItem>
 <TabItem value="py" label="Event">
 
-```html
-<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
+```javascript
+// This example is for Vanilla JS and should be tailored to your framework (see Examples)
 
-tableElementRef.addEventListener('content-update', (contentUpdate) => { console.log(contentUpdate.detail); });
+tableElementRef.addEventListener('data-update', (dataUpdate) => {
+  console.log(dataUpdate.detail);
+});
 ```
 
 </TabItem>
@@ -128,7 +134,7 @@ in the next session on the initial load.
 
 <TableContainerEvents propertyName={"onColumnsUpdate"}>
   <ActiveTable
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -143,17 +149,21 @@ in the next session on the initial load.
 <Tabs>
 <TabItem value="js" label="Function">
 
-```html
-tableElementRef.onColumnsUpdate = (columnsUpdate) => { console.log(columnsUpdate); };
+```javascript
+tableElementRef.onColumnsUpdate = (columnsUpdate) => {
+  console.log(columnsUpdate);
+};
 ```
 
 </TabItem>
 <TabItem value="py" label="Event">
 
-```html
-<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
+```javascript
+// This example is for Vanilla JS and should be tailored to your framework (see Examples)
 
-tableElementRef.addEventListener('columns-update', (columnsUpdate) => { console.log(columnsUpdate.detail); });
+tableElementRef.addEventListener('columns-update', (columnsUpdate) => {
+  console.log(columnsUpdate.detail);
+});
 ```
 
 </TabItem>
@@ -172,7 +182,7 @@ Triggered when the component has finished rendering on the browser's window.
 
 <TableContainerEvents propertyName={"onRender"}>
   <ActiveTable
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -187,17 +197,21 @@ Triggered when the component has finished rendering on the browser's window.
 <Tabs>
 <TabItem value="js" label="Function">
 
-```html
-tableElementRef.onRender = () => { console.log('Finished rendering'); };
+```javascript
+tableElementRef.onRender = () => {
+  console.log('Finished rendering');
+};
 ```
 
 </TabItem>
 <TabItem value="py" label="Event">
 
-```html
-<!-- This example is for Vanilla JS and should be tailored to your framework (see Examples) -->
+```javascript
+// This example is for Vanilla JS and should be tailored to your framework (see Examples)
 
-tableElementRef.addEventListener('render', () => { console.log('Finished rendering'); });
+tableElementRef.addEventListener('render', () => {
+  console.log('Finished rendering');
+});
 ```
 
 </TabItem>
diff --git a/website/docs/docs/files.mdx b/website/docs/docs/files.mdx
index 4b8c948d..97dd7bc7 100644
--- a/website/docs/docs/files.mdx
+++ b/website/docs/docs/files.mdx
@@ -35,7 +35,7 @@ import Tabs from '@theme/Tabs';
 <TableContainer minHeight="381">
   <ActiveTable
     files={{buttons: [{import: true}, {export: true}], dragAndDrop: true}}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -63,7 +63,7 @@ import Tabs from '@theme/Tabs';
 
 <active-table
   files='{"buttons": [{"import": true}, {"export": true}], "dragAndDrop": true}'
-  content='[
+  data='[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -147,7 +147,7 @@ This object requires either the `import` or `export` properties to be defined. <
         },
       ],
     }}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -229,7 +229,7 @@ This object requires either the `import` or `export` properties to be defined. <
         "order": 0
       }
   ]}'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -266,7 +266,7 @@ are no import buttons this property will be set to _["csv"]_.
         overwriteOptions: {importRowStartIndex: 1, tableRowStartIndex: 1},
       },
     }}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -306,7 +306,7 @@ are no import buttons this property will be set to _["csv"]_.
       "formats": ["csv", "xlsx"],
       "overwriteOptions": {"importRowStartIndex": 1, "tableRowStartIndex": 1}
   }}'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -364,7 +364,7 @@ Configuration for the importable files. <br />
         },
       ],
     }}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -424,7 +424,7 @@ Configuration for the importable files. <br />
         "text": "Import XLS XLSX"
       }
   ]}'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -457,7 +457,7 @@ will overwrite all of the rows below the header row. Use a value of _-1_ to appe
 <TableContainer minHeight="381">
   <ActiveTable
     files={{buttons: [{import: {overwriteOptions: {importRowStartIndex: 1, tableRowStartIndex: -1}}}]}}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -487,7 +487,7 @@ will overwrite all of the rows below the header row. Use a value of _-1_ to appe
 
 <active-table
   files='{"buttons": [{"import": {"overwriteOptions": {"importRowStartIndex": 1, "tableRowStartIndex": -1}}}]}'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -525,7 +525,7 @@ When more than one format is defined - the button will use a dropdown to list ea
         {export: {fileName: 'example', formats: ['csv', 'xls', 'xlsx', 'ods', 'txt']}, text: 'Export'},
       ],
     }}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -571,7 +571,7 @@ When more than one format is defined - the button will use a dropdown to list ea
       {"export": {"fileName": "example_txt", "formats": ["txt"]}, "text": "Export TXT"},
       {"export": {"fileName": "example", "formats": ["csv", "xls", "xlsx", "ods", "txt"]}}
   ]}'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
diff --git a/website/docs/docs/filter.mdx b/website/docs/docs/filter.mdx
index 2cd10463..d1f7d96e 100644
--- a/website/docs/docs/filter.mdx
+++ b/website/docs/docs/filter.mdx
@@ -27,7 +27,7 @@ import Tabs from '@theme/Tabs';
 <TableContainer minHeight="380">
   <ActiveTable
     filter={true}
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -54,7 +54,7 @@ import Tabs from '@theme/Tabs';
 
 <active-table
   filter="true"
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -126,7 +126,7 @@ the placeholder text will be _"Filter Brand"_. <br />
         order: 2,
       },
     ]}
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -192,7 +192,7 @@ the placeholder text will be _"Filter Brand"_. <br />
       "order": 2
     }
   ]'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -248,7 +248,7 @@ Styling properties for a filter component. <br />
         },
       },
     }}
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -311,7 +311,7 @@ Styling properties for a filter component. <br />
       }
     }
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
diff --git a/website/docs/docs/header.mdx b/website/docs/docs/header.mdx
index a6061f4c..85450758 100644
--- a/website/docs/docs/header.mdx
+++ b/website/docs/docs/header.mdx
@@ -39,7 +39,7 @@ import Tabs from '@theme/Tabs';
         backgroundColor: '#d2d2d2',
       },
     }}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -88,7 +88,7 @@ import Tabs from '@theme/Tabs';
       "backgroundColor": "#d2d2d2"
     }
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -116,7 +116,7 @@ Controls if cell text can be edited for header cells.
 <TableContainer>
   <ActiveTable
     isHeaderTextEditable={false}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -143,7 +143,7 @@ Controls if cell text can be edited for header cells.
 
 <active-table
   isHeaderTextEditable="false"
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -165,14 +165,14 @@ Controls if cell text can be edited for header cells.
 - Default: _true_
 
 Allows multiple columns to have the same header text. If set to _false_ and a duplicate is found the header text is defaulted to the value inside
-[`defaultText`](/docs/content#defaultText).
+[`defaultText`](/docs/data#defaultText).
 
 #### Example for false
 
 <TableContainer>
   <ActiveTable
     allowDuplicateHeaders={false}
-    content={[
+    data={[
       ['Planet', 'Planet', 'Moons', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -199,7 +199,7 @@ Allows multiple columns to have the same header text. If set to _false_ and a du
 
 <active-table
   allowDuplicateHeaders="false"
-  content='[
+  data='[
     ["Planet", "Planet", "Moons", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -227,7 +227,7 @@ Displays an icon beside header text that represents the column type.
 <TableContainer>
   <ActiveTable
     displayHeaderIcons={false}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -254,7 +254,7 @@ Displays an icon beside header text that represents the column type.
 
 <active-table
   displayHeaderIcons="false"
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -294,7 +294,7 @@ that can be retrieved using the [cssfilterconverter](https://cssfilterconverter.
         'brightness(0) saturate(100%) invert(16%) sepia(85%) saturate(1892%) hue-rotate(210deg) brightness(88%) contrast(103%)',
       scale: {x: 1.5, y: 1.5},
     }}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -329,7 +329,7 @@ that can be retrieved using the [cssfilterconverter](https://cssfilterconverter.
     "filterColor": "brightness(0) saturate(100%) invert(16%) sepia(85%) saturate(1892%) hue-rotate(210deg) brightness(88%) contrast(103%)",
     "scale": {"x": 1.5, "y": 1.5}
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -357,7 +357,7 @@ Header row will remain at the top of the table when there is overflow in the tab
 <TableContainer customStyle={{maxHeight: '200px', overflow: 'auto'}}>
   <ActiveTable
     stickyHeader={true}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -385,7 +385,7 @@ Header row will remain at the top of the table when there is overflow in the tab
 <div style="maxHeight: 200px; overflow: auto">
   <active-table
     stickyHeader="true"
-    content='[
+    data='[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -419,7 +419,7 @@ Starts the index column count at header row and if [`pagination`](/docs/paginati
 <TableContainer>
   <ActiveTable
     dataStartsAtHeader={'true'}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -446,7 +446,7 @@ Starts the index column count at header row and if [`pagination`](/docs/paginati
 
 <active-table
   dataStartsAtHeader="true"
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
diff --git a/website/docs/docs/installation.mdx b/website/docs/docs/installation.mdx
index 61afcfd9..155eeee3 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@1.0.16/dist/activeTable.bundle.js
+https://unpkg.com/active-table@1.1.0/dist/activeTable.bundle.js
 ```
diff --git a/website/docs/docs/methods.mdx b/website/docs/docs/methods.mdx
index 68f61ef1..5081f608 100644
--- a/website/docs/docs/methods.mdx
+++ b/website/docs/docs/methods.mdx
@@ -10,7 +10,7 @@ Method properties that can be called directly on the Active Table element.
 Make sure the Active Table component has been fully rendered on the DOM before using these.
 :::
 
-### `getContent` {#getContent}
+### `getData` {#getData}
 
 - Type: `() => (string|number)[][]`
 
@@ -29,9 +29,9 @@ import Tabs from '@theme/Tabs';
 <BrowserOnly>{() => require('@site/src/components/nav/autoNavToggle').readdAutoNavShadowToggle()}</BrowserOnly>
 <BrowserOnly>{() => require('@site/src/components/externalModules/externalModules').importXLSX()}</BrowserOnly>
 
-<TableContainerMethods propertyName={"getContent"}>
+<TableContainerMethods propertyName={"getData"}>
   <ActiveTable
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -46,8 +46,8 @@ import Tabs from '@theme/Tabs';
 <Tabs>
 <TabItem value="js" label="Code">
 
-```html
-tableElementRef.getContent();
+```javascript
+tableElementRef.getData();
 ```
 
 </TabItem>
@@ -66,7 +66,7 @@ in the next session on the initial load.
 
 <TableContainerMethods propertyName={"getColumnsDetails"}>
   <ActiveTable
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -81,7 +81,7 @@ in the next session on the initial load.
 <Tabs>
 <TabItem value="js" label="Code">
 
-```html
+```javascript
 tableElementRef.getColumnsDetails();
 ```
 
@@ -109,7 +109,7 @@ Update cell text programmatically. Both `rowIndex` and `columnIndex` start at _0
 
 <TableContainerProgrammaticUpdates>
   <ActiveTable
-    content={[
+    data={[
       ['Name', 'CPU', 'Memory', 'Disk', 'Network'],
       ['Chrome', '4.5%', '1400MB', '0.2MB/s', '1.2Mbps'],
       ['Firefox', '2.5%', '800MB', '0.1MB/s', '0.5Mbps'],
@@ -124,8 +124,8 @@ Update cell text programmatically. Both `rowIndex` and `columnIndex` start at _0
 <Tabs>
 <TabItem value="js" label="Sample code">
 
-```html
-tableElementRef.updateCell({newText: "sample text", rowIndex: 1, columnIndex: 1});
+```javascript
+tableElementRef.updateCell({newText: 'sample text', rowIndex: 1, columnIndex: 1});
 ```
 
 </TabItem>
@@ -136,7 +136,7 @@ tableElementRef.updateCell({newText: "sample text", rowIndex: 1, columnIndex: 1}
 
 <active-table
   id="active-table"
-  content='[
+  data='[
     ["Name", "CPU", "Memory", "Disk", "Network"],
     ["Chrome", "4.5%", "1400MB", "0.2MB/s", "1.2Mbps"],
     ["Firefox", "2.5%", "800MB", "0.1MB/s", "0.5Mbps"],
@@ -193,13 +193,13 @@ Programmatically insert/remove rows/columns. <br />
 `structure` defines whether the structure type is for a _"row"_ or a _"column"_. <br />
 `isInsert` sets the update behaviour; _true_ will create a new structure, _false_ will remove an existing one. <br />
 `index` is the row/column index. When adding a new structure, a value of _-1_ will append it to the end of the table. <br />
-`data` defines the new content. If not defined and the update for an insert, this will be populated with [`defaultText`](/docs/content#defaultText).
+`data` defines the new cells' content. If not defined and the update is for an insert, this will be populated with [`defaultText`](/docs/data#defaultText).
 
 #### Example
 
 <TableContainerMethods propertyName={"updateStructure"} displayResults={false} argument={{structure: 'row', isInsert: true, index: -1, data: ['New Planet', '12345', '500', '10', '357']}}>
   <ActiveTable
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -228,15 +228,15 @@ tableElementRef.updateStructure({
 
 <LineBreak></LineBreak>
 
-### `updateContent` {#updateContent}
+### `updateData` {#updateData}
 
-- Type: `(content: (number | string)[][]) => void`
+- Type: `(data: (number | string)[][]) => void`
 
-Programmatically reset table data using the new data iside the `content` argument. <br />
+Programmatically reset table data using the new data iside the `data` argument. <br />
 
 #### Example
 
-<TableContainerMethods propertyName={"updateContent"} displayResults={false} argument={[
+<TableContainerMethods propertyName={"updateData"} displayResults={false} argument={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ['Mercury', 4879, 0.33, 0, 5429],
       ['Venus', 12104, 4.87, 0, 5243],
@@ -244,7 +244,7 @@ Programmatically reset table data using the new data iside the `content` argumen
       ['Pluto', 2376, 0.013, 5, 1850],
       ['Moon', 3475, 0.073, 0, 3340]]}>
   <ActiveTable
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -260,7 +260,7 @@ Programmatically reset table data using the new data iside the `content` argumen
 <TabItem value="js" label="Code">
 
 ```javascript
-tableElementRef.updateContent([
+tableElementRef.updateData([
   ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
   ['Mercury', 4879, 0.33, 0, 5429],
   ['Venus', 12104, 4.87, 0, 5243],
@@ -288,7 +288,7 @@ through user actions, such as a click of a button.
 
 <TableContainerMethods propertyName={"importFile"} displayResults={false}>
   <ActiveTable
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -303,7 +303,7 @@ through user actions, such as a click of a button.
 <Tabs>
 <TabItem value="js" label="Code">
 
-```html
+```javascript
 tableElementRef.importFile();
 ```
 
@@ -326,14 +326,14 @@ into your project. Please see examples [here](../../examples/files).
 
 - Type: {`fileName?: string`, [`format?: FileFormat`](/docs/files#FileFormat)}
 
-Exports existing table content into a file. You can optionally pass a [`ExportSingleFile`](#ExportSingleFile) object
+Exports existing table data into a file. You can optionally pass a [`ExportSingleFile`](#ExportSingleFile) object
 to define the exported file's name and its format.
 
 #### Example
 
 <TableContainerMethods propertyName={"exportFile"} displayResults={false}>
   <ActiveTable
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -348,7 +348,7 @@ to define the exported file's name and its format.
 <Tabs>
 <TabItem value="js" label="Code">
 
-```html
+```javascript
 tableElementRef.exportFile();
 ```
 
diff --git a/website/docs/docs/pagination.mdx b/website/docs/docs/pagination.mdx
index 9d9ffdb8..09514750 100644
--- a/website/docs/docs/pagination.mdx
+++ b/website/docs/docs/pagination.mdx
@@ -52,7 +52,7 @@ import Tabs from '@theme/Tabs';
 <TableContainer minHeight="602">
   <ActiveTable
     pagination={true}
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -98,7 +98,7 @@ import Tabs from '@theme/Tabs';
 
 <active-table
   pagination="true"
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -161,7 +161,7 @@ If the defined `rowsPerPage` value (in [`pagination`](#pagination) object) is no
       "rowsPerPageSelect": {"prefixText": "Number of rows:", "options": [10, 20, 30, "All"]},
       "rowsPerPage": 5
     }}
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -215,7 +215,7 @@ If the defined `rowsPerPage` value (in [`pagination`](#pagination) object) is no
     "rowsPerPageSelect": {"prefixText": "Number of rows:", "options": [10, 20, 30, "All"]},
     "rowsPerPage": 5
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -286,7 +286,7 @@ Styling properties of pagination components. <br />
       }},
       "rowsPerPage": 5
     }}
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -370,7 +370,7 @@ Styling properties of pagination components. <br />
     }},
     "rowsPerPage": 5
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -441,7 +441,7 @@ Styling properties for the rows per page component elements. `container` is the
         }},
       "rowsPerPage": 5
     }}
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -515,7 +515,7 @@ Styling properties for the rows per page component elements. `container` is the
       }}},
     "rowsPerPage": 5
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -608,7 +608,7 @@ as otherwise the last button is not going to have a border on the right.
       }},
       "rowsPerPage": 5
     }}
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -682,7 +682,7 @@ as otherwise the last button is not going to have a border on the right.
     }},
     "rowsPerPage": 5
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -762,7 +762,7 @@ Styling for action buttons that facilitates the definition of styles for various
       },
       "rowsPerPage": 5
     }}
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -838,7 +838,7 @@ Styling for action buttons that facilitates the definition of styles for various
     },
     "rowsPerPage": 5
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -905,7 +905,7 @@ Positions for pagination components.
       },
       "rowsPerPage": 5
     }}
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -967,7 +967,7 @@ Positions for pagination components.
     },
     "rowsPerPage": 5
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -1052,7 +1052,7 @@ Object defining position properties for a pagination component. `order` is the o
       positions: {pageButtons: {position: 'bottom-center'}},
       rowsPerPage: 2,
     }}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -1116,7 +1116,7 @@ Object defining position properties for a pagination component. `order` is the o
     "positions": {"pageButtons": {"position": "bottom-center"}},
     "rowsPerPage": 2
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -1157,7 +1157,7 @@ Object defining position properties for a pagination component. `order` is the o
       "positions": {"pageButtons": {"position": "bottom-center"}},
       "rowsPerPage": 2
     }}
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -1221,7 +1221,7 @@ Object defining position properties for a pagination component. `order` is the o
     "positions": {"pageButtons": {"position": "bottom-center"}},
     "rowsPerPage": 2
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -1263,7 +1263,7 @@ Object defining position properties for a pagination component. `order` is the o
       "positions": {"pageButtons": {"position": "bottom-center"}},
       "rowsPerPage": 2
     }}
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -1329,7 +1329,7 @@ Object defining position properties for a pagination component. `order` is the o
     "positions": {"pageButtons": {"position": "bottom-center"}},
     "rowsPerPage": 2
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -1371,7 +1371,7 @@ Object defining position properties for a pagination component. `order` is the o
       "positions": {"pageButtons": {"position": "bottom-center"}},
       "rowsPerPage": 2
     }}
-    content={[
+    data={[
       ["Planet", "Diameter", "Mass", "Moons", "Density"],
       ["Earth", 12756, 5.97, 1, 5514],
       ["Mars", 6792, 0.642, 2, 3934],
@@ -1437,7 +1437,7 @@ Object defining position properties for a pagination component. `order` is the o
     "positions": {"pageButtons": {"position": "bottom-center"}},
     "rowsPerPage": 2
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -1494,7 +1494,7 @@ Object defining position properties for a pagination component. `order` is the o
       positions: {pageButtons: {position: 'bottom-center'}},
       rowsPerPage: 2,
     }}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -1558,7 +1558,7 @@ Object defining position properties for a pagination component. `order` is the o
     "positions": {"pageButtons": {"position": "bottom-center"}},
     "rowsPerPage": 2
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
diff --git a/website/docs/docs/row.mdx b/website/docs/docs/row.mdx
index 43e2e204..797313ce 100644
--- a/website/docs/docs/row.mdx
+++ b/website/docs/docs/row.mdx
@@ -28,7 +28,7 @@ import Tabs from '@theme/Tabs';
 <TableContainer>
   <ActiveTable
     rowHoverStyles={{style: {backgroundColor: '#d6d6d630', transitionDuration: '0.05s'}}}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -55,7 +55,7 @@ import Tabs from '@theme/Tabs';
 
 <active-table
   rowHoverStyles='{"style":{"backgroundColor": "#d6d6d630", "transitionDuration": "0.05s"}}'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -89,7 +89,7 @@ Stripe based styling for rows.
   <ActiveTable
     stripedRows={{odd: {backgroundColor: ''}, even: {backgroundColor: '#ebebeb7a'}}}
     cellStyle={{borderBottom: 'unset'}}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -117,7 +117,7 @@ Stripe based styling for rows.
 <active-table
   stripedRows='{"odd": {"backgroundColor": ""}, "even": {"backgroundColor": "#ebebeb7a"}}'
   cellStyle='{"borderBottom": "unset"}'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -133,7 +133,7 @@ Stripe based styling for rows.
 
 :::info
 Using this property unsets the default header and [`frameComponentsStyles`](/docs/table#frameComponentsStyles) hover color properties.
-If the component is set with a [`cellStyle`](/docs/content#cellStyle) property - this will be overriden.
+If the component is set with a [`cellStyle`](/docs/data#cellStyle) property - this will be overriden.
 :::
 
 <LineBreak></LineBreak>
@@ -168,7 +168,7 @@ it does not open on header row when set to _false_.
   <ActiveTable
     rowDropdown={{displaySettings: {isAvailable: true, openMethod: {overlayClick: true}}, canEditHeaderRow: false}}
     columnDropdown={{displaySettings: {isAvailable: true, openMethod: {overlayClick: true}}}}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -197,7 +197,7 @@ it does not open on header row when set to _false_.
 
 <active-table
   rowDropdown='{"displaySettings":{"isAvailable": true, "openMethod": {"overlayClick": true}}, "canEditHeaderRow": false}'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -225,7 +225,7 @@ Maximum number of rows allowed (including header row).
 <TableContainer minHeight="215">
   <ActiveTable
     maxRows={4}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -252,7 +252,7 @@ Maximum number of rows allowed (including header row).
 
 <active-table
   maxRows="4"
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -281,7 +281,7 @@ You can set the add new row style via [`frameComponentsStyles`](/docs/table#fram
 <TableContainer>
   <ActiveTable
     displayAddNewRow={true}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -308,7 +308,7 @@ You can set the add new row style via [`frameComponentsStyles`](/docs/table#fram
 
 <active-table
   displayAddNewRow="true"
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
diff --git a/website/docs/docs/sharedTypes.mdx b/website/docs/docs/sharedTypes.mdx
index 4e9d733b..4fcf6d52 100644
--- a/website/docs/docs/sharedTypes.mdx
+++ b/website/docs/docs/sharedTypes.mdx
@@ -53,7 +53,7 @@ import Tabs from '@theme/Tabs';
         overlayStyles: {default: {backgroundColor: 'grey'}, hover: {backgroundColor: 'blue'}},
       },
     }}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -88,7 +88,7 @@ import Tabs from '@theme/Tabs';
     "openMethod": {"overlayClick": true }}}'
   columnDropdown='{"displaySettings": {
     "openMethod": {"overlayClick": true }, "overlayStyles": {"default": {"backgroundColor": "grey"}, "hover": {"backgroundColor": "blue"}}}}'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
diff --git a/website/docs/docs/table.mdx b/website/docs/docs/table.mdx
index 46876a43..c99b3b42 100644
--- a/website/docs/docs/table.mdx
+++ b/website/docs/docs/table.mdx
@@ -30,7 +30,7 @@ import Tabs from '@theme/Tabs';
       boxShadow: 'rgb(172 172 172 / 17%) 0px 0.5px 1px 0px',
       width: '100%',
     }}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -66,7 +66,7 @@ import Tabs from '@theme/Tabs';
     "boxShadow": "rgb(172 172 172 / 17%) 0px 0.5px 1px 0px",
     "width":"100%"
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons","Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -104,7 +104,7 @@ A scrollbar is introduced on the table if either of the specified dimensions are
       boxShadow: 'rgb(172 172 172 / 17%) 0px 0.5px 1px 0px',
       width: '1000px',
     }}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -136,7 +136,7 @@ A scrollbar is introduced on the table if either of the specified dimensions are
 <active-table
   overflow='{"maxHeight": "298px", "maxWidth": "100%"}'
   tableStyle='{"width":"1000px"}'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -180,7 +180,7 @@ row's `backgroundColor` and text `color`.
       },
       inheritHeaderColors: false,
     }}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -219,7 +219,7 @@ row's `backgroundColor` and text `color`.
       "hoverColors": {"backgroundColor": "#dedede"}},
     "inheritHeaderColors": false
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -251,7 +251,7 @@ example of this is the [`::-webkit-scrollbar`](https://developer.mozilla.org/en-
       boxShadow: 'rgb(172 172 172 / 17%) 0px 0.5px 1px 0px',
       width: '1000px',
     }}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -311,7 +311,7 @@ example of this is the [`::-webkit-scrollbar`](https://developer.mozilla.org/en-
     }"
   overflow='{"maxHeight": "298px", "maxWidth": "100%"}'
   tableStyle='{"width":"1000px"}'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
diff --git a/website/docs/examples/design.mdx b/website/docs/examples/design.mdx
index 0c5ac89b..80d220e8 100644
--- a/website/docs/examples/design.mdx
+++ b/website/docs/examples/design.mdx
@@ -34,7 +34,7 @@ import Tabs from '@theme/Tabs';
         availableDefaultColumnTypes: ['Date d-m-y', 'Date m-d-y'],
       },
     ]}
-    content={[
+    data={[
       ['Planet', 'Age', 'Shape', 'Date Created'],
       ['Earth', 12756, 'Sphere', '01-02-2012'],
       ['Mars', 6792, 'Dinosaur', '14-05-1990'],
@@ -60,7 +60,7 @@ import Tabs from '@theme/Tabs';
     {"headerName": "Date Created", "defaultColumnTypeName": "Date d-m-y", "availableDefaultColumnTypes": ["Date d-m-y", "Date m-d-y"]}
   ]'
   tableStyle='{"borderRadius":"2px"}'
-  content='[
+  data='[
     ["Planet", "Age", "Shape", "Date Created"],
     ["Earth", 12756, "Sphere", "01-02-2012"],
     ["Mars", 6792, "Dinosaur", "14-05-1990"],
@@ -88,7 +88,7 @@ Data in this table cannot be changed.
     rowDropdown={{displaySettings: {isAvailable: false}}}
     frameComponentsStyles={{style: {hoverColors: {backgroundColor: 'white'}}}}
     headerStyles={{hoverColors: {backgroundColor: 'white'}}}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -115,7 +115,7 @@ Data in this table cannot be changed.
   frameComponentsStyles='{"style": {"hoverColors": {"backgroundColor": "white"}}}'
   headerStyles='{"hoverColors": {"backgroundColor": "white"}}'
   tableStyle='{"borderRadius":"2px"}'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons","Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -150,7 +150,7 @@ Table configuration for a dark design.
       },
       inheritHeaderColors: true,
     }}
-    content={[
+    data={[
       ['Planet', 'Diameter', 'Mass', 'Moons', 'Density'],
       ['Earth', 12756, 5.97, 1, 5514],
       ['Mars', 6792, 0.642, 2, 3934],
@@ -180,7 +180,7 @@ Table configuration for a dark design.
     "style": {"hoverColors": {"backgroundColor": "#5f5f5f"}},
     "inheritHeaderColors": true
   }'
-  content='[
+  data='[
     ["Planet", "Diameter", "Mass", "Moons", "Density"],
     ["Earth", 12756, 5.97, 1, 5514],
     ["Mars", 6792, 0.642, 2, 3934],
@@ -254,7 +254,7 @@ to set a stock related look. Whilst all of the columns are set to not be editabl
     }}
     rowDropdown={{displaySettings: {isAvailable: false}}}
     displayHeaderIcons={false}
-    content={[
+    data={[
       ['Stock', 'Current', 'Last', 'Change', 'Yield'],
       ['JPA', '$88.22', '$85.73', '-0.1%', '1.4%'],
       ['REFR', '$18.52', '$88', '1.5%', '0.4%'],
@@ -323,7 +323,7 @@ to set a stock related look. Whilst all of the columns are set to not be editabl
   displayAddNewRow="false"
   displayHeaderIcons="false"
   tableStyle='{"borderRadius":"2px"}'
-  content='[
+  data='[
     ["Stock", "Current", "Last", "Change", "Yield"],
     ["JPA", "$88.22", "$85.73", "-0.1%", "1.4%"],
     ["REFR", "$18.52", "$88", "1.5%", "0.4%"],
diff --git a/website/package-lock.json b/website/package-lock.json
index 26dc4772..d75943fe 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": "^1.0.16",
+        "active-table-react": "^1.1.0",
         "clsx": "^1.2.1",
         "prism-react-renderer": "^1.3.5",
         "react": "^17.0.2",
@@ -3777,20 +3777,20 @@
       }
     },
     "node_modules/active-table": {
-      "version": "1.0.16",
-      "resolved": "https://registry.npmjs.org/active-table/-/active-table-1.0.16.tgz",
-      "integrity": "sha512-7XM5jb7UFjrl+n3ZBFVZIhRzh++xUQPtAJEmulpZs/y7XmZ7j13sVa3o51hgGRxo3ISZMzQh0jZ54NeQ3f/MxQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/active-table/-/active-table-1.1.0.tgz",
+      "integrity": "sha512-zOSSRWjlirCa978zmQQja1zQnREsfX19qr+FTaPMXrbSBmOYezaXIsDSAlvxKUOOyhsVqohcDLQKkX8BxhOQEA==",
       "dependencies": {
         "lit": "^3.0.2"
       }
     },
     "node_modules/active-table-react": {
-      "version": "1.0.16",
-      "resolved": "https://registry.npmjs.org/active-table-react/-/active-table-react-1.0.16.tgz",
-      "integrity": "sha512-4rPUaMi7Mx4vWO35kezWbndDw4PZY9pI8CtbX3vrXtyKQFVX7kHm5i0T655QsKSZtHU2DeQkbigi02PVW+8dZA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/active-table-react/-/active-table-react-1.1.0.tgz",
+      "integrity": "sha512-++jZBhVcbN+LMukKhGro6KlocnRC5jmguznzlO6U9MSxeZBPky0O/a+zuFsMaksoDBbILkMX1X1xuX6+phYMxg==",
       "dependencies": {
         "@lit-labs/react": "^1.1.1",
-        "active-table": "1.0.16"
+        "active-table": "1.1.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": "1.0.16",
-      "resolved": "https://registry.npmjs.org/active-table/-/active-table-1.0.16.tgz",
-      "integrity": "sha512-7XM5jb7UFjrl+n3ZBFVZIhRzh++xUQPtAJEmulpZs/y7XmZ7j13sVa3o51hgGRxo3ISZMzQh0jZ54NeQ3f/MxQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/active-table/-/active-table-1.1.0.tgz",
+      "integrity": "sha512-zOSSRWjlirCa978zmQQja1zQnREsfX19qr+FTaPMXrbSBmOYezaXIsDSAlvxKUOOyhsVqohcDLQKkX8BxhOQEA==",
       "requires": {
         "lit": "^3.0.2"
       }
     },
     "active-table-react": {
-      "version": "1.0.16",
-      "resolved": "https://registry.npmjs.org/active-table-react/-/active-table-react-1.0.16.tgz",
-      "integrity": "sha512-4rPUaMi7Mx4vWO35kezWbndDw4PZY9pI8CtbX3vrXtyKQFVX7kHm5i0T655QsKSZtHU2DeQkbigi02PVW+8dZA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/active-table-react/-/active-table-react-1.1.0.tgz",
+      "integrity": "sha512-++jZBhVcbN+LMukKhGro6KlocnRC5jmguznzlO6U9MSxeZBPky0O/a+zuFsMaksoDBbILkMX1X1xuX6+phYMxg==",
       "requires": {
         "@lit-labs/react": "^1.1.1",
-        "active-table": "1.0.16"
+        "active-table": "1.1.0"
       }
     },
     "address": {
diff --git a/website/package.json b/website/package.json
index 37895d30..73166857 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": "^1.0.16",
+    "active-table-react": "^1.1.0",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
diff --git a/website/src/components/table/tableContainerMethods.js b/website/src/components/table/tableContainerMethods.js
index 856c7967..4053b32a 100644
--- a/website/src/components/table/tableContainerMethods.js
+++ b/website/src/components/table/tableContainerMethods.js
@@ -13,12 +13,12 @@ function ResultText(props) {
 
 function click(table, resultText, setResultText, propertyName, displayResults, argument) {
   const activeTableReference = extractChildTableElement(table);
-  const content = activeTableReference[propertyName](argument);
+  const data = activeTableReference[propertyName](argument);
   if (displayResults ?? true) {
     let newResultTextArr = [...resultText];
     if (newResultTextArr.length === 1 && newResultTextArr[0] === '') newResultTextArr = [];
     if (newResultTextArr.length > 3) newResultTextArr.pop();
-    newResultTextArr.unshift(JSON.parse(JSON.stringify(content)));
+    newResultTextArr.unshift(JSON.parse(JSON.stringify(data)));
     setResultText(newResultTextArr);
   }
 }
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index ff44f161..cc53a951 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -212,6 +212,18 @@ code {
   opacity: 0.6;
 }
 
+/* JavaScript */
+.token + .property,
+.token + .keyword,
+.token + .string,
+.token + .number,
+.token + .parameter,
+.token + .dom,
+.token + .boolean,
+.template-string {
+  color: var(--code-tag-color) !important;
+}
+
 .header-github-link:before {
   background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
     no-repeat;
diff --git a/website/src/pages/features/columnTypes/columnTypes.js b/website/src/pages/features/columnTypes/columnTypes.js
index caac47ab..c45ea40b 100644
--- a/website/src/pages/features/columnTypes/columnTypes.js
+++ b/website/src/pages/features/columnTypes/columnTypes.js
@@ -40,7 +40,7 @@ function RightPanel() {
             },
             {headerName: 'Verified', defaultColumnTypeName: 'Checkbox'},
           ]}
-          content={[
+          data={[
             ['Name', 'Date of Birth', 'Hobby', 'Verified'],
             ['Peter', '12-08-1992', 'Fishing', 'true'],
             ['John', '14-10-2012', 'Soccer', 'false'],
diff --git a/website/src/pages/features/customization/customization.js b/website/src/pages/features/customization/customization.js
index a95a7677..c3ea344e 100644
--- a/website/src/pages/features/customization/customization.js
+++ b/website/src/pages/features/customization/customization.js
@@ -51,7 +51,7 @@ function BottomPanel() {
           headerStyles={{default: {backgroundColor: '#08183a'}, hoverColors: {backgroundColor: '#0a1e47'}}}
           displayAddNewRow={false}
           displayAddNewColumn={false}
-          content={[
+          data={[
             ['Planet', 'Diameter', 'Mass', 'Moons'],
             ['Earth', 12756, 5.97, 1],
             ['Mars', 6792, 0.642, 2],
@@ -121,7 +121,7 @@ function BottomPanel() {
           columnResizerColors={{click: '#727272'}}
           displayAddNewRow={false}
           displayAddNewColumn={false}
-          content={[
+          data={[
             ['Planet', 'Diameter', 'Mass', 'Moons'],
             ['Earth', 12756, 5.97, 1],
             ['Mars', 6792, 0.642, 2],
@@ -164,7 +164,7 @@ function TopPanel() {
           stripedRows={{odd: {backgroundColor: ''}, even: {backgroundColor: '#edf7ff'}}}
           columnResizerColors={{hover: '#66b3ff', click: '#4aa5ff'}}
           displayAddNewColumn={false}
-          content={[
+          data={[
             ['Planet', 'Diameter', 'Mass', 'Moons'],
             ['Earth', 12756, 5.97, 1],
             ['Mars', 6792, 0.642, 2],
@@ -186,7 +186,7 @@ function TopPanel() {
           }}
           stripedRows={{odd: {backgroundColor: ''}, even: {backgroundColor: '#ebebeb7a'}}}
           columnResizerColors={{click: '#727272'}}
-          content={[
+          data={[
             ['Planet', 'Diameter', 'Mass', 'Moons'],
             ['Earth', 12756, 5.97, 1],
             ['Mars', 6792, 0.642, 2],
diff --git a/website/src/pages/features/layoutManagement/layoutManagement.js b/website/src/pages/features/layoutManagement/layoutManagement.js
index fb22d182..52e74287 100644
--- a/website/src/pages/features/layoutManagement/layoutManagement.js
+++ b/website/src/pages/features/layoutManagement/layoutManagement.js
@@ -16,7 +16,7 @@ function RightPanel() {
       <ActiveTableBrowser
         tableStyle={{borderRadius: '5px', width: '100%'}}
         pagination={{rowsPerPage: 4}}
-        content={[
+        data={[
           ['Planet', 'Diameter', 'Mass', 'Moons'],
           ['Earth', 12756, 5.97, 1],
           ['Mars', 6792, 0.642, 2],
@@ -55,7 +55,7 @@ function LeftPanel() {
         ::-webkit-scrollbar-track {
           background-color: #f2f2f2;
         }"
-        content={[
+        data={[
           ['Planet', 'Diameter', 'Mass', 'Moons'],
           ['Earth', 12756, 5.97, 1],
           ['Mars', 6792, 0.642, 2],
diff --git a/website/src/pages/features/programmaticUpdates/programmaticUpdates.js b/website/src/pages/features/programmaticUpdates/programmaticUpdates.js
index 97426db4..e0d64348 100644
--- a/website/src/pages/features/programmaticUpdates/programmaticUpdates.js
+++ b/website/src/pages/features/programmaticUpdates/programmaticUpdates.js
@@ -94,7 +94,7 @@ function LeftPanel() {
           }}
           rowDropdown={{displaySettings: {isAvailable: false}}}
           displayHeaderIcons={false}
-          content={[
+          data={[
             ['Stock', 'Current', 'Last', 'Change', 'Yield'],
             ['JPA', '$88.22', '$85.73', '-0.1%', '1.4%'],
             ['REFR', '$18.52', '$88', '1.5%', '0.4%'],
diff --git a/website/src/pages/features/responsiveDesign/responsiveDesign.js b/website/src/pages/features/responsiveDesign/responsiveDesign.js
index 7a6a91cf..9db804b8 100644
--- a/website/src/pages/features/responsiveDesign/responsiveDesign.js
+++ b/website/src/pages/features/responsiveDesign/responsiveDesign.js
@@ -19,7 +19,7 @@ const Panel = React.forwardRef((_, ref) => (
   <div className="responsive-design-panel" ref={ref}>
     <ActiveTableBrowser
       tableStyle={{borderRadius: '5px', width: '100%'}}
-      content={[
+      data={[
         ['Planet', 'Diameter', 'Mass', 'Moons'],
         ['Earth', 12756, 5.97, 1],
         ['Mars', 6792, 0.642, 2],
diff --git a/website/src/pages/smallScreen/smallScreen.js b/website/src/pages/smallScreen/smallScreen.js
index 46a89f06..e2ac40ef 100644
--- a/website/src/pages/smallScreen/smallScreen.js
+++ b/website/src/pages/smallScreen/smallScreen.js
@@ -47,7 +47,7 @@ export default function SmallScreen() {
           ]}
           displayIndexColumn={false}
           displayAddNewColumn={false}
-          content={[
+          data={[
             ['Name', 'Date of Birth', 'Hobby', 'Verified'],
             ['Peter', '12-08-1992', 'Fishing', 'true'],
             ['John', '14-10-2012', 'Soccer', 'false'],
diff --git a/website/src/pages/startPanel/startPanel.js b/website/src/pages/startPanel/startPanel.js
index 09637283..c8ceb78a 100644
--- a/website/src/pages/startPanel/startPanel.js
+++ b/website/src/pages/startPanel/startPanel.js
@@ -69,7 +69,7 @@ function RightPanel() {
             {headerName: 'Sale date', defaultColumnTypeName: 'Date d-m-y'},
             {headerName: 'Price', defaultColumnTypeName: 'Currency'},
           ]}
-          content={[
+          data={[
             ['Name', 'Category', 'Sale date', 'Price'],
             ['Car', 'Vehicles', '20/07/2012', '$6800.00'],
             ['Laptop', 'Electronics', '08/11/2014', '$700'],
diff --git a/website/src/socialMediaPreview/socialMediaPreview.js b/website/src/socialMediaPreview/socialMediaPreview.js
index 314d952a..9e42718b 100644
--- a/website/src/socialMediaPreview/socialMediaPreview.js
+++ b/website/src/socialMediaPreview/socialMediaPreview.js
@@ -62,7 +62,7 @@ function RightPanel() {
             {headerName: 'Sale date', defaultColumnTypeName: 'Date d-m-y'},
             {headerName: 'Price', defaultColumnTypeName: 'Currency'},
           ]}
-          content={[
+          data={[
             ['Name', 'Category', 'Sale date', 'Price'],
             ['Car', 'Vehicles', '20/07/2012', '$6800.00'],
             ['Laptop', 'Electronics', '08/11/2014', '$700'],