added: css for options in th/td, added: classes in result for th/td

README.md

@@ -46,8 +46,8 @@ Replace `path/to/avalynx-datatable.js` and `path/to/avalynx-datatable.css` with
 AvalynxDataTable is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/avalynx-datatable@0.0.2/dist/css/avalynx-datatable.min.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/avalynx-datatable@0.0.2/dist/js/avalynx-datatable.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/avalynx-datatable@0.0.3/dist/css/avalynx-datatable.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/avalynx-datatable@0.0.3/dist/js/avalynx-datatable.min.js"></script>
 ```
 
 Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxDataTable displays correctly.
@@ -129,6 +129,94 @@ new AvalynxDataTable("avalynx-datatable", {
 });
 ```
 
+## JSON Data Structure
+
+AvalynxDataTable expects data in a specific JSON format to render the table correctly. The JSON object should contain the following fields:
+
+```json
+{
+    "head": {
+        "columns": [
+            {"name": "Name", "sortable": true, "id": "name"},
+            {"name": "ID", "sortable": true, "id": "id", "hidden": true},
+            {"name": "Age", "id": "age"},
+            {"name": "City", "sortable": true, "id": "city"},
+            {"name": "Options", "raw": true, "id": "options", "class": "avalynx-datatable-options"}
+        ]
+    },
+    "data": [
+        {
+            "data": {
+                "id": 1,
+                "name": "Tiger Nixon",
+                "age": 61,
+                "city": "Edinburgh",
+                "options": "<a class='btn btn-sm btn-primary'>Edit</a>"
+            },
+            "config": {"test": "test_text"},
+            "class": "table-danger"
+        },
+        {
+            "data": {
+                "id": 2,
+                "name": "Garrett Winters",
+                "age": 63,
+                "city": "Tokyo",
+                "options": "<a class='btn btn-sm btn-primary'>Edit</a>"
+            },
+            "config": {"test": "test_text"},
+            "class": "",
+            "data_class": {"options": "table-danger"}
+        }
+        // Additional data ...
+    ],
+    "count": {
+        "total": 57,
+        "filtered": 57,
+        "start": 1,
+        "end": 10,
+        "perpage": 10,
+        "page": 1
+    },
+    "sorting": {
+        "name": "asc",
+        "age": "desc"
+    },
+    "search": {
+        "value": ""
+    }
+}
+
+```
+
+- **head.columns**: Defines the table columns and their properties like `sortable` (whether the column can be sorted) or `hidden` (whether the column is hidden).
+
+    - **name**: The display name of the column.
+    - **sortable**: A boolean that specifies whether the column is sortable.
+    - **id**: The internal identifier for the column used in sorting and data binding.
+    - **hidden**: (optional) Indicates if the column is hidden by default.
+    - **raw**: (optional) Specifies that the content of the column is raw HTML.
+    - **class**: (optional) CSS class for the column, which can be used for styling.
+
+- **data**: Contains the actual data that is displayed in the table. Each entry (row) contains the following:
+    - **data**: An object with the actual row values, such as `id`, `name`, `age`, `city`, and an `options` field that contains HTML for action buttons.
+    - **config**: (optional) Additional configuration that can be used to customize the row behavior.
+    - **class**: (optional) CSS class applied to the entire row.
+    - **data_class**: (optional) CSS classes for specific columns in the row.
+
+- **count**: Contains metadata about the result set:
+    - **total**: The total number of records in the database.
+    - **filtered**: The number of records after filtering (e.g., based on search input).
+    - **start**: The index of the first record on the current page.
+    - **end**: The index of the last record on the current page.
+    - **perpage**: The number of records per page (pagination size).
+    - **page**: The current page number.
+
+- **sorting**: Defines the current sorting configuration, where the key is the column ID and the value is the sorting direction (`asc` or `desc`).
+
+- **search**: Represents the current search filter applied to the data. It contains:
+    - **value**: The search query string used to filter the table data.
+
 ## Options
 
 AvalynxDataTable allows the following options for customization:

dist/css/avalynx-datatable.css

@@ -3,7 +3,7 @@
  *
  * A simple, lightweight, and customizable data table for the web. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 0.0.2
+ * @version 0.0.3
  * @license MIT
  * @author https://github.com/avalynx/avalynx-datatable/graphs/contributors
  * @website https://github.com/avalynx/

dist/js/avalynx-datatable.esm.js

@@ -3,7 +3,7 @@
  *
  * A simple, lightweight, and customizable data table for the web. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 0.0.2
