> For the complete documentation index, see [llms.txt](https://biglazytables.gitbook.io/big-lazy-tables/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://biglazytables.gitbook.io/big-lazy-tables/funktionen/filtering-and-sorting/sorting.md).
# Sorting
Beschreibt den internen Ablauf bei der Sortierung eines beliebigen Datensatzes in der Tabelle.
Sortierungs-Logik: View-Side (aktiv)
Die Eingabe Logik des Sortings liegt im [Table Headers Projector](/big-lazy-tables/system/module/projectors/table-headers.md). Durch die Eingabe des Endnutzers wird dem [Controller ](/big-lazy-tables/system/module/controller.md)der Sortierungszustand und die selektierte Spalte mitgegeben.
#### EventListener für Table Header Cells
```javascript
for (let columnIndex = 0; columnIndex < tableController.getKeysLength(); columnIndex++){
const tableHeaderCells = rootElement.querySelectorAll('[data-column-index]');
tableHeaderCells[columnIndex].querySelectorAll('.table-header-content-wrapper')[0].addEventListener("click", _ => {
if(tableController.getFilter().ColumnSorter.state === "" || tableController.getFilter().ColumnSorter.state === "asc") {
tableController.setColumnSorter(columnIndex, "desc");
}
else if(tableController.getFilter().ColumnSorter.state === "desc" && tableController.getFilter().ColumnSorter.column !== columnIndex) {
tableController.setColumnSorter(columnIndex, "desc");
}
else if(tableController.getFilter().ColumnSorter.state === "asc" && tableController.getFilter().ColumnSorter.column !== columnIndex) {
tableController.setColumnSorter(columnIndex, "desc");
}
else if(tableController.getFilter().ColumnSorter.state === "desc") {
tableController.setColumnSorter(columnIndex, "asc");
}
});
}
```
Sortierungs-Logik: Controller-Side
Der [Controller ](/big-lazy-tables/system/module/controller.md)fängt die Eingabe des Endnutzers ab und prüft ob der Spaltenindex und der Sortierungszustand valide sind.
Anschliessend wird das angepasste [Filterobjekt ](/big-lazy-tables/funktionen/filtering-and-sorting.md#filter-objekt)dem [Model ](/big-lazy-tables/system/module/presentation-model.md)übergeben.
```javascript
const setColumnSorter = (columnIndex, state) => {
const newFilterObject = { ...presentationModel.getFilter() }; //create shallow copy to trigger onFilterChanged()
//column handling
if (columnIndex < 0 || columnIndex >= presentationModel.getEntryKeys().length) {
console.warn(`received illegal columnIndex in setColumnSorter: ${columnIndex} -> was instead set to 0`);
newFilterObject.ColumnSorter.column = 0;
} else {
newFilterObject.ColumnSorter.column = columnIndex;
}
//state handling
if (state !== "desc" && state !== "asc") {
console.warn(`received illegal state in setColumnSorter: ${state} -> was instead set to ""`);
newFilterObject.ColumnSorter.state = "";
} else {
newFilterObject.ColumnSorter.state = state;
}
//set new filter
presentationModel.setFilter(newFilterObject);
}
```
Sortierungs-Logik: Service-Side
Durch das Verändern des [Filter Objekts](/big-lazy-tables/funktionen/filtering-and-sorting.md#filter-objekt) wird eine neue Anfrage an den Service gestartet.
Das neue [Filterobjekt ](/big-lazy-tables/funktionen/filtering-and-sorting.md#filter-objekt)wird dem [Service ](/big-lazy-tables/system/module/service.md)mitgegeben und mit der [sort-Funktion](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) werden die Einträge im Datensatz entsprechend dem Sortierungszustand sortiert.
```javascript
if (filter.ColumnSorter.state === "desc") {
entriesProxy.sort((a, b) => a[Object.keys(a)[filter.ColumnSorter.column]] > b[Object.keys(b)[filter.ColumnSorter.column]] ? 1 : -1);
} else if (filter.ColumnSorter.state === "asc") {
entriesProxy.sort((a, b) => a[Object.keys(a)[filter.ColumnSorter.column]] < b[Object.keys(b)[filter.ColumnSorter.column]] ? 1 : -1);
}
```
Der nun sortierte [Daten-Batch](/big-lazy-tables/funktionen/scrolling-and-lazy-loading/data-fetching-und-mapping.md) wird **asynchron** vom Controller abgeholt und im Model abgelegt.
Sortierungs-Logik: View-Side (reaktiv)
Die View wird nun benachrichtigt, dass sich die Daten geändert haben und auf dem [Body Projector](/big-lazy-tables/system/module/projectors/table-body.md) wird ein internes Update ausgeführt:
```javascript
tableController.onDataReset(() => {
buildTableBody();
updateTableFillSizes();
scrollToTop();
updateTableBodyContent();
});
```
### Sequenzdiagramm Sortierung
Veranschaulicht den internen Ablauf beim Auslösen der Sortierung durch den Endnutzer und fasst die zuvor beschrieben Schritte zusammen:
