Phaser 3 - RexUI - GridTable and Board

Using the RexPlugins GridTable and Board with click event. Event is bubbling through the object layers

by ragesoft

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.55.2/phaser.min.js"></script>
<div id="main">

</div>

JavaScript

const COLOR_PRIMARY = 0x4e342e;
const COLOR_LIGHT = 0x7b5e57;
const COLOR_DARK = 0x260e04;
const fontStyles = {
    
    'button':{
        fontSize: '20px',
        fontStyle: '',
        fill: '#cccac6' 
    },
}
const Random = Phaser.Math.Between;

class Demo extends Phaser.Scene {
    constructor() {
        super({
            key: 'examples'
        })
    }
    
 preload() { 
        this.load.scenePlugin({
            key: 'rexuiplugin',
            url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js',
            sceneKey: 'rexUI'
        });
        this.load.scenePlugin({
            key: 'rexboardplugin',
            url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js',
            sceneKey: 'rexBoard'
        })
    }
    
	create(){
    this.cellItemsClicked = 0;
    this.backgroundClicked = 0;

    this.background = this.rexBoard.add.board({
            grid: getHexagonGrid(this),
            // grid: getQuadGrid(this),
            width: 20,
            height: 20
        });

		this.background.forEachTileXY( (tileXY, board) => {
            var chess = this.rexBoard.add.shape( this.background, tileXY.x, tileXY.y, 0, Random(0, 0xffffff), 0.7);
           this.add.text(chess.x, chess.y, tileXY.x + ',' + tileXY.y)
                .setOrigin(0.5)
                .setTint(0x0);
        }, this);

        this.background
            .setInteractive()
            .on('tiledown', (pointer, tileXY) => {
                console.log('down ' + tileXY.x + ',' + tileXY.y);
                 this.backgroundClicked++;
            })
  
  	let scrollMode = 0;
       this.table = this.rexUI.add.gridTable( {
        x: 400,
        y: 350,
        width: 300,
        height: 420,
        scrollMode: scrollMode,
        background: this.rexUI.add.roundRectangle( 0, 0, 20, 10, 10, COLOR_PRIMARY),

        table: {
            cellHeight: 60,
            columns: 2,
     ...