Перейти к основному содержимому

columns

Description​

Настраивает columns в таблице

columns: GridColumn[]

Example​

// определение columns по умолчанию
gantt.config.columns = [
    { name: "text",       label: "Название задачи",  width: "*", tree: true },
    { name: "start_date", label: "Время начала", align: "center" },
    { name: "duration",   label: "Длительность",   align: "center" },
    { name: "add",        label: "",           width: 44 }
];

gantt.init("gantt_here");

Details​

Каждый элемент массива определяет один столбец. Объект может содержать следующие свойства:

  • align? - (string) - задаёт горизонтальное выравнивание заголовка столбца. Возможные значения: 'left', 'center', или 'right';
  • hide? - (boolean) - переключает видимость столбца (PRO);
  • label? - (string | number | any) - задаёт заголовок столбца;
  • max_width? - (number) - ограничивает максимальную ширину столбца при изменении размера;
  • min_width? - (number) - задаёт минимальную ширину столбца при изменении размера;
  • name? - (string | number) - идентифицирует столбец. Использование 'add' создаёт столбец с кнопкой '+';
  • resize? - (boolean) - разрешает изменение размера столбца перетаскиванием границы (PRO);
  • sort? (task1, task2): number - (boolean | string | Function) - настраивает поведение сортировки при клике по заголовку столбца. Значение false отключает сортировку. Можно указать имя свойства задачи в виде строки для сортировки или передать пользовательскую функцию сортировки.
    • task1 - (Task) - первый объект задачи для сортировки.
    • task2 - (Task) - второй объект задачи для сортировки.
  • template? (task): any - задаёт шаблон для данных столбца.
    • task - (Task) - объект задачи.
  • tree? - (boolean) - помечает столбец для отображения древовидной структуры;
  • width? - (number | string) - задаёт ширину столбца;
  • onrender? (task, node): any - необязательный коллбэк для кастомизации рендеринга ячейки. Получает объект задачи и DOM-элемент ячейки, может возвращать компонент фреймворка. Подробнее здесь;
    • task - (Task) - объект задачи.
    • node - (HTMLElement) - HTML-элемент ячейки грида.
  • editor? - (object) - конфигурация inline-редактора.
    • type - (string) - тип редактора.
    • map_to - (string) - свойство задачи, которое редактирует редактор.
    • min? - (Date | number) - минимальное значение для редакторов даты и длительности.
    • max? - (Date | number) - максимальное значение для редакторов даты и длительности.
    • options? - (Array <any>) - массив опций для select-редакторов.
    • formatter? - (DurationFormatter | LinkFormatter) - форматтер для редакторов даты и предшественников.

Общая ширина columns в grid зависит как от свойства width каждого столбца, так и от grid_width. Если эти значения не совпадают, Gantt подстроит одно из них.

  • При инициализации gantt через gantt.init() приоритет имеет ширина столбца width.
заметка

Sample: Приоритет ширины столбца над шириной grid при инициализации

заметка

Sample: Приоритет ширины grid над шириной столбца при рендеринге

  • При инициализации через gantt.init(), если ширина столбца отсутствует или установлена в '*', приоритет имеет grid_width.
заметка

Sample: Приоритет ширины grid при отсутствии или значении '*' у ширины столбца при инициализации


Свойство template - это функция, которая принимает элемент данных и возвращает содержимое для отображения. Это позволяет гибко настраивать содержимое столбца.

gantt.config.columns = [
    { name: "text",        label: "Название задачи",  tree: true, width: "*" },
    { name: "start_date",  label: "Время начала", align: "center" },
    { name: "staff",       label: "Ответственный(е)", template: (obj) => {
        return `${obj.holder} (${obj.progress})`;
    } }
];

gantt.init("gantt_here");

Change log​

  • свойство onrender было добавлено в версии v7.1