        'gantt-header': Header,
          'gantt-elastic': GanttElastic,
          'gantt-footer': {
            template: `<span>this is a footer</span>`
          }
        },
        data: {
          tasks: tasks.map(task => Object.assign({}, task)),
          options,
          dynamicStyle: {
            'task-list-header-label': {
              'font-weight': 'bold'
            }
          },
          destroy: false
        }
      });

      // gantt state which will be updated in realtime
      le