diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
index 93de4b176..ba037ce24 100644
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
@@ -4,8 +4,9 @@
 //= link highlightjs-styles/vs.css
 //= link assessments/create_edit.css
 //= link SlickGrid/2.02/slick.grid.css
-//= link SlickGrid/2.02/controls/slick.columnpicker.css
+//= link SlickGrid/2.02/plugins/slick.headermenu.js
+//= link SlickGrid/2.02/plugins/slick.headermenu.css
+//= link SlickGrid/2.02/plugins/slick.autocolumnsize.js
 //= link SlickGrid/2.02/slick.core.js
 //= link SlickGrid/2.02/slick.grid.js
 //= link SlickGrid/2.02/slick.dataview.js
-//= link SlickGrid/2.02/controls/slick.columnpicker.js
diff --git a/app/assets/javascripts/SlickGrid/2.02/controls/slick.columnpicker.js b/app/assets/javascripts/SlickGrid/2.02/controls/slick.columnpicker.js
deleted file mode 100755
index 62d9532e1..000000000
--- a/app/assets/javascripts/SlickGrid/2.02/controls/slick.columnpicker.js
+++ /dev/null
@@ -1,114 +0,0 @@
-(function ($) {
-  function SlickColumnPicker(columns, grid, options) {
-    var $menu;
-    var columnCheckboxes;
-
-    var defaults = {
-      fadeSpeed:250
-    };
-
-    function init() {
-      grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu);
-      options = $.extend({}, defaults, options);
-
-      $menu = $("<span class='slick-columnpicker' style='display:none;position:absolute;z-index:20;' />").appendTo(document.body);
-
-      $menu.bind("mouseleave", function (e) {
-        $(this).fadeOut(options.fadeSpeed)
-      });
-      $menu.bind("click", updateColumn);
-
-    }
-
-    function handleHeaderContextMenu(e, args) {
-      e.preventDefault();
-      $menu.empty();
-      columnCheckboxes = [];
-
-      var $li, $input;
-      for (var i = 0; i < columns.length; i++) {
-        
-        $li = $("<li />").appendTo($menu);
-
-        $input = $("<input type='checkbox' />").data("column-id", columns[i].id);
-        columnCheckboxes.push($input);
-        if (grid.getColumnIndex(columns[i].id) != null) {
-          $input.attr("checked", "checked");
-        }
-
-        $("<label />")
-            .text(columns[i].name)
-            .prepend($input)
-            .appendTo($li);
-      }
-
-      $("<hr/>").appendTo($menu);
-      $li = $("<li />").appendTo($menu);
-      $input = $("<input type='checkbox' />").data("option", "autoresize");
-      $("<label />")
-          .text("Force fit columns")
-          .prepend($input)
-          .appendTo($li);
-      if (grid.getOptions().forceFitColumns) {
-        $input.attr("checked", "checked");
-      }
-
-      $li = $("<li />").appendTo($menu);
-      $input = $("<input type='checkbox' />").data("option", "syncresize");
-      $("<label />")
-          .text("Synchronous resize")
-          .prepend($input)
-          .appendTo($li);
-      if (grid.getOptions().syncColumnCellResize) {
-        $input.attr("checked", "checked");
-      }
-
-      $menu
-          .css("top", e.pageY - 10)
-          .css("left", e.pageX - 10)
-          .fadeIn(options.fadeSpeed);
-    }
-
-    function updateColumn(e) {
-      if ($(e.target).data("option") == "autoresize") {
-        if (e.target.checked) {
-          grid.setOptions({forceFitColumns:true});
-          grid.autosizeColumns();
-        } else {
-          grid.setOptions({forceFitColumns:false});
-        }
-        return;
-      }
-
-      if ($(e.target).data("option") == "syncresize") {
-        if (e.target.checked) {
-          grid.setOptions({syncColumnCellResize:true});
-        } else {
-          grid.setOptions({syncColumnCellResize:false});
-        }
-        return;
-      }
-
-      if ($(e.target).is(":checkbox")) {
-        var visibleColumns = [];
-        $.each(columnCheckboxes, function (i, e) {
-          if ($(this).is(":checked")) {
-            visibleColumns.push(columns[i]);
-          }
-        });
-
-        if (!visibleColumns.length) {
-          $(e.target).attr("checked", "checked");
-          return;
-        }
-
-        grid.setColumns(visibleColumns);
-      }
-    }
-
-    init();
-  }
-
-  // Slick.Controls.ColumnPicker
-  $.extend(true, window, { Slick:{ Controls:{ ColumnPicker:SlickColumnPicker }}});
-})(jQuery);
diff --git a/app/assets/javascripts/SlickGrid/2.02/plugins/slick.autocolumnsize.js b/app/assets/javascripts/SlickGrid/2.02/plugins/slick.autocolumnsize.js
new file mode 100644
index 000000000..ca8c1fd8d
--- /dev/null
+++ b/app/assets/javascripts/SlickGrid/2.02/plugins/slick.autocolumnsize.js
@@ -0,0 +1,157 @@
+(function ($) {
+    $.extend(true, window, {
+        Slick: {
+            Plugins: {
+                AutoColumnSize: AutoColumnSize
+            }
+        }
+    });
+
+    function AutoColumnSize(maxWidth) {
+
+        var grid, $container, context,
+            keyCodes = {
+                'A': 65
+            };
+
+        function init(_grid) {
+            grid = _grid;
+            maxWidth = maxWidth || 300;
+
+            $container = $(grid.getContainerNode());
+            $container.on("dblclick.autosize", ".slick-resizable-handle", reSizeColumn);
+            $container.keydown(handleControlKeys);
+
+            context = document.createElement("canvas").getContext("2d");
+        }
+
+        function destroy() {
+            $container.off();
+        }
+
+        function handleControlKeys(event) {
+            if (event.ctrlKey && event.shiftKey && event.keyCode === keyCodes.A) {
+                resizeAllColumns();
+            }
+        }
+
+        function resizeAllColumns() {
+            var elHeaders = $container.find(".slick-header-column");
+            var allColumns = grid.getColumns();
+            elHeaders.each(function(index, el) {
+                var columnDef = $(el).data('column');
+                var headerWidth = getElementWidth(el);
+                var colIndex = grid.getColumnIndex(columnDef.id);
+                var column = allColumns[colIndex];
+                var autoSizeWidth = Math.max(headerWidth, getMaxColumnTextWidth(columnDef, colIndex)) + 1;
+                autoSizeWidth = Math.min(maxWidth, autoSizeWidth);
+                column.width = autoSizeWidth;
+            });
+            grid.setColumns(allColumns);
+            grid.onColumnsResized.notify();
+        }
+
+        function reSizeColumn(e) {
+            var headerEl = $(e.currentTarget).closest('.slick-header-column');
+            var columnDef = headerEl.data('column');
+
+            if (!columnDef || !columnDef.resizable) {
+                return;
+            }
+
+            e.preventDefault();
+            e.stopPropagation();
+
+            var headerWidth = getElementWidth(headerEl[0]);
+            var colIndex = grid.getColumnIndex(columnDef.id);
+            var allColumns = grid.getColumns();
+            var column = allColumns[colIndex];
+
+            var autoSizeWidth = Math.max(headerWidth, getMaxColumnTextWidth(columnDef, colIndex)) + 1;
+
+            if (autoSizeWidth !== column.width) {
+                column.width = autoSizeWidth;
+                grid.setColumns(allColumns);
+                grid.onColumnsResized.notify();
+            }
+        }
+
+        function getMaxColumnTextWidth(columnDef, colIndex) {
+            var texts = [];
+            var rowEl = createRow(columnDef);
+            var data = grid.getData();
+            if (Slick.Data && data instanceof Slick.Data.DataView) {
+                data = data.getItems();
+            }
+            for (var i = 0; i < data.length; i++) {
+                texts.push(data[i][columnDef.field]);
+            }
+            var template = getMaxTextTemplate(texts, columnDef, colIndex, data, rowEl);
+            var width = getTemplateWidth(rowEl, template);
+            deleteRow(rowEl);
+            return width;
+        }
+
+        function getTemplateWidth(rowEl, template) {
+            var cell = $(rowEl.find(".slick-cell"));
+            cell.append(template);
+            $(cell).find("*").css("position", "relative");
+            return cell.outerWidth() + 1;
+        }
+
+        function getMaxTextTemplate(texts, columnDef, colIndex, data, rowEl) {
+            var max = 0,
+                maxTemplate = null;
+            var formatFun = columnDef.formatter;
+            $(texts).each(function(index, text) {
+                var template;
+                if (formatFun) {
+                    template = $("<span>" + formatFun(index, colIndex, text, columnDef, data[index]) + "</span>");
+                    text = template.text() || text;
+                }
+                var length = text ? getElementWidthUsingCanvas(rowEl, text) : 0;
+                if (length > max) {
+                    max = length;
+                    maxTemplate = template || text;
+                }
+            });
+            return maxTemplate;
+        }
+
+        function createRow(columnDef) {
+            var rowEl = $('<div class="slick-row"><div class="slick-cell"></div></div>');
+            rowEl.find(".slick-cell").css({
+                "visibility": "hidden",
+                "text-overflow": "initial",
+                "white-space": "nowrap"
+            });
+            var gridCanvas = $container.find(".grid-canvas");
+            $(gridCanvas).append(rowEl);
+            return rowEl;
+        }
+
+        function deleteRow(rowEl) {
+            $(rowEl).remove();
+        }
+
+        function getElementWidth(element) {
+            var width, clone = element.cloneNode(true);
+            clone.style.cssText = 'position: absolute; visibility: hidden;right: auto;text-overflow: initial;white-space: nowrap;';
+            element.parentNode.insertBefore(clone, element);
+            width = clone.offsetWidth;
+            clone.parentNode.removeChild(clone);
+            return width;
+        }
+
+        function getElementWidthUsingCanvas(element, text) {
+            context.font = element.css("font-size") + " " + element.css("font-family");
+            var metrics = context.measureText(text);
+            return metrics.width;
+        }
+
+        return {
+            init: init,
+            destroy: destroy
+        };
+    }
+}(jQuery))
\ No newline at end of file
diff --git a/app/assets/javascripts/SlickGrid/2.02/plugins/slick.headermenu.js b/app/assets/javascripts/SlickGrid/2.02/plugins/slick.headermenu.js
new file mode 100644
index 000000000..0edc7d38f
--- /dev/null
+++ b/app/assets/javascripts/SlickGrid/2.02/plugins/slick.headermenu.js
@@ -0,0 +1,205 @@
+(function($) {
+
+    $.extend(true, window, {
+        Slick: {
+            Plugins: {
+                HeaderMenu: HeaderMenu
+            }
+        }
+    });
+
+    function HeaderMenu(options) {
+        var _grid;
+        var _self = this;
+        var _handler = new Slick.EventHandler();
+        var _defaults = {
+            buttonCssClass: null,
+            buttonImage: null
+        };
+        var $menu;
+        var $activeHeaderColumn;
+
+
+        function init(grid) {
+            options = $.extend(true, {}, _defaults, options);
+            _grid = grid;
+            _handler
+                .subscribe(_grid.onHeaderCellRendered, handleHeaderCellRendered)
+                .subscribe(_grid.onBeforeHeaderCellDestroy, handleBeforeHeaderCellDestroy);
+
+            // Force the grid to re-render the header now that the events are hooked up.
+            _grid.setColumns(_grid.getColumns());
+
+            // Hide the menu on outside click.
+            $(document.body).bind("mousedown", handleBodyMouseDown);
+        }
+
+
+        function destroy() {
+            _handler.unsubscribeAll();
+            $(document.body).unbind("mousedown", handleBodyMouseDown);
+        }
+
+
+        function handleBodyMouseDown(e) {
+            if ($menu && $menu[0] != e.target && !$.contains($menu[0], e.target)) {
+                hideMenu();
+            }
+        }
+
+
+        function hideMenu() {
+            if ($menu) {
+                $menu.remove();
+                $menu = null;
+                $activeHeaderColumn
+                    .removeClass("slick-header-column-active");
+            }
+        }
+
+        function handleHeaderCellRendered(e, args) {
+            var column = args.column;
+            var menu = column.header && column.header.menu;
+
+            if (menu) {
+                var $el = $("<div></div>")
+                    .addClass("slick-header-menubutton")
+                    .data("column", column)
+                    .data("menu", menu);
+
+                if (options.buttonCssClass) {
+                    $el.addClass(options.buttonCssClass);
+                }
+
+                if (options.buttonImage) {
+                    $el.css("background-image", "url(" + options.buttonImage + ")");
+                }
+
+                if (menu.tooltip) {
+                    $el.attr("title", menu.tooltip);
+                }
+
+                $el
+                    .bind("click", showMenu)
+                    .appendTo(args.node);
+            }
+        }
+
+
+        function handleBeforeHeaderCellDestroy(e, args) {
+            var column = args.column;
+
+            if (column.header && column.header.menu) {
+                $(args.node).find(".slick-header-menubutton").remove();
+            }
+        }
+
+
+        function showMenu(e) {
+            var $menuButton = $(this);
+            var menu = $menuButton.data("menu");
+            var columnDef = $menuButton.data("column");
+
+            // Let the user modify the menu or cancel altogether,
+            // or provide alternative menu implementation.
+            if (_self.onBeforeMenuShow.notify({
+                "grid": _grid,
+                "column": columnDef,
+                "menu": menu
+            }, e, _self) == false) {
+                return;
+            }
+
+
+            if (!$menu) {
+                $menu = $("<div class='slick-header-menu'></div>")
+                    .appendTo(_grid.getContainerNode());
+            }
+            $menu.empty();
+
+
+            // Construct the menu items.
+            for (var i = 0; i < menu.items.length; i++) {
+                var item = menu.items[i];
+
+                var $li = $("<div class='slick-header-menuitem'></div>")
+                    .data("command", item.command || '')
+                    .data("column", columnDef)
+                    .data("item", item)
+                    .bind("click", handleMenuItemClick)
+                    .appendTo($menu);
+
+                if (item.disabled) {
+                    $li.addClass("slick-header-menuitem-disabled");
+                }
+
+                if (item.tooltip) {
+                    $li.attr("title", item.tooltip);
+                }
+
+                if (item.iconCssClass) {
+                    var $icon = $("<div class='slick-header-menuicon'></div>")
+                        .appendTo($li);
+                    $icon.addClass(item.iconCssClass);
+                }
+
+                if (item.iconImage) {
+                    $icon.css("background-image", "url(" + item.iconImage + ")");
+                }
+
+                $("<span class='slick-header-menucontent'></span>")
+                    .text(item.title)
+                    .appendTo($li);
+            }
+
+
+            // Position the menu.
+            $menu
+                .offset({ top: $(this).offset().top + $(this).height(), left: $(this).offset().left });
+
+
+            // Mark the header as active to keep the highlighting.
+            $activeHeaderColumn = $menuButton.closest(".slick-header-column");
+            $activeHeaderColumn
+                .addClass("slick-header-column-active");
+
+            // Stop propagation so that it doesn't register as a header click event.
+            e.preventDefault();
+            e.stopPropagation();
+        }
+
+
+        function handleMenuItemClick(e) {
+            var command = $(this).data("command");
+            var columnDef = $(this).data("column");
+            var item = $(this).data("item");
+
+            if (item.disabled) {
+                return;
+            }
+
+            hideMenu();
+
+            if (command != null && command != '') {
+                _self.onCommand.notify({
+                    "grid": _grid,
+                    "column": columnDef,
+                    "command": command,
+                    "item": item
+                }, e, _self);
+            }
+
+            // Stop propagation so that it doesn't register as a header click event.
+            e.preventDefault();
+            e.stopPropagation();
+        }
+
+        $.extend(this, {
+            "init": init,
+            "destroy": destroy,
+
+            "onBeforeMenuShow": new Slick.Event(),
+            "onCommand": new Slick.Event()
+        });
+    }
+}(jQuery));
\ No newline at end of file
diff --git a/app/assets/javascripts/gradebook.js b/app/assets/javascripts/gradebook.js
index f2eddf2c6..8bc4504cf 100755
--- a/app/assets/javascripts/gradebook.js
+++ b/app/assets/javascripts/gradebook.js
@@ -7,6 +7,7 @@ var sort_column = "title";
 
 var slickgrid_options = {
   enableCellNavigation: true,
+  enableColumnReorder: false,
   rowHeight: ROW_HEIGHT,
   defaultColumnWidth: 65,
   syncColumnCellResize: true,
@@ -103,12 +104,23 @@ $(function () {
 
   // column header tooltips
   for (var i = 0; i < columns.length; i++) {
-    columns[i].toolTip = columns[i].name;
+    if (columns[i].name == "Version") {
+      columns[i].toolTip = columns[i-1].name + " " + columns[i].name;
+    } else {
+      columns[i].toolTip = columns[i].name;
+    }
   }
 
   var dataView = new Slick.Data.DataView();
   grid = new Slick.Grid("#gradebook", dataView, columns, slickgrid_options);
-  new Slick.Controls.ColumnPicker(columns, grid, options);
+  var autoColumnResize = new Slick.Plugins.AutoColumnSize(300);
+  grid.registerPlugin(autoColumnResize);
+
+  let hiddenColumns = localStorage.getItem("hiddenColumns") ? localStorage.getItem("hiddenColumns") : [];
+  let hiddenNumberColumns = hiddenColumns.length === 0 ? [] : hiddenColumns.split(',').map(Number);
+  let hiddenNumberSet = [... new Set(hiddenNumberColumns)];
+  let visibleColumns = columns.filter((_, i) => !hiddenNumberSet.includes(i));
+
 
   grid.onSort.subscribe(function (e, args) {
     sort_column = args.sortCol.field;
@@ -158,4 +170,57 @@ $(function () {
     // Since Materialize's tooltip method was overwritten by jquery-ui
     M.Tooltip.init(document.querySelectorAll(".tooltipped"), tooltipOpts);
   });
+
+  for (var i = 0; i < columns.length; i++) {
+    columns[i].header = {
+      menu: {
+        items: [
+          {
+            title: "Hide Column",
+            command: "hide",
+            data: i
+          },
+          {
+            title: "Unhide Columns",
+            command: "unhide"
+          },
+          {
+            title: "Force fit columns",
+            command: "autoresize"
+          }
+        ]
+      }
+    };
+  }
+
+  var headerMenuPlugin = new Slick.Plugins.HeaderMenu({});
+
+  headerMenuPlugin.onCommand.subscribe(function(e, args) {
+    if (args.command === "hide") {
+      hiddenColumns = localStorage.getItem("hiddenColumns") ? localStorage.getItem("hiddenColumns") : [];
+      let hiddenNumberColumns = hiddenColumns.length === 0 ? [] : hiddenColumns.split(',').map(Number);
+      hiddenNumberColumns.push(args.item.data);
+      let hiddenNumberSet = [... new Set(hiddenNumberColumns)];
+      visibleColumns = columns.filter((_, i) => !hiddenNumberSet.includes(i));
+      localStorage.setItem("hiddenColumns", hiddenNumberSet.toString());
+      grid.setColumns(visibleColumns);
+    }
+    else if (args.command === "unhide") {
+      hiddenColumns = [];
+      visibleColumns = columns;
+      localStorage.clear();
+      grid.setColumns(visibleColumns);
+    }
+    else if (args.command === "autoresize") {
+      let autoresize = localStorage.getItem("autoresize")
+      if (autoresize) {
+        grid.setOptions({forceFitColumns: !autoresize});
+        grid.autosizeColumns();
+      }
+      localStorage.setItem("autoresize", autoresize);
+    }
+  });
+
+  grid.registerPlugin(headerMenuPlugin);
+  grid.setColumns(visibleColumns);
 })
diff --git a/app/assets/stylesheets/SlickGrid/2.02/controls/slick.columnpicker.css b/app/assets/stylesheets/SlickGrid/2.02/controls/slick.columnpicker.css
deleted file mode 100755
index a2845cc86..000000000
--- a/app/assets/stylesheets/SlickGrid/2.02/controls/slick.columnpicker.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.slick-columnpicker {
-  border: 1px solid #718BB7;
-  background: #f0f0f0;
-  padding: 6px;
-  -moz-box-shadow: 2px 2px 2px silver;
-  -webkit-box-shadow: 2px 2px 2px silver;
-  min-width: 100px;
-  cursor: default;
-}
-
-.slick-columnpicker li {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  background: none;
-}
-
-.slick-columnpicker input {
-  margin: 4px;
-}
-
-.slick-columnpicker li a {
-  display: block;
-  padding: 4px;
-  font-weight: bold;
-}
-
-.slick-columnpicker li a:hover {
-  background: white;
-}
\ No newline at end of file
diff --git a/app/assets/stylesheets/SlickGrid/2.02/plugins/slick.headermenu.css b/app/assets/stylesheets/SlickGrid/2.02/plugins/slick.headermenu.css
new file mode 100644
index 000000000..0178503c9
--- /dev/null
+++ b/app/assets/stylesheets/SlickGrid/2.02/plugins/slick.headermenu.css
@@ -0,0 +1,68 @@
+
+/* Menu button */
+.slick-header-menubutton {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 18px;
+    width: 8px;
+    background-repeat: no-repeat;
+    background-position: left center;
+    background-image: url(../../../images/arrow.png);
+    transform: rotate(44deg);
+    cursor: pointer;
+    display: none;
+}
+
+.slick-header-column:hover > .slick-header-menubutton,
+.slick-header-column-active .slick-header-menubutton {
+    display: inline-block;
+}
+
+/* Menu */
+.slick-header-menu {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    cursor: default;
+    border: 1px solid;
+    background-color: white;
+    z-index: 99999;
+}
+
+
+/* Menu items */
+.slick-header-menuitem {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+}
+
+.slick-header-menuicon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    margin-right: 4px;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.slick-header-menucontent {
+    display: flex;
+    height: 20px;
+    justify-content: left;
+    align-items: center;
+    padding: 8px;
+}
+
+.slick-header-menuitem:hover {
+    background-color: lightgray;
+}
+
+/* Disabled */
+.slick-header-menuitem-disabled {
+    color: silver;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/instructor_gradebook.scss b/app/assets/stylesheets/instructor_gradebook.scss
index 83e667367..94a5aaee5 100755
--- a/app/assets/stylesheets/instructor_gradebook.scss
+++ b/app/assets/stylesheets/instructor_gradebook.scss
@@ -156,12 +156,6 @@ div#footer {
   font: inherit;
 }
 
-#gradebook .slick-cell.email,
-#gradebook .slick-cell.first_name,
-#gradebook .slick-cell.last_name {
-  text-align: left;
-}
-
 #gradebook .slick-header-column.andrew.right,
 #gradebook .slick-cell.andrew.right {
   text-align: center;
diff --git a/app/helpers/gradebook_helper.rb b/app/helpers/gradebook_helper.rb
index e8dffe63a..1609b88bd 100755
--- a/app/helpers/gradebook_helper.rb
+++ b/app/helpers/gradebook_helper.rb
@@ -15,15 +15,15 @@ def gradebook_columns(matrix, course)
         sortable: true, width: 100, cssClass: "last_name",
         headerCssClass: "last_name" },
       { id: "course_number", name: "Course &#8470;", field: "course_number",
-        sortable: true, width: 100 },
+        sortable: true, width: 120 },
       { id: "lecture", name: "Lecture", field: "lecture",
         sortable: true, width: 100 },
       { id: "section", name: "Section", field: "section",
         sortable: true, width: 100 },
       { id: "grace_days", name: "Grace Days", field: "grace_days",
-        sortable: true, width: 100 },
+        sortable: true, width: 150 },
       { id: "late_days", name: "Penalty Late Days", field: "late_days",
-        sortable: true, width: 100 }
+        sortable: true, width: 150 }
     ]
 
     course.assessment_categories.each do |cat|
