[REACT] I want to customize tbar

[bharat95]

Hi,

I want to customize tbar in grid as attached in image. Please help me to implement similar tbar.

Thanks,
Bharat

[tasnim]

Hi,

Sure. It would look something like this with our components

Screenshot 2024-02-10 134638.png (56.22 KiB) Viewed 166 times

    tbar : [
        {
            type : 'button',
            badge : 3,
            cls   : 'filter-button',
            color : 'b-purple',
            icon : 'b-fa-filter'
        },
        {
            type  : 'combo',
            label : 'Skills - multiSelect',
            placeholder : 'Java',
            cls   : 'skills-combo',
            value : ['Javascript', 'SQL'],
            items : [
                'BASIC',
                'COBOL',
                'FORTRAN',
                'DBL',
                'SQL',
                'C/C++',
                'Java',
                'Javascript'
            ],
            multiSelect : true,
            width : '600px'
        }
    ]

You can always apply your custom own custom class by setting cls to your custom class and apply custom styles to it.

I hope this helps.

Best regards,
Tasnim

[bharat95]

Hi,

I don't want to show multiselect, I want to display the values in chip also the width of tbar is less because I'm using scheduler with grid

[mats]

Please study https://bryntum.com/products/scheduler/docs/api/Core/widget/ChipView which should fulfil what you need. If not, please provide extensive description of your expectations.