flowbite-mcp 1.1.3 → 1.1.5

package/data/plugins/datatables.md

@@ -1,18 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Datatables - Flowbite
-description: Use the datatable component to search, sort, filter, export and paginate table data of rows and columns for your web application coded with the utility classes from Tailwind CSS
-group: plugins
-toc: true
-requires_js: true
-
-previous: Charts
-previousLink: plugins/charts/
-
-next: WYSIWYG
-nextLink: plugins/wysiwyg/
----
-
 The datatable component examples from Flowbite are open-source under the MIT License and they are based on the [simple-datatables](https://github.com/fiduswriter/simple-datatables) repository from GitHub which you need to install via NPM or CDN.
 
 This page provides multiple examples of datatable components where you can search, sort, filter, paginate and export table data up to thousands of entries coded with Tailwind CSS and leveraging JavaScript code provided by the parent library.
@@ -23,19 +8,19 @@ All examples are responsive, dark mode and RTL support included and by installin
 
 Before continuing make sure that you have Tailwind CSS, Flowbite, and Simple Datables in your project.
 
-1. Install Tailwind CSS and follow our <a href="{{< ref "getting-started/quickstart" >}}">quickstart guide</a> to install Flowbite and the official plugin
+1. Install Tailwind CSS and follow our quickstart guide to install Flowbite and the official plugin
 
 2. Install the `simple-datatables` library using NPM:
 
-{{< code lang="bash" >}}
+```bash
 npm install simple-datatables --save
-{{< /code >}}
+```
 
 Alternatively, you can also include it in your project using CDN:
 
-{{< code lang="html" file="datatables.html" icon="file" >}}
+```html
 <script src="https://cdn.jsdelivr.net/npm/simple-datatables@9.0.3"></script>
-{{< /code >}}
+```
 
 Now that you have installed all libraries you can start copy-pasting the datatable components from Flowbite.
 
@@ -45,14 +30,7 @@ Make sure that in addition to the HTML markup you also copy the JavaScript code
 
 Use this example to show table data with default sorting and pagination functionalities.
 
-{{< example class="flex justify-center bg-neutral-primary" github="plugins/datatables.md" show_dark=true datatables=true disable_init_js=true javascript=`
-if (document.getElementById("default-table") && typeof simpleDatatables.DataTable !== 'undefined') {
-    const dataTable = new simpleDatatables.DataTable("#default-table", {
-        searchable: false,
-        perPageSelect: false
-    });
-}
-` >}}
+```html
 <table id="default-table">
     <thead>
         <tr>
@@ -219,20 +197,22 @@ if (document.getElementById("default-table") && typeof simpleDatatables.DataTabl
         </tr>
     </tbody>
 </table>
-{{< /example >}}
+```
+
+```javascript
+if (document.getElementById("default-table") && typeof simpleDatatables.DataTable !== 'undefined') {
+    const dataTable = new simpleDatatables.DataTable("#default-table", {
+        searchable: false,
+        perPageSelect: false
+    });
+}
+```
 
 ## Table search
 
 Set the `searchable` option to `true` to enable the search functionality for all table data.
 
-{{< example class="flex justify-center bg-neutral-primary" github="plugins/datatables.md" show_dark=true datatables=true disable_init_js=true javascript=`
-if (document.getElementById("search-table") && typeof simpleDatatables.DataTable !== 'undefined') {
-    const dataTable = new simpleDatatables.DataTable("#search-table", {
-        searchable: true,
-        sortable: false
-    });
-}
-` >}}
+```html
 <table id="search-table">
     <thead>
         <tr>
@@ -442,45 +422,22 @@ if (document.getElementById("search-table") && typeof simpleDatatables.DataTable
     </tbody>
 </table>
 
-{{< /example >}}
+```
+
+```javascript
+if (document.getElementById("search-table") && typeof simpleDatatables.DataTable !== 'undefined') {
+    const dataTable = new simpleDatatables.DataTable("#search-table", {
+        searchable: true,
+        sortable: false
+    });
+}
+```
 
 ## Filtering data
 
 To enable filtering data based on a search query for each column you need to copy the custom code from the JavaScript tab and the HTML structure of the table. Enabling search for each individual data column is an advanced way of letting users browse complex data.
 
-{{< example class="flex justify-center bg-neutral-primary" github="plugins/datatables.md" show_dark=true datatables=true disable_init_js=true javascript=`
-if (document.getElementById("filter-table") && typeof simpleDatatables.DataTable !== 'undefined') {
-    const dataTable = new simpleDatatables.DataTable("#filter-table", {
-        tableRender: (_data, table, type) => {
-            if (type === "print") {
-                return table
-            }
-            const tHead = table.childNodes[0]
-            const filterHeaders = {
-                nodeName: "TR",
-                attributes: {
-                    class: "search-filtering-row"
-                },
-                childNodes: tHead.childNodes[0].childNodes.map(
-                    (_th, index) => ({nodeName: "TH",
-                        childNodes: [
-                            {
-                                nodeName: "INPUT",
-                                attributes: {
-                                    class: "datatable-input",
-                                    type: "search",
-                                    "data-columns": "[" + index + "]"
-                                }
-                            }
-                        ]})
-                )
-            }
-            tHead.childNodes.push(filterHeaders)
-            return table
-        }
-    });
-}
-` >}}
+```html
 <table id="filter-table">
     <thead>
         <tr>
@@ -797,21 +754,47 @@ if (document.getElementById("filter-table") && typeof simpleDatatables.DataTable
         </tr>
     </tbody>
 </table>
-{{< /example >}}
+```
+
+```javascript
+if (document.getElementById("filter-table") && typeof simpleDatatables.DataTable !== 'undefined') {
+    const dataTable = new simpleDatatables.DataTable("#filter-table", {
+        tableRender: (_data, table, type) => {
+            if (type === "print") {
+                return table
+            }
+            const tHead = table.childNodes[0]
+            const filterHeaders = {
+                nodeName: "TR",
+                attributes: {
+                    class: "search-filtering-row"
+                },
+                childNodes: tHead.childNodes[0].childNodes.map(
+                    (_th, index) => ({nodeName: "TH",
+                        childNodes: [
+                            {
+                                nodeName: "INPUT",
+                                attributes: {
+                                    class: "datatable-input",
+                                    type: "search",
+                                    "data-columns": "[" + index + "]"
+                                }
+                            }
+                        ]})
+                )
+            }
+            tHead.childNodes.push(filterHeaders)
+            return table
+        }
+    });
+}
+```
 
 ## Sorting data
 
 By setting the value `sortable` to `true` you'll enable all data rows from the datatable to be sortable by clicking on the table column heading. You can also disable it by setting the same option to `false`.
 
-{{< example class="flex justify-center bg-neutral-primary" github="plugins/datatables.md" show_dark=true datatables=true disable_init_js=true javascript=`
-if (document.getElementById("sorting-table") && typeof simpleDatatables.DataTable !== 'undefined') {
-    const dataTable = new simpleDatatables.DataTable("#sorting-table", {
-        searchable: false,
-        perPageSelect: false,
-        sortable: true
-    });
-}
-` >}}
+```html
 <table id="sorting-table">
     <thead>
         <tr>
@@ -972,7 +955,17 @@ if (document.getElementById("sorting-table") && typeof simpleDatatables.DataTabl
         </tr>
     </tbody>
 </table>
-{{< /example >}}
+```
+
+```javascript
+if (document.getElementById("sorting-table") && typeof simpleDatatables.DataTable !== 'undefined') {
+    const dataTable = new simpleDatatables.DataTable("#sorting-table", {
+        searchable: false,
+        perPageSelect: false,
+        sortable: true
+    });
+}
+```
 
 ## Table pagination
 
@@ -980,16 +973,7 @@ Pagination is enabled by default for all datatables from Flowbite, however, you
 
 You can also set the `perPageSelect` option to set the selection options of the table.
 
-{{< example class="flex justify-center bg-neutral-primary" github="plugins/datatables.md" show_dark=true datatables=true disable_init_js=true javascript=`
-if (document.getElementById("pagination-table") && typeof simpleDatatables.DataTable !== 'undefined') {
-    const dataTable = new simpleDatatables.DataTable("#pagination-table", {
-        paging: true,
-        perPage: 5,
-        perPageSelect: [5, 10, 15, 20, 25],
-        sortable: false
-    });
-}
-` >}}
+```html
 <table id="pagination-table">
     <thead>
         <tr>
@@ -1212,7 +1196,18 @@ if (document.getElementById("pagination-table") && typeof simpleDatatables.DataT
         </tr>
     </tbody>
 </table>
-{{< /example >}}
+```
+
+```javascript
+if (document.getElementById("pagination-table") && typeof simpleDatatables.DataTable !== 'undefined') {
+    const dataTable = new simpleDatatables.DataTable("#pagination-table", {
+        paging: true,
+        perPage: 5,
+        perPageSelect: [5, 10, 15, 20, 25],
+        sortable: false
+    });
+}
+```
 
 ## Selecting rows
 
@@ -1220,7 +1215,176 @@ Use this example to enable the selection of rows by clicking anywhere one of the
 
 Use the `datatable.selectrow` event to write your own code and get the data from the selected table row.
 
-{{< example class="flex justify-center bg-neutral-primary" github="plugins/datatables.md" show_dark=true datatables=true disable_init_js=true javascript=`
+```html
+<table id="selection-table">
+    <thead>
+        <tr>
+            <th>
+                <span class="flex items-center">
+                    Name
+                    <svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
+                    </svg>
+                </span>
+            </th>
+            <th data-type="date" data-format="YYYY/DD/MM">
+                <span class="flex items-center">
+                    Release Date
+                    <svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
+                    </svg>
+                </span>
+            </th>
+            <th>
+                <span class="flex items-center">
+                    NPM Downloads
+                    <svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
+                    </svg>
+                </span>
+            </th>
+            <th>
+                <span class="flex items-center">
+                    Growth
+                    <svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
+                    </svg>
+                </span>
+            </th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Flowbite</td>
+            <td>2021/25/09</td>
+            <td>269000</td>
+            <td>49%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">React</td>
+            <td>2013/24/05</td>
+            <td>4500000</td>
+            <td>24%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Angular</td>
+            <td>2010/20/09</td>
+            <td>2800000</td>
+            <td>17%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Vue</td>
+            <td>2014/12/02</td>
+            <td>3600000</td>
+            <td>30%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Svelte</td>
+            <td>2016/26/11</td>
+            <td>1200000</td>
+            <td>57%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Ember</td>
+            <td>2011/08/12</td>
+            <td>500000</td>
+            <td>44%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Backbone</td>
+            <td>2010/13/10</td>
+            <td>300000</td>
+            <td>9%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">jQuery</td>
+            <td>2006/28/01</td>
+            <td>6000000</td>
+            <td>5%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Bootstrap</td>
+            <td>2011/19/08</td>
+            <td>1800000</td>
+            <td>12%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Foundation</td>
+            <td>2011/23/09</td>
+            <td>700000</td>
+            <td>8%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Bulma</td>
+            <td>2016/24/10</td>
+            <td>500000</td>
+            <td>7%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Next.js</td>
+            <td>2016/25/10</td>
+            <td>2300000</td>
+            <td>45%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Nuxt.js</td>
+            <td>2016/16/10</td>
+            <td>900000</td>
+            <td>50%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Meteor</td>
+            <td>2012/17/01</td>
+            <td>1000000</td>
+            <td>10%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Aurelia</td>
+            <td>2015/08/07</td>
+            <td>200000</td>
+            <td>20%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Inferno</td>
+            <td>2016/27/09</td>
+            <td>100000</td>
+            <td>35%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Preact</td>
+            <td>2015/16/08</td>
+            <td>600000</td>
+            <td>28%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Lit</td>
+            <td>2018/28/05</td>
+            <td>400000</td>
+            <td>60%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Alpine.js</td>
+            <td>2019/02/11</td>
+            <td>300000</td>
+            <td>70%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Stimulus</td>
+            <td>2018/06/03</td>
+            <td>150000</td>
+            <td>25%</td>
+        </tr>
+        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
+            <td class="font-medium text-heading whitespace-nowrap">Solid</td>
+            <td>2021/05/07</td>
+            <td>250000</td>
+            <td>80%</td>
+        </tr>
+    </tbody>
+</table>
+```
+
+```javascript
 if (document.getElementById("selection-table") && typeof simpleDatatables.DataTable !== 'undefined') {
 
     let multiSelect = true;
@@ -1285,8 +1449,14 @@ if (document.getElementById("selection-table") && typeof simpleDatatables.DataTa
 
     resetTable();
 }
-` >}}
-<table id="selection-table">
+```
+
+## Export files
+
+If you want to enable the export of the table data, you can use the `simpleDatatables.exportCSV` function to export the data as a CSV file. The option is also available for TXT, JSON, and SQL formats.
+
+```html
+<table id="export-table">
     <thead>
         <tr>
             <th>
@@ -1452,13 +1622,9 @@ if (document.getElementById("selection-table") && typeof simpleDatatables.DataTa
         </tr>
     </tbody>
 </table>
-{{< /example >}}
-
-## Export files
+```
 
-If you want to enable the export of the table data, you can use the `simpleDatatables.exportCSV` function to export the data as a CSV file. The option is also available for TXT, JSON, and SQL formats.
-
-{{< example class="dark:bg-gray-900" github="plugins/datatables.md" show_dark=true datatables=true disable_init_js=true javascript=`
+```javascript
 if (document.getElementById("export-table") && typeof simpleDatatables.DataTable !== 'undefined') {
 
     const exportCustomCSV = function(dataTable, userOptions = {}) {
@@ -1597,174 +1763,7 @@ if (document.getElementById("export-table") && typeof simpleDatatables.DataTable
         })
     })
 }
-` >}}
-<table id="export-table">
-    <thead>
-        <tr>
-            <th>
-                <span class="flex items-center">
-                    Name
-                    <svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
-                    </svg>
-                </span>
-            </th>
-            <th data-type="date" data-format="YYYY/DD/MM">
-                <span class="flex items-center">
-                    Release Date
-                    <svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
-                    </svg>
-                </span>
-            </th>
-            <th>
-                <span class="flex items-center">
-                    NPM Downloads
-                    <svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
-                    </svg>
-                </span>
-            </th>
-            <th>
-                <span class="flex items-center">
-                    Growth
-                    <svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
-                    </svg>
-                </span>
-            </th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Flowbite</td>
-            <td>2021/25/09</td>
-            <td>269000</td>
-            <td>49%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">React</td>
-            <td>2013/24/05</td>
-            <td>4500000</td>
-            <td>24%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Angular</td>
-            <td>2010/20/09</td>
-            <td>2800000</td>
-            <td>17%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Vue</td>
-            <td>2014/12/02</td>
-            <td>3600000</td>
-            <td>30%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Svelte</td>
-            <td>2016/26/11</td>
-            <td>1200000</td>
-            <td>57%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Ember</td>
-            <td>2011/08/12</td>
-            <td>500000</td>
-            <td>44%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Backbone</td>
-            <td>2010/13/10</td>
-            <td>300000</td>
-            <td>9%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">jQuery</td>
-            <td>2006/28/01</td>
-            <td>6000000</td>
-            <td>5%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Bootstrap</td>
-            <td>2011/19/08</td>
-            <td>1800000</td>
-            <td>12%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Foundation</td>
-            <td>2011/23/09</td>
-            <td>700000</td>
-            <td>8%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Bulma</td>
-            <td>2016/24/10</td>
-            <td>500000</td>
-            <td>7%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Next.js</td>
-            <td>2016/25/10</td>
-            <td>2300000</td>
-            <td>45%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Nuxt.js</td>
-            <td>2016/16/10</td>
-            <td>900000</td>
-            <td>50%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Meteor</td>
-            <td>2012/17/01</td>
-            <td>1000000</td>
-            <td>10%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Aurelia</td>
-            <td>2015/08/07</td>
-            <td>200000</td>
-            <td>20%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Inferno</td>
-            <td>2016/27/09</td>
-            <td>100000</td>
-            <td>35%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Preact</td>
-            <td>2015/16/08</td>
-            <td>600000</td>
-            <td>28%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Lit</td>
-            <td>2018/28/05</td>
-            <td>400000</td>
-            <td>60%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Alpine.js</td>
-            <td>2019/02/11</td>
-            <td>300000</td>
-            <td>70%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Stimulus</td>
-            <td>2018/06/03</td>
-            <td>150000</td>
-            <td>25%</td>
-        </tr>
-        <tr class="hover:bg-neutral-secondary-soft cursor-pointer">
-            <td class="font-medium text-heading whitespace-nowrap">Solid</td>
-            <td>2021/05/07</td>
-            <td>250000</td>
-            <td>80%</td>
-        </tr>
-    </tbody>
-</table>
-{{< /example >}}
+```
 
 ## JavaScript behaviour
 
@@ -1772,20 +1771,20 @@ Learn more about how you can customize the DataTables plugin such as changing th
 
 After installing the DataTables plugin either via NPM or CDN you can initialize by calling the `DataTable` constructor and passing the table selector as the first argument.
 
-{{< code lang="javascript" file="datatables.js" icon="file" >}}
+```javascript
 // if you installed via CDN
 const dataTable = new simpleDatatables.DataTable("#default-table");
 
 // if you installed via NPM
 import { DataTable } from "simple-datatables";
 const dataTable = DataTable("#default-table");
-{{< /code >}}
+```
 
 You can pass an object of options as the second argument to customize the table appearance and behavior.
 
-{{< code lang="javascript" file="datatables.js" icon="file" >}}
+```javascript
 const dataTable = new simpleDatatables.DataTable("#default-table", options);
-{{< /code >}}
+```
 
 After initializing the DataTable, you can access the instance methods and properties.
 
@@ -1799,7 +1798,7 @@ Check out some of the more commonly used options that you can pass to the DataTa
 
 Use the `data` option to pass data from an array of arrays to the table using JavaScript.
 
-{{< code lang="javascript" file="datatables.js" icon="file" >}}
+```javascript
 const customData = {
     "headings": [
         "Name",
@@ -1820,7 +1819,7 @@ const customData = {
 };
 
 const dataTable = new DataTable("#default-table", { data: customData });
-{{< /code >}}
+```
 
 This is a useful feature where instead of a hard coded array you can pass data from an API or a JSON file.
 
@@ -1828,7 +1827,7 @@ This is a useful feature where instead of a hard coded array you can pass data f
 
 Use the following options to customize the appearance of the table such as adding a caption, custom classes, footer, header, updating the HTML rendering template, and enabling vertical scrolling, and more.
 
-{{< code lang="javascript" file="datatables.js" icon="file" >}}
+```javascript
 const dataTable = new DataTable("#default-table", {
     caption: "Flowbite is an open-source library",
     classes: {
@@ -1845,7 +1844,7 @@ const dataTable = new DataTable("#default-table", {
     },
     scrollY: "300px", // enable vertical scrolling
 });
-{{< /code >}}
+```
 
 These options are useful if you want to add your own HTML elements inside the dynamically generated table header or footer as we used in the export a file example above.
 
@@ -1853,7 +1852,7 @@ These options are useful if you want to add your own HTML elements inside the dy
 
 Use these options to enable pagination, set the number of rows per page, and customize the appearance.
 
-{{< code lang="javascript" file="datatables.js" icon="file" >}}
+```javascript
 const dataTable = new DataTable("#default-table", {
     paging: true, // enable or disable pagination
     perPage: 10, // set the number of rows per page
@@ -1861,7 +1860,7 @@ const dataTable = new DataTable("#default-table", {
     firstLast: true, // enable or disable the first and last buttons
     nextPrev: true, // enable or disable the next and previous buttons
 });
-{{< /code >}}
+```
 
 Pagination is a useful feature when you have a large dataset and you want to split it into multiple pages.
 
@@ -1869,13 +1868,13 @@ Pagination is a useful feature when you have a large dataset and you want to spl
 
 These options can be used to enable searching, set the search placeholder, and customize the appearance.
 
-{{< code lang="javascript" file="datatables.js" icon="file" >}}
+```javascript
 const dataTable = new DataTable("#default-table", {
     searchable: true, // enable or disable searching
     sensitivity: "base" // set the search sensitivity (base, accent, case, variant)
     searchQuerySeparator: " ", // set the search query separator
 });
-{{< /code >}}
+```
 
 The searching feature is great when you have a large dataset and you want to search for a specific row.
 
@@ -1883,7 +1882,7 @@ The searching feature is great when you have a large dataset and you want to sea
 
 Use these options to enable sorting, set the default sort column, and customize the sort appearance.
 
-{{< code lang="javascript" file="datatables.js" icon="file" >}}
+```javascript
 const dataTable = new DataTable("#default-table", {
     sortable: true, // enable or disable sorting
     locale: "en-US", // set the locale for sorting
@@ -1891,7 +1890,7 @@ const dataTable = new DataTable("#default-table", {
     caseFirst: "false", // set the case first for sorting (upper, lower)
     ignorePunctuation: true // enable or disable punctuation sorting
 });
-{{< /code >}}
+```
 
 The sorting feature is useful when you want to sort the table rows based on a specific column.
 
@@ -1899,7 +1898,7 @@ The sorting feature is useful when you want to sort the table rows based on a sp
 
 Check out some of the common methods that you can use to interact with the DataTable instance.
 
-{{< code lang="javascript" file="datatables.js" icon="file" >}}
+```javascript
 // programatically search the table where the "term" variable is the query string
 dataTable.search(term, columns);
 
@@ -1913,7 +1912,7 @@ dataTable.insert({
 
 // updates the DOM of the table
 dataTable.update();
-{{< /code >}}
+```
 
 Here's a full list of the <a href="https://fiduswriter.github.io/simple-datatables/documentation/#methods" target="_blank" rel="nofollow">exposed methods and properties</a> from the simple-datatables repository.