Merge pull request #2 from avalynx/feature/table-sort

Feature/table sort

Author: jschwind

README.de.md

@@ -15,13 +15,21 @@ AvalynxTable ist ein leichtgewichtiges, abhängigkeitsfreies Tabellensystem, das
 - **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.
+- **Optionale Sortierung**: Sortieren per Klick auf Spaltenüberschriften (aufsteigend/absteigend), sobald `options.sorting` konfiguriert ist.
+- **Multi-Sort-Unterstützung**: Auf Desktop mit `Ctrl` oder `Shift` mehrere Spalten sortieren. Im Stacked-Modus wird ein eigener Multi-Sort-Schalter angezeigt.
+- **Konfigurierbare Sortierspalten und Defaults**: Definieren Sie sortierbare Spalten und initiale Sortierungen per Index, Spaltenname oder `data-avalynx-table-sort-id`.
+- **Benutzerdefinierte Sortierwerte**: Mit `data-avalynx-table-sort-value` lassen sich formatierte Werte wie Währungen sauber sortieren.
+- **Stacked-Sortiersteuerung**: In der gestapelten Ansicht werden automatisch mobile Sortierbuttons eingeblendet.
+- **Anpassbare Sprache und Button-Klassen**: Beschriftungen und CSS-Klassen für Sortierbuttons sind konfigurierbar.
 
 ## 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 Options-Buttons](https://avalynx-table.jbs-newmedia.de/examples/table-options.html)
