Zum Hauptinhalt springen

columns

Description​

Richtet die columns in der Tabelle ein

columns: GridColumn[]

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");

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.
Hinweis

Sample: Spaltenbreiten-Priorität über grid_width beim Initialisieren

Hinweis

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.
Hinweis

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");

Change log​

  • Die onrender-Eigenschaft wurde in v7.1 eingeführt