Add custom Bootstrap breakpoint support for responsive layout and bum…

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.2/dist/css/avalynx-datatable.min.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/avalynx-datatable@1.0.2/dist/js/avalynx-datatable.min.js"></script>
+<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>
 ```
 
 Stellen Sie sicher, dass Sie auch die JS/CSS-Dateien von Bootstrap in Ihr Projekt einbinden, damit AvalynxDataTable korrekt angezeigt wird.

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.2/dist/css/avalynx-datatable.min.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/avalynx-datatable@1.0.2/dist/js/avalynx-datatable.min.js"></script>
+<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>
 ```
 
 Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxDataTable displays correctly.

__tests__/avalynx-datatable.test.js

@@ -94,6 +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');
         });
 
         test('should merge custom options with defaults', () => {
@@ -208,6 +209,37 @@ describe('AvalynxDataTable', () => {
             expect(searchInput).not.toBeNull();
         });
 
+        test('should apply default md breakpoint class to top and bottom sections', async () => {
+            new AvalynxDataTable('test-datatable', { apiUrl: 'http://test.com/api' });
+
+            await new Promise(resolve => setTimeout(resolve, 10));
+
+            const container = document.getElementById('test-datatable');
+            const topSection = container.querySelector('.avalynx-datatable-top');
+            const bottomSection = container.querySelector('.avalynx-datatable-bottom');
+
+            expect(topSection.classList.contains('flex-md-row')).toBe(true);
+            expect(bottomSection.classList.contains('flex-md-row')).toBe(true);
+        });
+
+        test('should apply custom breakpoint class to top and bottom sections', async () => {
+            new AvalynxDataTable('test-datatable', {
+                apiUrl: 'http://test.com/api',
+                md: 'lg'
+            });
+
+            await new Promise(resolve => setTimeout(resolve, 10));
+
+            const container = document.getElementById('test-datatable');
+            const topSection = container.querySelector('.avalynx-datatable-top');
+            const bottomSection = container.querySelector('.avalynx-datatable-bottom');
+
+            expect(topSection.classList.contains('flex-lg-row')).toBe(true);
+            expect(bottomSection.classList.contains('flex-lg-row')).toBe(true);
+            expect(topSection.classList.contains('flex-md-row')).toBe(false);
+            expect(bottomSection.classList.contains('flex-md-row')).toBe(false);
+        });
+
         test('should create table with proper structure and ID', async () => {
             new AvalynxDataTable('test-datatable', { apiUrl: 'http://test.com/api' });
 

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

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

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

src/js/avalynx-datatable.js

@@ -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.md - 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',
+            md: '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.md}-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">