[REACT] Can columns configure Button widget ？

[vivianus]

columns : []

new Button {
    text    : 'Hover me',
    tooltip : 'Click me and you wont believe what happens next',
    onClick  : () => {console.log(1111)}
});

How to use a custom Button component in a column? type: 'widget' is invalid.

[mats]

Please see https://bryntum.com/docs/scheduler/#Grid/column/WidgetColumn

Demo: https://bryntum.com/examples/grid/columntypes/

{
            type    : 'widget',
            field   : 'city',
            text    : 'WidgetColumn',
            width   : 140,
            widgets : [{
                type    : 'button',
                cls     : 'b-raised',
                text    : 'Hello',
                onClick : ({ source : btn }) => {
                    const { record } = btn.cellInfo;
                    Toast.show(`Hello ${record.name} from ${record.city}`);
                }
            }]
        },

[vivianus]

I may need that the leaf nodes in this column are button components and the other nodes are plain text. How can I judge this by using type: 'widget'?

[pmiklashevich]

Please use ActionColumn instead: https://www.bryntum.com/docs/gantt/#Grid/column/ActionColumn
You can conditionally render the text and process the click.

{
     type    : 'action',
     text    : 'Foo',
     actions : [{
         renderer : ({ record }) => (record.isLeaf ? '<i class="b-action-item b-fa b-fa-plus"></i> ' : '') + record.name,
         onClick  : ({ record }) => {
         	if (record.isLeaf) {
         		// process the click
         	}
         }
     }]
}

[vivianus]

Please use ActionColumn instead: https://www.bryntum.com/docs/gantt/#Grid/column/ActionColumn
You can conditionally render the text and process the click.

{
     type    : 'action',
     text    : 'Foo',
     actions : [{
         renderer : ({ record }) => (record.isLeaf ? '<i class="b-action-item b-fa b-fa-plus"></i> ' : '') + record.name,
         onClick  : ({ record }) => {
         	if (record.isLeaf) {
         		// process the click
         	}
         }
     }]
}

Uncaught (in promise) Error: Column type 'action' not registered（version: 2.1.0）
Is there any other way to be compatible with the lower version?

[pmiklashevich]

It was added in version 3.1.2 (2020-04-17). Please consider upgrade to the latest version (4.1.0 is coming). Otherwise, you need to read the sources and check how the Widget column works. Maybe you can make the button read only, and style it in CSS to do not look like a button, but just a simple text.