+* [Tabelle mit Sortierung](https://avalynx-table.jbs-newmedia.de/examples/table-sorting.html)
 * [Tabelle mit benutzerdefinierten CSS-Variablen](https://avalynx-table.jbs-newmedia.de/examples/table-custom-css.html)
 
 ## Installation
@@ -50,8 +58,8 @@ Ersetzen Sie `path/to/avalynx-table.js` und `path/to/avalynx-table.css` durch de
 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>
+<link href="https://cdn.jsdelivr.net/npm/avalynx-table@1.0.3/dist/css/avalynx-table.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/avalynx-table@1.0.3/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.
@@ -142,12 +150,124 @@ Um AvalynxTable in Ihrem Projekt zu verwenden, stellen Sie zunächst sicher, das
 new AvalynxTable('.avalynx-table');
 ```
 
+### Verwendung mit Sortieroptionen
+
+```html
+<table id="table-sorting" class="avalynx-table avalynx-table-md table table-bordered table-striped">
+  <thead>
+  <tr>
+    <th data-avalynx-table-sort-id="id">ID</th>
+    <th data-avalynx-table-sort-id="name">Name</th>
+    <th data-avalynx-table-sort-id="department">Abteilung</th>
+    <th data-avalynx-table-sort-id="salary">Gehalt</th>
+    <th data-avalynx-sortable="false">Status</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td data-avalynx-table-sort-value="1002">1002</td>
+    <td>Max Mustermann</td>
+    <td>Vertrieb</td>
+    <td data-avalynx-table-sort-value="62000">62.000 €</td>
+    <td>Aktiv</td>
+  </tr>
+  </tbody>
+</table>
+```
+
+```javascript
+new AvalynxTable('#table-sorting', {
+  sortableColumns: ['department', 'name', 'salary'],
+  sorting: [
+    { column: 'department', dir: 'asc' },
+    { column: 'name', dir: 'asc' }
+  ],
+  stackedSorter: true,
+  stackedMultiSortToggle: true
+});
+```
+
+### Verwendung mit Sprache und Button-Class-Strings
+
+```javascript
+new AvalynxTable('.avalynx-table', {
+  buttonClasses: {
+    multiSortInactive: 'btn-primary btn-custom-2',
+    multiSortActive: 'btn-primary btn-custom-3',
+    sortButtonInactive: 'btn-outline-primary btn-custom-2',
+    sortButtonActive: 'btn-primary btn-custom-3'
+  }
+}, {
+  sortByLabel: 'Sortiere nach',
+  multiSortLabel: 'Mehrfachsuche',
+  multiSortOnLabel: 'an',
+  multiSortOffLabel: 'aus',
+  columnLabel: 'Spalte'
+});
+```
+
 ## 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**)
+- `options.sortableColumns`: (`Array<number|string>`) Sortierbare Spalten per Index, Spaltentext oder `data-avalynx-table-sort-id`.
+- `options.sorting`: (`Array<{column:number|string,dir:string}>`) Initiale Sortierung, z.B. `[{ column: 'name', dir: 'asc' }]`.
+  Die Sortierung ist nur aktiv, wenn dieses Array mindestens eine Regel enthält.
+- `options.stackedSorter`: (`boolean`) Gestapelte Sortiersteuerung anzeigen (Standard: `true`).
+- `options.stackedMultiSortToggle`: (`boolean`) Multi-Sort-Umschalter im Stacked-Modus anzeigen (Standard: `true`).
+- `options.buttonClasses`: (`object`) Class-Strings für gestapelte Buttons:
+  - `multiSortInactive`
+  - `multiSortActive`
+  - `sortButtonInactive`
+  - `sortButtonActive`
+  - Aliase: `multiSearchInactive`, `multiSearchActive`
+
+### Sortierbezogene Datenattribute
+
+- `data-avalynx-table-sort-id`: Stabile ID für Header, die in `sortableColumns` und `sorting` referenziert werden kann.
+- `data-avalynx-sortable="false"`: Schließt eine Spalte explizit von der Sortierung aus.
+- `data-avalynx-table-sort-value`: Optionaler normalisierter Wert für die Sortierung von Zellinhalten.
+
+### Responsive-Klassen
+
+Nutzen Sie eine der integrierten Tabellenklassen, um den Stacking-Breakpoint festzulegen:
+
+- `.avalynx-table` (sm)
+- `.avalynx-table-md`
+- `.avalynx-table-lg`
+- `.avalynx-table-xl`
+- `.avalynx-table-xxl`
+
+### CSS-Variablen
+
+Das Verhalten im Stacked-Modus kann über CSS-Variablen angepasst werden, z.B.:
+
+- `--avalynx-table-cell-padding-left`
+- `--avalynx-table-cell-before-width`
+- `--avalynx-table-before-content`
+- `--avalynx-table-before-weight`
+
+### Sprache
+
+Texte werden über den dritten Constructor-Parameter `language` konfiguriert:
+
+- `sortByLabel`
+- `multiSortLabel`
+- `multiSortOnLabel`
+- `multiSortOffLabel`
+- `columnLabel`
+- Aliase: `multiSearchLabel`, `multiSearchOnLabel`, `multiSearchOffLabel`
+
+```javascript
+new AvalynxTable('.avalynx-table', {}, {
+  sortByLabel: 'Sortiere nach',
+  multiSortLabel: 'Mehrfachsuche',
+  multiSortOnLabel: 'an',
+  multiSortOffLabel: 'aus',
+  columnLabel: 'Spalte'
+});
+```
 
 ## Mitwirken
 

README.md

@@ -15,13 +15,21 @@ AvalynxTable is a lightweight, dependency-free table system designed for respons
 - **Automatic Table Enhancement**: Enhances tables by adding data attributes to table cells based on the corresponding header row. This is particularly useful for responsive designs where table cells may need to display their headers inline on smaller screens.
 - **Flexible Selector Support**: Supports custom selectors for targeting tables within the DOM. This allows for fine-grained control over which tables are enhanced.
 - **Custom Breakpoints**: Allows you to specify custom breakpoints for when tables should stack on top of each other. This is useful for creating a consistent user experience across different screen sizes.
+- **Opt-in Sorting**: Click table headers to sort columns in ascending/descending order when `options.sorting` is configured.
+- **Multi-Sort Support**: Use `Ctrl` or `Shift` on desktop for multi-column sorting. In stacked mode, a dedicated multi-sort toggle is shown.
+- **Configurable Sort Columns and Defaults**: Define sortable columns and initial sorting by column index, header name, or `data-avalynx-table-sort-id`.
+- **Custom Sort Values**: Use `data-avalynx-table-sort-value` for robust sorting of formatted values like currency.
+- **Stacked Sort Controls**: In stacked view, mobile-friendly sorting buttons are rendered automatically.
+- **Language and Button Class Overrides**: Customize sorting labels and stacked control button classes.
 
 ## Example
 
 Here's a simple example of how to use AvalynxTable in your project:
 
 * [Overview](https://avalynx-table.jbs-newmedia.de/examples/index.html)
 * [Table](https://avalynx-table.jbs-newmedia.de/examples/table.html)
+* [Table with Options Buttons](https://avalynx-table.jbs-newmedia.de/examples/table-options.html)
+* [Table with Sorting](https://avalynx-table.jbs-newmedia.de/examples/table-sorting.html)
 * [Table with Custom CSS Variables](https://avalynx-table.jbs-newmedia.de/examples/table-custom-css.html)
 
 ## Installation
@@ -50,8 +58,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.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>
+<link href="https://cdn.jsdelivr.net/npm/avalynx-table@1.0.3/dist/css/avalynx-table.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/avalynx-table@1.0.3/dist/js/avalynx-table.min.js"></script>
 ```
 
 Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxTable displays correctly.
@@ -142,12 +150,124 @@ To use AvalynxTable in your project, first ensure you have tables marked up in y
 new AvalynxTable('.avalynx-table');
 ```
 
+### Usage with sorting options
+
+```html
+<table id="table-sorting" class="avalynx-table avalynx-table-md table table-bordered table-striped">
+  <thead>
+  <tr>
+    <th data-avalynx-table-sort-id="id">ID</th>
+    <th data-avalynx-table-sort-id="name">Name</th>
+    <th data-avalynx-table-sort-id="department">Department</th>
+    <th data-avalynx-table-sort-id="salary">Salary</th>
+    <th data-avalynx-sortable="false">Status</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td data-avalynx-table-sort-value="1002">1002</td>
+    <td>Max Mustermann</td>
+    <td>Sales</td>
+    <td data-avalynx-table-sort-value="62000">62.000 €</td>
+    <td>Active</td>
+  </tr>
+  </tbody>
+</table>
+```
+
+```javascript
+new AvalynxTable('#table-sorting', {
+  sortableColumns: ['department', 'name', 'salary'],
+  sorting: [
+    { column: 'department', dir: 'asc' },
+    { column: 'name', dir: 'asc' }
+  ],
+  stackedSorter: true,
+  stackedMultiSortToggle: true
+});
+```
+
+### Usage with language and button class strings
+
+```javascript
+new AvalynxTable('.avalynx-table', {
+  buttonClasses: {
+    multiSortInactive: 'btn-primary btn-custom-2',
+    multiSortActive: 'btn-primary btn-custom-3',
+    sortButtonInactive: 'btn-outline-primary btn-custom-2',
+    sortButtonActive: 'btn-primary btn-custom-3'
+  }
+}, {
+  sortByLabel: 'Sort by',
+  multiSortLabel: 'Multi-search',
+  multiSortOnLabel: 'on',
+  multiSortOffLabel: 'off',
+  columnLabel: 'Column'
+});
+```
+
 ## Options
 
 AvalynxTable allows the following options for customization:
 
 - `selector`: (string) The selector to use for targeting tables within the DOM (default: `'.avalynx-table'`).
-- `options`: An object containing the following keys: (**coming soon**)
+- `options.sortableColumns`: (`Array<number|string>`) Sortable columns by index, header text, or `data-avalynx-table-sort-id`.
+- `options.sorting`: (`Array<{column:number|string,dir:string}>`) Initial sorting, for example `[{ column: 'name', dir: 'asc' }]`.
+  Sorting is active only when this array contains at least one rule.
+- `options.stackedSorter`: (`boolean`) Show stacked sorting controls (default: `true`).
+- `options.stackedMultiSortToggle`: (`boolean`) Show multi sort toggle button in stacked mode (default: `true`).
+- `options.buttonClasses`: (`object`) Class strings for stacked buttons:
+  - `multiSortInactive`
+  - `multiSortActive`
+  - `sortButtonInactive`
+  - `sortButtonActive`
+  - aliases: `multiSearchInactive`, `multiSearchActive`
+
+### Sorting-related data attributes
+
+- `data-avalynx-table-sort-id`: Stable id for a header that can be referenced in `sortableColumns` and `sorting`.
+- `data-avalynx-sortable="false"`: Explicitly excludes a column from sorting.
+- `data-avalynx-table-sort-value`: Optional normalized value used for sorting cell content.
+
+### Responsive classes
+
+Use one of the built-in table classes to define when stacking starts:
+
+- `.avalynx-table` (sm)
+- `.avalynx-table-md`
+- `.avalynx-table-lg`
+- `.avalynx-table-xl`
+- `.avalynx-table-xxl`
+
+### CSS variables
+
+You can adjust stacked rendering with CSS variables, for example:
+
+- `--avalynx-table-cell-padding-left`
+- `--avalynx-table-cell-before-width`
+- `--avalynx-table-before-content`
+- `--avalynx-table-before-weight`
+
+### Language
+
+Texts are configured via the third constructor parameter `language`:
+
+- `sortByLabel`
+- `multiSortLabel`
+- `multiSortOnLabel`
+- `multiSortOffLabel`
+- `columnLabel`
+- aliases: `multiSearchLabel`, `multiSearchOnLabel`, `multiSearchOffLabel`
+
+```javascript
+new AvalynxTable('.avalynx-table', {}, {
+  sortByLabel: 'Sortiere nach',
+  multiSortLabel: 'Mehrfachsuche',
+  multiSortOnLabel: 'an',
+  multiSortOffLabel: 'aus',
+  columnLabel: 'Spalte'
+});
+```
 
 ## Contributing