Add custom column type

[jstano]

Coming from ExtJS, your API looks very familiar. I'd like to know if it's possible got us to create a custom column type and register it with the library so we can do something like this:

<BryntumGrid
   ref={'grid'}

   columns={[
      { text : 'Id', field : 'id', width : 40, editor : false },
      { text : 'Name', field : 'name', flex : 1 },
      { text : 'Birth Date', field : 'birthDate', type: '[b]localDateColumn[/b]', width : 100 },
   ]}
   data={[
      {
         "id"       : 1,
         "name"     : "Name",
         "birthDate" : new LocalDate() // joda LocalDate object
      }
   ]}
/>

This is part of our requirements and I'd like to verify this during the evaluation period. I'm making some assumptions that things like this should work in the Grid, given how similar the API is to ExtJS.

Thanks,

Jeff Stano

[johan.isaksson]

Hi,

I have added a custom column to the columntypes demo in our sources. It will be available in the demo at https://www.bryntum.com/examples/grid/columntypes after next release. In the meanwhile, here is the code I added to the demo:

// Extend Column to create your own custom column class
class ColorColumn extends Column {
    // Define the type for this column, used in your columns config to add this column
    static get type() {
        return 'color';
    }

    // Override default values
    static get defaults() {
        return {
            field  : 'color',
            align  : 'center',
            editor : {
                type  : 'combo',
                items : [
                    'Black',
                    'Blue',
                    'Green',
                    'Orange',
                    'Pink',
                    'Purple',
                    'Red',
                    'Teal',
                    'Yellow'
                ]
            }
        };
    }

    renderer({ value, cellElement }) {
        const colorMap = {
            'Blue'   : '#64B5F6',
            'Green'  : '#81C784',
            'Red'    : '#E57373',
            'Yellow' : '#FFF176',
            'Pink'   : '#F06292',
            'Purple' : '#BA68C8',
            'Orange' : '#FFB74D',
            'Teal'   : '#4DB6AC',
            'Black'  : '#555'
        };

        cellElement.style.backgroundColor = colorMap[value];
        cellElement.style.color = '#fff';

        return value;
    }
}

// Register with ColumnStore to make the column available to the grid
ColumnStore.registerColumnType(ColorColumn);