@@ -150,12 +150,12 @@ def csv_header(matrix, course)
 
   def formatted_status(status)
     case status
-      when Float
-        round status
-      when String
-        status
-      else
-        throw "FATAL: AUD status must be Float or String; was #{status.class}"
+    when Float
+      round status
+    when String
+      status
+    else
+      throw "FATAL: AUD status must be Float or String; was #{status.class}"
     end
   end
 
diff --git a/app/views/gradebooks/view.html.erb b/app/views/gradebooks/view.html.erb
index 1f19f14be..52e5f8827 100755
--- a/app/views/gradebooks/view.html.erb
+++ b/app/views/gradebooks/view.html.erb
@@ -3,7 +3,7 @@
 <% content_for :stylesheets do %>
   <%= stylesheet_link_tag "instructor_gradebook" %>
   <%= stylesheet_link_tag "SlickGrid/2.02/slick.grid.css" %>
-  <%= stylesheet_link_tag "SlickGrid/2.02/controls/slick.columnpicker.css" %>
+  <%= stylesheet_link_tag "SlickGrid/2.02/plugins/slick.headermenu.css" %>
   <%= stylesheet_link_tag "icons" %>
 
   <!-- Temporary Bootstrap overrides -->
@@ -22,7 +22,8 @@
   <%= javascript_include_tag "SlickGrid/2.02/slick.core.js" %>
   <%= javascript_include_tag "SlickGrid/2.02/slick.grid.js" %>
   <%= javascript_include_tag "SlickGrid/2.02/slick.dataview.js" %>
