Rename showFilters->filterable, hideFilter->filterable

README.md

@@ -163,9 +163,9 @@ These are all of the available props (and their default values) for the main `<R
   collapseOnPageChange: true,
   collapseOnDataChange: true,
   freezeWhenExpanded: false,
-  showFilters: false,
   sortable: true,
   resizable: true,
+  filterable: false,
   defaultSorted: [],
   defaultFiltered: [],
   defaultResized: [],
@@ -268,6 +268,7 @@ These are all of the available props (and their default values) for the main `<R
     // Standard options
     sortable: undefined, // use table default
     resizable: undefined, // use table default
+    filterable: undefined, // use table default
     show: true,
     minWidth: 100,
     // Cells only
@@ -283,16 +284,15 @@ These are all of the available props (and their default values) for the main `<R
     footerStyle: {},
     getFooterProps: () => ({}),
     filterMethod: undefined,
-    sortMethod: undefined,
-    hideFilter: false
+    sortMethod: undefined
   },
 
   // Global Expander Column Defaults
   expanderDefaults: {
     sortable: false,
     resizable: false,
-    width: 35,
-    hideFilter: true
+    filterable: false,
+    width: 35
   },
 
   // Global Pivot Column Defaults
@@ -356,7 +356,9 @@ Or just define them as props
   // General
   accessor: 'propertyName', // or Accessor eg. (row) => row.propertyName (see "Accessors" section for more details)
   id: 'myProperty', // Conditional - A unique ID is required if the accessor is not a string or if you would like to override the column name used in server-side calls
-  sortable: true,
+  sortable: boolean, // Overrides the table option
+  resizable: boolean, // Overrides the table option
+  filterable: boolean, // Overrides the table option
   show: true, // can be used to hide a column
   width: undefined, // A hardcoded width for the column. This overrides both min and max width options
   minWidth: 100, // A minimum width for this column. If there is extra room, column will flex to fill available space (up to the max-width, if set)
@@ -394,7 +396,6 @@ Or just define them as props
     // filter == an object specifying which filter is being applied. Format: {id: [the filter column's id], value: [the value the user typed in the filter field], pivotId: [if filtering on a pivot column, the pivotId will be set to the pivot column's id and the `id` field will be set to the top level pivoting column]}
     // row == the row of data supplied to the table
     // column == the column that the filter is on
-  hideFilter: false, // If `showFilters` is set on the table, this option will let you selectively hide the filter on a particular row
 }]
 ```
 
