diff --git a/README.md b/README.md
index 1281392d..ee844eac 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ A lightweight, extendable, JavaScript HTML table library written in TypeScript a
 
 ## Examples / Demos
 
-See the demos [here](https://fiduswriter.github.io/simple-datatables/demos/).
+See the demos [here](https://fiduswriter.github.io/simple-datatables/demos/) and the documentation [here](https://fiduswriter.github.io/simple-datatables/documentation/).
 
 ### Upgrading
 
diff --git a/docs/demos/1-simple/index.html b/docs/demos/1-simple/index.html
index b01c813b..8a691708 100644
--- a/docs/demos/1-simple/index.html
+++ b/docs/demos/1-simple/index.html
@@ -3,30 +3,37 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Simple</title>
-
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Simple - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
-
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
         <style>
             .red {
-                background-color: red;
+                background-color: #ffafba;
             }
             .green {
-                background-color: green;
+                background-color: #ebffc8;
             }
         </style>
     </head>
     <body>
-        <h1>Simple</h1>
-        <table class="table" id="simple">
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Simple</h2>
+
+        <table id="demo-table">
             <thead>
                 <tr>
                     <th>
-                        <b>N</b>ame
+                        <b>Name</b>
                     </th>
                     <th>Ext.</th>
                     <th>City</th>
@@ -740,7 +747,7 @@ <h1>Simple</h1>
 
         <script type="module">
             import {DataTable} from "../dist/module.js"
-            window.dt = new DataTable("table", {
+            window.dt = new DataTable("#demo-table", {
                 perPageSelect: [5, 10, 15, ["All", -1]],
                 columns: [
                     {
@@ -757,8 +764,7 @@ <h1>Simple</h1>
                         headerClass: "red"
                     }
                 ]
-})
-
+            })
         </script>
     </body>
 </html>
diff --git a/docs/demos/10-filters/index.html b/docs/demos/10-filters/index.html
index 43afe453..fda233de 100644
--- a/docs/demos/10-filters/index.html
+++ b/docs/demos/10-filters/index.html
@@ -3,20 +3,29 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Filters</title>
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Filters - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
     </head>
     <body>
-        <h1>Filters</h1>
-        <!-- CDN -->
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Filters</h2>
+
+        <!-- The table in this demo is generated programmatically. See below for more details. -->
+
         <script src="../dist/umd.js"></script>
-        <!-- Custom Code -->
         <script>
-            const t = document.createElement("table")
+            const table = document.createElement("table")
             const data = {
                 "headings": ["Name", "Job", "Company", "Ext.", "Start Date", "Email", "Phone No."],
                 "data": [
@@ -35,8 +44,8 @@ <h1>Filters</h1>
                     ["Caleb X. Finch", "Assistant", "Elit Associates", "3629", "09/19/2016", "condimentum@eleifend.com", "056 1551 7431"]
                 ]
             }
-            document.body.appendChild(t)
-            window.dt = new window.simpleDatatables.DataTable(t, {
+            document.body.appendChild(table)
+            window.dt = new window.simpleDatatables.DataTable(table, {
                 data,
                 columns: [
                     {
diff --git a/docs/demos/11-export/index.html b/docs/demos/11-export/index.html
index 4605cda5..eeb4dfcb 100644
--- a/docs/demos/11-export/index.html
+++ b/docs/demos/11-export/index.html
@@ -3,16 +3,25 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Simple</title>
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Simple - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
     </head>
     <body>
-        <h1>Export</h1>
-        <table class="table">
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Export</h2>
+
+        <table id="demo-table">
             <thead>
                 <tr>
                     <th>Name</th>
@@ -725,11 +734,13 @@ <h1>Export</h1>
                 </tr>
             </tbody>
         </table>
-        <button class="csv">Export CSV</button>
-        <button class="sql">Export SQL</button>
-        <button class="txt">Export TXT</button>
-        <button class="json">Export JSON</button>
-        <button class="custom">Export Custom</button>
+
+        <button id="export-csv">Export CSV</button>
+        <button id="export-sql">Export SQL</button>
+        <button id="export-txt">Export TXT</button>
+        <button id="export-json">Export JSON</button>
+        <button id="export-custom">Export Custom</button>
+
         <script type="module">
             import {
                 DataTable,
@@ -759,8 +770,9 @@ <h1>Export</h1>
                     ...defaults,
                     ...clonedUserOptions
                 }
-                const separatorRow = Array(dataTable.data.headings.filter((_heading, index) => !dataTable.columns.settings[index]?.hidden).length).fill("-")
-        .join(options.columnDelimiter)
+                const separatorRow = Array(dataTable.data.headings.filter((_heading, index) => !dataTable.columns.settings[index]?.hidden).length)
+                    .fill("-")
+                    .join(options.columnDelimiter)
                 const str = `${separatorRow}${options.lineDelimiter}${csv}${options.lineDelimiter}${separatorRow}`
                 if (userOptions.download) {
                     // Create a link to trigger the download
@@ -776,32 +788,32 @@ <h1>Export</h1>
                 }
                 return str
             }
-            const table = new DataTable("table")
-            document.querySelector("button.csv").addEventListener("click", () => {
+            const table = new DataTable("#demo-table")
+            document.getElementById("export-csv").addEventListener("click", () => {
                 exportCSV(table, {
                     download: true,
                     lineDelimiter: "\n",
                     columnDelimiter: ";"
                 })
             })
-            document.querySelector("button.sql").addEventListener("click", () => {
+            document.getElementById("export-sql").addEventListener("click", () => {
                 exportSQL(table, {
                     download: true,
                     tableName: "export_table"
                 })
             })
-            document.querySelector("button.txt").addEventListener("click", () => {
+            document.getElementById("export-txt").addEventListener("click", () => {
                 exportTXT(table, {
                     download: true
                 })
             })
-            document.querySelector("button.json").addEventListener("click", () => {
+            document.getElementById("export-json").addEventListener("click", () => {
                 exportJSON(table, {
                     download: true,
                     space: 3
                 })
             })
-            document.querySelector("button.custom").addEventListener("click", () => {
+            document.getElementById("export-custom").addEventListener("click", () => {
                 exportCustomCSV(table, {
                     download: true
                 })
diff --git a/docs/demos/12-updating/index.html b/docs/demos/12-updating/index.html
index 75f4dc27..1727a7fd 100644
--- a/docs/demos/12-updating/index.html
+++ b/docs/demos/12-updating/index.html
@@ -3,20 +3,29 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Updating</title>
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Updating - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
     </head>
     <body>
-        <h1>Updating</h1>
-        Replace <i>first</i>
-        match in a specified column. <br>
-        &nbsp; <div id="update-div">
-            <label for="columns">Column</label>
-            <select id="columns"></select>
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Updating</h2>
+        <p>
+            Replace <i>first</i> match in a specified column.
+        </p>
+        <div id="update-div">
+            <label for="column">Column</label>
+            <select id="column"></select>
             <label for="find">Find</label>
             <input id="find">
             <label for="replace">Replace</label>
@@ -24,11 +33,10 @@ <h1>Updating</h1>
             <button id="update">Update</button>
         </div>
         <br>
-        <!-- CDN -->
+
         <script src="../dist/umd.js"></script>
-        <!-- Custom Code -->
         <script>
-            const t = document.createElement("table")
+            const table = document.createElement("table")
             const data = {
                 "headings": ["Name", "Job", "Company", "Ext.", "Start Date", "Email", "Phone No."],
                 "data": [
@@ -47,21 +55,21 @@ <h1>Updating</h1>
                     ["Caleb X. Finch", "Assistant", "Elit Associates", "3629", "09/19/2016", "condimentum@eleifend.com", "056 1551 7431"]
                 ]
             }
-            document.body.appendChild(t)
-            window.dt = new window.simpleDatatables.DataTable(t, {
+            document.body.appendChild(table)
+            window.dt = new window.simpleDatatables.DataTable(table, {
                 data,
                 columns: [
-        {
+                    {
                         select: 4,
                         type: "date",
                         format: "MM/DD/YYYY"
                     }
-    ]
+                ]
             })
-            const sel = document.getElementById("columns")
+            const sel = document.getElementById("column")
             data.headings.forEach((heading, index) => {
                 const opt = document.createElement("option")
-                opt.text = `${heading} - column[${index}]`
+                opt.text = `${index} - ${heading}`
                 opt.value = `${index}`
                 sel.options.add(opt)
             })
@@ -71,19 +79,19 @@ <h1>Updating</h1>
                     alert("Nothing to find")
                     return
                 }
-                const col = document.getElementById("columns").selectedIndex
+                const colIndex = document.getElementById("column").selectedIndex
                 // find first row where string occurs in column
                 const rows = window.dt.rows
                 const {
                     index,
                     cols
-                } = rows.findRow(col, find)
+                } = rows.findRow(colIndex, find)
                 if (index < 0) {
-                    alert(`Could not find "${find}" within column ${col}`)
+                    alert(`Could not find "${find}" within column ${colIndex}`)
                     return
                 }
                 // replace row data
-                cols[col] = document.getElementById("replace").value.trim()
+                cols[colIndex] = document.getElementById("replace").value.trim()
                 // update row in data table
                 rows.updateRow(index, cols)
             })
diff --git a/docs/demos/13-hide-column/index.html b/docs/demos/13-hide-column/index.html
index bc4d05fa..de6ba76e 100644
--- a/docs/demos/13-hide-column/index.html
+++ b/docs/demos/13-hide-column/index.html
@@ -3,16 +3,27 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Simple</title>
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Hide column - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
     </head>
     <body>
-        <h1>Simple</h1>
-        <table class="table">
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Hide column</h2>
+        <p>Example on how to hide the column "Name".</p>
+        <br>
+
+        <table id="demo-table">
             <thead>
                 <tr>
                     <th>Name</th>
@@ -725,13 +736,14 @@ <h1>Simple</h1>
                 </tr>
             </tbody>
         </table>
+
         <script type="module">
             import {
                 DataTable
             } from "../dist/module.js"
-            new DataTable("table", {
+            new DataTable("#demo-table", {
                 columns: [
-        {
+                    {
                         select: 0,
                         hidden: true,
                         render: (data, cell, row) => {
@@ -739,7 +751,7 @@ <h1>Simple</h1>
                             return data // Will not be shown as column is hidden.
                         }
                     }
-    ],
+                ],
                 searchable: false,
                 fixedHeight: false,
                 layout: {
diff --git a/docs/demos/14-row-navigation/index.html b/docs/demos/14-row-navigation/index.html
index 3dea2867..ca41f5c5 100644
--- a/docs/demos/14-row-navigation/index.html
+++ b/docs/demos/14-row-navigation/index.html
@@ -3,30 +3,53 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Row navigation</title>
-        <style>
-            tr.selected {
-                background-color: red;
-            }
-        </style>
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Row navigation - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
+        <style>
+            tr {
+                cursor: pointer;
+            }
+
+            tr.selected {
+                background-color: #ffff72;
+            }
+        </style>
     </head>
     <body>
-        <h1>Row navigation</h1>
-        <p>Select the table below either by clicking on it or by using the TAB-key. Then use the up/down arrow-keys to navigate the table. Either click on a row or hit Enter/Space after navigating to select it.</p>
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Row navigation</h2>
+        <p>
+            Select the table below either by clicking on it or by using the TAB-key. Then use the up/down arrow-keys to
+            navigate the table. Either click on a row or hit Enter/Space after navigating to select it.
+        </p>
+        <br>
+
         <div>
-            <input type="checkbox" class="multi-select" checked="true">
-            <b>Multi select:</b> Whether to allow selection of more than one row.
+            <input type="checkbox" id="multi-select" checked>
+            <label for="multi-select">
+                <strong>Multi select:</strong> Whether to allow selection of more than one row.
+            </label>
         </div>
         <div>
-            <input type="checkbox" class="row-navigation" checked="true">
-            <b>Row navigation:</b> Whether to allow keyboard row navigation.
+            <input type="checkbox" id="row-navigation" checked>
+            <label for="row-navigation">
+                <strong>Row navigation:</strong> Whether to allow keyboard row navigation.
+            </label>
         </div>
-        <table class="table">
+        <br>
+
+        <table id="demo-table">
             <thead>
                 <tr>
                     <th>Name</th>
@@ -743,9 +766,9 @@ <h1>Row navigation</h1>
             import {
                 DataTable
             } from "../dist/module.js"
-            let multiSelect = true,
-                rowNavigation = true,
-                table = false
+            let multiSelect = true
+            let rowNavigation = true
+            let table = null
 
             const resetTable = function() {
                 if (table) {
@@ -761,10 +784,9 @@ <h1>Row navigation</h1>
                             tr.attributes = {}
                         }
                         if (!tr.attributes.class) {
-                            tr.attributes.class = "selected"
-                        } else {
-                            tr.attributes.class += " selected"
+                            tr.attributes.class = ""
                         }
+                        tr.attributes.class += " selected"
                         return tr
 
                     }
@@ -773,12 +795,13 @@ <h1>Row navigation</h1>
                     options.rowNavigation = true
                     options.tabIndex = 1
                 }
-                table = new DataTable("table", options)
+
+                table = new DataTable("#demo-table", options)
 
                 // Mark all rows as unselected
                 table.data.data.forEach(data => {
-        data.selected = false
-    })
+                    data.selected = false
+                })
 
                 table.on("datatable.selectrow", (rowIndex, event) => {
                     event.preventDefault()
@@ -796,18 +819,20 @@ <h1>Row navigation</h1>
                     table.update()
                 })
             }
+
+            // Row navigation makes no sense on mobile, so we deactivate it and hide the checkbox.
             const isMobile = window.matchMedia("(any-pointer:coarse)").matches
             if (isMobile) {
-                // Row navigation makes no sense on mobile, so we deactivate it and hide the checkbox.
                 rowNavigation = false
-                document.querySelector("input.row-navigation").style.display = "none"
+                document.getElementById("row-navigation").style.display = "none"
             }
+
             resetTable()
-            document.querySelector("input.multi-select").addEventListener("input", _event => {
+            document.getElementById("multi-select").addEventListener("input", _event => {
                 multiSelect = !multiSelect
                 resetTable()
             })
-            document.querySelector("input.row-navigation").addEventListener("input", _event => {
+            document.getElementById("row-navigation").addEventListener("input", _event => {
                 rowNavigation = !rowNavigation
                 resetTable()
             })
diff --git a/docs/demos/15-editing/index.html b/docs/demos/15-editing/index.html
index 4142507d..7c931d27 100644
--- a/docs/demos/15-editing/index.html
+++ b/docs/demos/15-editing/index.html
@@ -3,8 +3,8 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Editing</title>
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Editing - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
         <link rel="stylesheet" href="../dist/css/editing.css">
@@ -12,12 +12,26 @@
         <link rel="stylesheet" href="../demo.css">
     </head>
     <body>
-        <h1>Editing</h1>
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Editing</h2>
+        <p>Double-click a cell to edit it.</p>
+        <br>
         <div>
-            <input type="checkbox" class="modal">
-            <b>Modal:</b> Whether to use modal for data editing
+            <input type="checkbox" id="modal" class="modal">
+            <label for="modal">
+                <strong>Modal:</strong> Show a modal instead of the inline editor
+            </label>
         </div>
-        <table class="table">
+        <br>
+
+        <table id="demo-table">
             <thead>
                 <tr>
                     <th>Name</th>
@@ -730,14 +744,15 @@ <h1>Editing</h1>
                 </tr>
             </tbody>
         </table>
+
         <script type="module">
             import {
                 DataTable,
                 makeEditable
             } from "../dist/module.js"
-            let editor = false,
-    inline = true,
-    table = false
+            let editor = false
+            let inline = true
+            let table = false
 
             const resetTable = function() {
                 if (editor) {
@@ -746,7 +761,7 @@ <h1>Editing</h1>
                 if (table) {
                     table.destroy()
                 }
-                table = new DataTable("table", {
+                window.table = table = new DataTable("#demo-table", {
                     columns: [
                         {
                             select: 3,
@@ -755,7 +770,6 @@ <h1>Editing</h1>
                         }
                     ]
                 })
-                window.table = table
                 editor = makeEditable(table, {
                     contextMenu: true,
                     hiddenColumns: true,
@@ -789,7 +803,7 @@ <h1>Editing</h1>
                 })
             }
             resetTable()
-            document.querySelector("input.modal").addEventListener("input", _event => {
+            document.getElementById("modal").addEventListener("input", _event => {
                 inline = !inline
                 resetTable()
             })
diff --git a/docs/demos/16-scroll-y/index.html b/docs/demos/16-scroll-y/index.html
index 98c64dfa..97997d19 100644
--- a/docs/demos/16-scroll-y/index.html
+++ b/docs/demos/16-scroll-y/index.html
@@ -3,18 +3,27 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Scroll Y</title>
-
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Scroll Y - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
-
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
     </head>
     <body>
-        <h1>Simple</h1>
-        <table class="table">
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Scroll Y</h2>
+        <p>Table with fixed height.</p>
+        <br>
+
+        <table id="demo-table">
             <thead>
                 <tr>
                     <th>Name</th>
@@ -730,7 +739,7 @@ <h1>Simple</h1>
 
         <script type="module">
             import {DataTable} from "../dist/module.js"
-            new DataTable("table", {
+            new DataTable("#demo-table", {
                 paging: false,
                 scrollY: "30vh",
                 rowNavigation: true,
diff --git a/docs/demos/17-checkbox-column/index.html b/docs/demos/17-checkbox-column/index.html
index 0e04bc6f..1462ddd8 100644
--- a/docs/demos/17-checkbox-column/index.html
+++ b/docs/demos/17-checkbox-column/index.html
@@ -3,22 +3,31 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Checkbox column</title>
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Checkbox column - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
         <style>
-        span.checkbox {
-            cursor: pointer;
-        }
+            span.checkbox {
+                cursor: pointer;
+            }
         </style>
     </head>
     <body>
-        <h1>Checkbox column</h1>
-        <table class="table"></table>
-        <!-- Custom Code -->
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Checkbox column</h2>
+
+        <table id="demo-table"></table>
+
         <script type="module">
             import {
                 DataTable
@@ -28,7 +37,7 @@ <h1>Checkbox column</h1>
                 response => response.json()
             ).then(
                 data => {
-                    const datatable = new DataTable("table", {
+                    const datatable = new DataTable("#demo-table", {
                         type: "string",
                         data: {
                             headings: ["Checked"].concat(Object.keys(data[0])),
@@ -44,6 +53,7 @@ <h1>Checkbox column</h1>
                         columns: [
                             {
                                 select: 0,
+                                sortable: false,
                                 render: (value, _td, _rowIndex, _cellIndex) => `<span class="checkbox">${value ? "☑" : "☐"}</span>`
                             }
                         ]
@@ -56,14 +66,12 @@ <h1>Checkbox column</h1>
                             const index = parseInt(event.target.parentElement.parentElement.dataset.index, 10)
                             const cell = datatable.data.data[index][0]
                             const checked = cell.data
-                            if (checked) {
-                                cell.data = false
-                            } else {
-                                cell.data = true
-                            }
+                            cell.data = !checked
                             datatable.update()
-                            setTimeout( // set a timeout so that rednered checkbiox is rendered first.
-                                () => alert(`${name} has been ${checked ? "unchecked" : "checked"}.`),
+
+                            // Timeout used for the checkbox to have time to update and show as checked. It is not required.
+                            setTimeout(
+                                () => alert(`"${name}" has been ${checked ? "unchecked" : "checked"}.`),
                                 0
                             )
                         }
diff --git a/docs/demos/18-fetch-api/demo.json b/docs/demos/18-fetch-api/data.json
similarity index 100%
rename from docs/demos/18-fetch-api/demo.json
rename to docs/demos/18-fetch-api/data.json
diff --git a/docs/demos/18-fetch-api/index.html b/docs/demos/18-fetch-api/index.html
index 02ae209e..eca54367 100644
--- a/docs/demos/18-fetch-api/index.html
+++ b/docs/demos/18-fetch-api/index.html
@@ -3,35 +3,41 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Fetch API</title>
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Fetch API - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
     </head>
     <body>
-        <h1>Fetch API</h1>
-        <table class="table"></table>
-        <!-- CDN -->
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Fetch API</h2>
+
+        <table id="demo-table"></table>
+
         <script src="../dist/umd.js"></script>
-        <!-- Custom Code -->
         <script>
-            fetch("demo.json").then(
-                response => response.json()
-            ).then(
-                data => {
-                    if (!data.length) {
+            fetch("data.json")
+                .then(response => response.json())
+                .then(data => {
+                    if (!data || !data.length) {
                         return
                     }
-                    new window.simpleDatatables.DataTable(".table", {
+                    new window.simpleDatatables.DataTable("#demo-table", {
                         data: {
                             headings: Object.keys(data[0]),
                             data: data.map(item => Object.values(item))
                         }
                     })
-                }
-            )
+                })
         </script>
     </body>
 </html>
diff --git a/docs/demos/19-bootstrap-table/index.html b/docs/demos/19-bootstrap-table/index.html
index ea128c20..7ec5bcdf 100644
--- a/docs/demos/19-bootstrap-table/index.html
+++ b/docs/demos/19-bootstrap-table/index.html
@@ -3,30 +3,38 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Bootstrap table</title>
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Bootstrap Table - simple-datatables</title>
+        <!-- Bootstrap and Bootstrap Table styles -->
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.21.2/dist/bootstrap-table.min.css" rel="stylesheet" crossorigin="anonymous">
+        <!-- Demo Styles -->
+        <link rel="stylesheet" href="../demo.css">
         <style>
-        a.datatable-sorter {
-            display: block;
-            color: inherit;
-            text-decoration: inherit;
-        }
-        a.page-link {
-            cursor: pointer;
-        }
+            a.datatable-sorter {
+                display: block;
+                color: inherit;
+                text-decoration: inherit;
+            }
+            a.page-link {
+                cursor: pointer;
+            }
         </style>
     </head>
     <body class="bootstrap-table bootstrap5">
         <div class="container text-center fixed-table-container">
-            <h1>Bootstrap table</h1>
+            <header>
+                <h1>
+                    <a href="../../">simple-datatables</a>
+                </h1>
+                <a href="../../documentation">Documentation</a>
+                <a href="../">Demos</a>
+            </header>
+            <h2>Integration with Bootstrap Table</h2>
             <table class="table table-striped">
                 <thead>
                     <tr>
-                        <th>
-                            Name
-                        </th>
+                        <th>Name</th>
                         <th>Ext.</th>
                         <th>City</th>
                         <th data-type="date" data-format="YYYY/DD/MM">Start Date</th>
@@ -749,7 +757,7 @@ <h1>Bootstrap table</h1>
                     paginationList: "pagination",
                     paginationListItem: "page-item",
                     paginationListItemLink: "page-link"
-    },
+                },
                 columns: [
                     {
                         select: 2,
diff --git a/docs/demos/2-dynamic-import/index.html b/docs/demos/2-dynamic-import/index.html
index 6b902bdb..4f7f47c2 100644
--- a/docs/demos/2-dynamic-import/index.html
+++ b/docs/demos/2-dynamic-import/index.html
@@ -3,18 +3,25 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Dynamic import</title>
-
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Dynamic import - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
-
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
     </head>
     <body>
-        <h1>Dynamic Import</h1>
-        <table class="table">
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Dynamic import</h2>
+
+        <table id="demo-table">
             <thead>
                 <tr>
                     <th>Name</th>
@@ -727,11 +734,13 @@ <h1>Dynamic Import</h1>
                 </tr>
             </tbody>
         </table>
-        <button class="print">Print</button>
+
+        <button id="print">Print</button>
+
         <script type="module">
             import("../dist/module.js").then(({DataTable}) => {
-                const datatable = new DataTable("table")
-                document.querySelector("button.print").addEventListener("click", () => datatable.print())
+                const datatable = new DataTable("#demo-table")
+                document.getElementById("print").addEventListener("click", () => datatable.print())
             })
         </script>
     </body>
diff --git a/docs/demos/20-column-filters/index.html b/docs/demos/20-column-filters/index.html
index 52fca334..3fc784b6 100644
--- a/docs/demos/20-column-filters/index.html
+++ b/docs/demos/20-column-filters/index.html
@@ -3,26 +3,25 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
         <title>Column filters</title>
-
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
-
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
-        <style>
-            .red {
-                background-color: red;
-            }
-            .green {
-                background-color: green;
-            }
-        </style>
     </head>
     <body>
-        <h1>Column filters</h1>
-        <table class="table">
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Column filters</h2>
+
+        <table id="demo-table">
             <thead>
                 <tr>
                     <th>Name</th>
@@ -738,8 +737,8 @@ <h1>Column filters</h1>
 
         <script type="module">
             import {DataTable} from "../dist/module.js"
-            window.dt = new DataTable("table", {
-                perPageSelect: [5, 10, 15, ["All", -1]],
+            window.dt = new DataTable("#demo-table", {
+                perPageSelect: [10, 50, ["All", -1]],
                 columns: [
                     {
                         select: 2,
@@ -748,11 +747,6 @@ <h1>Column filters</h1>
                     {
                         select: 3,
                         sortSequence: ["desc"]
-                    },
-                    {
-                        select: 4,
-                        cellClass: "green",
-                        headerClass: "red"
                     }
                 ],
                 tableRender: (_data, table, type) => {
@@ -779,8 +773,7 @@ <h1>Column filters</h1>
                     tHead.childNodes.push(filterHeaders)
                     return table
                 }
-})
-
+            })
         </script>
     </body>
 </html>
diff --git a/docs/demos/21-svg/index.html b/docs/demos/21-svg/index.html
index e59a23dc..0c217dbc 100644
--- a/docs/demos/21-svg/index.html
+++ b/docs/demos/21-svg/index.html
@@ -3,106 +3,114 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>SVGs</title>
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>SVGs - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
+        <!-- Demo Styles -->
+        <link rel="stylesheet" href="../demo.css">
         <style>
-            body {
-                background-color: #ccc;
-            }
-            table tr td img, table tr td svg {
+            table tr td img,
+            table tr td svg {
                 height: 40px;
                 width: 40px;
                 margin-right: 10px;
                 vertical-align: middle !important;
             }
-            table td, table th {
+            table td,
+            table th {
                 padding: 0px;
                 vertical-align: middle !important;
             }
         </style>
     </head>
     <body>
-        <div id="tbl-machines"></div>
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
 
-        <script type="module">
-        import {DataTable} from "../dist/module.js"
-        const machineTypeIcons = [
-            {
-                name: "Scaler",
-                code: `
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4096 4096">
-                        <g>
-                            <circle style="fill: #161719" cx="785.77769" cy="2722.76844" r="268.60136"></circle>
-                            <circle style="fill: #161719" cx="2469.10822" cy="2722.76844" r="268.60136"></circle>
-                            <path style="fill: #161719" d="M2251.275,2358.344l84.69517,77.49579c-136.81895,69.75272-208.755,238.20138-157.11006,395.45748H1180.32648V2722.77233h-91.47229c2.49973-37.17335,3.04367-125.18807-53.35749-200.184-97.91689-130.204-327.57163-168.06721-463.25416-45.80921-92.39766,83.25849-122.98849,224.3304-77.9341,354.51813H308.30695L3.27986,2722.76844,0,2274.86635l494.30844-99.09364H974.518v-95.27894h274.40873v464.96671l232.47924,110.5216h148.64466V2522.58835a308.51381,308.51381,0,0,1-224.86611-99.08556V1821.3276h-27.71758v-64.78546h823.0398l50.7683,22.86406Z"></path>
-                            <path style="fill: #161719" d="M2949.91694,2470.68864v145.80768a835.912,835.912,0,0,1-190.5959,0,354.506,354.506,0,0,0-43.88252-81.4244c-21.93965-30.38957-43.31409-56.57044-72.54389-78.072Z"></path>
-                            <polygon style="fill: #161719" points="2635.581 2435.222 2835.198 2442.886 2835.198 2404.221 2578.685 2137.947 2463.69 2086.773 2336.401 2094.239 2445.564 2158.615 2635.581 2435.222"></polygon>
-                            <path style="fill: #161719" d="M2336.40142,2072.45269l129.307-7.5333,12.72614-47.93921a2850.738,2850.738,0,0,0,251.41867-256.34977c103.6051-119.85624,195.77594-242.92773,267.05627-355.91076-4.77019-15.12349-8.48382-41.31327-13.254-56.43675-132.769,119.47-276.38433,270.86838-411.2717,427.11074C2486.18549,1875.23859,2407.76179,1974.72761,2336.40142,2072.45269Z"></path>
-                            <path style="fill: #161719" d="M2996.90949,1344.37959l13.87872,56.7062a2780.44544,2780.44544,0,0,0,355.75215,39.26512c154.17448,6.80751,289.00705-.92231,402.94342-14.83632q62.79871,39.95907,125.59749,79.91808l35.25475-49.58987-138.61139-97.27266q-197.28083-4.55364-394.29408-8.08Q3197.01272,1346.90292,2996.90949,1344.37959Z"></path>
-                            <polygon style="fill: #161719" points="3814.13 1363.759 3935.324 1446.735 3977.721 1408.422 3994.045 1297.423 3918.644 1240.77 3844.751 1307.545 3814.13 1363.759"></polygon>
-                            <polygon style="fill: #161719" points="3927.275 1232.971 3997.934 1287.42 4043.917 1186.716 3997.88 1156.774 3927.275 1232.971"></polygon>
-                            <polygon style="fill: #161719" points="4008.328 1147.333 4012.091 1150.032 4045.861 1174.256 4096 1068.107 4083.109 1053.842 4008.328 1147.333"></polygon>
-                            <polygon style="fill: #161719" points="2615.274 2152.28 2645.826 2182.046 2755.502 1803.042 2729.445 1774.208 2695.638 1814.324 2615.274 2152.28"></polygon>
-                            <polygon style="fill: #161719" points="2737.71 1766.74 2763.766 1795.575 3100.321 1551.11 3075.851 1524.031 2762.502 1744.336 2737.71 1766.74"></polygon>
-                            <polygon style="fill: #161719" points="3081.911 1518.554 3106.382 1545.634 3113.429 1514.669 3096.191 1423.307 3005.284 1405.058 3081.911 1518.554"></polygon>
-                            <polygon style="fill: #161719" points="3120.635 1512.862 3115.064 1545.634 3221.779 1508.31 3779.577 1556.298 3746.014 1516.68 3239.037 1465.385 3224.833 1438.593 3171.163 1437.9 3193.652 1474.969 3120.635 1512.862"></polygon>
-                            <polygon style="fill: #161719" points="3695.198 1440.88 3783.984 1552.315 3852.852 1490.082 3822.45 1469.729 3778.142 1508.589 3724.937 1437.9 3695.198 1440.88"></polygon>
-                        </g>
-                    </svg>
-                `
-            },
-            {
-                name: "LHD",
-                code: `
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4096 4096">
-                          <g>
-                              <path style="fill: #161719" d="M7.6719,1680.55315H1365.62666v-222.4898l464.15914,5.754c17.01138,10.6247,41.00986,26.12614,69.04893,46.03243,33.55695,23.82347,50.335,35.7352,62.33556,48.90928,15.001,16.468,39.66629,51.38742,43.15491,117.958l474.22919,4.795L2602.267,1888.65769c-17.64413-1.64918-311.64551-23.97313-490.53244,211.94071-127.22992,167.78946-144.68018,398.22547-44.59451,589.31l-775.35679,1.43848c97.71715-186.724,89.51123-407.95559-23.97514-573.48646-132.97129-193.95184-349.58589-222.61781-381.68529-226.32565-29.43469-3.4-269.50029-26.94769-448.81533,157.27717C233.53713,2258.16209,297.70809,2541.14431,302.087,2559.00384Q151.04307,2507.93671,0,2456.8696,3.8355,2068.71138,7.6719,1680.55315Z"></path>
-                              <circle style="fill: #161719" cx="2539.13189" cy="2427.46008" r="485.41761"></circle>
-                              <path style="fill: #161719" d="M4096,1869.12922c-131.35973,110.16474-277.68138,223.66973-439.59751,336.62659-117.89064,82.23985-232.93911,156.44226-343.76194,223.39176a404.0608,404.0608,0,0,1-232.00285,47.41578q2.16358-24.26489,2.18448-49.10259c0-223.05447-134.32007-414.73426-326.48065-498.56825a403.63466,403.63466,0,0,1,45.65341-81.33756c117.88219-92.5295,253.36605-155.19445,371.24825-247.7322l327.61912,169.279Z"></path>
-                              <circle style="fill: #161719" cx="818.35284" cy="2423.78388" r="485.41761"></circle>
-                              <polygon style="fill: #161719" points="1396.049 1730.479 973.395 1730.479 973.395 1458.063 1365.627 1458.063 1396.049 1730.479"></polygon>
-                          </g>
-                      </svg>
-                `
-            }
-        ]
+        <h2>SVGs</h2>
 
-        const getMachineTypeIcon = (name = "") => {
-            const machineType = machineTypeIcons.find(x => x.name === name)
-            if (machineType) {
-                return machineType.code
-            }
-            return ""
+        <table id="demo-table"></table>
 
-        }
+        <script type="module">
+            import {DataTable} from "../dist/module.js"
+            const machineTypeIcons = [
+                {
+                    name: "Scaler",
+                    code: `
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4096 4096">
+                            <g>
+                                <circle style="fill: #161719" cx="785.77769" cy="2722.76844" r="268.60136"></circle>
+                                <circle style="fill: #161719" cx="2469.10822" cy="2722.76844" r="268.60136"></circle>
+                                <path style="fill: #161719" d="M2251.275,2358.344l84.69517,77.49579c-136.81895,69.75272-208.755,238.20138-157.11006,395.45748H1180.32648V2722.77233h-91.47229c2.49973-37.17335,3.04367-125.18807-53.35749-200.184-97.91689-130.204-327.57163-168.06721-463.25416-45.80921-92.39766,83.25849-122.98849,224.3304-77.9341,354.51813H308.30695L3.27986,2722.76844,0,2274.86635l494.30844-99.09364H974.518v-95.27894h274.40873v464.96671l232.47924,110.5216h148.64466V2522.58835a308.51381,308.51381,0,0,1-224.86611-99.08556V1821.3276h-27.71758v-64.78546h823.0398l50.7683,22.86406Z"></path>
+                                <path style="fill: #161719" d="M2949.91694,2470.68864v145.80768a835.912,835.912,0,0,1-190.5959,0,354.506,354.506,0,0,0-43.88252-81.4244c-21.93965-30.38957-43.31409-56.57044-72.54389-78.072Z"></path>
+                                <polygon style="fill: #161719" points="2635.581 2435.222 2835.198 2442.886 2835.198 2404.221 2578.685 2137.947 2463.69 2086.773 2336.401 2094.239 2445.564 2158.615 2635.581 2435.222"></polygon>
+                                <path style="fill: #161719" d="M2336.40142,2072.45269l129.307-7.5333,12.72614-47.93921a2850.738,2850.738,0,0,0,251.41867-256.34977c103.6051-119.85624,195.77594-242.92773,267.05627-355.91076-4.77019-15.12349-8.48382-41.31327-13.254-56.43675-132.769,119.47-276.38433,270.86838-411.2717,427.11074C2486.18549,1875.23859,2407.76179,1974.72761,2336.40142,2072.45269Z"></path>
+                                <path style="fill: #161719" d="M2996.90949,1344.37959l13.87872,56.7062a2780.44544,2780.44544,0,0,0,355.75215,39.26512c154.17448,6.80751,289.00705-.92231,402.94342-14.83632q62.79871,39.95907,125.59749,79.91808l35.25475-49.58987-138.61139-97.27266q-197.28083-4.55364-394.29408-8.08Q3197.01272,1346.90292,2996.90949,1344.37959Z"></path>
+                                <polygon style="fill: #161719" points="3814.13 1363.759 3935.324 1446.735 3977.721 1408.422 3994.045 1297.423 3918.644 1240.77 3844.751 1307.545 3814.13 1363.759"></polygon>
+                                <polygon style="fill: #161719" points="3927.275 1232.971 3997.934 1287.42 4043.917 1186.716 3997.88 1156.774 3927.275 1232.971"></polygon>
+                                <polygon style="fill: #161719" points="4008.328 1147.333 4012.091 1150.032 4045.861 1174.256 4096 1068.107 4083.109 1053.842 4008.328 1147.333"></polygon>
+                                <polygon style="fill: #161719" points="2615.274 2152.28 2645.826 2182.046 2755.502 1803.042 2729.445 1774.208 2695.638 1814.324 2615.274 2152.28"></polygon>
+                                <polygon style="fill: #161719" points="2737.71 1766.74 2763.766 1795.575 3100.321 1551.11 3075.851 1524.031 2762.502 1744.336 2737.71 1766.74"></polygon>
+                                <polygon style="fill: #161719" points="3081.911 1518.554 3106.382 1545.634 3113.429 1514.669 3096.191 1423.307 3005.284 1405.058 3081.911 1518.554"></polygon>
+                                <polygon style="fill: #161719" points="3120.635 1512.862 3115.064 1545.634 3221.779 1508.31 3779.577 1556.298 3746.014 1516.68 3239.037 1465.385 3224.833 1438.593 3171.163 1437.9 3193.652 1474.969 3120.635 1512.862"></polygon>
+                                <polygon style="fill: #161719" points="3695.198 1440.88 3783.984 1552.315 3852.852 1490.082 3822.45 1469.729 3778.142 1508.589 3724.937 1437.9 3695.198 1440.88"></polygon>
+                            </g>
+                        </svg>
+                    `
+                },
+                {
+                    name: "LHD",
+                    code: `
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4096 4096">
+                              <g>
+                                  <path style="fill: #161719" d="M7.6719,1680.55315H1365.62666v-222.4898l464.15914,5.754c17.01138,10.6247,41.00986,26.12614,69.04893,46.03243,33.55695,23.82347,50.335,35.7352,62.33556,48.90928,15.001,16.468,39.66629,51.38742,43.15491,117.958l474.22919,4.795L2602.267,1888.65769c-17.64413-1.64918-311.64551-23.97313-490.53244,211.94071-127.22992,167.78946-144.68018,398.22547-44.59451,589.31l-775.35679,1.43848c97.71715-186.724,89.51123-407.95559-23.97514-573.48646-132.97129-193.95184-349.58589-222.61781-381.68529-226.32565-29.43469-3.4-269.50029-26.94769-448.81533,157.27717C233.53713,2258.16209,297.70809,2541.14431,302.087,2559.00384Q151.04307,2507.93671,0,2456.8696,3.8355,2068.71138,7.6719,1680.55315Z"></path>
+                                  <circle style="fill: #161719" cx="2539.13189" cy="2427.46008" r="485.41761"></circle>
+                                  <path style="fill: #161719" d="M4096,1869.12922c-131.35973,110.16474-277.68138,223.66973-439.59751,336.62659-117.89064,82.23985-232.93911,156.44226-343.76194,223.39176a404.0608,404.0608,0,0,1-232.00285,47.41578q2.16358-24.26489,2.18448-49.10259c0-223.05447-134.32007-414.73426-326.48065-498.56825a403.63466,403.63466,0,0,1,45.65341-81.33756c117.88219-92.5295,253.36605-155.19445,371.24825-247.7322l327.61912,169.279Z"></path>
+                                  <circle style="fill: #161719" cx="818.35284" cy="2423.78388" r="485.41761"></circle>
+                                  <polygon style="fill: #161719" points="1396.049 1730.479 973.395 1730.479 973.395 1458.063 1365.627 1458.063 1396.049 1730.479"></polygon>
+                              </g>
+                          </svg>
+                    `
+                }
+            ]
 
-        const generateTable = (headDefinition = ["Name", "Type"]) => {
-            const tableData = {
-                headings: [],
-                data: []
+            const getMachineTypeIcon = name => {
+                const machineType = machineTypeIcons.find(x => x.name === name)
+                if (machineType) {
+                    return machineType.code
+                }
+                return ""
             }
 
-            headDefinition.forEach( // Has to have length 2
-                head => tableData.headings.push(head || "")
-            )
+            const generateTable = columns => {
+                const tableData = {
+                    headings: [],
+                    data: []
+                }
 
-            for (let i = 0; i < 100; i++) {
-                const machineType = machineTypeIcons[Math.floor(Math.random() * machineTypeIcons.length)].name
-                tableData.data.push([`Machine ${i}`, `${getMachineTypeIcon(machineType)} <span>${machineType}</span>`])
-            }
-            return tableData
-        }
+                columns.forEach(col => tableData.headings.push(col || ""))
 
+                for (let i = 0; i < 100; i++) {
+                    const iconId = Math.floor(Math.random() * machineTypeIcons.length)
+                    const machineType = machineTypeIcons[iconId].name
+                    tableData.data.push([`Machine ${i}`, `${getMachineTypeIcon(machineType)} <span>${machineType}</span>`])
+                }
+                return tableData
+            }
 
-        new DataTable("#tbl-machines", {
-            data: generateTable(),
-            searchable: true,
-            sortable: true,
-            perPage: 15,
-            perPageSelect: [5, 10, 15, 20, 25, 50, 100, 250, 500, 1000]
-        })
-    </script>
+            new DataTable("#demo-table", {
+                data: generateTable(["Name", "Type"]),
+                searchable: true,
+                sortable: true,
+                perPage: 15,
+                perPageSelect: [5, 10, 15, 20, 25, 50, 100, 250, 500, 1000]
+            })
+        </script>
     </body>
 </html>
diff --git a/docs/demos/22-and-search/index.html b/docs/demos/22-and-search/index.html
index 4cd77456..61423bfd 100644
--- a/docs/demos/22-and-search/index.html
+++ b/docs/demos/22-and-search/index.html
@@ -3,31 +3,39 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>And search</title>
-
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>And search - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
-
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
-        <style>
-            .red {
-                background-color: red;
-            }
-            .green {
-                background-color: green;
-            }
-        </style>
     </head>
     <body>
-        <h1>And search</h1>
-        <table class="table" id="simple">
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>And search</h2>
+        <p>
+            Try to search for "blossom 2014" in the two boxes.
+            The OR-search will give you results that contain "2014" OR "Blossom",
+            while the AND-search will only return results including both "2014" and "Blossom".
+        </p>
+        <br>
+        <p>
+            The search item separator for the extension column is ";" so that searching for "3147;5018" will return
+            no results, but searching for "3147" or "5018" will return the row that contains that value.
+        </p>
+        <br>
+
+        <table id="demo-table">
             <thead>
                 <tr>
-                    <th>
-                        <b>N</b>ame
-                    </th>
+                    <th>Name</th>
                     <th>Ext.</th>
                     <th>City</th>
                     <th data-type="date" data-format="YYYY/DD/MM">Start Date</th>
@@ -740,7 +748,7 @@ <h1>And search</h1>
 
         <script type="module">
             import {DataTable} from "../dist/module.js"
-            window.dt = new DataTable("table", {
+            window.dt = new DataTable("#demo-table", {
                 perPageSelect: [5, 10, 15, ["All", -1]],
                 columns: [
                     {
@@ -778,17 +786,7 @@ <h1>And search</h1>
                     <div class='${options.classes.info}'></div>
                     <nav class='${options.classes.pagination}'></nav>
                 </div>`
-})
-
+            })
         </script>
-        <p>
-            Try to search for "blossom 2014" in the two boxes.
-            The OR-search will give you results that contain "2014" OR "Blossom",
-            while the AND-search will only return results including both "2014" and "Blossom".
-        </p>
-        <p>
-            The search item separator for the extensuion column is ";" so that searching for "3147;5018" will return
-            no results, but searching for "3147" or "5018" will return the row that contaisn that value.
-        </p>
     </body>
 </html>
diff --git a/docs/demos/23-column-filter-button/index.html b/docs/demos/23-column-filter-button/index.html
index 98a0b132..ac58b1b7 100644
--- a/docs/demos/23-column-filter-button/index.html
+++ b/docs/demos/23-column-filter-button/index.html
@@ -3,125 +3,132 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Column Filter Button</title>
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Column filter button - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
         <link rel="stylesheet" href="../dist/css/column_filter.css">
         <style>
-            body {
-                background-color: #cccccccb;
-            }
-            table tr td img, table tr td svg {
+            table tr td img,
+            table tr td svg {
                 height: 40px;
                 width: 40px;
                 margin-right: 10px;
                 vertical-align: middle !important;
             }
-            table td, table th {
+            table td,
+            table th {
                 padding: 0px;
                 vertical-align: middle !important;
             }
         </style>
+        <!-- Demo Styles -->
+        <link rel="stylesheet" href="../demo.css">
     </head>
     <body>
-        <div id="tbl-machines"></div>
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
 
-        <script type="module">
-        import {DataTable, addColumnFilter} from "../dist/module.js"
-        const machineTypeIcons = [
-            {
-                name: "Scaler",
-                code: `
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4096 4096">
-                        <g>
-                            <circle style="fill: #161719" cx="785.77769" cy="2722.76844" r="268.60136"></circle>
-                            <circle style="fill: #161719" cx="2469.10822" cy="2722.76844" r="268.60136"></circle>
-                            <path style="fill: #161719" d="M2251.275,2358.344l84.69517,77.49579c-136.81895,69.75272-208.755,238.20138-157.11006,395.45748H1180.32648V2722.77233h-91.47229c2.49973-37.17335,3.04367-125.18807-53.35749-200.184-97.91689-130.204-327.57163-168.06721-463.25416-45.80921-92.39766,83.25849-122.98849,224.3304-77.9341,354.51813H308.30695L3.27986,2722.76844,0,2274.86635l494.30844-99.09364H974.518v-95.27894h274.40873v464.96671l232.47924,110.5216h148.64466V2522.58835a308.51381,308.51381,0,0,1-224.86611-99.08556V1821.3276h-27.71758v-64.78546h823.0398l50.7683,22.86406Z"></path>
-                            <path style="fill: #161719" d="M2949.91694,2470.68864v145.80768a835.912,835.912,0,0,1-190.5959,0,354.506,354.506,0,0,0-43.88252-81.4244c-21.93965-30.38957-43.31409-56.57044-72.54389-78.072Z"></path>
-                            <polygon style="fill: #161719" points="2635.581 2435.222 2835.198 2442.886 2835.198 2404.221 2578.685 2137.947 2463.69 2086.773 2336.401 2094.239 2445.564 2158.615 2635.581 2435.222"></polygon>
-                            <path style="fill: #161719" d="M2336.40142,2072.45269l129.307-7.5333,12.72614-47.93921a2850.738,2850.738,0,0,0,251.41867-256.34977c103.6051-119.85624,195.77594-242.92773,267.05627-355.91076-4.77019-15.12349-8.48382-41.31327-13.254-56.43675-132.769,119.47-276.38433,270.86838-411.2717,427.11074C2486.18549,1875.23859,2407.76179,1974.72761,2336.40142,2072.45269Z"></path>
-                            <path style="fill: #161719" d="M2996.90949,1344.37959l13.87872,56.7062a2780.44544,2780.44544,0,0,0,355.75215,39.26512c154.17448,6.80751,289.00705-.92231,402.94342-14.83632q62.79871,39.95907,125.59749,79.91808l35.25475-49.58987-138.61139-97.27266q-197.28083-4.55364-394.29408-8.08Q3197.01272,1346.90292,2996.90949,1344.37959Z"></path>
-                            <polygon style="fill: #161719" points="3814.13 1363.759 3935.324 1446.735 3977.721 1408.422 3994.045 1297.423 3918.644 1240.77 3844.751 1307.545 3814.13 1363.759"></polygon>
-                            <polygon style="fill: #161719" points="3927.275 1232.971 3997.934 1287.42 4043.917 1186.716 3997.88 1156.774 3927.275 1232.971"></polygon>
-                            <polygon style="fill: #161719" points="4008.328 1147.333 4012.091 1150.032 4045.861 1174.256 4096 1068.107 4083.109 1053.842 4008.328 1147.333"></polygon>
-                            <polygon style="fill: #161719" points="2615.274 2152.28 2645.826 2182.046 2755.502 1803.042 2729.445 1774.208 2695.638 1814.324 2615.274 2152.28"></polygon>
-                            <polygon style="fill: #161719" points="2737.71 1766.74 2763.766 1795.575 3100.321 1551.11 3075.851 1524.031 2762.502 1744.336 2737.71 1766.74"></polygon>
-                            <polygon style="fill: #161719" points="3081.911 1518.554 3106.382 1545.634 3113.429 1514.669 3096.191 1423.307 3005.284 1405.058 3081.911 1518.554"></polygon>
-                            <polygon style="fill: #161719" points="3120.635 1512.862 3115.064 1545.634 3221.779 1508.31 3779.577 1556.298 3746.014 1516.68 3239.037 1465.385 3224.833 1438.593 3171.163 1437.9 3193.652 1474.969 3120.635 1512.862"></polygon>
-                            <polygon style="fill: #161719" points="3695.198 1440.88 3783.984 1552.315 3852.852 1490.082 3822.45 1469.729 3778.142 1508.589 3724.937 1437.9 3695.198 1440.88"></polygon>
-                        </g>
-                    </svg>
-                `
-            },
-            {
-                name: "LHD",
-                code: `
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4096 4096">
-                          <g>
-                              <path style="fill: #161719" d="M7.6719,1680.55315H1365.62666v-222.4898l464.15914,5.754c17.01138,10.6247,41.00986,26.12614,69.04893,46.03243,33.55695,23.82347,50.335,35.7352,62.33556,48.90928,15.001,16.468,39.66629,51.38742,43.15491,117.958l474.22919,4.795L2602.267,1888.65769c-17.64413-1.64918-311.64551-23.97313-490.53244,211.94071-127.22992,167.78946-144.68018,398.22547-44.59451,589.31l-775.35679,1.43848c97.71715-186.724,89.51123-407.95559-23.97514-573.48646-132.97129-193.95184-349.58589-222.61781-381.68529-226.32565-29.43469-3.4-269.50029-26.94769-448.81533,157.27717C233.53713,2258.16209,297.70809,2541.14431,302.087,2559.00384Q151.04307,2507.93671,0,2456.8696,3.8355,2068.71138,7.6719,1680.55315Z"></path>
-                              <circle style="fill: #161719" cx="2539.13189" cy="2427.46008" r="485.41761"></circle>
-                              <path style="fill: #161719" d="M4096,1869.12922c-131.35973,110.16474-277.68138,223.66973-439.59751,336.62659-117.89064,82.23985-232.93911,156.44226-343.76194,223.39176a404.0608,404.0608,0,0,1-232.00285,47.41578q2.16358-24.26489,2.18448-49.10259c0-223.05447-134.32007-414.73426-326.48065-498.56825a403.63466,403.63466,0,0,1,45.65341-81.33756c117.88219-92.5295,253.36605-155.19445,371.24825-247.7322l327.61912,169.279Z"></path>
-                              <circle style="fill: #161719" cx="818.35284" cy="2423.78388" r="485.41761"></circle>
-                              <polygon style="fill: #161719" points="1396.049 1730.479 973.395 1730.479 973.395 1458.063 1365.627 1458.063 1396.049 1730.479"></polygon>
-                          </g>
-                      </svg>
-                `
-            }
-        ]
+        <h2>Column filter button</h2>
 
-        const getMachineTypeIcon = (name = "") => {
-            const machineType = machineTypeIcons.find(x => x.name === name)
-            if (machineType) {
-                return machineType.code
-            }
-            return ""
+        <table id="demo-table"></table>
 
-        }
+        <script type="module">
+            import {DataTable, addColumnFilter} from "../dist/module.js"
+            const machineTypeIcons = [
+                {
+                    name: "Scaler",
+                    code: `
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4096 4096">
+                            <g>
+                                <circle style="fill: #161719" cx="785.77769" cy="2722.76844" r="268.60136"></circle>
+                                <circle style="fill: #161719" cx="2469.10822" cy="2722.76844" r="268.60136"></circle>
+                                <path style="fill: #161719" d="M2251.275,2358.344l84.69517,77.49579c-136.81895,69.75272-208.755,238.20138-157.11006,395.45748H1180.32648V2722.77233h-91.47229c2.49973-37.17335,3.04367-125.18807-53.35749-200.184-97.91689-130.204-327.57163-168.06721-463.25416-45.80921-92.39766,83.25849-122.98849,224.3304-77.9341,354.51813H308.30695L3.27986,2722.76844,0,2274.86635l494.30844-99.09364H974.518v-95.27894h274.40873v464.96671l232.47924,110.5216h148.64466V2522.58835a308.51381,308.51381,0,0,1-224.86611-99.08556V1821.3276h-27.71758v-64.78546h823.0398l50.7683,22.86406Z"></path>
+                                <path style="fill: #161719" d="M2949.91694,2470.68864v145.80768a835.912,835.912,0,0,1-190.5959,0,354.506,354.506,0,0,0-43.88252-81.4244c-21.93965-30.38957-43.31409-56.57044-72.54389-78.072Z"></path>
+                                <polygon style="fill: #161719" points="2635.581 2435.222 2835.198 2442.886 2835.198 2404.221 2578.685 2137.947 2463.69 2086.773 2336.401 2094.239 2445.564 2158.615 2635.581 2435.222"></polygon>
+                                <path style="fill: #161719" d="M2336.40142,2072.45269l129.307-7.5333,12.72614-47.93921a2850.738,2850.738,0,0,0,251.41867-256.34977c103.6051-119.85624,195.77594-242.92773,267.05627-355.91076-4.77019-15.12349-8.48382-41.31327-13.254-56.43675-132.769,119.47-276.38433,270.86838-411.2717,427.11074C2486.18549,1875.23859,2407.76179,1974.72761,2336.40142,2072.45269Z"></path>
+                                <path style="fill: #161719" d="M2996.90949,1344.37959l13.87872,56.7062a2780.44544,2780.44544,0,0,0,355.75215,39.26512c154.17448,6.80751,289.00705-.92231,402.94342-14.83632q62.79871,39.95907,125.59749,79.91808l35.25475-49.58987-138.61139-97.27266q-197.28083-4.55364-394.29408-8.08Q3197.01272,1346.90292,2996.90949,1344.37959Z"></path>
+                                <polygon style="fill: #161719" points="3814.13 1363.759 3935.324 1446.735 3977.721 1408.422 3994.045 1297.423 3918.644 1240.77 3844.751 1307.545 3814.13 1363.759"></polygon>
+                                <polygon style="fill: #161719" points="3927.275 1232.971 3997.934 1287.42 4043.917 1186.716 3997.88 1156.774 3927.275 1232.971"></polygon>
+                                <polygon style="fill: #161719" points="4008.328 1147.333 4012.091 1150.032 4045.861 1174.256 4096 1068.107 4083.109 1053.842 4008.328 1147.333"></polygon>
+                                <polygon style="fill: #161719" points="2615.274 2152.28 2645.826 2182.046 2755.502 1803.042 2729.445 1774.208 2695.638 1814.324 2615.274 2152.28"></polygon>
+                                <polygon style="fill: #161719" points="2737.71 1766.74 2763.766 1795.575 3100.321 1551.11 3075.851 1524.031 2762.502 1744.336 2737.71 1766.74"></polygon>
+                                <polygon style="fill: #161719" points="3081.911 1518.554 3106.382 1545.634 3113.429 1514.669 3096.191 1423.307 3005.284 1405.058 3081.911 1518.554"></polygon>
+                                <polygon style="fill: #161719" points="3120.635 1512.862 3115.064 1545.634 3221.779 1508.31 3779.577 1556.298 3746.014 1516.68 3239.037 1465.385 3224.833 1438.593 3171.163 1437.9 3193.652 1474.969 3120.635 1512.862"></polygon>
+                                <polygon style="fill: #161719" points="3695.198 1440.88 3783.984 1552.315 3852.852 1490.082 3822.45 1469.729 3778.142 1508.589 3724.937 1437.9 3695.198 1440.88"></polygon>
+                            </g>
+                        </svg>
+                    `
+                },
+                {
+                    name: "LHD",
+                    code: `
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4096 4096">
+                              <g>
+                                  <path style="fill: #161719" d="M7.6719,1680.55315H1365.62666v-222.4898l464.15914,5.754c17.01138,10.6247,41.00986,26.12614,69.04893,46.03243,33.55695,23.82347,50.335,35.7352,62.33556,48.90928,15.001,16.468,39.66629,51.38742,43.15491,117.958l474.22919,4.795L2602.267,1888.65769c-17.64413-1.64918-311.64551-23.97313-490.53244,211.94071-127.22992,167.78946-144.68018,398.22547-44.59451,589.31l-775.35679,1.43848c97.71715-186.724,89.51123-407.95559-23.97514-573.48646-132.97129-193.95184-349.58589-222.61781-381.68529-226.32565-29.43469-3.4-269.50029-26.94769-448.81533,157.27717C233.53713,2258.16209,297.70809,2541.14431,302.087,2559.00384Q151.04307,2507.93671,0,2456.8696,3.8355,2068.71138,7.6719,1680.55315Z"></path>
+                                  <circle style="fill: #161719" cx="2539.13189" cy="2427.46008" r="485.41761"></circle>
+                                  <path style="fill: #161719" d="M4096,1869.12922c-131.35973,110.16474-277.68138,223.66973-439.59751,336.62659-117.89064,82.23985-232.93911,156.44226-343.76194,223.39176a404.0608,404.0608,0,0,1-232.00285,47.41578q2.16358-24.26489,2.18448-49.10259c0-223.05447-134.32007-414.73426-326.48065-498.56825a403.63466,403.63466,0,0,1,45.65341-81.33756c117.88219-92.5295,253.36605-155.19445,371.24825-247.7322l327.61912,169.279Z"></path>
+                                  <circle style="fill: #161719" cx="818.35284" cy="2423.78388" r="485.41761"></circle>
+                                  <polygon style="fill: #161719" points="1396.049 1730.479 973.395 1730.479 973.395 1458.063 1365.627 1458.063 1396.049 1730.479"></polygon>
+                              </g>
+                          </svg>
+                    `
+                }
+            ]
 
-        const generateTable = (headDefinition = ["Name", "Type", "OEM", "Last Seen"]) => {
-            const tableData = {
-                headings: [],
-                data: []
+            const getMachineTypeIcon = name => {
+                const machineType = machineTypeIcons.find(x => x.name === name)
+                if (machineType) {
+                    return machineType.code
+                }
+                return ""
             }
 
-            headDefinition.forEach( // Has to have length 2
-                head => tableData.headings.push(head || "")
-            )
+            const generateTable = columns => {
+                const tableData = {
+                    headings: [],
+                    data: []
+                }
 
-            for (let i = 0; i < 100; i++) {
-                const machineType = machineTypeIcons[Math.floor(Math.random() * machineTypeIcons.length)].name
-                tableData.data.push([
-                    `Machine ${i}`,
-                    `${getMachineTypeIcon(machineType)} <span>${machineType}</span>`,
-                    `OEM ${i}`,
-                    `${new Date(+new Date() - Math.floor(Math.random() * 2592000000)).toISOString().slice(0, 19).replace("T", " ")}`
-                ])
-    }
-            return tableData
-}
+                columns.forEach(colum => tableData.headings.push(colum || ""))
 
+                for (let i = 0; i < 100; i++) {
+                    const machineType = machineTypeIcons[Math.floor(Math.random() * machineTypeIcons.length)].name
+                    tableData.data.push([
+                        `Machine ${i}`,
+                        `${getMachineTypeIcon(machineType)} <span>${machineType}</span>`,
+                        `OEM ${i}`,
+                        `${new Date(+new Date() - Math.floor(Math.random() * 2592000000)).toISOString().slice(0, 19).replace("T", " ")}`
+                    ])
+                }
+                return tableData
+            }
 
-        const dataTable = new DataTable("#tbl-machines", {
-            data: generateTable(),
-            searchable: true,
-            sortable: true,
-            perPage: 15,
-            perPageSelect: [5, 10, 15, 20, 25, 50, 100, 250, 500, 1000],
-            columns: [
+            const dataTable = new DataTable("#demo-table", {
+                data: generateTable(["Name", "Type", "OEM", "Last Seen"]),
+                searchable: true,
+                sortable: true,
+                perPage: 10,
+                perPageSelect: [5, 10, 25, 50, 100, ["All", -1]],
+                columns: [
+                    {
+                        select: [0, 3],
+                        hidden: true
+                    }
+                ]
+            })
+            window.dataTable = dataTable
+            window.columnFilter = addColumnFilter(
+                dataTable,
                 {
-                    select: [0, 3],
-                    hidden: true
+                    hiddenColumns: [3]
                 }
-            ]
-        })
-        window.dataTable = dataTable
-        window.columnFilter = addColumnFilter(
-            dataTable,
-            {
-                hiddenColumns: [3]
-            }
-        )
-    </script>
+            )
+        </script>
     </body>
 </html>
diff --git a/docs/demos/24-footer/index.html b/docs/demos/24-footer/index.html
index 2f31734c..e3861fa9 100644
--- a/docs/demos/24-footer/index.html
+++ b/docs/demos/24-footer/index.html
@@ -3,18 +3,25 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Custom Footer</title>
-
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Custom footer - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
-
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
     </head>
     <body>
-        <h1>Custom Footer</h1>
-        <table class="table" id="custom-footer-table">
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Custom footer</h2>
+
+        <table id="demo-table">
             <thead>
                 <tr>
                     <th>Athlete</th>
@@ -114,7 +121,7 @@ <h1>Custom Footer</h1>
 
         <script type="module">
             import {DataTable} from "../dist/module.js"
-            window.dt = new DataTable("table", {
+            window.dt = new DataTable("#demo-table", {
                 perPage: 5,
                 perPageSelect: [5, 10, 15, ["All", -1]]
                 // A caption can also be specified this way:
diff --git a/docs/demos/3-cdn/index.html b/docs/demos/3-cdn/index.html
index a42b427d..aaf0e2ac 100644
--- a/docs/demos/3-cdn/index.html
+++ b/docs/demos/3-cdn/index.html
@@ -3,16 +3,29 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>CDN</title>
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>CDN - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
     </head>
     <body>
-        <h1>CDN</h1>
-        <table class="table">
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>CDN</h2>
+        <p>
+            Serve the library files via a CDN. This example uses <a href="https://jsdelivr.com" target="_blank">jsdelivr.com</a>
+        </p>
+        <br>
+
+        <table id="demo-table">
             <thead>
                 <tr>
                     <th>Name</th>
@@ -725,11 +738,10 @@ <h1>CDN</h1>
                 </tr>
             </tbody>
         </table>
-        <!-- CDN -->
+
         <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest"></script>
-        <!-- Custom Code -->
         <script>
-            new window.simpleDatatables.DataTable("table")
+            new window.simpleDatatables.DataTable("#demo-table")
         </script>
     </body>
 </html>
diff --git a/docs/demos/4-render-column-cell/index.html b/docs/demos/4-render-column-cell/index.html
index fa63bbe5..d915fd91 100644
--- a/docs/demos/4-render-column-cell/index.html
+++ b/docs/demos/4-render-column-cell/index.html
@@ -3,90 +3,91 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Render Column Cells</title>
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Custom cell renderer - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
         <!-- Custom Styles -->
         <style>
-            tr.yes .icon {
-                color: red;
-            }
-
-            tr.no .icon {
-                color: limegreen;
+            .buy-now {
+                background-color: #056b05;
             }
 
-            tr.yes b {
+            .caffeinated {
                 color: limegreen;
             }
-
-            tr.no b {
+            .uncaffeinated {
                 color: red;
             }
 
             .currency {}
-
             .currency:before {
-                content: "$"
+                content: "$ "
             }
-
             .currency--profit {
                 color: limegreen;
             }
-
             .currency--loss {
                 color: red;
             }
-
             .currency--zero {
-                color: gray;
+                color: #808080;
             }
         </style>
     </head>
     <body>
-        <h1>Render Column Cells</h1>
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Custom cell renderer</h2>
+
         <table id="drinks"></table>
-        <!-- CDN -->
+
         <script src="../dist/umd.js"></script>
-        <!-- Custom Code -->
         <script>
             const data = {
                 headings: ["ID", "Drink", "Price", "Caffeinated", "Profit"],
                 data: [
-                    [574, "latte", 4.00, false, 0.00],
-                    [984, "herbal tea", 3.00, false, 0.56],
-                    [312, "green tea", 3.00, true, 1.72],
-                    [312, "latte", 3.00, true, -1.21],
-                    [312, "green tea", 3.00, false, 0.00],
-                    [312, "green tea", 3.00, false, 0.00],
-                    [312, "green tea", 3.00, true, 1.72],
-                    [312, "latte", 3.00, true, 1.72],
-                    [312, "green tea", 3.00, true, -1.21],
-                    [312, "green tea", 3.00, false, 0.00],
-                    [312, "green tea", 3.00, true, 1.72],
-                    [312, "green tea", 3.00, true, 1.72],
-                    [312, "latte", 3.00, false, 0.00],
-                    [312, "latte", 3.00, true, 1.72],
-                    [312, "green tea", 3.00, false, 0.00],
-                    [312, "green tea", 3.00, true, 1.72],
-                    [312, "latte", 3.00, false, 0.00],
-                    [312, "latte", 3.00, true, -1.21],
-                    [312, "latte", 3.00, true, 1.72],
-                    [312, "latte", 3.00, false, 0.00],
-                    [312, "latte", 3.00, false, 0.00],
-                    [312, "latte", 3.00, true, 1.72],
-                    [312, "green tea", 3.00, true, -1.21],
-                    [312, "green tea", 3.00, true, -1.21],
-                    [312, "green tea", 3.00, true, -1.21]
+                    [574, "Latte", 4.00, false, 0.00],
+                    [984, "Herbal tea", 3.00, false, 0.56],
+                    [312, "Green tea", 3.00, true, 1.72],
+                    [312, "Latte", 3.00, true, -1.21],
+                    [312, "Green tea", 3.00, false, 0.00],
+                    [312, "Green tea", 3.00, false, 0.00],
+                    [312, "Green tea", 3.00, true, 1.72],
+                    [312, "Latte", 3.00, true, 1.72],
+                    [312, "Green tea", 3.00, true, -1.21],
+                    [312, "Green tea", 3.00, false, 0.00],
+                    [312, "Green tea", 3.00, true, 1.72],
+                    [312, "Green tea", 3.00, true, 1.72],
+                    [312, "Latte", 3.00, false, 0.00],
+                    [312, "Latte", 3.00, true, 1.72],
+                    [312, "Green tea", 3.00, false, 0.00],
+                    [312, "Green tea", 3.00, true, 1.72],
+                    [312, "Latte", 3.00, false, 0.00],
+                    [312, "Latte", 3.00, true, -1.21],
+                    [312, "Latte", 3.00, true, 1.72],
+                    [312, "Latte", 3.00, false, 0.00],
+                    [312, "Latte", 3.00, false, 0.00],
+                    [312, "Latte", 3.00, true, 1.72],
+                    [312, "Green tea", 3.00, true, -1.21],
+                    [312, "Green tea", 3.00, true, -1.21],
+                    [312, "Green tea", 3.00, true, -1.21]
                 ]
             }
             // Add Icon
             const renderIcon = function(data, _cell, _dataIndex, _cellIndex) {
-                if (data == "latte") {
-                    return `🔥 ${data}`
+                if (data === "Latte") {
+                    return `☕ ${data}`
+                } else if (data === "Green tea") {
+                    return `🍵 ${data}`
                 }
                 return `🌿 ${data}`
             }
@@ -95,12 +96,13 @@ <h1>Render Column Cells</h1>
                 cell.childNodes.push({
                     nodeName: "BUTTON",
                     attributes: {
-                        "data-row": dataIndex
+                        "data-row": dataIndex,
+                        class: "buy-now"
                     },
                     childNodes: [
                         {
                             nodeName: "#text",
-                            data: "Buy Now"
+                            data: "Buy Now!"
                         }
                     ]
                 })
@@ -111,11 +113,14 @@ <h1>Render Column Cells</h1>
                 if ([true, false].includes(data)) {
                     cell.childNodes = [
                         {
-                            nodeName: "B",
+                            nodeName: "SPAN",
+                            attributes: {
+                                class: data === true ? "caffeinated" : "uncaffeinated"
+                            },
                             childNodes: [
                                 {
                                     nodeName: "#text",
-                                    data: data === true ? " Yes " : " No "
+                                    data: data === true ? "Yes" : "No"
                                 }
                             ]
                         }
@@ -139,13 +144,12 @@ <h1>Render Column Cells</h1>
                     currencyNode.attributes.class += "currency--loss"
                 } else if (data > 0) {
                     currencyNode.attributes.class += "currency--profit"
-                } else if (data == 0) {
+                } else if (data === 0) {
                     currencyNode.attributes.class += "currency--zero"
                 }
             }
             new window.simpleDatatables.DataTable("#drinks", {
                 data,
-                perPage: 25,
                 rowRender: (row, tr, _index) => {
                     if ([true, false].includes(row[3].data)) {
                         if (!tr.attributes?.class) {
@@ -160,7 +164,7 @@ <h1>Render Column Cells</h1>
                     }
                 },
                 columns: [
-        {
+                    {
                         select: 0,
                         hidden: true,
                         type: "number"
@@ -181,7 +185,7 @@ <h1>Render Column Cells</h1>
                         render: renderHighLow,
                         type: "number"
                     }
-    ]
+                ]
             })
         </script>
     </body>
diff --git a/docs/demos/5-column-manipulation/index.html b/docs/demos/5-column-manipulation/index.html
index f2c54e15..92b99ae7 100644
--- a/docs/demos/5-column-manipulation/index.html
+++ b/docs/demos/5-column-manipulation/index.html
@@ -3,29 +3,38 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Column Manipulation</title>
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Column manipulation - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
     </head>
     <body>
-        <h1>Column Manipulation</h1>
-        <table class="table"></table>
-        <!-- Custom Code -->
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Column manipulation</h2>
+
+        <table id="demo-table"></table>
+
         <script type="module">
             import {
                 DataTable
             } from "../dist/module.js"
             const columnData = [
                 {
-                // Select the first column ...
+                    // Select the first column ...
                     select: 0,
                     // ...add a random number (age) to the cells
                     render: data => `${data} (${(Math.floor(Math.random() * (70-18))+18)})`
                 }, {
-                // select the fourth column ...
+                    // select the fourth column ...
                     select: 3,
                     // ... let the instance know we have datetimes in it ...
                     type: "date",
@@ -48,7 +57,7 @@ <h1>Column Manipulation</h1>
                 response => response.json()
             ).then(
                 data => {
-                    const datatable = new DataTable("table", {
+                    const datatable = new DataTable("#demo-table", {
                         data: {
                             headings: Object.keys(data[0]),
                             data: data.map(item => Object.values(item))
diff --git a/docs/demos/6-datetime-sorting/index.html b/docs/demos/6-datetime-sorting/index.html
index ef56fb44..bbb8fc59 100644
--- a/docs/demos/6-datetime-sorting/index.html
+++ b/docs/demos/6-datetime-sorting/index.html
@@ -3,16 +3,25 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Datetime Sorting</title>
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Datetime sorting - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
     </head>
     <body>
-        <h1>Datetime Sorting</h1>
-        <table>
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Datetime sorting</h2>
+
+        <table id="demo-table">
             <thead>
                 <tr>
                     <th data-type="date" data-format="ISO_8601">ISO 8601</th>
@@ -929,14 +938,13 @@ <h1>Datetime Sorting</h1>
                 </tr>
             </tbody>
         </table>
-        <!-- CDN -->
+
         <script src="../dist/umd.js"></script>
-        <!-- Custom Code -->
         <script>
-            new window.simpleDatatables.DataTable("table", {
+            new window.simpleDatatables.DataTable("#demo-table", {
                 // The other columns are defined directly in the HTML
                 columns: [
-        {
+                    {
                         select: 2,
                         type: "date",
                         format: "RFC_2822"
@@ -953,7 +961,7 @@ <h1>Datetime Sorting</h1>
                         type: "date",
                         format: "MM-DD-YY"
                     }
-    ]
+                ]
             })
         </script>
     </body>
diff --git a/docs/demos/7-init-destroy-import-export/index.html b/docs/demos/7-init-destroy-import-export/index.html
index 858f6048..b900b6ee 100644
--- a/docs/demos/7-init-destroy-import-export/index.html
+++ b/docs/demos/7-init-destroy-import-export/index.html
@@ -3,163 +3,168 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Init/ Destroy - Import/ Export</title>
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Init/destroy and import/export - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
         <style>
-            .btn.success,
-            .bttn.success {
-                background-color: #27ae60;
-                box-shadow: inset 0 -3px #1e8449;
+            .controls {
+                padding: 0 10px;
             }
 
-            .btn.danger,
-            .bttn.danger {
-                background-color: #c0392b;
-                box-shadow: inset 0 -3px #962d22;
+            button {
+                border-radius: 6px;
+                color: white;
+                border: none;
             }
 
-            .btn.primary,
-            .bttn.primary {
-                background-color: #3498db;
-                box-shadow: inset 0 -3px #217dbb;
+            .success {
+                background-color: #1f8f4e;
+            }
+            .success:hover,
+            .success:focus {
+                background-color: #156537;
+            }
+
+            .danger {
+                background-color: #982d22;
+            }
+            .danger:hover,
+            .danger:focus {
+                background-color: #5e1a12;
+            }
+
+            .primary {
+                background-color: #2d84be;
+            }
+            .primary:hover,
+            .primary:focus {
+                background-color: #206491;
+            }
+
+            #hide.hidden {
+                display: none;
+            }
+            #hide label {
+                padding-left: 0.25em;
             }
         </style>
     </head>
     <body>
-        <h1>Init/ Destroy - Import/ Export</h1>
-        <div class="container">
-            <div class="row">
-                <div class="col-12">
-                    <div class="card">
-                        <div class="card-block">
-                            <div class="form-group">
-                                <button type="button" class="bttn success main" id="init">Init</button>
-                                <button type="button" class="bttn danger main" id="destroy">Destroy</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row">
-                <div class="col-12">
-                    <div class="card">
-                        <div class="card-block">
-                            <table>
-                                <thead>
-                                    <tr>
-                                        <th>Select</th>
-                                        <th>Customer</th>
-                                        <th>Version</th>
-                                        <th data-type="date" data-format="DD.MM.YYYY">Planned upgrade</th>
-                                        <th>DB-Info</th>
-                                        <th>Website info</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td></td>
-                                        <td>
-                                            Test one <br>CCode: 33123
-                                        </td>
-                                        <td>7.1.5</td>
-                                        <td>26.11.2018</td>
-                                        <td>
-                                            Server: s1 <br>DB: db1
-                                        </td>
-                                        <td>
-                                            Websitename: Red <br>Node: 10
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td></td>
-                                        <td>
-                                            Test two <br>CCode: 12353
-                                        </td>
-                                        <td>7.1.5.2</td>
-                                        <td>26.11.2019</td>
-                                        <td>
-                                            Server: s1 <br>DB: db2
-                                        </td>
-                                        <td>
-                                            Websitename: Green <br>Node: 6
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td></td>
-                                        <td>
-                                            Test three <br>CCode: 33522
-                                        </td>
-                                        <td>7.1.6</td>
-                                        <td>01.01.2020</td>
-                                        <td>
-                                            Server: s2 <br>DB: db1
-                                        </td>
-                                        <td>
-                                            Websitename: Orange <br>Node: 5
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td></td>
-                                        <td>
-                                            Test four <br>CCode: 25512
-                                        </td>
-                                        <td>7.1.7</td>
-                                        <td>26.03.2021</td>
-                                        <td>
-                                            Server: s1 <br>DB: db3
-                                        </td>
-                                        <td>
-                                            Websitename: Blue <br>Node: 10
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Init/destroy and import/export</h2>
+        <div class="controls">
+            <button id="init" type="button" class="success main">Init</button>
+            <button id="destroy" type="button" class="danger main">Destroy</button>
+        </div>
+
+        <table>
+            <thead>
+                <tr>
+                    <th>Select</th>
+                    <th>Customer</th>
+                    <th>Version</th>
+                    <th data-type="date" data-format="DD.MM.YYYY">Planned upgrade</th>
+                    <th>DB-Info</th>
+                    <th>Website info</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td></td>
+                    <td>
+                        Test one <br>CCode: 33123
+                    </td>
+                    <td>7.1.5</td>
+                    <td>26.11.2018</td>
+                    <td>
+                        Server: s1 <br>DB: db1
+                    </td>
+                    <td>
+                        Websitename: Red <br>Node: 10
+                    </td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td>
+                        Test two <br>CCode: 12353
+                    </td>
+                    <td>7.1.5.2</td>
+                    <td>26.11.2019</td>
+                    <td>
+                        Server: s1 <br>DB: db2
+                    </td>
+                    <td>
+                        Websitename: Green <br>Node: 6
+                    </td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td>
+                        Test three <br>CCode: 33522
+                    </td>
+                    <td>7.1.6</td>
+                    <td>01.01.2020</td>
+                    <td>
+                        Server: s2 <br>DB: db1
+                    </td>
+                    <td>
+                        Websitename: Orange <br>Node: 5
+                    </td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td>
+                        Test four <br>CCode: 25512
+                    </td>
+                    <td>7.1.7</td>
+                    <td>26.03.2021</td>
+                    <td>
+                        Server: s1 <br>DB: db3
+                    </td>
+                    <td>
+                        Websitename: Blue <br>Node: 10
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+
+        <div id="hide">
+            <strong>Column Visibility</strong>
+            <div class="form-group" id="columns"></div>
+
+            <br>
+
+            <strong>Import / Export Data</strong>
+            <div class="card-block">
+                <div class="form-group">
+                    <textarea name="" id="" cols="30" rows="2" placeholder="Paste your CSV or JSON string here..."></textarea>
                 </div>
-            </div>
-            <div id="hide">
-                <div class="row">
-                    <div class="col-12">
-                        <div class="card">
-                            <div class="card-header"> Column Visibility </div>
-                            <div class="card-block">
-                                <div class="form-group" id="columns"></div>
-                            </div>
-                        </div>
-                    </div>
+                <div class="form-group">
+                    <button type="button" class="primary import" data-type="csv">Import CSV</button>
+                    <button type="button" class="primary import" data-type="json">Import JSON</button>
+                    <button type="button" class="success export" data-type="csv">Export CSV</button>
+                    <button type="button" class="success export" data-type="sql">Export SQL</button>
+                    <button type="button" class="success export" data-type="json">Export JSON</button>
                 </div>
-                <div class="row">
-                    <div class="col-12">
-                        <div class="card">
-                            <div class="card-header"> Import / Export Data </div>
-                            <div class="card-block">
-                                <div class="form-group">
-                                    <textarea name="" id="" cols="30" rows="2" placeholder="Paste your csv or json string here..."></textarea>
-                                </div>
-                                <div class="form-group">
-                                    <button type="button" class="bttn primary import" data-type="csv">Import CSV</button>
-                                    <button type="button" class="bttn primary import" data-type="json">Import JSON</button>
-                                    <button type="button" class="bttn success export" data-type="csv">Export CSV</button>
-                                    <button type="button" class="bttn success export" data-type="sql">Export SQL</button>
-                                    <button type="button" class="bttn success export" data-type="json">Export JSON</button>
-                                </div>
-                                <div class="form-group">
-                                    <small>
-                                        NOTE: The csv column delimiters and line delimiters are set to <code>","</code>
-                                        and <code>"\n"</code> respectively.
-                                    </small>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                <div class="form-group">
+                    <small>
+                        Note: The csv column delimiters and line delimiters are set to <code>","</code>
+                        and <code>"\n"</code> respectively.
+                    </small>
                 </div>
             </div>
         </div>
+
         <!-- Custom Code -->
         <script type="module">
             import {DataTable, convertJSON, convertCSV, exportCSV, exportSQL, exportJSON} from "../dist/module.js"
@@ -179,11 +184,11 @@ <h1>Init/ Destroy - Import/ Export</h1>
                 }
                 return dom
             }
-            const checkboxes = document.getElementById("columns"),
-                table = document.getElementsByTagName("table")[0],
-                textarea = document.getElementsByTagName("textarea")[0]
-            const hidden = [],
-    visible = []
+            const checkboxes = document.getElementById("columns")
+            const table = document.getElementsByTagName("table")[0]
+            const textarea = document.getElementsByTagName("textarea")[0]
+            const hidden = []
+            const visible = []
             let inputs = []
             const datatable = new DataTable(table, {
                 perPage: 5,
@@ -297,10 +302,10 @@ <h1>Init/ Destroy - Import/ Export</h1>
                         textarea.parentNode.classList.add("error")
                         return false
                     }
-                    if (type==="csv") {
+                    if (type === "csv") {
                         const convertedData = convertCSV(data)
                         datatable.insert(convertedData)
-                    } else if (type==="json") {
+                    } else if (type === "json") {
                         const convertedData = convertJSON(data)
                         datatable.insert(convertedData)
                     }
diff --git a/docs/demos/8-add-1000-rows/index.html b/docs/demos/8-add-1000-rows/index.html
index 78475bd1..1a06a185 100644
--- a/docs/demos/8-add-1000-rows/index.html
+++ b/docs/demos/8-add-1000-rows/index.html
@@ -3,46 +3,40 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Add 1000 Rows</title>
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Add 1000 rows - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
         <style>
-            .btn.success,
-            .bttn.success {
-                background-color: #27ae60;
-                box-shadow: inset 0 -3px #1e8449;
-            }
-
-            .btn.danger,
-            .bttn.danger {
-                background-color: #c0392b;
-                box-shadow: inset 0 -3px #962d22;
-            }
-
-            .btn.primary,
-            .bttn.primary {
-                background-color: #3498db;
-                box-shadow: inset 0 -3px #217dbb;
+            #add {
+                margin: 0 10px;
             }
         </style>
     </head>
     <body>
-        <h1>Add 1000 Rows</h1>
-        <table></table>
-        <button class="btn btn-primary" id="add">Add 1000 Rows</button>
-        <!-- CDN -->
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Add 1000 rows</h2>
+        <button id="add">Add 1000 Rows</button>
+
+        <table id="demo-table"></table>
+
         <script src="../dist/umd.js"></script>
-        <!-- Custom Code -->
         <script>
-            const datatable = new window.simpleDatatables.DataTable("table", {
-                perPageSelect: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 1000],
+            const datatable = new window.simpleDatatables.DataTable("#demo-table", {
+                perPageSelect: [10, 100, 1000, 10000, ["All", -1]],
                 perPage: 10,
                 columns: [
                     {
-                    // select the fourth column ...
+                        // select the fourth column ...
                         select: 3,
                         // ... let the instance know we have datetimes in it ...
                         type: "date",
@@ -51,7 +45,7 @@ <h1>Add 1000 Rows</h1>
                         // ... sort it ...
                         sort: "desc"
                     }
-    ],
+                ],
                 data: {
                     "headings": ["Name", "Ext.", "City", "Start Date", "Completion"],
                     "data": [
diff --git a/docs/demos/9-add-1000-rows-without-conversion/index.html b/docs/demos/9-add-1000-rows-without-conversion/index.html
index 689b9302..ea8dbdab 100644
--- a/docs/demos/9-add-1000-rows-without-conversion/index.html
+++ b/docs/demos/9-add-1000-rows-without-conversion/index.html
@@ -3,39 +3,33 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Add 1000 Rows</title>
+        <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
+        <title>Add 1000 rows without conversion - simple-datatables</title>
         <!-- DataTable Styles -->
         <link rel="stylesheet" href="../dist/css/style.css">
         <!-- Demo Styles -->
         <link rel="stylesheet" href="../demo.css">
         <style>
-            .btn.success,
-            .bttn.success {
-                background-color: #27ae60;
-                box-shadow: inset 0 -3px #1e8449;
-            }
-
-            .btn.danger,
-            .bttn.danger {
-                background-color: #c0392b;
-                box-shadow: inset 0 -3px #962d22;
-            }
-
-            .btn.primary,
-            .bttn.primary {
-                background-color: #3498db;
-                box-shadow: inset 0 -3px #217dbb;
+            #add {
+                margin: 0 10px;
             }
         </style>
     </head>
     <body>
-        <h1>Add 1000 Rows</h1>
-        <table></table>
+        <header>
+            <h1>
+                <a href="../../">simple-datatables</a>
+            </h1>
+            <a href="../../documentation">Documentation</a>
+            <a href="../">Demos</a>
+        </header>
+
+        <h2>Add 1000 rows without conversion (faster)</h2>
         <button class="btn btn-primary" id="add">Add 1000 Rows</button>
-        <!-- CDN -->
+
+        <table id="demo-table"></table>
+
         <script src="../dist/umd.js"></script>
-        <!-- Custom Code -->
         <script>
             const data = {
                 "headings": [
@@ -14054,8 +14048,8 @@ <h1>Add 1000 Rows</h1>
                     ]
                 ]
             }
-            const datatable = new window.simpleDatatables.DataTable("table", {
-                perPageSelect: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 1000],
+            const datatable = new window.simpleDatatables.DataTable("#demo-table", {
+                perPageSelect: [10, 100, 1000, 10000, ["All", -1]],
                 perPage: 10,
                 type: "string",
                 columns: [
@@ -14076,8 +14070,6 @@ <h1>Add 1000 Rows</h1>
                 ],
                 data
             })
-            //datatable.data = structuredClone(data)
-            //datatable.update(true)
             document.getElementById("add").addEventListener("click", _event => {
                 const newData = structuredClone(data.data)
                 datatable.data.data = datatable.data.data.concat(newData)
diff --git a/docs/demos/demo.css b/docs/demos/demo.css
index 8fc50352..ac272841 100644
--- a/docs/demos/demo.css
+++ b/docs/demos/demo.css
@@ -1,6 +1,13 @@
 * { margin: 0; padding: 0; box-sizing: border-box; font-family: Roboto, Arial, Helvetica, sans-serif; }
 html, body { overflow-x: hidden; overflow-y: auto; }
-body { margin: 5vw; }
+body { margin: 2vw 5vw; }
+header { display: flex; align-items: baseline; gap: 1rem; }
+header h1 a { color: #16378d; }
+nav { display: flex; flex-direction: column; }
+a { text-decoration: none; color: #0031e6; }
+a:hover, a:focus { color: #00198b; }
+h2 { margin: 1rem 0; }
+button:not(.datatable-sorter):not(.datatable-filter) { cursor: pointer; padding: 0.5em; }
 
-h1 { margin: 1rem 0 2rem; }
-tbody button { background: blue; color: white; border: none; border-radius: 4px; padding: .25rem .5rem; margin: 0 0 0 .25rem; }
+tbody button { background: #565656; color: white; border: none; border-radius: 4px; padding: .25rem .5rem; margin: 0 0 0 .25rem; }
+tbody button:hover, tbody button:focus { background: #3b3b3b; }
diff --git a/docs/demos/index.html b/docs/demos/index.html
index 6e04334b..20ea224f 100644
--- a/docs/demos/index.html
+++ b/docs/demos/index.html
@@ -3,26 +3,29 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Demos</title>
-        <style>
-        body { margin: 5vw; }
-        nav { display: flex; flex-direction: column; }
-        a { text-decoration: none; color: blue; }
-    </style>
+        <title>Demos - simple-datatables</title>
+        <link rel="icon" type="image/svg+xml" href="../favicon.svg">
+        <link rel="stylesheet" href="./demo.css">
     </head>
     <body>
-        <h1>Demos</h1>
+        <header>
+            <h1>
+                <a href="../">simple-datatables</a>
+            </h1>
+            <a href="../documentation">Documentation</a>
+            <a href="./">Demos</a>
+        </header>
+        <h2>Demos</h2>
         <nav>
             <a href="1-simple/">Simple</a>
             <a href="2-dynamic-import/">Dynamic import</a>
             <a href="3-cdn/">CDN</a>
-            <a href="4-render-column-cell/">Render column cell</a>
+            <a href="4-render-column-cell/">Custom cell renderer</a>
             <a href="5-column-manipulation/">Column manipulation</a>
             <a href="6-datetime-sorting/">Datetime sorting</a>
-            <a href="7-init-destroy-import-export/">Init-destroy-import-export</a>
+            <a href="7-init-destroy-import-export/">Init/destroy and import/export</a>
             <a href="8-add-1000-rows/">Add 1000 rows</a>
-            <a href="9-add-1000-rows-without-conversion/">Add-1000-rows-without-conversion (faster)</a>
+            <a href="9-add-1000-rows-without-conversion/">Add 1000 rows without conversion (faster)</a>
             <a href="10-filters/">Filters</a>
             <a href="11-export/">Export</a>
             <a href="12-updating/">Updating</a>
@@ -32,7 +35,7 @@ <h1>Demos</h1>
             <a href="16-scroll-y/">Scroll Y</a>
             <a href="17-checkbox-column/">Checkbox column</a>
             <a href="18-fetch-api/">Fetch API</a>
-            <a href="19-bootstrap-table/">Bootstrap table</a>
+            <a href="19-bootstrap-table/">Bootstrap framework</a>
             <a href="20-column-filters/">Column filters</a>
             <a href="21-svg/">SVGs</a>
             <a href="22-and-search/">AND Search</a>
diff --git a/docs/favicon.ico b/docs/favicon.ico
new file mode 100644
index 00000000..6593ba3b
Binary files /dev/null and b/docs/favicon.ico differ
diff --git a/docs/favicon.png b/docs/favicon.png
new file mode 100644
index 00000000..5df4e9c6
Binary files /dev/null and b/docs/favicon.png differ
diff --git a/docs/favicon.svg b/docs/favicon.svg
new file mode 100644
index 00000000..b91a1cd5
--- /dev/null
+++ b/docs/favicon.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <style>
+        #bg { fill: #263f60; }
+        #fg { fill: #fff; }
+        @media (prefers-color-scheme: dark) {
+            #bg { fill: #fff; }
+            #fg { fill: #263f60; }
+        }
+    </style>
+    <path id="bg" d="M24 0h52a24 24 45 0 1 24 24v52a24 24 135 0 1-24 24H24A24 24 45 0 1 0 76V24A24 24 135 0 1 24 0Z"/>
+    <path id="fg" d="M20.7 68.7q-2.9 0-5.6-.7-2.7-.8-4.2-2l1.8-3.5q1.6 1.2 3.8 1.8 2.3.7 4.6.7 5.6 0 5.6-3.2 0-1.1-.7-1.7-.8-.7-2-1l-3.2-.6q-2.9-.5-4.7-1-1.8-.6-3.1-2t-1.3-4q0-3.2 2.7-5.1 2.7-2 7.2-2 2.4 0 4.8.6t3.9 1.6L28.4 50q-2.9-2-6.8-2-2.8 0-4.2 1-1.5.9-1.5 2.4 0 1.1.8 1.8t2 1l3.4.7q2.9.5 4.6 1.1 1.8.6 3 1.9 1.3 1.4 1.3 3.8 0 3.2-2.7 5.2-2.8 1.8-7.6 1.8zM35 54.3h12V58H35zM76.6 35v33.5h-4.1v-3.8q-1.4 2-3.7 3-2.2 1-4.8 1-3.5 0-6.2-1.5-2.8-1.5-4.3-4.3-1.6-2.7-1.6-6.3 0-3.6 1.6-6.4 1.5-2.7 4.3-4.3 2.7-1.5 6.2-1.5 2.6 0 4.7 1 2.2 1 3.6 2.8V35.1zM64.3 65q2.3 0 4.1-1 1.9-1.1 3-3 1-2 1-4.4 0-2.5-1-4.4-1.1-2-3-3-1.8-1-4-1-2.3 0-4.2 1-1.8 1-2.9 3-1 1.9-1 4.4 0 2.4 1 4.4 1.1 1.9 3 3 1.8 1 4 1zm34.5 2q-1 .9-2.3 1.3-1.4.4-2.9.4-3.6 0-5.6-1.9-2-2-2-5.5V48.2h-4v-3.6h4v-5.2h4.4v5.2h6.8v3.6h-6.8V61q0 2 .9 3 1 1 2.8 1 2 0 3.4-1.1z" transform="translate(-4.9 -2)"/>
+</svg>
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 2ad656da..8626fbac 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,13 +3,9 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width">
-        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-        <title>Demos and Documentation</title>
-    <style>
-        body { margin: 5vw; }
-        nav { display: flex; flex-direction: column; }
-        a { text-decoration: none; color: blue; }
-    </style>
+        <title>simple-datatables</title>
+        <link rel="icon" type="image/svg+xml" href="./favicon.svg">
+        <link rel="stylesheet" href="./demos/demo.css">
     </head>
     <body>
         <h1>simple-datatables</h1>
diff --git a/test/server.mjs b/test/server.mjs
index 4e141c77..8ce2de5c 100644
--- a/test/server.mjs
+++ b/test/server.mjs
@@ -1,10 +1,12 @@
 import process from "process"
-
 import express from "express"
 
 const app = express()
 
 app.use(express.static("docs/demos"))
+app.get("/documentation", (_req, res) => res.send("It's me, the documentation page!"))
+app.use("/favicon.ico", express.static("docs/favicon.ico"))
+app.use("/favicon.svg", express.static("docs/favicon.svg"))
 
 let serverProcess
 

Customer	Version	Planned upgrade	DB-Info	Website info
- Test one CCode: 33123 -	7.1.5	26.11.2018	- Server: s1 DB: db1 -	- Websitename: Red Node: 10 -
- Test two CCode: 12353 -	7.1.5.2	26.11.2019	- Server: s1 DB: db2 -	- Websitename: Green Node: 6 -
- Test three CCode: 33522 -	7.1.6	01.01.2020	- Server: s2 DB: db1 -	- Websitename: Orange Node: 5 -
- Test four CCode: 25512 -	7.1.7	26.03.2021	- Server: s1 DB: db3 -	- Websitename: Blue Node: 10 -
Customer	Version	Planned upgrade	DB-Info	Website info
+ Test one CCode: 33123 +	7.1.5	26.11.2018	+ Server: s1 DB: db1 +	+ Websitename: Red Node: 10 +
+ Test two CCode: 12353 +	7.1.5.2	26.11.2019	+ Server: s1 DB: db2 +	+ Websitename: Green Node: 6 +
+ Test three CCode: 33522 +	7.1.6	01.01.2020	+ Server: s2 DB: db1 +	+ Websitename: Orange Node: 5 +
+ Test four CCode: 25512 +	7.1.7	26.03.2021	+ Server: s1 DB: db3 +	+ Websitename: Blue Node: 10 +