Reorder the column options and update column options docs

site/docs/api/column-options.md

@@ -8,42 +8,6 @@ toc: true
 
 The column options is defined in `jQuery.fn.bootstrapTable.columnDefaults`.
 
-## radio
-
-- **Attribute:** `data-radio`
-
-- **Type:** `Boolean`
-
-- **Detail:**
-
-  Set `true` to show a radio. The radio column has fixed width.
-
-- **Default:** `false`
-
-## checkbox
-
-- **Attribute:** `data-checkbox`
-
-- **Type:** `Boolean`
-
-- **Detail:**
-
-  Set `true` to show a checkbox. The checkbox column has fixed width.
-
-- **Default:** `false`
-
-## checkboxEnabled
-
-- **Attribute:** `data-checkbox-enabled`
-
-- **Type:** `Boolean`
-
-- **Detail:**
-
-  Set `false` to disable the the checkboxes/radioboxes.
-
-- **Default:** `true`
-
 ## field
 
 - **Attribute:** `data-field`
@@ -92,6 +56,18 @@ The column options is defined in `jQuery.fn.bootstrapTable.columnDefaults`.
 
 - **Default:** `undefined`
 
+## width
+
+- **Attribute:** `data-width`
+
+- **Type:** `Number | String`
+
+- **Detail:**
+
+  The width of column. If not defined, the width will auto expand to fit its contents. Though if the table is left responsive and sized too small this `'width'` might be ignored (use min/max-width via class or such then). Also you can add `'%'` to your number and the Bootstrap Table will use the percentage unit, otherwise, leave as number (or add `'px'`) to make it use pixels.
+
+- **Default:** `undefined`
+
 ## rowspan
 
 - **Attribute:** `rowspan | data-rowspan`
@@ -164,212 +140,236 @@ The column options is defined in `jQuery.fn.bootstrapTable.columnDefaults`.
 
 - **Default:** `undefined`
 
-## width
+## cellStyle
 
-- **Attribute:** `data-width`
+- **Attribute:** `data-cell-style`
 
-- **Type:** `Number | String`
+- **Type:** `Function`
 
 - **Detail:**
 
-  The width of column. If not defined, the width will auto expand to fit its contents. Though if the table is left responsive and sized too small this `'width'` might be ignored (use min/max-width via class or such then). Also you can add `'%'` to your number and the Bootstrap Table will use the percentage unit, otherwise, leave as number (or add `'px'`) to make it use pixels.
+  The cell style formatter function, take four parameters:
+
+  * `value`: the field value.
+  * `row`: the row record data.
+  * `index`: the row index.
+  * `field`: the row field.
+
+  Support classes or css.
 
 - **Default:** `undefined`
 
-## sortable
+## radio
 
-- **Attribute:** `data-sortable`
+- **Attribute:** `data-radio`
 
 - **Type:** `Boolean`
 
 - **Detail:**
 
-  Set `true` to allow the column can be sorted.
+  Set `true` to show a radio. The radio column has fixed width.
 
 - **Default:** `false`
 
-## order
+## checkbox
 
-- **Attribute:** `data-order`
+- **Attribute:** `data-checkbox`
 
-- **Type:** `String`
+- **Type:** `Boolean`
 
 - **Detail:**
 
-  The default sort order, can only be `'asc'` or `'desc'`.
+  Set `true` to show a checkbox. The checkbox column has fixed width.
 
-- **Default:** `'asc'`
+- **Default:** `false`
 
-## visible
+## checkboxEnabled
 
-- **Attribute:** `data-visible`
+- **Attribute:** `data-checkbox-enabled`
 
 - **Type:** `Boolean`
 
 - **Detail:**
 
-  Set `false` to hide the columns item.
+  Set `false` to disable the the checkboxes/radioboxes.
 
 - **Default:** `true`
 
-## cardVisible
+## clickToSelect
 
-- **Attribute:** `data-card-visible`
+- **Attribute:** `data-click-to-select`
 
 - **Type:** `Boolean`
 
 - **Detail:**
 
-  Set `false` to hide the columns item in card view state.
+  Set `true` to select checkbox or radio when the column is clicked.
 
 - **Default:** `true`
 
-## switchable
+## showSelectTitle
 
-- **Attribute:** `data-switchable`
+- **Attribute:** `data-show-select-title`
 
 - **Type:** `Boolean`
 
 - **Detail:**
 
-  Set `false` to disable the switchable of columns item.
+  Set `true` to show the title of column with 'radio' or 'singleSelect' 'checkbox' option.
 
