columns

richtet die columns in der Tabelle ein

GridColumn[] columns;

Example

// Standard-Columns Definition
gantt.config.columns = [
    { name: "text",       label: "Task name",  width: "*", tree: true },
    { name: "start_date", label: "Start time", align: "center" },
    { name: "duration",   label: "Duration",   align: "center" },
    { name: "add",        label: "",           width: 44 }
];
 
gantt.init("gantt_here");

Related samples

Progress lightbox

Details

Jedes Element im Array definiert eine column. Das Objekt kann folgende Eigenschaften enthalten:

align? - (string) - steuert die horizontale Ausrichtung des column-Headers. Optionen sind 'left', 'center' oder 'right';
hide? - (boolean) - schaltet die Sichtbarkeit einer column um (PRO);
label? - (string | number | any) - legt den Titel des column-Headers fest;
max_width? - (number) - begrenzt die maximale Breite der column beim Größenändern;
min_width? - (number) - setzt die minimale Breite der column beim Größenändern;
name? - (string | number) - identifiziert die column. Die Verwendung von 'add' erzeugt eine column mit einem '+'-Button;
resize? - (boolean) - erlaubt das Größenändern der column durch Ziehen der Grenze (PRO);
sort? (task1, task2): number - (boolean | string | Function) - konfiguriert das Sortierverhalten beim Klicken auf den column-Header. Wird auf false gesetzt, wird das Sortieren deaktiviert. Es kann eine Task-Eigenschaft als String für die Sortierung angegeben werden oder eine eigene Sortierfunktion übergeben werden.
- task1 - (Task) - das erste Task-Objekt für die Sortierung.
- task2 - (Task) - das zweite Task-Objekt für die Sortierung.
template? (task): any - definiert eine Vorlage für die Daten der column.
- task - (Task) - das Task-Objekt.
tree? - (boolean) - markiert die column zur Anzeige einer Baumstruktur;
width? - (number | string) - legt die Breite der column fest;
onrender? (task, node): any - optionaler Callback zur Anpassung des Zell-Renderings. Er erhält das Task-Objekt und das DOM-Element der Zelle und kann eine Framework-Komponente zurückgeben. Mehr Infos hier;
- task - (Task) - das Task-Objekt.
- node - (HTMLElement) - das HTML-Element der grid-Zelle.
editor? - (object) - Inline-Editor-Konfiguration.
- type - (string) - der Editor-Typ.
- map_to - (string) - die Task-Eigenschaft, die der Editor aktualisiert.
- min? - (Date | number) - Minimalwert für Datums- und Dauer-Editoren.
- max? - (Date | number) - Maximalwert für Datums- und Dauer-Editoren.
- options? - (Array <any>) - Options-Array für Select-Editoren.
- formatter? - (DurationFormatter | LinkFormatter) - Formatter für Datums- und Vorgänger-Editoren.

Die Gesamtbreite der grid columns hängt sowohl von der width-Eigenschaft jeder column als auch von der grid_width ab. Stimmen diese Breiten nicht überein, passt Gantt eine von beiden an.

Beim Initialisieren des Gantt mit gantt.init() hat die column-width Vorrang.
Related sample: Spaltenbreiten-Priorität über grid_width beim Initialisieren
Beim Rendern des Gantt mit gantt.render() hat die grid_width Vorrang.
Related sample: Grid_width-Priorität über Spaltenbreite beim Rendern
Beim Initialisieren mit gantt.init() und wenn die Spaltenbreite fehlt oder auf '*' gesetzt ist, hat die grid_width Vorrang.
Related sample: Grid_width-Priorität, wenn Spaltenbreite undefiniert oder '*' beim Initialisieren

Die template-Eigenschaft ist eine Funktion, die ein Datenobjekt erhält und den anzuzeigenden Inhalt zurückgibt. Dies ermöglicht eine flexible Anpassung des column-Inhalts.

gantt.config.columns = [
    { name: "text",        label: "Task name",  tree: true, width: "*" },
    { name: "start_date",  label: "Start time", align: "center" },
    { name: "staff",       label: "Holder(s)", template: (obj) => {
        return `${obj.holder} (${obj.progress})`;
    } }
];
 
gantt.init("gantt_here");