<pre class="runnable text readonly">
import Table from "../../../node_modules/neo.mjs/src/table/Container.mjs";
import Viewport from "../../../node_modules/neo.mjs/src/container/Viewport.mjs";
import Store from "../../../node_modules/neo.mjs/src/data/Store.mjs";
import Foo from "./earthquakes/Table.mjs";
import ComponentModel from '../../../node_modules/neo.mjs/src/model/Component.mjs';

class MainContainer extends Viewport {
    static config = {
        className: "Earthquakes.view.MainContainer",
        autoMount: true,

        model: {
            module: ComponentModel,
            stores: {
                earthquakes: {
                    module: Store,
                    model: {
                        fields: [{
                            name: "humanReadableLocation",
                        }, {
                            name: "size",
                            ntype: "data-field-float",
                        }, {
                            name: "timestamp",
                            type: "Date",
                        }, {
                            name: "title",
                            calculate: (data, field, item) => item.humanReadableLocation,
                        }, {
                            name: "position",
                            calculate: (data, field, item) => ({
                                lat: item.latitude,
                                lng: item.longitude,
                            }),
                        },
                        ],
                    },
                    url: "https://apis.is/earthquake/is",
                    responseRoot: "results",
                    autoLoad: true,
                }
            }
        },
        items: [{
            flex: 1,
            module: Foo,
            bind: {store: 'stores.earthquakes'},
        }, {
            flex: 1,
            module: Foo,
            bind: {store: 'stores.earthquakes'},
        }],
        layout: {ntype: "vbox"},
    };

    afterSetMounted(value, oldValue) {
        super.afterSetMounted(value, oldValue);
        if (!value) return;
        this.addDomListeners({
            "neo-debug-item-select": (event) => {
                console.log('');
                event.path.forEach((item) => {
                    const component = Neo.getComponent(item.id);
                    if (component) console.log(component);
                });
            },
        });
    }
}

Neo.setupClass(MainContainer);

export default MainContainer;

</pre>
