diff --git a/README.de.md b/README.de.md
index 6aacfb5..fd57837 100644
--- a/README.de.md
+++ b/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
-
-
+
+
```
Stellen Sie sicher, dass Sie auch die JS/CSS-Dateien von Bootstrap in Ihr Projekt einbinden, damit AvalynxDataTable korrekt angezeigt wird.
diff --git a/README.md b/README.md
index 7fee21a..92b1d56 100644
--- a/README.md
+++ b/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
-
-
+
+
```
Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxDataTable displays correctly.
diff --git a/__tests__/avalynx-datatable.test.js b/__tests__/avalynx-datatable.test.js
index b965ccc..35afb6c 100644
--- a/__tests__/avalynx-datatable.test.js
+++ b/__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' });
diff --git a/dist/css/avalynx-datatable.css b/dist/css/avalynx-datatable.css
index 267c485..0cdf369 100644
--- a/dist/css/avalynx-datatable.css
+++ b/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/
diff --git a/dist/js/avalynx-datatable.esm.js b/dist/js/avalynx-datatable.esm.js
index f6195f4..4ad5854 100644
--- a/dist/js/avalynx-datatable.esm.js
+++ b/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/
diff --git a/dist/js/avalynx-datatable.js b/dist/js/avalynx-datatable.js
index 36c0681..3911569 100644
--- a/dist/js/avalynx-datatable.js
+++ b/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/
diff --git a/package.json b/package.json
index 4f8dfd7..d085d6b 100644
--- a/package.json
+++ b/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",
diff --git a/src/css/avalynx-datatable.css b/src/css/avalynx-datatable.css
index 267c485..0cdf369 100644
--- a/src/css/avalynx-datatable.css
+++ b/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/
diff --git a/src/js/avalynx-datatable.js b/src/js/avalynx-datatable.js
index e54431f..4bbe77f 100644
--- a/src/js/avalynx-datatable.js
+++ b/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": `
-