columns

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

GridColumn[] columns;

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

Related samples

Progress lightbox

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.
Related sample: Приоритет ширины столбца над шириной grid при инициализации
При рендеринге gantt через gantt.render() приоритет имеет grid_width.
Related sample: Приоритет ширины grid над шириной столбца при рендеринге
При инициализации через gantt.init(), если ширина столбца отсутствует или установлена в '*', приоритет имеет grid_width.
Related 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");