-- **Default:** `true`
+- **Default:** `false`
 
-## clickToSelect
+## sortable
 
-- **Attribute:** `data-click-to-select`
+- **Attribute:** `data-sortable`
 
 - **Type:** `Boolean`
 
 - **Detail:**
 
-  Set `true` to select checkbox or radio when the column is clicked.
+  Set `true` to allow the column can be sorted.
 
-- **Default:** `true`
+- **Default:** `false`
 
-## formatter
+## sortName
 
-- **Attribute:** `data-formatter`
+- **Attribute:** `data-sort-name`
 
-- **Type:** `Function`
+- **Type:** `String`
 
 - **Detail:**
 
-  The context (this) is the column Object.
-
-  The cell formatter function, take three parameters:
-
-  * `value`: the field value.
-  * `row`: the row record data.
-  * `index`: the row index.
-  * `field`: the row field.
+  Provide a customizable sort-name, not the default sort-name in the header, or the field name of the column. For example, a column might display the value of fieldName of 'html' such as `<b><span style="color:red">abc</span></b>`, but a fieldName to sort is 'content' with the value of `'abc'`.
 
 - **Default:** `undefined`
 
-## footerFormatter
+## order
 
-- **Attribute:** `data-footer-formatter`
+- **Attribute:** `data-order`
 
-- **Type:** `Function`
+- **Type:** `String`
 
 - **Detail:**
 
-  The context (this) is the column Object.
+  The default sort order, can only be `'asc'` or `'desc'`.
 
-  The function, take one parameter:
+- **Default:** `'asc'`
 
-  * `data`: Array of all the  data rows.
+## sorter
 
-  the function should return a string with the text to show in the footer cell.
+- **Attribute:** `data-sorter`
+
+- **Type:** `Function`
+
+- **Detail:**
+
+  The custom field sort function that used to do local sorting, take four parameters:
+
+  * `a`: the first field value.
+  * `b`: the second field value.
+  * `rowA`: the first row.
+  * `rowB`: the second row.
 
 - **Default:** `undefined`
 
-## events
+## visible
 
-- **Attribute:** `data-events`
+- **Attribute:** `data-visible`
 
-- **Type:** `Object`
+- **Type:** `Boolean`
 
 - **Detail:**
 
-  The cell events listener when you use formatter function, take four parameters:
+  Set `false` to hide the columns item.
 
-  * `event`: the jQuery event.
-  * `value`: the field value.
-  * `row`: the row record data.
-  * `index`: the row index.
+- **Default:** `true`
 
-  Example code:
+## switchable
 
-   {% highlight html %}
-  <th .. data-events="operateEvent">
-  var operateEvents = {
-    'click .like': function (e, value, row, index) {}
-  }
-  {% endhighlight %}
+- **Attribute:** `data-switchable`
 
-- **Default:** `undefined`
+- **Type:** `Boolean`
 
-## sorter
+- **Detail:**
 
-- **Attribute:** `data-sorter`
+  Set `false` to disable the switchable of columns item.
 
-- **Type:** `Function`
+- **Default:** `true`
 
-- **Detail:**
+## cardVisible
 
-  The custom field sort function that used to do local sorting, take four parameters:
+- **Attribute:** `data-card-visible`
 
-  * `a`: the first field value.
-  * `b`: the second field value.
-  * `rowA`: the first row.
-  * `rowB`: the second row.
+- **Type:** `Boolean`
 
-- **Default:** `undefined`
+- **Detail:**
 
-## sortName
+  Set `false` to hide the columns item in card view state.
 
-- **Attribute:** `data-sort-name`
+- **Default:** `true`
 
-- **Type:** `String`
+## searchable
+
+- **Attribute:** `data-searchable`
+
+- **Type:** `Boolean`
 
 - **Detail:**
 
-  Provide a customizable sort-name, not the default sort-name in the header, or the field name of the column. For example, a column might display the value of fieldName of 'html' such as `<b><span style="color:red">abc</span></b>`, but a fieldName to sort is 'content' with the value of `'abc'`.
+  Set `true` to search data for this column.
 
-- **Default:** `undefined`
+- **Default:** `true`
 
-## cellStyle
+## formatter
 
-- **Attribute:** `data-cell-style`
+- **Attribute:** `data-formatter`
 
 - **Type:** `Function`
 
 - **Detail:**
 
