How do get timeline's width from SvelteGanttTable

[NunChatSpace]

Right now I'm trying this way

1. create dummy SvelteGantt
2. get width from gantt.utils.width
3. create real SvelteGantt

but there is nothing tasks shown on the table (see image below)

Here is tasks when I remove code from step 1

Why I would like to get timeline's width?? I would like to calculate width as px to arrange space between icons.

onMount(() => {
        let ganttElement = document.getElementById('example-gantt');
        if (!ganttElement) return;

        gantt = new SvelteGantt({
            target: ganttElement,
            props: {
                dateAdapter: new MomentSvelteGanttDateAdapter(moment),
                rows: [
                    {
                        id: 1,
                        label: ``,
                        age: (Math.random() * 80) | 0,
                        imageSrc: 'Content/joe.jpg',
                        classes: [],
                        enableDragging: true,
                        generation,
                    },
                ],
                tasks: [],
                columnOffset: 15,
                magnetOffset: 15,
                rowHeight: 52,
                rowPadding: 6,
                headers: [{ unit: 'hour', format: 'H:mm' }],
                fitWidth: true,
                minWidth: 800,
                from: currentStart.valueOf(),
                to: currentEnd.valueOf(),
                tableHeaders: [{ title: 'Label', property: 'label', width: 140, type: 'tree' }],
                tableWidth: 240,
                ganttTableModules: [SvelteGanttTable],
                enableDragging: false,
            },
        });
        generation += 1;
        ganttWidth = gantt?.utils?.width || 0;

        const ganttData = generate();
        let options = {
            dateAdapter: new MomentSvelteGanttDateAdapter(moment),
            rows: ganttData.rows,
            tasks: ganttData.tasks,
            columnOffset: 15,
            magnetOffset: 15,
            rowHeight: 52,
            rowPadding: 6,
            headers: [{ unit: 'hour', format: 'H:mm' }],
            fitWidth: true,
            minWidth: 800,
            from: currentStart.valueOf(),
            to: currentEnd.valueOf(),
            tableHeaders: [{ title: 'Label', property: 'label', width: 140, type: 'tree' }],
            tableWidth: 240,
            ganttTableModules: [SvelteGanttTable],
            enableDragging: false,
        };

        gantt = new SvelteGantt({
            target: ganttElement,
            props: options,
        });

        window.gantt = gantt;
    });

[NunChatSpace]

Here is my code now I try

gantt.updateRows(ganttData.rows);
gantt.updateTasks(ganttData.tasks);

onMount(() => {
        let ganttElement = document.getElementById('example-gantt');
        if (!ganttElement) return;
        gantt = new SvelteGantt({
            target: ganttElement,
            props: {
                // dateAdapter: new MomentSvelteGanttDateAdapter(moment),
                rows: [
                    {
                        id: 1,
                        label: ``,
                        age: (Math.random() * 80) | 0,
                        imageSrc: 'Content/joe.jpg',
                        classes: [],
                        enableDragging: true,
                        generation,
                    },
                ],
                tasks: [],
                columnOffset: 15,
                magnetOffset: 15,
                rowHeight: 52,
                rowPadding: 6,
                headers: [{ unit: 'hour', format: 'H:mm' }],
                fitWidth: true,
                minWidth: 800,
                from: currentStart.valueOf(),
                to: currentEnd.valueOf(),
                tableHeaders: [{ title: 'Label', property: 'label', width: 140, type: 'tree' }],
                tableWidth: 240,
                ganttTableModules: [SvelteGanttTable],
                // enableDragging: false,
            },
        });
        ganttWidth = gantt?.utils?.width || 0;

        const ganttData = generate();
        if (!ganttData.rows || !ganttData.tasks) return;
        gantt.updateRows(ganttData.rows);
        gantt.updateTasks(ganttData.tasks);

        window.gantt = gantt;
    });

Problem is After update rows the rowEntities is updated. but when I try to update tasks there is no inject any rows for creating tasks.

My Idea: at https://github.com/ANovokmet/svelte-gantt/blob/d5f750602a912eea98a1f90a88a270970790b850/src/Gantt.svelte#L629 we need to pass rowStore to createTask

    export function updateTask(model) {
        const task = taskFactory.createTask(rowStore, model);
        taskStore.upsert(task);
    }

    export function updateTasks(taskModels) {
        const tasks = taskModels.map(model => taskFactory.createTask(rowStore, model));
        taskStore.upsertAll(tasks);
    }

at task.ts

export class TaskFactory {
    columnService: ColumnService;

    rowPadding: number;
    rowEntities: { [key: number]: SvelteRow };

    constructor(rowStore:EntityStore<SvelteRow, EntityKey>, columnService: ColumnService) {
        this.columnService = columnService;
        this.rowEntities = rowStore; // <<< something like this
    }

@ANovokmet