Standardize global and column level resizable and sortable properties

README.md

@@ -164,6 +164,7 @@ These are all of the available props (and their default values) for the main `<R
   collapseOnDataChange: true,
   freezeWhenExpanded: false,
   showFilters: false,
+  sortable: true,
   resizable: true,
   defaultSorted: [],
   defaultFiltered: [],
@@ -265,8 +266,8 @@ These are all of the available props (and their default values) for the main `<R
     Expander: undefined,
     Filter: undefined,
     // Standard options
-    resizable: true,
-    sortable: true,
+    sortable: undefined, // use table default
+    resizable: undefined, // use table default
     show: true,
     minWidth: 100,
     // Cells only
@@ -289,6 +290,7 @@ These are all of the available props (and their default values) for the main `<R
   // Global Expander Column Defaults
   expanderDefaults: {
     sortable: false,
+    resizable: false,
     width: 35,
     hideFilter: true
   },

src/defaultProps.js

@@ -20,6 +20,7 @@ export default {
   collapseOnDataChange: true,
   freezeWhenExpanded: false,
   showFilters: false,
+  sortable: true,
   resizable: true,
   defaultSorted: [],
   defaultFiltered: [],
@@ -120,7 +121,8 @@ export default {
     Expander: undefined,
     Filter: undefined,
     // All Columns
-    sortable: true,
+    sortable: undefined, // use table default
+    resizable: undefined, // use table default
     show: true,
     minWidth: 100,
     // Cells only
@@ -145,6 +147,7 @@ export default {
   // Global Expander Column Defaults
   expanderDefaults: {
     sortable: false,
+    resizable: false,
     width: 35,
     hideFilter: true
   },

src/index.js

@@ -76,6 +76,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
       loadingText,
       noDataText,
       showFilters,
+      sortable,
       resizable,
       // Pivoting State
       pivotIDKey,
@@ -303,7 +304,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
         ...columnHeaderProps.rest
       }
 
-      const resizer = (typeof column.resizable !== 'undefined' ? column.resizable : resizable) ? (
+      const isResizable = _.getFirstDefined(column.resizable, resizable, false)
+      const resizer = isResizable ? (
         <ResizerComponent
           onMouseDown={e => this.resizeColumnStart(column, e, false)}
           onTouchStart={e => this.resizeColumnStart(column, e, true)}
@@ -312,6 +314,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
         />
       ) : null
 
+      const isSortable = _.getFirstDefined(column.sortable, sortable, false)
+
       return (
         <ThComponent
           key={i + '-' + column.id}
@@ -319,7 +323,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
             classes,
             'rt-resizable-header',
             sort ? (sort.desc ? '-sort-desc' : '-sort-asc') : '',
-            column.sortable && '-cursor-pointer',
+            isSortable && '-cursor-pointer',
             !show && '-hidden',
             pivotBy && pivotBy.slice(0, -1).includes(column.id) && 'rt-header-pivot'
           )}
@@ -330,7 +334,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
             maxWidth: `${maxWidth}px`
           }}
           toggleSort={(e) => {
-            column.sortable && this.sortColumn(column, e.shiftKey)
+            isSortable && this.sortColumn(column, e.shiftKey)
           }}
           {...rest}
         >
@@ -522,11 +526,11 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
               const ResolvedExpanderComponent = column.Expander || ExpanderComponent
               const ResolvedPivotValueComponent = column.PivotValue || PivotValueComponent
               const DefaultResolvedPivotComponent = PivotComponent || (props => (
-                <div>
-                  <ResolvedExpanderComponent {...props} />
-                  <ResolvedPivotValueComponent {...props} />
-                </div>
-              ))
+                  <div>
+                    <ResolvedExpanderComponent {...props} />
+                    <ResolvedPivotValueComponent {...props} />
+                  </div>
+                ))
               const ResolvedPivotComponent = column.Pivot || DefaultResolvedPivotComponent
 
               // Is this cell expandable?

stories/Filtering.js

@@ -28,7 +28,9 @@ class Story extends React.Component {
         collapseOnPageChange: true,
         collapseOnDataChange: true,
         freezeWhenExpanded: false,
-        showFilters: true
+        showFilters: true,
+        sortable: true,
+        resizable: true
       },
       data: data
     }

stories/SubComponents.js

@@ -26,7 +26,9 @@ class Story extends React.Component {
         collapseOnPageChange: true,
         collapseOnDataChange: true,
         freezeWhenExpanded: false,
-        showFilters: false
+        showFilters: false,
+        sortable: true,
+        resizable: true
       },
       data: data
     }