[REACT] Gantt - dynamic width for name column

[jit@flowit.dk]

Hi,

We would like to assign fixed widths to all our columns except the name column, which is to consume remaining available space - much like what can be achieved using an HTML table: https://jsfiddle.net/u0onL5j8/1/

How do we achieve the desired behaviour ?

[tasnim]

Hi,

You can achieve it very easily with this https://bryntum.com/products/gantt/docs/api/Grid/column/Column#config-flex config of column

Set flex to 1 in the name column and rest of other columns set their widths. And as you're in gantt you'd also need to adjust the locked grid width (columns grid)

Try replacing the code of this demo https://bryntum.com/products/gantt/examples/basic/ with the below code

import { Gantt, StringHelper } from '../../build/gantt.module.js?477293';
import shared from '../_shared/shared.module.js?477293';

new Gantt({
    appendTo          : 'container',
    dependencyIdField : 'sequenceNumber',
    rowHeight         : 45,
    tickSize          : 45,
    barMargin         : 8,
    project           : {
        autoLoad  : true,
        transport : {
            load : {
                url : '../_datasets/launch-saas.json'
            }
        }
    },

columns : [
    { type : 'wbs', width : 50 },
    { type : 'name', flex : 1 },
    { type : 'startdate', width : 100 },
    { type : 'enddate', width : 100 }
],

subGridConfigs : {
    locked : { width : 800 }
},

// Custom task content, display task name on child tasks
taskRenderer({ taskRecord }) {
    if (taskRecord.isLeaf && !taskRecord.isMilestone) {
        return StringHelper.encodeHtml(taskRecord.name);
    }
}
});

https://bryntum.com/products/gantt/docs/api/Gantt/view/Gantt#config-subGridConfigs
And you'll get this result

msedge_hVSQnFunli.png (149.68 KiB) Viewed 255 times

Hope it helps.

Best regards,
Tasnim

[jit@flowit.dk]

Very nice - thanks @tasnim