Use ember-table for Container

app/controllers/container-type.js

@@ -1,4 +1,4 @@
-import { get } from '@ember/object';
+import { get, computed } from '@ember/object';
 import Controller, { inject as controller } from '@ember/controller';
 import debounceComputed from "ember-inspector/computed/debounce";
 import searchMatch from "ember-inspector/utils/search-match";
@@ -13,10 +13,23 @@ export default Controller.extend({
 
   search: null,
 
+  columns: [{
+    valuePath: 'name',
+    name: 'Name'
+  }],
+
   filtered: filter('model', function(item) {
     return searchMatch(get(item, 'name'), this.get('search'));
   }).property('model.@each.name', 'search'),
 
+  rows: computed('filtered.[]', function() {
+    return this.get('filtered').map(function(item) {
+      return {
+        name: item
+      };
+    });
+  }),
+
   actions: {
     /**
      * Inspect an instance in the object inspector.

app/styles/ember-table.scss

@@ -124,6 +124,11 @@ $white: #ffffff;
     padding: 0;
   }
 
+  .is-link {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
   .et-cell-container {
     display: flex;
   }

app/templates/container-type.hbs

@@ -1,26 +1,22 @@
-{{#x-list
-  headerHeight=0
-  name="container-instance-list"
-  schema=(hash columns=null)
-  setIsDragging=(route-action "setIsDragging")
-as |list|
-}}
-  {{#list.vertical-collection
-    filtered
-    estimateHeight=30
-    itemClass="js-instance-row"
-  as |content index|
+{{#ember-table as |t|}}
+  {{t.head columns=columns enableReorder=false}}
+  {{#t.body
+    rows=rows
+  as |b|
   }}
-    <tr
-      class="list__row js-container-instance-list-item {{if (mod index 2) "striped"}}"
-      {{action "inspectInstance" content}}
-    >
-      {{#list.cell
-        class="list__cell_main"
-        clickable=content.inspectable
-      }}
-        {{content.name}}
-      {{/list.cell}}
-    </tr>
-  {{/list.vertical-collection}}
-{{/x-list}}
+    {{#b.row
+      class=(concat "js-container-instance-list-item" (if (mod b.rowMeta.index 2) " striped"))
+    as |r|
+    }}
+      {{#r.cell as |value|}}
+        {{#if value.inspectable}}
+          <div class="is-link js-instance-name" {{action "inspectInstance" value}}>
+            {{value.name}}
+          </div>
+        {{else}}
+          <span class="js-instance-name">{{value.name}}</span>
+        {{/if}}
+      {{/r.cell}}
+    {{/b.row}}
+  {{/t.body}}
+{{/ember-table}}

tests/acceptance/container-test.js

@@ -94,10 +94,10 @@ module('Container Tab', function(hooks) {
     name = null;
     message = null;
 
-    await click(rows[0]);
+    await click(rows[0].querySelector('.js-instance-name'));
 
     assert.equal(name, null);
-    await click(rows[1]);
+    await click(rows[1].querySelector('.js-instance-name'));
 
     assert.equal(name, 'objectInspector:inspectByContainerLookup');