Bryntum Support Forums

import { Grid, DataGenerator } from '../../build/grid.module.js?466040';
import shared from '../_shared/shared.module.js?466040';

const icons = {
    'Fish n chips' : 'b-fa-fish',
    'Mac n cheese' : 'b-fa-cheese',
    Pancake        : 'b-fa-cookie',
    Burger         : 'b-fa-hamburger',
    Waffles        : 'b-fa-stroopwafel',
    Carbonara      : 'b-fa-bacon',
    Salad          : 'b-fa-carrot',
    Bolognese      : 'b-fa-blender'
};

const grid = new Grid({
    appendTo : 'container',

features : {
//Reorder the Row
rowReorder: {
      showGrip: true
      },

    // Turn on cell merging
    mergeCells : {
        // This is the default, included here to show that it exists
        passthrough : true
    },
    // FilterBar in stealth mode
    filterBar : {
        compactMode : true
    }
},

store : {
    sorters : [
        { field : 'city' },
        { field : 'food' }
    ]
},

columns : [
    // This column merges by default
    { text : 'City', field : 'city', flex : 1, mergeCells : true },
    // This column does not allow toggling merge in the header menu
    { text : 'Chef (no merge)', field : 'name', flex : 1, mergeable : false },
    {
        text  : 'Cooks',
        field : 'food',
        flex  : 1,
        renderer({ value }) {
            return [
                { tag : 'i', className : `b-fa ${icons[value] || 'b-fa-candy-cane'}` },
                value
            ];
        }
    },
    { type : 'rating', text : 'Rating', field : 'rating' }
],

data : DataGenerator.generateData(50),

tbar : [
    {
        text        : 'Merge cells',
        icon        : 'b-fa-square',
        pressedIcon : 'b-fa-check-square',
        toggleable  : true,
        pressed     : true,
        onToggle({ pressed }) {
            grid.features.mergeCells.disabled = !pressed;
        }
    }, {
        text        : 'Passthrough',
        icon        : 'b-fa-square',
        pressedIcon : 'b-fa-check-square',
        toggleable  : true,
        pressed     : true,
        tooltip     : 'Allow pointer events to pass through or not',
        onToggle({ pressed }) {
            grid.features.mergeCells.passthrough = pressed;
        }
    }
]
});