diff --git a/core/modules/views_ui/css/views_ui.admin.theme.css b/core/modules/views_ui/css/views_ui.admin.theme.css
index 5dc2e4d..190345b 100644
--- a/core/modules/views_ui/css/views_ui.admin.theme.css
+++ b/core/modules/views_ui/css/views_ui.admin.theme.css
@@ -560,20 +560,20 @@ td.group-title {
 
 /* The contents of the popup dialog on the views edit form. */
 .views-filterable-options .form-type-checkbox {
-  border: 1px solid #ccc;
   padding: 5px 8px;
   border-top: none;
 }
 .views-filterable-options {
   border-top:  1px solid #ccc;
 }
-.views-filterable-options .filterable-option.odd .form-type-checkbox {
-  background-color: #f3f4ee;
-}
 .filterable-option .form-item {
   margin-bottom: 0;
   margin-top: 0;
 }
+.views-filterable-options .filterable-option .title {
+  font-weight: bold;
+  cursor: pointer;
+}
 .views-filterable-options .form-type-checkbox .description {
   margin-top: 0;
   margin-bottom: 0;
diff --git a/core/modules/views_ui/js/views-admin.js b/core/modules/views_ui/js/views-admin.js
index 28e2e96..3f646e7 100644
--- a/core/modules/views_ui/js/views-admin.js
+++ b/core/modules/views_ui/js/views-admin.js
@@ -291,7 +291,7 @@
    */
   Drupal.viewsUi.AddItemForm.prototype.handleCheck = function (event) {
     var $target = $(event.target);
-    var label = $.trim($target.next().html());
+    var label = $.trim($target.closest('td').next().html());
     // Add/remove the checked item to the list.
     if ($target.is(':checked')) {
       this.$selected_div.show().css('display', 'block');
@@ -443,11 +443,19 @@
      */
     this.$form = $form;
 
-    /**
-     * Add a keyup handler to the search box.
-     */
+    // Click on the title checks the box.
+    this.$form.on('click', 'td.title', function (event) {
+      var $target = $(event.currentTarget);
+      $target.closest('tr').find('input').trigger('click');
+    });
+
+     // Add a keyup handler to the search box.
     this.$searchBox = this.$form.find('[data-drupal-selector="edit-override-controls-options-search"]');
-    this.$searchBox.on('keyup', $.proxy(this.handleKeyup, this));
+    this.$searchBox.on('keyup', $.proxy(this.handleFilter, this));
+
+    // Handles group filtering.
+    this.$filterType = this.$form.find('[data-drupal-selector="edit-override-controls-group"]');
+    this.$filterType.on('change', $.proxy(this.handleFilter, this));
 
     /**
      * Get a list of option labels and their corresponding divs and maintain it
@@ -455,8 +463,6 @@
      */
     this.options = this.getOptions(this.$form.find('.filterable-option'));
 
-    // Restripe on initial loading.
-    this.handleKeyup();
     // Trap the ENTER key in the search box so that it doesn't submit the form.
     this.$searchBox.on('keypress', function (event) {
       if (event.which === 13) {
@@ -486,7 +492,7 @@
       for (var i = 0; i < length; i++) {
         $option = $($allOptions[i]);
         $label = $option.find('label');
-        $description = $option.find('div.description');
+        $description = $option.find('.description');
         options[i] = {
           // Search on the lowercase version of the label text + description.
           searchText: $label.text().toLowerCase() + " " + $description.text().toLowerCase(),
@@ -500,52 +506,40 @@
     },
 
     /**
-     * Keyup handler for the search box that hides or shows the relevant
+     * Filter handler for the search box and type select that hides or shows the relevant
      * options.
      *
      * @param {jQuery.Event} event
-     *   The keyup event.
+     *   The keyup event or change event.
      */
-    handleKeyup: function (event) {
-      var found;
-      var option;
-      var zebraClass;
-
+    handleFilter: function (event) {
       // Determine the user's search query. The search text has been converted
       // to lowercase.
       var search = this.$searchBox.val().toLowerCase();
       var words = search.split(' ');
-      var wordsLength = words.length;
-
-      // Start the counter for restriping rows.
-      var zebraCounter = 0;
+      // Get selected Group
+      var group = this.$filterType.val();
 
       // Search through the search texts in the form for matching text.
-      var length = this.options.length;
-      for (var i = 0; i < length; i++) {
-        // Use a local variable for the option being searched, for performance.
-        option = this.options[i];
-        found = true;
+      this.options.forEach(function (option) {
+        function hasWord(word) {
+          return option.searchText.indexOf(word) !== -1;
+        }
+
+        var found = true;
         // Each word in the search string has to match the item in order for the
         // item to be shown.
-        for (var j = 0; j < wordsLength; j++) {
-          if (option.searchText.indexOf(words[j]) === -1) {
-            found = false;
-          }
-        }
-        if (found) {
-          zebraClass = (zebraCounter % 2) ? 'odd' : 'even';
-          // Show the checkbox row, and restripe it.
-          option.$div.removeClass('even odd');
-          option.$div.addClass(zebraClass);
-          option.$div.show();
-          zebraCounter++;
+        if (search) {
+          found = words.every(hasWord);
         }
-        else {
-          // The search string wasn't found; hide this item.
-          option.$div.hide();
+        if (found && group !== 'all') {
+          found = option.$div.hasClass(group);
         }
-      }
+
+        option.$div.toggle(found);
+      });
+      // Adapt dialog to content size.
+      $(event.target).trigger('dialogContentResize');
     }
   });
 
diff --git a/core/modules/views_ui/src/Form/Ajax/AddHandler.php b/core/modules/views_ui/src/Form/Ajax/AddHandler.php
index 56cb435..0a74996 100644
--- a/core/modules/views_ui/src/Form/Ajax/AddHandler.php
+++ b/core/modules/views_ui/src/Form/Ajax/AddHandler.php
@@ -107,11 +107,15 @@ public function buildForm(array $form, FormStateInterface $form_state) {
       $form['options']['name'] = array(
         '#prefix' => '<div class="views-radio-box form-checkboxes views-filterable-options">',
         '#suffix' => '</div>',
-        '#tree' => TRUE,
-        '#default_value' => 'all',
+        '#type' => 'tableselect',
+        '#header' => array(
+          'title' => $this->t('Title'),
+          'group' => $this->t('Category'),
+          'help' => $this->t('Description'),
+        ),
+        '#js_select' => FALSE,
       );
 
-      // Group options first to simplify the usage of #states.
       $grouped_options = array();
       foreach ($options as $key => $option) {
         $group = preg_replace('/[^a-z0-9]/', '-', strtolower($option['group']));
@@ -137,23 +141,22 @@ public function buildForm(array $form, FormStateInterface $form_state) {
 
       foreach ($grouped_options as $group => $group_options) {
         foreach ($group_options as $key => $option) {
-          $form['options']['name'][$key] = array(
-            '#type' => 'checkbox',
-            '#title' => $this->t('@group: @field', array('@group' => $option['group'], '@field' => $option['title'])),
-            '#description' => $option['help'],
-            '#return_value' => $key,
-            '#prefix' => "<div class='filterable-option'>",
-            '#suffix' => '</div>',
-            '#states' => array(
-              'visible' => array(
-                array(
-                  ':input[name="override[controls][group]"]' => array('value' => 'all'),
-                ),
-                array(
-                  ':input[name="override[controls][group]"]' => array('value' => $group),
-                ),
-              )
-            )
+          $form['options']['name']['#options'][$key] = array(
+            '#attributes' => array(
+              'class' => array('filterable-option', $group),
+            ),
+            'title' => array(
+              'data' => array(
+                '#title' => $option['title'],
+                '#plain_text' => $option['title'],
+              ),
+              'class' => array('title'),
+            ),
+            'group' => $option['group'],
+            'help' => array(
+              'data' => $option['help'],
+              'class' => array('description'),
+            ),
           );
         }
       }