diff --git a/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/app/view/sampleTable/sampleTable.css b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/app/view/sampleTable/sampleTable.css
new file mode 100644
index 0000000..703ac4d
--- /dev/null
+++ b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/app/view/sampleTable/sampleTable.css
@@ -0,0 +1,35 @@
+/* css for sample app view */
+
+#ov-sample h2 {
+    display: inline-block;
+}
+
+/* Panel Styling */
+#ov-sample-table-item-details-panel.floatpanel {
+    position: absolute;
+    top: 115px;
+}
+
+.light #ov-sample-table-item-details-panel.floatpanel {
+    background-color: rgb(229, 234, 237);
+}
+.dark #ov-sample-table-item-details-panel.floatpanel {
+    background-color: #3A4042;
+}
+
+#ov-sample-table-item-details-panel h3 {
+    margin: 0;
+    font-size: large;
+}
+
+#ov-sample-table-item-details-panel h4 {
+    margin: 0;
+}
+
+#ov-sample-table-item-details-panel td {
+    padding: 5px;
+}
+#ov-sample-table-item-details-panel td.label {
+    font-style: italic;
+    opacity: 0.8;
+}
diff --git a/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/app/view/sampleTable/sampleTable.html b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/app/view/sampleTable/sampleTable.html
new file mode 100644
index 0000000..e20a94d
--- /dev/null
+++ b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/app/view/sampleTable/sampleTable.html
@@ -0,0 +1,46 @@
+<!-- partial HTML -->
+<div id="ov-sample-table">
+    <div class="tabular-header">
+        <h2>Items ({{tableData.length}} total)</h2>
+        <div class="ctrl-btns">
+            <div class="refresh" ng-class="{active: autoRefresh}"
+                 icon icon-id="refresh" icon-size="36"
+                 tooltip tt-msg="autoRefreshTip"
+                 ng-click="toggleRefresh()"></div>
+        </div>
+    </div>
+
+    <div class="summary-list" onos-table-resize>
+
+        <div class="table-header" onos-sortable-header>
+            <table>
+                <tr>
+                    <td colId="id" sortable>Item ID </td>
+                    <td colId="label" sortable>Label </td>
+                    <td colId="code" sortable>Code </td>
+                </tr>
+            </table>
+        </div>
+
+        <div class="table-body">
+            <table>
+                <tr ng-if="!tableData.length" class="no-data">
+                    <td colspan="3">
+                        No Items found
+                    </td>
+                </tr>
+
+                <tr ng-repeat="item in tableData track by $index"
+                    ng-click="selectCallback($event, item)"
+                    ng-class="{selected: item.id === selId}">
+                    <td>{{item.id}}</td>
+                    <td>{{item.label}}</td>
+                    <td>{{item.code}}</td>
+                </tr>
+            </table>
+        </div>
+
+    </div>
+
+    <ov-sample-table-item-details-panel></ov-sample-table-item-details-panel>
+</div>
diff --git a/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/app/view/sampleTable/sampleTable.js b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/app/view/sampleTable/sampleTable.js
new file mode 100644
index 0000000..7b92555
--- /dev/null
+++ b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/app/view/sampleTable/sampleTable.js
@@ -0,0 +1,141 @@
+// js for sample app table view
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, $scope, fs, wss;
+
+    // constants
+    var detailsReq = 'sampleTableDetailsRequest',
+        detailsResp = 'sampleTableDetailsResponse',
+        pName = 'ov-sample-table-item-details-panel',
+
+        propOrder = ['id', 'label', 'code'],
+        friendlyProps = ['Item ID', 'Item Label', 'Special Code'];
+
+
+    function addProp(tbody, index, value) {
+        var tr = tbody.append('tr');
+
+        function addCell(cls, txt) {
+            tr.append('td').attr('class', cls).html(txt);
+        }
+        addCell('label', friendlyProps[index] + ' :');
+        addCell('value', value);
+    }
+
+    function populatePanel(panel) {
+        var title = panel.append('h3'),
+            tbody = panel.append('table').append('tbody');
+
+        title.text('Item Details');
+
+        propOrder.forEach(function (prop, i) {
+            addProp(tbody, i, $scope.panelDetails[prop]);
+        });
+
+        panel.append('hr');
+        panel.append('h4').text('Comments');
+        panel.append('p').text($scope.panelDetails.comment);
+    }
+
+    function respDetailsCb(data) {
+        $scope.panelDetails = data.details;
+        $scope.$apply();
+    }
+
+    angular.module('ovSampleTable', [])
+        .controller('OvSampleTableCtrl',
+        ['$log', '$scope', 'TableBuilderService',
+            'FnService', 'WebSocketService',
+
+            function (_$log_, _$scope_, tbs, _fs_, _wss_) {
+                $log = _$log_;
+                $scope = _$scope_;
+                fs = _fs_;
+                wss = _wss_;
+
+                var handlers = {};
+                $scope.panelDetails = {};
+
+                // details response handler
+                handlers[detailsResp] = respDetailsCb;
+                wss.bindHandlers(handlers);
+
+                // custom selection callback
+                function selCb($event, row) {
+                    if ($scope.selId) {
+                        wss.sendEvent(detailsReq, { id: row.id });
+                    } else {
+                        $scope.hidePanel();
+                    }
+                    $log.debug('Got a click on:', row);
+                }
+
+                // TableBuilderService creating a table for us
+                tbs.buildTable({
+                    scope: $scope,
+                    tag: 'sampleTable',
+                    selCb: selCb
+                });
+
+                // cleanup
+                $scope.$on('$destroy', function () {
+                    wss.unbindHandlers(handlers);
+                    $log.log('OvSampleTableCtrl has been destroyed');
+                });
+
+                $log.log('OvSampleTableCtrl has been created');
+            }])
+
+        .directive('ovSampleTableItemDetailsPanel', ['PanelService', 'KeyService',
+            function (ps, ks) {
+            return {
+                restrict: 'E',
+                link: function (scope, element, attrs) {
+                    // insert details panel with PanelService
+                    // create the panel
+                    var panel = ps.createPanel(pName, {
+                        width: 200,
+                        margin: 20,
+                        hideMargin: 0
+                    });
+                    panel.hide();
+                    scope.hidePanel = function () { panel.hide(); };
+
+                    function closePanel() {
+                        if (panel.isVisible()) {
+                            $scope.selId = null;
+                            panel.hide();
+                            return true;
+                        }
+                        return false;
+                    }
+
+                    // create key bindings to handle panel
+                    ks.keyBindings({
+                        esc: [closePanel, 'Close the details panel'],
+                        _helpFormat: ['esc']
+                    });
+                    ks.gestureNotes([
+                        ['click', 'Select a row to show item details']
+                    ]);
+
+                    // update the panel's contents when the data is changed
+                    scope.$watch('panelDetails', function () {
+                        if (!fs.isEmptyObject(scope.panelDetails)) {
+                            panel.empty();
+                            populatePanel(panel);
+                            panel.show();
+                        }
+                    });
+
+                    // cleanup on destroyed scope
+                    scope.$on('$destroy', function () {
+                        ks.unbindKeys();
+                        ps.destroyPanel(pName);
+                    });
+                }
+            };
+        }]);
+}());
diff --git a/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/css.html b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/css.html
new file mode 100644
index 0000000..26112b0
--- /dev/null
+++ b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/css.html
@@ -0,0 +1 @@
+<link rel="stylesheet" href="app/view/sampleTable/sampleTable.css">
\ No newline at end of file
diff --git a/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/js.html b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/js.html
new file mode 100644
index 0000000..4bfa216
--- /dev/null
+++ b/tools/package/archetypes/uitab/src/main/resources/archetype-resources/src/main/resources/js.html
@@ -0,0 +1 @@
+<script src="app/view/sampleTable/sampleTable.js"></script>
\ No newline at end of file