Bump AvalynxTable version to 1.0.2: updated version references, enhanced Jest with coverage thresholds, added CommonJS export, included German README, and switched examples to use local asset paths.

jschwind · jschwind · commit 0c258f5c8d32 · 2026-02-25T13:38:57.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 /.idea/
+/ai.txt
+/coverage/
 /node_modules/
-/package-lock.json
diff --git a/README.de.md b/README.de.md
@@ -0,0 +1,170 @@
+# AvalynxTable
+
+[![npm version](https://img.shields.io/npm/v/avalynx-table)](https://www.npmjs.com/package/avalynx-table)
+[![npm downloads](https://img.shields.io/npm/dt/avalynx-table)](https://www.npmjs.com/package/avalynx-table)
+[![jsDelivr](https://img.shields.io/jsdelivr/npm/hm/avalynx-table)](https://www.jsdelivr.com/package/npm/avalynx-table)
+[![Lizenz](https://img.shields.io/npm/l/avalynx-table)](LICENSE)
+[![Tests](https://github.com/avalynx/avalynx-table/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/avalynx/avalynx-table/actions/workflows/tests.yml)
+[![codecov](https://codecov.io/gh/avalynx/avalynx-table/branch/main/graph/badge.svg)](https://codecov.io/gh/avalynx/avalynx-table)
+[![GitHub stars](https://img.shields.io/github/stars/avalynx/avalynx-table?style=flat&logo=github)](https://github.com/avalynx/avalynx-table)
+
+AvalynxTable ist ein leichtgewichtiges, abhängigkeitsfreies Tabellensystem, das für responsive Webanwendungen entwickelt wurde. Es nutzt Bootstrap (Version 5.3 oder höher), um eine nahtlose Integration in Ihr Projekt zu ermöglichen. Wenn der Breakpoint der Tabelle erreicht wird, werden die Zeilen und Spalten übereinander gestapelt, um eine leicht lesbare Ansicht zu erstellen.
+
+## Funktionen
+
+- **Automatische Tabellenerweiterung**: Erweitert Tabellen durch Hinzufügen von Datenattributen zu Tabellenzellen basierend auf der entsprechenden Kopfzeile. Dies ist besonders nützlich für responsive Designs, bei denen Tabellenzellen ihre Header auf kleineren Bildschirmen inline anzeigen müssen.
+- **Flexible Selector-Unterstützung**: Unterstützt benutzerdefinierte Selektoren für das Ansprechen von Tabellen innerhalb des DOM. Dies ermöglicht eine feingranulare Kontrolle darüber, welche Tabellen erweitert werden.
+- **Benutzerdefinierte Breakpoints**: Ermöglicht die Angabe benutzerdefinierter Breakpoints für den Zeitpunkt, an dem Tabellen übereinander gestapelt werden sollen. Dies ist nützlich, um eine konsistente Benutzererfahrung über verschiedene Bildschirmgrößen hinweg zu schaffen.
+
+## Beispiel
+
+Hier ist ein einfaches Beispiel für die Verwendung von AvalynxTable in Ihrem Projekt:
+
+* [Übersicht](https://avalynx-table.jbs-newmedia.de/examples/index.html)
+* [Tabelle](https://avalynx-table.jbs-newmedia.de/examples/table.html)
+* [Tabelle mit benutzerdefinierten CSS-Variablen](https://avalynx-table.jbs-newmedia.de/examples/table-custom-css.html)
+
+## Installation
+
+Um AvalynxTable in Ihrem Projekt zu verwenden, können Sie es direkt in Ihre HTML-Datei einbinden. Stellen Sie sicher, dass Sie Bootstrap 5.3 oder höher in Ihrem Projekt eingebunden haben, damit AvalynxTable korrekt funktioniert.
+
+Zuerst Bootstrap einbinden:
+
+```html
+<!-- Bootstrap -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js"></script>
+```
+
+Dann AvalynxTable einbinden:
+
+```html
+<link href="path/to/avalynx-table.css" rel="stylesheet">
+<script src="path/to/avalynx-table.js"></script>
+```
+
+Ersetzen Sie `path/to/avalynx-table.js` und `path/to/avalynx-table.css` durch den tatsächlichen Pfad zu den Dateien in Ihrem Projekt.
+
+## Installation über jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-table/))
+
+AvalynxTable ist auch über [jsDelivr](https://www.jsdelivr.com/) verfügbar. Sie können es wie folgt in Ihr Projekt einbinden:
+
+```html
+<link href="https://cdn.jsdelivr.net/npm/avalynx-table@1.0.2/dist/css/avalynx-table.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/avalynx-table@1.0.2/dist/js/avalynx-table.min.js"></script>
+```
+
+Stellen Sie sicher, dass Sie auch das JS/CSS von Bootstrap in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxTable zu gewährleisten.
+
+## Installation über NPM ([Link](https://www.npmjs.com/package/avalynx-table))
+
+AvalynxTable ist auch als npm-Paket verfügbar. Sie können es mit dem folgenden Befehl zu Ihrem Projekt hinzufügen:
+
+```bash
+npm install avalynx-table
+```
+
+Nach der Installation können Sie AvalynxTable wie folgt in Ihre JavaScript-Datei importieren:
+
+```javascript
+import { AvalynxTable } from 'avalynx-table';
+import 'avalynx-table/dist/css/avalynx-table.min.css';
+```
+
+Stellen Sie sicher, dass Sie auch das JS/CSS von Bootstrap in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxTable zu gewährleisten.
+
+## Installation über Symfony AssetMapper
+
+```bash
+php bin/console importmap:require avalynx-table
+```
+
+Nach der Installation können Sie AvalynxTable wie folgt in Ihre JavaScript-Datei importieren:
+
+```javascript
+import { AvalynxTable } from 'avalynx-table';
+import 'avalynx-table/dist/css/avalynx-table.min.css';
+```
+
+Stellen Sie sicher, dass Sie auch das JS/CSS von Bootstrap in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxTable zu gewährleisten.
+
+## Installation über Symfony AssetComposer
+
+Weitere Informationen zum Symfony AssetComposer Bundle finden Sie [hier](https://github.com/jbsnewmedia/asset-composer-bundle).
+
+```twig
+{% do addAssetComposer('avalynx/avalynx-table/dist/css/avalynx-table.css') %}
+{% do addAssetComposer('avalynx/avalynx-table/dist/js/avalynx-table.js') %}
+```
+
+Stellen Sie sicher, dass Sie auch das JS/CSS von Bootstrap in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxTable zu gewährleisten.
+
+## Installation über Composer ([Link](https://packagist.org/packages/avalynx/avalynx-table))
+
+AvalynxTable ist auch als Composer-Paket verfügbar. Sie können es mit dem folgenden Befehl zu Ihrem Projekt hinzufügen:
+
+```bash
+composer require avalynx/avalynx-table
+```
+
+Nach der Installation können Sie AvalynxTable wie folgt in Ihre HTML-Datei einbinden:
+
+```html
+<link href="vendor/avalynx/avalynx-table/dist/css/avalynx-table.css" rel="stylesheet">
+<script src="vendor/avalynx/avalynx-table/dist/js/avalynx-table.js"></script>
+``` 
+
+Stellen Sie sicher, dass Sie auch das JS/CSS von Bootstrap in Ihr Projekt einbinden, um eine korrekte Anzeige von AvalynxTable zu gewährleisten.
+
+## Verwendung
+
+Um AvalynxTable in Ihrem Projekt zu verwenden, stellen Sie zunächst sicher, dass Sie Tabellen in Ihrem HTML entsprechend markiert haben. Binden Sie dann die JavaScript-Datei von AvalynxTable in Ihr Projekt ein und initialisieren Sie die Klasse mit dem entsprechenden Selektor.
+
+```html
+<table class="avalynx-table table table-bordered table-striped">
+  <thead>
+  <tr>
+    <th>Header 1</th>
+    <th>Header 2</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>Zelle 1</td>
+    <td>Zelle 2</td>
+  </tr>
+  <!-- Weitere Zeilen... -->
+  </tbody>
+</table>
+```
+
+```javascript
+new AvalynxTable('.avalynx-table');
+```
+
+## Optionen
+
+AvalynxTable ermöglicht die folgenden Optionen zur Anpassung:
+
+- `selector`: (string) Der Selektor, der für das Ansprechen von Tabellen innerhalb des DOM verwendet werden soll (Standard: `'.avalynx-table'`).
+- `options`: Ein Objekt, das die folgenden Schlüssel enthält: (**demnächst**)
+
+## Mitwirken
+
+Beiträge sind willkommen! Wenn Sie einen Beitrag leisten möchten, forken Sie bitte das Repository und senden Sie einen Pull-Request mit Ihren Änderungen oder Verbesserungen. Wir suchen nach Beiträgen in den folgenden Bereichen:
+
+- Fehlerbehebungen (Bug fixes)
+- Funktionserweiterungen
+- Dokumentationsverbesserungen
+
+Bevor Sie Ihren Pull-Request absenden, stellen Sie bitte sicher, dass Ihre Änderungen gut dokumentiert sind und dem bestehenden Codestil des Projekts entsprechen.
+
+## Lizenz
+
+AvalynxTable ist eine quelloffene Software, die unter der [MIT-Lizenz](LICENSE) lizenziert ist.
+
+## Kontakt
+
+Wenn Sie Fragen, Funktionswünsche oder Probleme haben, eröffnen Sie bitte ein Issue in unserem [GitHub-Repository](https://github.com/avalynx/avalynx-table/issues) oder senden Sie einen Pull-Request.
+
+Vielen Dank, dass Sie AvalynxTable für Ihr Projekt in Betracht ziehen!
diff --git a/README.md b/README.md
@@ -1,5 +1,13 @@
 # AvalynxTable
 
+[![npm version](https://img.shields.io/npm/v/avalynx-table)](https://www.npmjs.com/package/avalynx-table)
+[![npm downloads](https://img.shields.io/npm/dt/avalynx-table)](https://www.npmjs.com/package/avalynx-table)
+[![jsDelivr](https://img.shields.io/jsdelivr/npm/hm/avalynx-table)](https://www.jsdelivr.com/package/npm/avalynx-table)
+[![License](https://img.shields.io/npm/l/avalynx-table)](LICENSE)
+[![Tests](https://github.com/avalynx/avalynx-table/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/avalynx/avalynx-table/actions/workflows/tests.yml)
+[![codecov](https://codecov.io/gh/avalynx/avalynx-table/branch/main/graph/badge.svg)](https://codecov.io/gh/avalynx/avalynx-table)
+[![GitHub stars](https://img.shields.io/github/stars/avalynx/avalynx-table?style=flat&logo=github)](https://github.com/avalynx/avalynx-table)
+
 AvalynxTable is a lightweight, dependency-free table system designed for responsive web applications. It leverages Bootstrap (version 5.3 or higher) to provide a seamless integration with your project. When the table's breakpoint is reached, the rows and columns stack on top of each other to create an easily readable view.
 
 ## Features
@@ -42,8 +50,8 @@ Replace `path/to/avalynx-table.js` and `path/to/avalynx-table.css` with the actu
 AvalynxTable 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-table@1.0.1/dist/css/avalynx-table.min.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/avalynx-table@1.0.1/dist/js/avalynx-table.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/avalynx-table@1.0.2/dist/css/avalynx-table.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/avalynx-table@1.0.2/dist/js/avalynx-table.min.js"></script>
 ```
 
 Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxTable displays correctly.
diff --git a/dist/css/avalynx-table.css b/dist/css/avalynx-table.css
@@ -3,7 +3,7 @@
  *
  * A simple table system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 1.0.1
+ * @version 1.0.2
  * @license MIT
  * @author https://github.com/avalynx/avalynx-table/graphs/contributors
  * @website https://github.com/avalynx/
diff --git a/dist/js/avalynx-table.esm.js b/dist/js/avalynx-table.esm.js
@@ -3,7 +3,7 @@
  *
  * A simple table system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 1.0.1
+ * @version 1.0.2
  * @license MIT
  * @author https://github.com/avalynx/avalynx-table/graphs/contributors
  * @website https://github.com/avalynx/
@@ -52,4 +52,9 @@ export class AvalynxTable {
             });
         });
     }
-}
+}
+
+/* istanbul ignore next */
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = AvalynxTable;
+}
diff --git a/dist/js/avalynx-table.js b/dist/js/avalynx-table.js
@@ -3,7 +3,7 @@
  *
  * A simple table system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 1.0.1
+ * @version 1.0.2
  * @license MIT
  * @author https://github.com/avalynx/avalynx-table/graphs/contributors
  * @website https://github.com/avalynx/
@@ -52,6 +52,7 @@ class AvalynxTable {
     }
 }
 
+/* istanbul ignore next */
 if (typeof module !== 'undefined' && module.exports) {
     module.exports = AvalynxTable;
 }
diff --git a/examples/table-custom-css.html b/examples/table-custom-css.html
@@ -16,9 +16,9 @@
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/styles/stackoverflow-light.min.css" id="hljsTheme">
 	<script>hljs.highlightAll();</script>
 
-	<!-- AvalynxTable 1.0.1 -->
-    <link href="https://cdn.jsdelivr.net/npm/avalynx-table@1.0.1/dist/css/avalynx-table.min.css" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/avalynx-table@1.0.1/dist/js/avalynx-table.min.js"></script>
+    <!-- AvalynxTable -->
+    <link href="../src/css/avalynx-table.css" rel="stylesheet">
+    <script src="../src/js/avalynx-table.min.js"></script>
 
 	<!-- Example helper -->
 	<link href="./css/helper.css" rel="stylesheet">
diff --git a/examples/table.html b/examples/table.html
@@ -16,9 +16,9 @@
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/styles/stackoverflow-light.min.css" id="hljsTheme">
 	<script>hljs.highlightAll();</script>
 
-	<!-- AvalynxTable 1.0.1 -->
-	<link href="https://cdn.jsdelivr.net/npm/avalynx-table@1.0.1/dist/css/avalynx-table.min.css" rel="stylesheet">
-	<script src="https://cdn.jsdelivr.net/npm/avalynx-table@1.0.1/dist/js/avalynx-table.min.js"></script>
+	<!-- AvalynxTable -->
+	<link href="../src/css/avalynx-table.css" rel="stylesheet">
+	<script src="../src/js/avalynx-table.min.js"></script>
 
 	<!-- Example helper -->
 	<link href="./css/helper.css" rel="stylesheet">
diff --git a/jest.config.js b/jest.config.js
@@ -8,4 +8,15 @@ module.exports = {
     transform: {
         "^.+\\.js$": "babel-jest"
     },
+    collectCoverage: true,
+    collectCoverageFrom: ["src/**/*.js"],
+    coverageReporters: ["text", "lcov", "html"],
+    coverageThreshold: {
+        global: {
+            branches: 100,
+            functions: 100,
+            lines: 100,
+            statements: 100
+        }
+    }
 };
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "avalynx-table",
   "title": "AvalynxTable",
   "description": "AvalynxTable is a simple table system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "MIT",
   "main": "dist/js/avalynx-table.js",
   "module": "dist/js/avalynx-table.esm.js",
@@ -44,12 +44,12 @@
     "bootstrap": ">=5.3"
   },
   "devDependencies": {
-    "@babel/core": "^7",
-    "@babel/preset-env": "^7",
-    "babel-jest": "^29",
-    "jest": "^29",
-    "jest-environment-jsdom": "^29",
-    "shelljs": "^0",
-    "shx": "^0"
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "babel-jest": "^30.2.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "shelljs": "^0.10.0",
+    "shx": "^0.4.0"
   }
 }
diff --git a/src/css/avalynx-table.css b/src/css/avalynx-table.css
@@ -3,7 +3,7 @@
  *
  * A simple table system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 1.0.1
+ * @version 1.0.2
  * @license MIT
  * @author https://github.com/avalynx/avalynx-table/graphs/contributors
  * @website https://github.com/avalynx/
diff --git a/src/js/avalynx-table.js b/src/js/avalynx-table.js
@@ -3,7 +3,7 @@
  *
  * A simple table system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
  *
- * @version 1.0.1
+ * @version 1.0.2
  * @license MIT
  * @author https://github.com/avalynx/avalynx-table/graphs/contributors
  * @website https://github.com/avalynx/
@@ -52,6 +52,7 @@ class AvalynxTable {
     }
 }
 
+/* istanbul ignore next */
 if (typeof module !== 'undefined' && module.exports) {
     module.exports = AvalynxTable;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`/.idea/`
	`2`	`+/ai.txt`
	`3`	`+/coverage/`
`2`	`4`	`/node_modules/`
`3`		`-/package-lock.json`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`*`
`4`	`4`	`* A simple table system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.`
`5`	`5`	`*`
`6`		`- * @version 1.0.1`
	`6`	`+ * @version 1.0.2`
`7`	`7`	`* @license MIT`
`8`	`8`	`* @author https://github.com/avalynx/avalynx-table/graphs/contributors`
`9`	`9`	`* @website https://github.com/avalynx/`