> 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/column-resizing.md).

# Column Resizing

Beschreibt den internen Ablauf bei der Grössenänderung einer beliebigen Spalte der Tabelle.

Die [BLT](/big-lazy-tables/bachelorarbeit-ip6-big-lazy-tables-fur-das-kolibri-toolkit.md) unterstützt eine Veränderung der Spaltenbreite zur Laufzeit. 

Initial werden die Spaltenbreiten vom Entwickler im tableConfig definiert und dem [Presentation Model](/big-lazy-tables/system/module/presentation-model.md) mitgegeben. Die Breiten sind in einem observierbaren Array abgelegt. 

Eine [Table Headers](/big-lazy-tables/system/module/projectors/table-headers.md) Zelle verfügt über ein Resizing Element, welches der Endnutzer bewegen kann um die Breite der ausgewählten Spalte zu verändern. Die darunterliegenden Zellen ([Filters](/big-lazy-tables/system/module/projectors/filters.md) Zellen, [Table Body](/big-lazy-tables/system/module/projectors/table-body.md) Zellen) und die Table Headers Zellen selbst registrieren sich darauf, dass wenn sich eine Spaltenbreite im Modell ändert, ein Resizing stattfindet. 

```javascript
//PseudoCode
tableController.onColumnWidthsChanged(() => {
        update[Projector]ColumnWidths();
    });
```

Immer wenn sich die Breite einer Spalte ändert, wird die Breite der danebenliegende Spalte dementsprechend auch angepasst.

### Sequenzdiagremm Column Resizing

Veranschaulicht den internen Ablauf beim Verändern einer Spaltenbreite durch den Endnutzer:

![Sequenzdiagramm: Column Resizing](https://3950294961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fc3pqMW5ZzqJsqoL0PPqS%2Fuploads%2Fj6L0NIgPn7XkIsrbU1Rl%2FSequence%20Diagram%20column%20resizing.png?alt=media\&token=ec3e2b20-027b-402a-a6c4-98dd1ba3c9bf)

Der [Header Projector](/big-lazy-tables/system/module/projectors/table-headers.md) teilt dem Controller mit, dass sich eine Spaltenbreite verändert hat. Der Controller nimmt den neuen Wert und berechnet ebenfalls für die rechts daneben liegende Spalte die neue Breite. Die beiden Werte werden anschliessend an den entsprechenden Stellen im bestehenden Array  im Model ersetzt.

```javascript
const setColumnWidths = (columnIndex, columnWidth) => {
        const newColumnWidths = [ ...presentationModel.getColumnWidths() ];
        newColumnWidths[columnIndex] = columnWidth;
        newColumnWidths[columnIndex + 1] = presentationModel.getColumnWidths()[columnIndex + 1] + (presentationModel.getColumnWidths()[columnIndex] - columnWidth);
        presentationModel.setColumnWidths(newColumnWidths);
    }
```

Der [Header Projector](/big-lazy-tables/system/module/projectors/table-headers.md), der[ Filters Projector](/big-lazy-tables/system/module/projectors/filters.md) und der [Body Projector](/big-lazy-tables/system/module/projectors/table-body.md) sind darauf registriert, dass wenn sich die Spaltenbreiten im observierbaren Array aus dem Model ändern, sie sich selbständig entsprechend den neuen Spaltenbreiten anpassen.

### Weshalb passen sich die Spaltenbreiten initial nicht am Datensatz an?

Die Daten werden "[lazy](broken://pages/QTlo9Wz5IkETfnvayeIM)" geholt, zum Zeitpunkt der Initialisierung der Tabelle, weiss sie nicht wie gross die breiteste Spalte sein soll, ausgehend vom längsten Eintrag. Deshalb geben wir dem Entwickler die Spaltenbreiten initial zu bestimmen und dem Endnutzer die Chance diese zu vergrössern, wenn ein Eintrag kein Platz haben sollte. (-> abgeschnittene Inhalte werden via CSS mit [Ellipsis ](https://developer.mozilla.org/de/docs/Web/CSS/text-overflow)markiert)

Bei der Zeilenhöhe sind wir eingeschränkt, weil wir für viele Berechnungen von einer fixen Grösse ausgehen müssen.