-  The cell style formatter function, take four parameters:
+  The context (this) is the column Object.
+
+  The cell formatter function, take three parameters:
 
   * `value`: the field value.
   * `row`: the row record data.
   * `index`: the row index.
   * `field`: the row field.
 
-  Support classes or css.
+- **Default:** `undefined`
+
+## footerFormatter
+
+- **Attribute:** `data-footer-formatter`
+
+- **Type:** `Function`
+
+- **Detail:**
+
+  The context (this) is the column Object.
+
+  The function, take one parameter:
+
+  * `data`: Array of all the  data rows.
+
+  the function should return a string with the text to show in the footer cell.
 
 - **Default:** `undefined`
 
-## searchable
+## detailFormatter
 
-- **Attribute:** `data-searchable`
+- **Attribute:** `data-detail-formatter`
 
-- **Type:** `Boolean`
+- **Type:** `Function`
 
 - **Detail:**
 
-  Set `true` to search data for this column.
+  Format your detail view when `detailView` and `detailViewByClick` is set to `true`. Return a `String` and it will be appended into the detail view cell, optionally render the element directly using the third parameter which is a jQuery element of the target cell.
 
-- **Default:** `true`
+  Fallback is the detail-formatter of the table.
+
+- **Default:** `function(index, row, element) { return '' }`
 
 ## searchFormatter
 
@@ -395,30 +395,28 @@ The column options is defined in `jQuery.fn.bootstrapTable.columnDefaults`.
 
 - **Default:** `false`
 
-## showSelectTitle
+## events
 
-- **Attribute:** `data-show-select-title`
+- **Attribute:** `data-events`
 
-- **Type:** `Boolean`
+- **Type:** `Object`
 
 - **Detail:**
 
-  Set `true` to show the title of column with 'radio' or 'singleSelect' 'checkbox' option.
-
-- **Default:** `false`
-
-## detailFormatter
-
-- **Attribute:** `data-detail-formatter`
-
-- **Type:** `Function`
+  The cell events listener when you use formatter function, take four parameters:
 
-- **Detail:**
+  * `event`: the jQuery event.
+  * `value`: the field value.
+  * `row`: the row record data.
+  * `index`: the row index.
 
-  Format your detail view when `detailView` and `detailViewByClick` is set to `true`. Return a `String` and it will be appended into the detail view cell, optionally render the element directly using the third parameter which is a jQuery element of the target cell.
-  
-  Fallback is the detail-formatter of the table.
+  Example code:
 
-- **Default:** `function(index, row, element) { return '' }`
+   {% highlight html %}
+  <th .. data-events="operateEvent">
+  var operateEvents = {
+    'click .like': function (e, value, row, index) {}
+  }
+  {% endhighlight %}
 
-- **Example:** [Detail View](https://examples.bootstrap-table.com/#options/detail-view.html)
+- **Default:** `undefined`

src/bootstrap-table.js

@@ -579,7 +579,7 @@
     formatPaginationSwitch () {
       return 'Hide/Show pagination'
     },
-    formatRefresh () {
+    formatReresh () {
       return 'Refresh'
     },
     formatToggle () {
@@ -599,35 +599,37 @@
   $.extend(DEFAULTS, LOCALES['en-US'])
 
   const COLUMN_DEFAULTS = {
-    radio: false,
-    checkbox: false,
-    checkboxEnabled: true,
     field: undefined,
     title: undefined,
     titleTooltip: undefined,
     'class': undefined,
+    width: undefined,
+    rowspan: undefined,
+    colspan: undefined,
     align: undefined, // left, right, center
     halign: undefined, // left, right, center
     falign: undefined, // left, right, center
     valign: undefined, // top, middle, bottom
-    width: undefined,
+    cellStyle: undefined,
+    radio: false,
+    checkbox: false,
+    checkboxEnabled: true,
+    clickToSelect: true,
+    showSelectTitle: false,
     sortable: false,
+    sortName: undefined,
     order: 'asc', // asc, desc
+    sorter: undefined,
     visible: true,
     switchable: true,
-    clickToSelect: true,
+    cardVisible: true,
+    searchable: true,
     formatter: undefined,
     footerFormatter: undefined,
-    events: undefined,
-    sorter: undefined,
     detailFormatter: undefined,
-    sortName: undefined,
-    cellStyle: undefined,
-    searchable: true,
     searchFormatter: true,
-    cardVisible: true,
     escape: false,
-    showSelectTitle: false
+    events: undefined
   }
 
   const EVENTS = {