-  <%= javascript_include_tag "SlickGrid/2.02/controls/slick.columnpicker.js" %>
+  <%= javascript_include_tag "SlickGrid/2.02/plugins/slick.headermenu.js" %>
+  <%= javascript_include_tag "SlickGrid/2.02/plugins/slick.autocolumnsize.js" %>
 
   <script type="text/javascript">
     var columns = <%== gradebook_columns(@matrix, @course).to_json %>
diff --git a/docs/instructors.md b/docs/instructors.md
index e719feb50..2d991a894 100644
--- a/docs/instructors.md
+++ b/docs/instructors.md
@@ -170,6 +170,8 @@ The _gradebook_ comes in two forms. The _student gradebook_ displays the grades
 
 For the gradebook calculations, submissions are classified as one of three types: "Normal", "No Grade" or "Excused". A "No Grade" submission will show up in the gradebook as NG and a zero will be used when calculating averages. An "Excused" submission will show up in the gradebook as EXC and will not be used when calculating averages.
 
+To auto-expand a column in the _gradebook_, double-click the edge of that column header.
+
 ## Releasing Grades
 
 Manually assigned grades are by default not released, and therefore not visible to students. You can release grades on an individual basis while grading, or release all available grades in bulk by using the "Release all grades" option. You can also reverse this process using the "Withdraw all grades" option. (The word "withdraw" is perhaps unfortunate. No grades are ever deleted. They are simply withdrawn from the student's view.)