Edit in JSFiddle

require.config({
    baseUrl: "http://ibm-js.github.io/libraries/master/"
});

require(["deliteful-build/layer"], function () {
    require([
        "delite/register",
        "delite/KeyNav",
        "requirejs-domready/domReady!"
    ], function (register, KeyNav) {
        
        register("my-grid", [HTMLElement, KeyNav], {
            // Specifies which descendants can be navigated to
            descendantSelector: "my-cell",
            
            // Simple arrow key support.
            previousArrowKeyHandler: function () {
                var listItem = this.navigatedDescendant.parentNode;
                this.navigateTo(this.navigatedDescendant.previousElementSibling || listItem.lastElementChild);
            },
            nextArrowKeyHandler: function () {
                var listItem = this.navigatedDescendant.parentNode;
                this.navigateTo(this.navigatedDescendant.nextElementSibling || listItem.firstElementChild);
            },
            downArrowKeyHandler: function () {
                // For simplicity I'll just go to the first field in the next row
                var listItem = this.navigatedDescendant.parentNode;
                this.navigateTo((listItem.nextElementSibling || this.firstElementChild).firstElementChild);
            },
            upArrowKeyHandler: function () {
                // For simplicity I'll just go to the first field in the previous row
                var listItem = this.navigatedDescendant.parentNode;
                this.navigateTo((listItem.previousElementSibling || this.lastElementChild).firstElementChild);
            }
        });
    });
});

<h3 id="testGridLabel">Declarative KeyNav grid example:</h3>
<my-grid id="grid" aria-labelledby="testGridLabel">
    <my-row>
        <my-cell tabindex="-1">apple</my-cell>
        <my-cell tabindex="-1">banana</my-cell>
        <my-cell tabindex="-1">orange</my-cell>
    </my-row>
    <my-row>
        <my-cell tabindex="-1">pear</my-cell>
        <my-cell tabindex="-1">grapes</my-cell>
        <my-cell tabindex="-1">strawberry</my-cell>
    </my-row>
    <my-row>
        <my-cell tabindex="-1">blueberry</my-cell>
        <my-cell tabindex="-1">raspberry</my-cell>
    </my-row>
</my-grid>

my-grid {
    display: table;
    border-collapse: collapse;
}

my-row {
    display: table-row;
}

my-cell {
    display: table-cell;
    border: solid #ccc;
    padding: 2px;
}