+ * @version 0.0.3
  * @license MIT
  * @author https://github.com/avalynx/avalynx-datatable/graphs/contributors
  * @website https://github.com/avalynx/
@@ -40,7 +40,7 @@ export class AvalynxDataTable {
     constructor(id, options = {}, language = {}) {
         this.dt = document.getElementById(id);
         if (this.dt === null) {
-            console.error("AvalynxDataTable: Element with id '" + id + "' not found");
+            console.error(`AvalynxDataTable: Element with id '${id}' not found`);
             return;
         }
         this.id = id;
@@ -54,12 +54,12 @@ export class AvalynxDataTable {
             searchWait: 800,
             listPerPage: [10, 25, 50, 100],
             perPage: 10,
-            className: 'table table-striped table-bordered table-responsive',
+            className: 'table table-striped table-bordered table-responsive align-middle',
             paginationPrevNext: true,
             paginationRange: 2,
             loader: null,
             ...options
-        }
+        };
         this.language = {
             showLabel: "Show",
             entriesLabel: "entries",
@@ -69,11 +69,13 @@ export class AvalynxDataTable {
             showingEntries: (start, end, total) => `Showing ${start} to ${end} of ${total} entries`,
             showingFilteredEntries: (start, end, filtered, total) => `Showing ${start} to ${end} of ${filtered} entries (filtered from ${total} total entries)`,
             ...language
-        }
-        if (!this.options.listPerPage.includes(options.perPage)) {
+        };
+        if (!this.options.listPerPage.includes(this.options.perPage)) {
             this.options.perPage = 10;
         }
         this.options.searchIsNew = false;
+        this.result = null;
+        this.totalPages = 0;
         this.init();
         this.fetchData();
     }
@@ -270,6 +272,9 @@ export class AvalynxDataTable {
             if (column.hidden) {
                 th.classList.add("d-none");
             }
+            if (column.class) {
+                th.classList.add(column.class);
+            }
             th.textContent = column.name;
             th.setAttribute("data-avalynx-datatable-column-id", column.id);
             if (column.sortable) {
@@ -284,13 +289,27 @@ export class AvalynxDataTable {
         tbody.innerHTML = '';
         this.result.data.forEach((rowData) => {
             const tr = document.createElement("tr");
+            if (rowData.class) {
+                tr.classList.add(rowData.class);
+            }
             this.result.head.columns.forEach((column) => {
                 const td = document.createElement("td");
                 if (column.hidden) {
                     td.classList.add("d-none");
                 }
-                td.textContent = rowData.data[column.id];
-                tr.appendChild(td);
+                if (column.class) {
+                    td.classList.add(column.class);
+                }
+                if (rowData.data_class && rowData.data_class[column.id]) {
+                    td.classList.add(rowData.data_class[column.id]);
+                }
+                if (column.raw) {
+                    tr.appendChild(td);
+                    td.innerHTML = rowData.data[column.id];
+                } else {
+                    td.textContent = rowData.data[column.id];
+                    tr.appendChild(td);
+                }
             });
             tbody.appendChild(tr);
         });

dist/js/avalynx-datatable.js

@@ -3,7 +3,7 @@
  *
  * A simple, lightweight, and customizable data table for the web. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 0.0.2
+ * @version 0.0.3
  * @license MIT
  * @author https://github.com/avalynx/avalynx-datatable/graphs/contributors
  * @website https://github.com/avalynx/
@@ -40,7 +40,7 @@ class AvalynxDataTable {
     constructor(id, options = {}, language = {}) {
         this.dt = document.getElementById(id);
         if (this.dt === null) {
-            console.error("AvalynxDataTable: Element with id '" + id + "' not found");
+            console.error(`AvalynxDataTable: Element with id '${id}' not found`);
             return;
         }
         this.id = id;
@@ -59,7 +59,7 @@ class AvalynxDataTable {
             paginationRange: 2,
             loader: null,
             ...options
-        }
+        };
         this.language = {
             showLabel: "Show",
             entriesLabel: "entries",
@@ -69,11 +69,13 @@ class AvalynxDataTable {
             showingEntries: (start, end, total) => `Showing ${start} to ${end} of ${total} entries`,
             showingFilteredEntries: (start, end, filtered, total) => `Showing ${start} to ${end} of ${filtered} entries (filtered from ${total} total entries)`,
             ...language
-        }
-        if (!this.options.listPerPage.includes(options.perPage)) {
+        };
+        if (!this.options.listPerPage.includes(this.options.perPage)) {
             this.options.perPage = 10;
         }
         this.options.searchIsNew = false;
+        this.result = null;
+        this.totalPages = 0;
         this.init();
         this.fetchData();
     }

src/css/avalynx-datatable.css

@@ -13,7 +13,7 @@
 
 .avalynx-datatable-table th.avalynx-datatable-sorting,
 .avalynx-datatable-table td.avalynx-datatable-sorting,
-.avalynx-datatable-table th.avalynx-datatable-sorting-,
+.avalynx-datatable-table th.avalynx-datatable-sorting-asc,
 .avalynx-datatable-table td.avalynx-datatable-sorting-asc,
 .avalynx-datatable-table th.avalynx-datatable-sorting-desc,
 .avalynx-datatable-table td.avalynx-datatable-sorting-desc,
@@ -63,3 +63,10 @@
 .avalynx-datatable-table td.avalynx-datatable-sorting-desc:after {
     opacity: .7;
 }
+
+.avalynx-datatable-table th.avalynx-datatable-options,
+.avalynx-datatable-table td.avalynx-datatable-options {
+    text-align: center;
+    width: 1%;
+    white-space: nowrap;
+}

src/js/avalynx-datatable.js

@@ -3,7 +3,7 @@
  *
  * A simple, lightweight, and customizable data table for the web. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 0.0.2
+ * @version 0.0.3
  * @license MIT
  * @author https://github.com/avalynx/avalynx-datatable/graphs/contributors
  * @website https://github.com/avalynx/
@@ -40,7 +40,7 @@ class AvalynxDataTable {
     constructor(id, options = {}, language = {}) {
         this.dt = document.getElementById(id);
         if (this.dt === null) {
-            console.error("AvalynxDataTable: Element with id '" + id + "' not found");
+            console.error(`AvalynxDataTable: Element with id '${id}' not found`);
             return;
         }
         this.id = id;
@@ -54,12 +54,12 @@ class AvalynxDataTable {
             searchWait: 800,
             listPerPage: [10, 25, 50, 100],
             perPage: 10,
-            className: 'table table-striped table-bordered table-responsive',
+            className: 'table table-striped table-bordered table-responsive align-middle',
             paginationPrevNext: true,
             paginationRange: 2,
             loader: null,
             ...options
-        }
+        };
         this.language = {
             showLabel: "Show",
             entriesLabel: "entries",
@@ -69,11 +69,13 @@ class AvalynxDataTable {
             showingEntries: (start, end, total) => `Showing ${start} to ${end} of ${total} entries`,
             showingFilteredEntries: (start, end, filtered, total) => `Showing ${start} to ${end} of ${filtered} entries (filtered from ${total} total entries)`,
             ...language
-        }
-        if (!this.options.listPerPage.includes(options.perPage)) {
+        };
+        if (!this.options.listPerPage.includes(this.options.perPage)) {
             this.options.perPage = 10;
         }
         this.options.searchIsNew = false;
+        this.result = null;
+        this.totalPages = 0;
         this.init();
         this.fetchData();
     }
@@ -270,6 +272,9 @@ class AvalynxDataTable {
             if (column.hidden) {
                 th.classList.add("d-none");
             }
+            if (column.class) {
+                th.classList.add(column.class);
+            }
             th.textContent = column.name;
             th.setAttribute("data-avalynx-datatable-column-id", column.id);
             if (column.sortable) {
@@ -284,13 +289,27 @@ class AvalynxDataTable {
         tbody.innerHTML = '';
         this.result.data.forEach((rowData) => {
             const tr = document.createElement("tr");
+            if (rowData.class) {
+                tr.classList.add(rowData.class);
+            }
             this.result.head.columns.forEach((column) => {
                 const td = document.createElement("td");
                 if (column.hidden) {
                     td.classList.add("d-none");
                 }
-                td.textContent = rowData.data[column.id];
-                tr.appendChild(td);
+                if (column.class) {
+                    td.classList.add(column.class);
+                }
+                if (rowData.data_class && rowData.data_class[column.id]) {
+                    td.classList.add(rowData.data_class[column.id]);
+                }
+                if (column.raw) {
+                    tr.appendChild(td);
+                    td.innerHTML = rowData.data[column.id];
+                } else {
+                    td.textContent = rowData.data[column.id];
+                    tr.appendChild(td);
+                }
             });
             tbody.appendChild(tr);
         });