Add breakpoint option for responsive layout customization and bump version to 1.0.4

Author: jschwind

README.de.md

@@ -55,8 +55,8 @@ Ersetzen Sie `path/to/avalynx-datatable.js` und `path/to/avalynx-datatable.css`
 AvalynxDataTable ist auch über [jsDelivr](https://www.jsdelivr.com/) verfügbar. Sie können es so in Ihr Projekt einbinden:
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/avalynx-datatable@1.0.3/dist/css/avalynx-datatable.min.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/avalynx-datatable@1.0.3/dist/js/avalynx-datatable.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/avalynx-datatable@1.0.4/dist/css/avalynx-datatable.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/avalynx-datatable@1.0.4/dist/js/avalynx-datatable.min.js"></script>
 ```
 
 Stellen Sie sicher, dass Sie auch die JS/CSS-Dateien von Bootstrap in Ihr Projekt einbinden, damit AvalynxDataTable korrekt angezeigt wird.
@@ -134,6 +134,7 @@ new AvalynxDataTable("avalynx-datatable", {
   apiUrl: "result.php",
   perPage: 10,
   search: "",
+  breakpoint: "md",
   sorting: {
     "name": "asc",
     "age": "desc"
@@ -275,6 +276,7 @@ AvalynxDataTable ermöglicht die folgenden Optionen zur Anpassung:
   - `listPerPage` (array): Die Liste der Optionen für das Pro-Seite-Dropdown (Standard: `[10, 25, 50, 100]`).
   - `perPage` (number): Die anfängliche Anzahl der Elemente pro Seite (Standard: `10`).
   - `className` (string): Die CSS-Klassen, die auf die Tabelle angewendet werden sollen (Standard: `'table table-striped table-bordered table-responsive'`).
+  - `breakpoint` (string): Bootstrap-Breakpoint für das Top/Bottom-Layout (`flex-{breakpoint}-row`, Standard: `'md'`).
   - `paginationPrevNext` (boolean): Ob die Vorherige- und Nächste-Buttons in der Pagination angezeigt werden sollen (Standard: `true`).
   - `paginationRange` (number): Die Anzahl der Seiten, die auf jeder Seite der aktuellen Seite in der Pagination angezeigt werden sollen (Standard: `2`).
   - `loader` (object): Eine Instanz von AvalynxLoader, die als Loader für die Tabelle verwendet werden soll (Standard: `null`).  

README.md

@@ -55,8 +55,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@1.0.3/dist/css/avalynx-datatable.min.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/avalynx-datatable@1.0.3/dist/js/avalynx-datatable.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/avalynx-datatable@1.0.4/dist/css/avalynx-datatable.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/avalynx-datatable@1.0.4/dist/js/avalynx-datatable.min.js"></script>
 ```
 
 Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxDataTable displays correctly.
@@ -134,6 +134,7 @@ new AvalynxDataTable("avalynx-datatable", {
   apiUrl: "result.php",
   perPage: 10,
   search: "",
+  breakpoint: "md",
   sorting: {
     "name": "asc",
     "age": "desc"
@@ -275,6 +276,7 @@ AvalynxDataTable allows the following options for customization:
   - `listPerPage` (array): The list of options for the per-page dropdown (default: `[10, 25, 50, 100]`).
   - `perPage` (number): The initial number of items per page (default: `10`).
   - `className` (string): The CSS classes to apply to the table (default: `'table table-striped table-bordered table-responsive'`).
+  - `breakpoint` (string): Bootstrap breakpoint used for top/bottom row layout (`flex-{breakpoint}-row`, default: `'md'`).
   - `paginationPrevNext` (boolean): Whether to show the previous and next buttons in the pagination (default: `true`).
   - `paginationRange` (number): The number of pages to show on either side of the current page in the pagination (default: `2`).
   - `loader` (object): An instance of AvalynxLoader to use as the loader for the table (default: `null`).  

__tests__/avalynx-datatable.test.js

@@ -94,7 +94,7 @@ describe('AvalynxDataTable', () => {
             expect(dt.options.listPerPage).toEqual([10, 25, 50, 100]);
             expect(dt.options.paginationPrevNext).toBe(true);
             expect(dt.options.paginationRange).toBe(2);
-            expect(dt.options.md).toBe('md');
+            expect(dt.options.breakpoint).toBe('md');
         });
 
         test('should merge custom options with defaults', () => {
@@ -209,7 +209,7 @@ describe('AvalynxDataTable', () => {
             expect(searchInput).not.toBeNull();
         });
 
-        test('should apply default md breakpoint class to top and bottom sections', async () => {
+        test('should apply default breakpoint class to top and bottom sections', async () => {
             new AvalynxDataTable('test-datatable', { apiUrl: 'http://test.com/api' });
 
             await new Promise(resolve => setTimeout(resolve, 10));
@@ -225,7 +225,7 @@ describe('AvalynxDataTable', () => {
         test('should apply custom breakpoint class to top and bottom sections', async () => {
             new AvalynxDataTable('test-datatable', {
                 apiUrl: 'http://test.com/api',
-                md: 'lg'
+                breakpoint: 'lg'
             });
 
             await new Promise(resolve => setTimeout(resolve, 10));

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 1.0.3
+ * @version 1.0.4
  * @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 1.0.3
+ * @version 1.0.4
  * @license MIT
  * @author https://github.com/avalynx/avalynx-datatable/graphs/contributors
  * @website https://github.com/avalynx/
@@ -22,6 +22,7 @@
  * @param {array} options.listPerPage - The list of options for the per-page dropdown (default: [10, 25, 50, 100]).
  * @param {number} options.perPage - The initial number of items per page (default: 10).
  * @param {string} options.className - The CSS classes to apply to the table (default: 'table table-striped table-bordered table-responsive').
+ * @param {string} options.breakpoint - Bootstrap breakpoint used for top/bottom row layout (default: 'md').
  * @param {boolean} options.paginationPrevNext - Whether to show the previous and next buttons in the pagination (default: true).
  * @param {number} options.paginationRange - The number of pages to show on either side of the current page in the pagination (default: 2).
  * @param {object} options.loader - An instance of AvalynxLoader to use as the loader for the table (default: null).
@@ -58,6 +59,7 @@ export class AvalynxDataTable {
             listPerPage: [10, 25, 50, 100],
             perPage: 10,
             className: 'table table-striped table-bordered table-responsive align-middle',
+            breakpoint: 'md',
             paginationPrevNext: true,
             paginationRange: 2,
             loader: null,
@@ -99,6 +101,10 @@ export class AvalynxDataTable {
         const tableTemplate = document.getElementById("avalynx-datatable-table").content.cloneNode(true);
         const bottomTemplate = document.getElementById("avalynx-datatable-bottom").content.cloneNode(true);
 
+        const responsiveClass = `flex-${this.options.breakpoint}-row`;
+        topTemplate.querySelector(".avalynx-datatable-top").classList.add(responsiveClass);
+        bottomTemplate.querySelector(".avalynx-datatable-bottom").classList.add(responsiveClass);
+
         const table = tableTemplate.querySelector("table");
         table.className = `${this.options.className} avalynx-datatable-table`;
         table.id = `${this.id}-table`;
@@ -193,7 +199,7 @@ export class AvalynxDataTable {
     ensureTemplatesExist() {
         const templates = {
             "avalynx-datatable-top": `
-                <div class="d-flex flex-column flex-md-row avalynx-datatable-top">
+                <div class="d-flex flex-column avalynx-datatable-top">
                     <div class="d-flex align-self-center pb-2 avalynx-datatable-top-entries">
                         <label class="align-self-center"></label>
                         <div class="align-self-center px-2">
@@ -213,7 +219,7 @@ export class AvalynxDataTable {
                     <tbody></tbody>
                 </table>`,
             "avalynx-datatable-bottom": `
-                <div class="d-flex flex-column flex-md-row avalynx-datatable-bottom">
+                <div class="d-flex flex-column avalynx-datatable-bottom">
                     <div class="d-flex avalynx-datatable-bottom-entries pb-2"></div>
                     <div class="flex-grow-1"></div>
                     <nav class="align-self-center avalynx-datatable-bottom-pagination">
@@ -485,6 +491,7 @@ export class AvalynxDataTable {
         this.avalynxTableInstance = null;
     }
 }
+
 /* istanbul ignore next */
 if (typeof module !== 'undefined' && module.exports) {
     module.exports = AvalynxDataTable;

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 1.0.3
+ * @version 1.0.4
  * @license MIT
  * @author https://github.com/avalynx/avalynx-datatable/graphs/contributors
  * @website https://github.com/avalynx/
@@ -22,6 +22,7 @@
  * @param {array} options.listPerPage - The list of options for the per-page dropdown (default: [10, 25, 50, 100]).
  * @param {number} options.perPage - The initial number of items per page (default: 10).
  * @param {string} options.className - The CSS classes to apply to the table (default: 'table table-striped table-bordered table-responsive').
+ * @param {string} options.breakpoint - Bootstrap breakpoint used for top/bottom row layout (default: 'md').
  * @param {boolean} options.paginationPrevNext - Whether to show the previous and next buttons in the pagination (default: true).
  * @param {number} options.paginationRange - The number of pages to show on either side of the current page in the pagination (default: 2).
  * @param {object} options.loader - An instance of AvalynxLoader to use as the loader for the table (default: null).
@@ -56,6 +57,7 @@ class AvalynxDataTable {
             listPerPage: [10, 25, 50, 100],
             perPage: 10,
             className: 'table table-striped table-bordered table-responsive align-middle',
+            breakpoint: 'md',
             paginationPrevNext: true,
             paginationRange: 2,
             loader: null,
@@ -97,6 +99,10 @@ class AvalynxDataTable {
         const tableTemplate = document.getElementById("avalynx-datatable-table").content.cloneNode(true);
         const bottomTemplate = document.getElementById("avalynx-datatable-bottom").content.cloneNode(true);
 
+        const responsiveClass = `flex-${this.options.breakpoint}-row`;
+        topTemplate.querySelector(".avalynx-datatable-top").classList.add(responsiveClass);
+        bottomTemplate.querySelector(".avalynx-datatable-bottom").classList.add(responsiveClass);
+
         const table = tableTemplate.querySelector("table");
         table.className = `${this.options.className} avalynx-datatable-table`;
         table.id = `${this.id}-table`;
@@ -191,7 +197,7 @@ class AvalynxDataTable {
     ensureTemplatesExist() {
         const templates = {
             "avalynx-datatable-top": `
-                <div class="d-flex flex-column flex-md-row avalynx-datatable-top">
+                <div class="d-flex flex-column avalynx-datatable-top">
                     <div class="d-flex align-self-center pb-2 avalynx-datatable-top-entries">
                         <label class="align-self-center"></label>
                         <div class="align-self-center px-2">
@@ -211,7 +217,7 @@ class AvalynxDataTable {
                     <tbody></tbody>
                 </table>`,
             "avalynx-datatable-bottom": `
-                <div class="d-flex flex-column flex-md-row avalynx-datatable-bottom">
+                <div class="d-flex flex-column avalynx-datatable-bottom">
                     <div class="d-flex avalynx-datatable-bottom-entries pb-2"></div>
                     <div class="flex-grow-1"></div>
                     <nav class="align-self-center avalynx-datatable-bottom-pagination">
@@ -483,6 +489,7 @@ class AvalynxDataTable {
         this.avalynxTableInstance = null;
     }
 }
+
 /* istanbul ignore next */
 if (typeof module !== 'undefined' && module.exports) {
     module.exports = AvalynxDataTable;

package.json

@@ -2,7 +2,7 @@
   "name": "avalynx-datatable",
   "title": "AvalynxDataTable",
   "description": "AvalynxDataTable is a simple, lightweight, and customizable datatable for the web. Based on Bootstrap >=5.3 without any framework dependencies.",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "MIT",
   "main": "dist/js/avalynx-datatable.js",
   "module": "dist/js/avalynx-datatable.esm.js",

src/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 1.0.3
+ * @version 1.0.4
  * @license MIT
  * @author https://github.com/avalynx/avalynx-datatable/graphs/contributors
  * @website https://github.com/avalynx/

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 1.0.2
+ * @version 1.0.4
  * @license MIT
  * @author https://github.com/avalynx/avalynx-datatable/graphs/contributors
  * @website https://github.com/avalynx/
@@ -22,7 +22,7 @@
  * @param {array} options.listPerPage - The list of options for the per-page dropdown (default: [10, 25, 50, 100]).
  * @param {number} options.perPage - The initial number of items per page (default: 10).
  * @param {string} options.className - The CSS classes to apply to the table (default: 'table table-striped table-bordered table-responsive').
- * @param {string} options.md - Bootstrap breakpoint used for top/bottom row layout (default: 'md').
+ * @param {string} options.breakpoint - Bootstrap breakpoint used for top/bottom row layout (default: 'md').
  * @param {boolean} options.paginationPrevNext - Whether to show the previous and next buttons in the pagination (default: true).
  * @param {number} options.paginationRange - The number of pages to show on either side of the current page in the pagination (default: 2).
  * @param {object} options.loader - An instance of AvalynxLoader to use as the loader for the table (default: null).
@@ -57,7 +57,7 @@ class AvalynxDataTable {
             listPerPage: [10, 25, 50, 100],
             perPage: 10,
             className: 'table table-striped table-bordered table-responsive align-middle',
-            md: 'md',
+            breakpoint: 'md',
             paginationPrevNext: true,
             paginationRange: 2,
             loader: null,
@@ -99,7 +99,7 @@ class AvalynxDataTable {
         const tableTemplate = document.getElementById("avalynx-datatable-table").content.cloneNode(true);
         const bottomTemplate = document.getElementById("avalynx-datatable-bottom").content.cloneNode(true);
 
-        const responsiveClass = `flex-${this.options.md}-row`;
+        const responsiveClass = `flex-${this.options.breakpoint}-row`;
         topTemplate.querySelector(".avalynx-datatable-top").classList.add(responsiveClass);
         bottomTemplate.querySelector(".avalynx-datatable-bottom").classList.add(responsiveClass);