Added toggle all checkbox option (#4402)

* added an option to show an toggle all checkbox for the columns
option/dropdown

* added documentation

* added missing html template

* fixed typo

* fixed typo and removed extra line

site/docs/api/localizations.md

@@ -156,11 +156,18 @@ $('#table').bootstrapTable({
 
 - **Default:** `'Columns'`
 
+## formatColumnsToggleAll
+
+- **Parameter:** `undefined`
+
+- **Default:** `'Toggle all'`
+
 ## formatFullscreen
 
 - **Parameter:** `undefined`
 
 - **Default:** `'Fullscreen'`
+
 ## formatAllRows
 
 - **Parameter:** `undefined`

site/docs/api/table-options.md

@@ -1017,6 +1017,20 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Basic Columns](https://examples.bootstrap-table.com/#options/basic-columns.html) and [Large Columns](https://examples.bootstrap-table.com/#options/large-columns.html)
 
+## showColumnsToggleAll
+
+- **Attribute:** `data-show-columns-toggle-all`
+
+- **Type:** `Boolean`
+
+- **Detail:**
+
+  Set `true` to show a toogle all checkbox within the columns option/dropdown.
+
+- **Default:** `false`
+
+- **Example:** [Columns Toggle All](https://examples.bootstrap-table.com/#options/columns-toggle-all.html)
+
 ## minimumCountColumns
 
 - **Attribute:** `data-minimum-count-columns`

src/bootstrap-table.js

@@ -530,7 +530,18 @@ class BootstrapTable {
         ${o.showButtonText ? o.formatColumns() : ''} 
         ${this.constants.html.dropdownCaret}
         </button>
-        ${this.constants.html.toobarDropdow[0]}`)
+        ${this.constants.html.toolbarDropdown[0]}`)
+
+      if (o.showColumnsToggleAll) {
+        const allFieldsVisible = this.getVisibleColumns().length === this.columns.length
+        html.push(
+          Utils.sprintf(this.constants.html.toolbarDropdownItem,
+            Utils.sprintf('<input type="checkbox" class="toggle-all" %s> <span>%s</span>', allFieldsVisible ? 'checked="checked"' : '', o.formatColumnsToggleAll())
+          )
+        )
+
+        html.push(this.constants.html.toolbarDropdownSeperator)
+      }
 
       this.columns.forEach((column, i) => {
         if (column.radio || column.checkbox) {
@@ -544,13 +555,13 @@ class BootstrapTable {
         const checked = column.visible ? ' checked="checked"' : ''
 
         if (column.switchable) {
-          html.push(Utils.sprintf(this.constants.html.toobarDropdowItem,
+          html.push(Utils.sprintf(this.constants.html.toolbarDropdownItem,
             Utils.sprintf('<input type="checkbox" data-field="%s" value="%s"%s> <span>%s</span>',
               column.field, i, checked, column.title)))
           switchableCount++
         }
       })
-      html.push(this.constants.html.toobarDropdow[1], '</div>')
+      html.push(this.constants.html.toolbarDropdown[1], '</div>')
     }
 
     html.push('</div>')
@@ -584,6 +595,8 @@ class BootstrapTable {
 
     if (o.showColumns) {
       $keepOpen = this.$toolbar.find('.keep-open')
+      const $checkboxes = $keepOpen.find('input:not(".toggle-all")')
+      const $toggleAll = $keepOpen.find('input.toggle-all')
 
       if (switchableCount <= o.minimumCountColumns) {
         $keepOpen.find('input').prop('disabled', true)
@@ -592,11 +605,17 @@ class BootstrapTable {
       $keepOpen.find('li, label').off('click').on('click', e => {
         e.stopImmediatePropagation()
       })
-      $keepOpen.find('input').off('click').on('click', ({currentTarget}) => {
+
+      $checkboxes.off('click').on('click', ({currentTarget}) => {
         const $this = $(currentTarget)
 
         this._toggleColumn($this.val(), $this.prop('checked'), false)
         this.trigger('column-switch', $this.data('field'), $this.prop('checked'))
+        $toggleAll.prop('checked', $checkboxes.filter(':checked').length === this.columns.length)
+      })
+
+      $toggleAll.off('click').on('click', ({currentTarget}) => {
+        this._toggleAllColumns($(currentTarget).prop('checked'))
       })
     }
 
@@ -2272,8 +2291,11 @@ class BootstrapTable {
   }
 
   _toggleAllColumns (visible) {
-    for (const column of this.columns) {
+    for (const column of this.columns.slice().reverse()) {
       if (column.switchable) {
+        if (!visible && this.options.showColumns && this.getVisibleColumns().length === this.options.minimumCountColumns) {
+          continue
+        }
         column.visible = visible
       }
     }
@@ -2283,7 +2305,17 @@ class BootstrapTable {
     this.initPagination()
     this.initBody()
     if (this.options.showColumns) {
-      const $items = this.$toolbar.find('.keep-open input').prop('disabled', false)
+      const $items = this.$toolbar.find('.keep-open input:not(".toggle-all")').prop('disabled', false)
+
+      if (visible) {
+        $items.prop('checked', visible)
+      } else {
+        $items.get().reverse().forEach((item) => {
+          if ($items.filter(':checked').length > this.options.minimumCountColumns) {
+            $(item).prop('checked', visible)
+          }
+        })
+      }
 
       if ($items.filter(':checked').length <= this.options.minimumCountColumns) {
         $items.filter(':checked').prop('disabled', true)

src/constants/index.js

@@ -44,8 +44,9 @@ const CONSTANTS = {
       buttonActive: 'active'
     },
     html: {
-      toobarDropdow: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
-      toobarDropdowItem: '<li role="menuitem"><label>%s</label></li>',
+      toolbarDropdown: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
+      toolbarDropdownItem: '<li role="menuitem"><label>%s</label></li>',
+      toolbarDropdownSeperator: '<li class="divider"></li>',
       pageDropdown: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
       pageDropdownItem: '<li role="menuitem" class="%s"><a href="#">%s</a></li>',
       dropdownCaret: '<span class="caret"></span>',
@@ -88,10 +89,11 @@ const CONSTANTS = {
       buttonActive: 'active'
     },
     html: {
-      toobarDropdow: ['<div class="dropdown-menu dropdown-menu-right">', '</div>'],
-      toobarDropdowItem: '<label class="dropdown-item">%s</label>',
+      toolbarDropdown: ['<div class="dropdown-menu dropdown-menu-right">', '</div>'],
+      toolbarDropdownItem: '<label class="dropdown-item">%s</label>',
       pageDropdown: ['<div class="dropdown-menu">', '</div>'],
       pageDropdownItem: '<a class="dropdown-item %s" href="#">%s</a>',
+      toolbarDropdownSeperator: '<div class="dropdown-divider"></div>',
       dropdownCaret: '<span class="caret"></span>',
       pagination: ['<ul class="pagination%s">', '</ul>'],
       paginationItem: '<li class="page-item%s"><a class="page-link" aria-label="%s" href="javascript:void(0)">%s</a></li>',
@@ -182,6 +184,7 @@ const DEFAULTS = {
     return {}
   },
   showColumns: false,
+  showColumnsToggleAll: false,
   minimumCountColumns: 1,
   showPaginationSwitch: false,
   showRefresh: false,
@@ -367,6 +370,9 @@ const EN = {
   formatColumns () {
     return 'Columns'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-af-ZA.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['af-ZA'] = {
   formatColumns () {
     return 'Kolomme'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-ar-SA.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['ar-SA'] = {
   formatColumns () {
     return 'أعمدة'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-ca-ES.js

@@ -63,6 +63,9 @@ $.fn.bootstrapTable.locales['ca-ES'] = {
   formatColumns () {
     return 'Columnes'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-cs-CZ.js

@@ -63,6 +63,9 @@ $.fn.bootstrapTable.locales['cs-CZ'] = {
   formatColumns () {
     return 'Sloupce'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-da-DK.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['da-DK'] = {
   formatColumns () {
     return 'Kolonner'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-de-DE.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['de-DE'] = {
   formatColumns () {
     return 'Spalten'
   },
+  formatColumnsToggleAll () {
+    return 'Alle umschalten'
+  },
   formatFullscreen () {
     return 'Vollbild'
   },

src/locale/bootstrap-table-el-GR.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['el-GR'] = {
   formatColumns () {
     return 'Columns'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-en-US.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['en-US'] = {
   formatColumns () {
     return 'Columns'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-es-AR.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['es-AR'] = {
   formatColumns () {
     return 'Columns'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-es-CL.js

@@ -63,6 +63,9 @@ $.fn.bootstrapTable.locales['es-CL'] = {
   formatColumns () {
     return 'Columnas'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-es-CR.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['es-CR'] = {
   formatColumns () {
     return 'Columnas'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-es-ES.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['es-ES'] = {
   formatColumns () {
     return 'Columnas'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-es-MX.js

@@ -64,6 +64,9 @@ $.fn.bootstrapTable.locales['es-MX'] = {
   formatColumns () {
     return 'Columnas'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Pantalla completa'
   },

src/locale/bootstrap-table-es-NI.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['es-NI'] = {
   formatColumns () {
     return 'Columnas'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-es-SP.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['es-SP'] = {
   formatColumns () {
     return 'Columnas'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-et-EE.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['et-EE'] = {
   formatColumns () {
     return 'Veerud'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-eu-EU.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['eu-EU'] = {
   formatColumns () {
     return 'Zutabeak'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-fa-IR.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['fa-IR'] = {
   formatColumns () {
     return 'سطر ها'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-fi-FI.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['fi-FI'] = {
   formatColumns () {
     return 'Sarakkeet'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-fr-BE.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['fr-BE'] = {
   formatColumns () {
     return 'Columns'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-fr-FR.js

@@ -63,6 +63,9 @@ $.fn.bootstrapTable.locales['fr-FR'] = {
   formatColumns () {
     return 'Colonnes'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-he-IL.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['he-IL'] = {
   formatColumns () {
     return 'עמודות'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-hr-HR.js

@@ -63,6 +63,9 @@ $.fn.bootstrapTable.locales['hr-HR'] = {
   formatColumns () {
     return 'Kolone'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-hu-HU.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['hu-HU'] = {
   formatColumns () {
     return 'Oszlopok'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-id-ID.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['id-ID'] = {
   formatColumns () {
     return 'kolom'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-it-IT.js

@@ -64,6 +64,9 @@ $.fn.bootstrapTable.locales['it-IT'] = {
   formatColumns () {
     return 'Colonne'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-ja-JP.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['ja-JP'] = {
   formatColumns () {
     return '列'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-ka-GE.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['ka-GE'] = {
   formatColumns () {
     return 'სვეტები'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-ko-KR.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['ko-KR'] = {
   formatColumns () {
     return '컬럼 필터링'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-ms-MY.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['ms-MY'] = {
   formatColumns () {
     return 'Lajur'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-nb-NO.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['nb-NO'] = {
   formatColumns () {
     return 'Kolonner'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-nl-NL.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['nl-NL'] = {
   formatColumns () {
     return 'Kolommen'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-pl-PL.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['pl-PL'] = {
   formatColumns () {
     return 'Kolumny'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-pt-BR.js

@@ -63,6 +63,9 @@ $.fn.bootstrapTable.locales['pt-BR'] = {
   formatColumns () {
     return 'Colunas'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-pt-PT.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['pt-PT'] = {
   formatColumns () {
     return 'Colunas'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-ro-RO.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['ro-RO'] = {
   formatColumns () {
     return 'Coloane'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-ru-RU.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['ru-RU'] = {
   formatColumns () {
     return 'Колонки'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-sk-SK.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['sk-SK'] = {
   formatColumns () {
     return 'Stĺpce'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-sv-SE.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['sv-SE'] = {
   formatColumns () {
     return 'kolumn'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-th-TH.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['th-TH'] = {
   formatColumns () {
     return 'คอลัมน์'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-tr-TR.js

@@ -63,6 +63,9 @@ $.fn.bootstrapTable.locales['tr-TR'] = {
   formatColumns () {
     return 'Sütunlar'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-uk-UA.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['uk-UA'] = {
   formatColumns () {
     return 'Стовпці'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-ur-PK.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['ur-PK'] = {
   formatColumns () {
     return 'کالم'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-uz-Latn-UZ.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['uz-Latn-UZ'] = {
   formatColumns () {
     return 'Ustunlar'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-vi-VN.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['vi-VN'] = {
   formatColumns () {
     return 'Columns'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return 'Fullscreen'
   },

src/locale/bootstrap-table-zh-CN.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['zh-CN'] = {
   formatColumns () {
     return '列'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return '全屏'
   },

src/locale/bootstrap-table-zh-TW.js

@@ -62,6 +62,9 @@ $.fn.bootstrapTable.locales['zh-TW'] = {
   formatColumns () {
     return '列'
   },
+  formatColumnsToggleAll () {
+    return 'Toggle all'
+  },
   formatFullscreen () {
     return '全屏'
   },

src/themes/bulma/bootstrap-table-bulma.js

@@ -25,8 +25,9 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.classes.paginationActive = 'is-current'
     this.constants.classes.buttonActive = 'is-active'
 
-    this.constants.html.toobarDropdow = ['<div class="dropdown-menu"><div class="dropdown-content">', '</div></div>']
-    this.constants.html.toobarDropdowItem = '<label class="dropdown-item">%s</label>'
+    this.constants.html.toolbarDropdown = ['<div class="dropdown-menu"><div class="dropdown-content">', '</div></div>']
+    this.constants.html.toolbarDropdownItem = '<label class="dropdown-item">%s</label>'
+    this.constants.html.toolbarDropdownSeperator = '<li class="dropdown-divider"></li>'
     this.constants.html.pageDropdown = ['<div class="dropdown-menu"><div class="dropdown-content">', '</div></div>']
     this.constants.html.pageDropdownItem = '<a class="dropdown-item %s" href="#">%s</a>'
     this.constants.html.dropdownCaret = '<span class="icon is-small"><i class="fas fa-angle-down" aria-hidden="true"></i></span>'

src/themes/foundation/bootstrap-table-foundation.js

@@ -23,8 +23,9 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.classes.paginationActive = 'current'
     this.constants.classes.buttonActive = 'success'
 
-    this.constants.html.toobarDropdow = ['<ul class="dropdown-pane" id="toolbar-columns-id" data-dropdown><ul class="vertical menu">', '</ul></div>']
-    this.constants.html.toobarDropdowItem = '<li><label class="dropdown-item">%s</label></li>'
+    this.constants.html.toolbarDropdown = ['<ul class="dropdown-pane" id="toolbar-columns-id" data-dropdown><ul class="vertical menu">', '</ul></div>']
+    this.constants.html.toolbarDropdownItem = '<li><label class="dropdown-item">%s</label></li>'
+    this.constants.html.toolbarDropdownSeperator = '<li><hr></li>'
     this.constants.html.pageDropdown = ['<div class="dropdown-pane" id="pagination-list-id" data-dropdown><ul class="vertical menu">', '</ul></div>']
     this.constants.html.pageDropdownItem = '<li class="dropdown-item %s"><a href="#">%s</a></li>'
     this.constants.html.dropdownCaret = '<i class="fa fa-angle-down"></i>'

src/themes/materialize/bootstrap-table-materialize.js

@@ -35,8 +35,9 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.classes.paginationDropdown = ''
     this.constants.classes.buttonActive = 'green'
 
-    this.constants.html.toobarDropdow = ['<ul id="toolbar-columns-id" class="dropdown-content">', '</ul>']
-    this.constants.html.toobarDropdowItem = '<li><label>%s</label></li>'
+    this.constants.html.toolbarDropdown = ['<ul id="toolbar-columns-id" class="dropdown-content">', '</ul>']
+    this.constants.html.toolbarDropdownItem = '<li><label>%s</label></li>'
+    this.constants.html.toolbarDropdownSeperator = '<li class="divider" tabindex="-1"></li>'
     this.constants.html.pageDropdown = ['<ul id="pagination-list-id" class="dropdown-content">', '</ul>']
     this.constants.html.pageDropdownItem = '<li><a class="%s" href="#">%s</a></li>'
     this.constants.html.dropdownCaret = '<i class="material-icons">arrow_drop_down</i>'

src/themes/semantic/bootstrap-table-semantic.js

@@ -21,8 +21,9 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.classes.inputGroup = 'ui input'
     this.constants.classes.paginationDropdown = 'ui dropdown'
 
-    this.constants.html.toobarDropdow = ['<div class="menu">', '</div>']
-    this.constants.html.toobarDropdowItem = '<label class="item">%s</label>'
+    this.constants.html.toolbarDropdown = ['<div class="menu">', '</div>']
+    this.constants.html.toolbarDropdownItem = '<label class="item">%s</label>'
+    this.constants.html.toolbarDropdownSeperator = '<div class="divider"></div>'
     this.constants.html.pageDropdown = ['<div class="menu">', '</div>']
     this.constants.html.pageDropdownItem = '<a class="item %s" href="#">%s</a>'
     this.constants.html.dropdownCaret = '<i class="dropdown icon"></i>'