Status bar feature with current row count - way simpler EDA

js/src/qgrid.booleanfilter.js

@@ -8,7 +8,7 @@ class BooleanFilter extends filter_base.FilterBase {
       <div class='boolean-filter grid-filter qgrid-dropdown-menu'>
         <h3 class='qgrid-popover-title'>
           <div class='dropdown-title'>Filter by ${this.field}</div>
-          <i class='fa fa-times icon-remove close-button'/>
+          <i class='fa fa-times icon-remove close-button'></i>
         </h3>
         <div class='dropdown-body'>
           <form>

js/src/qgrid.css

@@ -163,6 +163,15 @@
   display: block;
 }
 
+.q-grid-statusbar {
+  display: none;
+  font-size: 80%;
+}
+
+.show-statusbar .q-grid-statusbar {
+  display: block;
+}
+
 .output_scroll .show-toolbar .q-grid {
   height: 284px !important;
 }

js/src/qgrid.datefilter.js

@@ -8,7 +8,7 @@ class DateFilter extends filter_base.FilterBase {
       <div class='date-range-filter grid-filter qgrid-dropdown-menu'>
         <h3 class='qgrid-popover-title'>
           <div class='dropdown-title'>Filter by ${this.field}</div>
-          <i class='fa fa-times icon-remove close-button'/>
+          <i class='fa fa-times icon-remove close-button'></i>
         </h3>
         <div class='dropdown-body'>
           <input class='datepicker ignore start-date'/>

js/src/qgrid.filterbase.js

@@ -31,7 +31,7 @@ class FilterBase {
     this.slick_grid = slick_grid;
     this.filter_btn = $(`
       <div class='filter-button'>
-        <div class='fa fa-filter filter-icon'/>
+        <div class='fa fa-filter filter-icon'></div>
       </div>
     `);
     this.filter_icon = this.filter_btn.find('.filter-icon');

js/src/qgrid.sliderfilter.js

@@ -7,10 +7,10 @@ class SliderFilter extends filter_base.FilterBase {
       <div class='numerical-filter grid-filter qgrid-dropdown-menu'>
         <h3 class='qgrid-popover-title'>
           <div class='dropdown-title'>Filter by ${this.field}</div>
-          <i class='fa fa-times icon-remove close-button'/>
+          <i class='fa fa-times icon-remove close-button'></i>
         </h3>
         <div class='dropdown-body'>
-          <div class='slider-range'/>
+          <div class='slider-range'></div>
           <span class='slider-label'>
             <span class='min-value'>0</span>
             <span class='range-separator'>-</span>

js/src/qgrid.textfilter.js

@@ -9,13 +9,13 @@ class TextFilter extends filter_base.FilterBase {
       <div class='text-filter grid-filter qgrid-dropdown-menu'>
         <h3 class='qgrid-popover-title'>
           <div class='dropdown-title'>Filter by ${this.field}</div>
-          <i class='fa fa-times icon-remove close-button'/>
+          <i class='fa fa-times icon-remove close-button'></i>
         </h3>
         <div class='dropdown-body'>
           <div class='input-area'>
             <input class='search-input' type='text'/>
           </div>
-          <div class='text-filter-grid'/>
+          <div class='text-filter-grid'></div>
           <div class='no-results hidden'>No results found.</div>
         </div>
         <div class='dropdown-footer'>

js/src/qgrid.widget.js

@@ -64,6 +64,7 @@ class QgridView extends widgets.DOMWidgetView {
     }
     this.initialize_toolbar();
     this.initialize_slick_grid();
+    this.initialize_statusbar();
   }
 
   initialize_toolbar() {
@@ -131,12 +132,12 @@ class QgridView extends widgets.DOMWidgetView {
       }
       this.full_screen_btn = $(`
         <button
-          class='btn btn-default fa fa-arrows-alt full-screen-btn'/>
+          class='btn btn-default fa fa-arrows-alt full-screen-btn'></button>
       `).appendTo(this.toolbar);
       this.close_modal_btn = $(`
         <button
           class='btn btn-default fa fa-times close-modal-btn'
-          data-dismiss="modal"/>
+          data-dismiss="modal"></button>
       `).appendTo(this.toolbar);
 
     }
@@ -195,6 +196,22 @@ class QgridView extends widgets.DOMWidgetView {
     });
   }
 
+  initialize_statusbar() {
+    if (!this.model.get('show_statusbar')) {
+        this.$el.removeClass('show-statusbar');
+        return;
+    } else {
+        this.$el.addClass('show-statusbar');
+    }
+
+    if (this.statusbar) {
+        return;
+    }
+
+    this.statusbar = $("<div class='q-grid-statusbar'>").appendTo(this.$el);
+    this.update_statusbar();
+  }
+
   /**
    * Create the grid portion of the widget, which is an instance of
    * SlickGrid, plus automatically created filter controls based on the
@@ -305,7 +322,7 @@ class QgridView extends widgets.DOMWidgetView {
         filter: boolean_filter.BooleanFilter,
         editor: Slick.Editors.Checkbox,
         formatter: (row, cell, value, columngDef, dataContext) => {
-          return value ? `<span class="fa fa-check"/>` : "";
+          return value ? `<span class="fa fa-check"></span>` : "";
         }
       }
     };
@@ -484,7 +501,7 @@ class QgridView extends widgets.DOMWidgetView {
       var clicked_column_sort_indicator = col_header.find('.slick-sort-indicator');
       if (clicked_column_sort_indicator.length == 0){
         clicked_column_sort_indicator =
-            $("<span class='slick-sort-indicator'/>").appendTo(col_header);
+            $("<span class='slick-sort-indicator'></span>").appendTo(col_header);
       }
 
       this.sort_indicator = clicked_column_sort_indicator;
@@ -604,6 +621,7 @@ class QgridView extends widgets.DOMWidgetView {
   create_data_view(df) {
     let df_range = this.df_range = this.model.get("_df_range");
     let df_length = this.df_length = this.model.get("_row_count");
+    this.update_statusbar();
     return {
       getLength: () => {
         return df_length;
@@ -786,6 +804,8 @@ class QgridView extends widgets.DOMWidgetView {
       this.ignore_selection_changed = false;
     } else if (msg.type == 'change_show_toolbar') {
       this.initialize_toolbar();
+    } else if (msg.type == 'change_show_statusbar') {
+      this.initialize_statusbar();
     } else if (msg.col_info) {
       var filter = this.filters[msg.col_info.name];
       filter.handle_msg(msg);
@@ -828,6 +848,12 @@ class QgridView extends widgets.DOMWidgetView {
     this.slick_grid.render();
     this.slick_grid.resizeCanvas();
   }
+
+  update_statusbar() {
+    if (this.statusbar) {
+        this.statusbar.text(this.df_length + ' rows');
+    }
+  }
 }
 
 module.exports = {

qgrid/grid.py

@@ -67,15 +67,19 @@ def __init__(self):
             'width': None
         }
         self._show_toolbar = False
+        self._show_statusbar = False
         self._precision = None  # Defer to pandas.get_option
 
     def set_grid_option(self, optname, optvalue):
         self._grid_options[optname] = optvalue
 
     def set_defaults(self, show_toolbar=None, precision=None,
-                     grid_options=None, column_options=None):
+                     grid_options=None, column_options=None,
+                     show_statusbar=None):
         if show_toolbar is not None:
             self._show_toolbar = show_toolbar
+        if show_statusbar is not None:
+            self._show_statusbar = show_statusbar
         if precision is not None:
             self._precision = precision
         if grid_options is not None:
@@ -87,6 +91,10 @@ def set_defaults(self, show_toolbar=None, precision=None,
     def show_toolbar(self):
         return self._show_toolbar
 
+    @property
+    def show_statusbar(self):
+        return self._show_statusbar
+
     @property
     def grid_options(self):
         return self._grid_options
@@ -135,7 +143,8 @@ def notify_listeners(self, event, qgrid_widget):
 def set_defaults(show_toolbar=None,
                  precision=None,
                  grid_options=None,
-                 column_options=None):
+                 column_options=None,
+                 show_statusbar=None):
     """
     Set the default qgrid options.  The options that you can set here are the
     same ones that you can pass into ``QgridWidget`` constructor, with the
@@ -160,7 +169,8 @@ def set_defaults(show_toolbar=None,
     defaults.set_defaults(show_toolbar=show_toolbar,
                           precision=precision,
                           grid_options=grid_options,
-                          column_options=column_options)
+                          column_options=column_options,
+                          show_statusbar=show_statusbar)
 
 
 def on(names, handler):
@@ -325,7 +335,8 @@ def show_grid(data_frame,
               grid_options=None,
               column_options=None,
               column_definitions=None,
-              row_edit_callback=None):
+              row_edit_callback=None,
+              show_statusbar=None):
     """
     Renders a DataFrame or Series as an interactive qgrid, represented by
     an instance of the ``QgridWidget`` class.  The ``QgridWidget`` instance
@@ -377,6 +388,8 @@ def show_grid(data_frame,
         particular row's values, keyed by column name. The callback should
         return True if the provided row should be editable, and False
         otherwise.
+    show_statusbar : bool
+        Whether to show a statusbar with current row counts.
 
 
     Notes
@@ -471,6 +484,8 @@ def show_grid(data_frame,
 
     if show_toolbar is None:
         show_toolbar = defaults.show_toolbar
+    if show_statusbar is None:
+        show_statusbar = defaults.show_statusbar
     if precision is None:
         precision = defaults.precision
     if not isinstance(precision, Integral):
@@ -508,7 +523,8 @@ def show_grid(data_frame,
                        column_options=column_options,
                        column_definitions=column_definitions,
                        row_edit_callback=row_edit_callback,
-                       show_toolbar=show_toolbar)
+                       show_toolbar=show_toolbar,
+                       show_statusbar=show_statusbar)
 
 
 PAGE_SIZE = 100
@@ -554,6 +570,8 @@ class can be constructed directly but that's not recommended because
         Get/set the precision options being used by the current instance.
     show_toolbar : bool
         Get/set the show_toolbar option being used by the current instance.
+    show_statusbar : bool
+        Get/set the show_statusbar option being used by the current instance.
     column_options : bool
         Get/set the column options being used by the current instance.
     column_definitions : bool
@@ -608,6 +626,7 @@ class can be constructed directly but that's not recommended because
     column_definitions = Dict({})
     row_edit_callback = Instance(FunctionType, sync=False, allow_none=True)
     show_toolbar = Bool(False, sync=True)
+    show_statusbar = Bool(False, sync=True)
     id = Unicode(sync=True)
 
     def __init__(self, *args, **kwargs):
@@ -635,6 +654,9 @@ def _precision_default(self):
     def _show_toolbar_default(self):
         return defaults.show_toolbar
 
+    def _show_statusbar_default(self):
+        return defaults.show_statusbar
+
     def on(self, names, handler):
         """
         Setup a handler to be called when a user interacts with the current
@@ -845,6 +867,11 @@ def _show_toolbar_changed(self):
             return
         self.send({'type': 'change_show_toolbar'})
 
+    def _show_statusbar_changed(self):
+        if not self._initialized:
+            return
+        self.send({'type': 'change_show_statusbar'})
+
     def _update_table(self,
                       update_columns=False,
                       triggered_by=None,