@@ -836,9 +837,9 @@ defaultSortMethod = (a, b) => {
 ```
 
 ## Filtering
-Filtering can be enabled by setting the `showFilters` option on the table.
+Filtering can be enabled by setting the `filterable` option on the table.
 
-If you don't want particular column to be filtered you can set the `hideFilter` option on the column.
+If you don't want particular column to be filtered you can set the `filterable={false}` option on the column.
 
 By default the table tries to filter by checking if the row's value starts with the filter text. The default method for filtering the table can be set with the table's `defaultFilterMethod` option.
 

src/defaultProps.js

@@ -19,9 +19,9 @@ export default {
   collapseOnPageChange: true,
   collapseOnDataChange: true,
   freezeWhenExpanded: false,
-  showFilters: false,
   sortable: true,
   resizable: true,
+  filterable: false,
   defaultSorted: [],
   defaultFiltered: [],
   defaultResized: [],
@@ -123,6 +123,7 @@ export default {
     // All Columns
     sortable: undefined, // use table default
     resizable: undefined, // use table default
+    filterable: undefined, // use table default
     show: true,
     minWidth: 100,
     // Cells only
@@ -140,16 +141,15 @@ export default {
     footerStyle: {},
     getFooterProps: emptyObj,
     filterMethod: undefined,
-    sortMethod: undefined,
-    hideFilter: false
+    sortMethod: undefined
   },
 
   // Global Expander Column Defaults
   expanderDefaults: {
     sortable: false,
     resizable: false,
-    width: 35,
-    hideFilter: true
+    filterable: false,
+    width: 35
   },
 
   pivotDefaults: {

src/index.js

@@ -75,9 +75,9 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
       manual,
       loadingText,
       noDataText,
-      showFilters,
       sortable,
       resizable,
+      filterable,
       // Pivoting State
       pivotIDKey,
       pivotValKey,
@@ -134,6 +134,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
     const padRows = _.range(Math.max(minRows - pageRows.length, 0))
 
     const hasColumnFooter = allVisibleColumns.some(d => d.Footer)
+    const hasFilters = filterable || allVisibleColumns.some(d => d.filterable)
 
     const recurseRowsViewIndex = (rows, path = [], index = -1) => {
       return [
@@ -400,6 +401,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
 
       const ResolvedFilterComponent = column.Filter || FilterComponent
 
+      const isFilterable = _.getFirstDefined(column.filterable, filterable, false)
+
       return (
         <ThComponent
           key={i + '-' + column.id}
@@ -414,7 +417,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
           }}
           {...rest}
         >
-          {!column.hideFilter ? (
+          {isFilterable ? (
             _.normalizeComponent(ResolvedFilterComponent,
               {
                 column,
@@ -788,7 +791,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
         >
           {hasHeaderGroups ? makeHeaderGroups() : null}
           {makeHeaders()}
-          {showFilters ? makeFilters() : null}
+          {hasFilters ? makeFilters() : null}
           <TbodyComponent
             className={classnames(tBodyProps.className)}
             style={{

src/lifecycle.js

@@ -12,14 +12,29 @@ export default Base => class extends Base {
     const oldState = this.getResolvedState()
     const newState = this.getResolvedState(nextProps, nextState)
 
-    if (JSON.stringify(oldState.defaultSorted) !== JSON.stringify(newState.defaultSorted)) {
-      newState.sorted = newState.defaultSorted
-    }
+    // Do a deep compare of new and old `defaultOption` and
+    // if they are different reset `option = defaultOption`
+    const defaultableOptions = ['sorted', 'filtered', 'resized', 'expanded']
+    defaultableOptions.forEach(x => {
+      const defaultName = `default${x.charAt(0).toUpperCase() + x.slice(1)}`
+      if (JSON.stringify(oldState[defaultName]) !== JSON.stringify(newState[defaultName])) {
+        newState[x] = newState[defaultName]
+      }
+    })
 
-    if ((oldState.showFilters !== newState.showFilters) ||
-      (oldState.showFilters !== newState.showFilters)) {
-      newState.filtered = newState.defaultFiltered
-    }
+    // If they change these table options, we need to reset defaults
+    // or else we could get into a state where the user has changed the UI
+    // and then disabled the ability to change it back.
+    // e.g. If `filterable` has changed, set `filtered = defaultFiltered`
+    const resettableOptions = ['sortable', 'filterable', 'resizable']
+    resettableOptions.forEach(x => {
+      if (oldState[x] !== newState[x]) {
+        const baseName = x.replace('able', '')
+        const optionName = `${baseName}ed`
+        const defaultName = `default${optionName.charAt(0).toUpperCase() + optionName.slice(1)}`
+        newState[optionName] = newState[defaultName]
+      }
+    })
 
     // Props that trigger a data update
     if (
@@ -27,7 +42,6 @@ export default Base => class extends Base {
       oldState.columns !== newState.columns ||
       oldState.pivotBy !== newState.pivotBy ||
       oldState.sorted !== newState.sorted ||
-      oldState.showFilters !== newState.showFilters ||
       oldState.filtered !== newState.filtered
     ) {
       this.setStateWithData(this.getDataModel(newState))

src/methods.js

@@ -272,7 +272,6 @@ export default Base => class extends Base {
       manual,
       sorted,
       filtered,
-      showFilters,
       defaultFilterMethod,
       resolvedData,
       allVisibleColumns,
@@ -282,17 +281,16 @@ export default Base => class extends Base {
     const sortMethodsByColumnID = {}
 
     allDecoratedColumns
-      .filter(col => col.sortMethod)
-      .forEach(col => {
-        sortMethodsByColumnID[col.id] = col.sortMethod
-      })
+    .filter(col => col.sortMethod)
+    .forEach(col => {
+      sortMethodsByColumnID[col.id] = col.sortMethod
+    })
 
     // Resolve the data from either manual data or sorted data
     return {
       sortedData: manual ? resolvedData : this.sortData(
         this.filterData(
           resolvedData,
-          showFilters,
           filtered,
           defaultFilterMethod,
           allVisibleColumns
@@ -315,10 +313,10 @@ export default Base => class extends Base {
     return _.getFirstDefined(this.state[key], this.props[key])
   }
 
-  filterData (data, showFilters, filtered, defaultFilterMethod, allVisibleColumns) {
+  filterData (data, filtered, defaultFilterMethod, allVisibleColumns) {
     let filteredData = data
 
-    if (showFilters && filtered.length) {
+    if (filtered.length) {
       filteredData = filtered.reduce(
         (filteredSoFar, nextFilter) => {
           return filteredSoFar.filter(
@@ -332,9 +330,9 @@ export default Base => class extends Base {
                 column = column.pivotColumns.find(x => x.id === nextFilter.id)
               }
 
-              // Don't filter hidden columns
-              if (!column) {
-                return
+              // Don't filter hidden columns or columns that have had their filters disabled
+              if (!column || column.filterable === false) {
+                return true
               }
 
               const filterMethod = column.filterMethod || defaultFilterMethod
@@ -353,7 +351,7 @@ export default Base => class extends Base {
         }
         return {
           ...row,
-          [this.props.subRowsKey]: this.filterData(row[this.props.subRowsKey], showFilters, filtered, defaultFilterMethod, allVisibleColumns)
+          [this.props.subRowsKey]: this.filterData(row[this.props.subRowsKey], filtered, defaultFilterMethod, allVisibleColumns)
         }
       }).filter(row => {
         if (!row[this.props.subRowsKey]) {

stories/ControlledTable.js

@@ -51,7 +51,7 @@ class Story extends React.Component {
             data={data}
             columns={columns}
             pivotBy={['lastName']}
-            showFilters
+            filterable
             // Controlled Props
             sorted={this.state.sorted}
             page={this.state.page}

stories/Filtering.js

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

stories/PivotingOptions.js

@@ -41,7 +41,7 @@ class Story extends React.Component {
         Header: 'Visits',
         accessor: 'visits',
         aggregate: vals => _.sum(vals),
-        hideFilter: true
+        filterable: false
       }]
     }, {
       pivot: true,
@@ -81,7 +81,7 @@ class Story extends React.Component {
             pivotBy={['firstName', 'lastName']}
             defaultSorted={[{id: 'firstName', desc: false}, {id: 'lastName', desc: true}]}
             collapseOnSortingChange={false}
-            showFilters
+            filterable
             ExpanderComponent={({isExpanded, ...rest}) => (
               isExpanded ? <span> &#10136; </span> : <span> &#10137; </span>
             )}

stories/PivotingSubComponents.js

@@ -39,7 +39,7 @@ class Story extends React.Component {
         Header: 'Visits',
         accessor: 'visits',
         aggregate: vals => _.sum(vals),
-        hideFilter: true
+        filterable: false
       }]
     }]
 
@@ -52,7 +52,7 @@ class Story extends React.Component {
             defaultPageSize={10}
             className='-striped -highlight'
             pivotBy={['firstName', 'lastName']}
-            showFilters
+            filterable
             SubComponent={(row) => {
               return (
                 <div style={{padding: '20px'}}>

stories/ServerSide.js

@@ -92,7 +92,7 @@ class Story extends React.Component {
             }]}
             manual // Forces table not to paginate or sort automatically, so we can handle it server-side
             defaultPageSize={10}
-            showFilters
+            filterable
             data={this.state.data} // Set the rows to be displayed
             pages={this.state.pages} // Display the total number of pages
             loading={this.state.loading} // Display the loading overlay when we need it

stories/SubComponents.js

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