5.3.5

.storybook/config.js

@@ -24,7 +24,6 @@ import FunctionalRendering from '../stories/FunctionalRendering.js'
 import CustomExpanderPosition from '../stories/CustomExpanderPosition.js'
 import NoDataText from '../stories/NoDataText.js'
 import Footers from '../stories/Footers.js'
-import Filtering from '../stories/Filtering.js'
 //
 configure(() => {
   storiesOf('1. Docs')
@@ -54,5 +53,4 @@ configure(() => {
     .add('Custom Expander Position', CustomExpanderPosition)
     .add('Custom "No Data" Text', NoDataText)
     .add('Footers', Footers)
-    .add('Custom Filtering', Filtering)
 }, module)

.storybook/fonts.css

@@ -11,7 +11,3 @@ h1 {
   margin-bottom: 15px;
   margin-top: 5px;
 }
-
-p {
-  margin-bottom: 15px;
-}

README.md

@@ -143,9 +143,6 @@ These are all of the available props (and their default values) for the main `<R
   collapseOnDataChange: true,
   freezeWhenExpanded: false,
   defaultSorting: [],
-  showFilters: false,
-  defaultFiltering: [],
-  defaultFilterMethod: (filter, row) => (row[filter.id] == filter.value),
 
   // Controlled State Overrides (see Fully Controlled Component section)
   page: undefined,
@@ -157,7 +154,6 @@ These are all of the available props (and their default values) for the main `<R
   onPageChange: undefined,
   onPageSizeChange: undefined,
   onSortingChange: undefined,
-  onFilteringChange: undefined,
 
   // Pivoting
   pivotBy: undefined,
@@ -188,9 +184,6 @@ These are all of the available props (and their default values) for the main `<R
   getTheadProps: () => ({}),
   getTheadTrProps: () => ({}),
   getTheadThProps: () => ({}),
-  getTheadFilterProps: () => ({}),
-  getTheadFilterTrProps: () => ({}),
-  getTheadFilterThProps: () => ({}),
   getTbodyProps: () => ({}),
   getTrGroupProps: () => ({}),
   getTrProps: () => ({}),
@@ -222,8 +215,7 @@ These are all of the available props (and their default values) for the main `<R
     footer: undefined,
     footerClassName: '',
     footerStyle: {},
-    getFooterProps: () => ({}),
-    filterMethod: undefined
+    getFooterProps: () => ({})
   },
 
   // Text
@@ -300,13 +292,8 @@ Or just define them as props
   footer: 'Header Name' or JSX eg. ({data, column}) => <div>Header Name</div>,
   footerClassName: '', // Set the classname of the `td` element of the column's footer
   footerStyle: {}, // Set the style of the `td` element of the column's footer
-  getFooterProps: (state, rowInfo, column, instance) => ({}) // A function that returns props to decorate the `td` element of the column's footer
+  getFooterProps: (state, rowInfo, column, instance) => ({}) // a function that returns props to decorate the `td` element of the column's footer
 
-  // Filtering
-  filterMethod: (filter, row, column) => {return true} // A function returning a boolean that specifies the filtering logic for the column
-    // 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]}
-    // row == the row of data supplied to the table
-    // column == the column that the filter is on
 }]
 ```
 
@@ -545,7 +532,7 @@ By adding a `SubComponent` props, you can easily add an expansion level to all r
 
 
 ## Server-side Data
-If you want to handle pagination, sorting, and filtering on the server, `react-table` makes it easy on you.
+If you want to handle pagination, and sorting on the server, `react-table` makes it easy on you.
 
 1. Feed React Table `data` from somewhere dynamic. eg. `state`, a redux store, etc...
 1. Add `manual` as a prop. This informs React Table that you'll be handling sorting and pagination server-side
@@ -568,8 +555,7 @@ If you want to handle pagination, sorting, and filtering on the server, `react-t
     Axios.post('mysite.com/data', {
       page: state.page,
       pageSize: state.pageSize,
-      sorting: state.sorting,
-      filtering: state.filtering
+      sorting: state.sorting
     })
       .then((res) => {
         // Update react-table
@@ -615,7 +601,6 @@ Here are the props and their corresponding callbacks that control the state of t
   onPageSizeChange={(pageSize, pageIndex) => {...}} // Called when the pageSize is changed by the user. The resolve page is also sent to maintain approximate position in the data
   onSortingChange={(column, shiftKey) => {...}} // Called when a sortable column header is clicked with the column itself and if the shiftkey was held. If the column is a pivoted column, `column` will be an array of columns
   onExpandRow={(index, event) => {...}} // Called when an expander is clicked. Use this to manage `expandedRows`
-  onFilteringChange={(column, event) => {...}} // Called when a user enters a value into a filter input field. The event is the onChange event of the input field.
 />
 ```
 

docs/iframe.html

@@ -16,7 +16,7 @@
       <body>
         <div id="root"></div>
         <div id="error-display"></div>
-        <script src="static/preview.ea1bdf726a82703c8f6f.bundle.js"></script>
+        <script src="static/preview.742092f25ec9b6802477.bundle.js"></script>
       </body>
     </html>
   

docs/index.html

@@ -38,7 +38,7 @@
       </head>
       <body style="margin: 0;">
         <div id="root"></div>
-        <script src="static/manager.064c8fe6b78907f0a142.bundle.js"></script>
+        <script src="static/manager.1e44a83b81ae02b691ef.bundle.js"></script>
       </body>
     </html>
   

docs/static/manager.064c8fe6b78907f0a142.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/manager.064c8fe6b78907f0a142.bundle.js","sources":["webpack:///static/manager.064c8fe6b78907f0a142.bundle.js"],"mappings":"AAAA;AAkuDA;AA84DA;AAy8DA;AA00DA;AAsyEA;AA89CA;AA+rDA;AAsiDA;AAg6DA;AA2nDA;AA++CA;AAkvDA;AAsnEA;AA2oDA;AAivCA;AA+nDA;AAkpDA;AA6lEA;AAs4DA;AAquDA;AA+pDA;AAqxDA;AAsrDA;AA4yDA;AA88GA;AAj6CA;AAopGA;AAsuFA;AA+zEA;AAtMA;AAizEA","sourceRoot":""}

docs/static/manager.1e44a83b81ae02b691ef.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/manager.1e44a83b81ae02b691ef.bundle.js","sources":["webpack:///static/manager.1e44a83b81ae02b691ef.bundle.js"],"mappings":"AAAA;AAkuDA;AA84DA;AA28DA;AA00DA;AAsyEA;AA89CA;AA+rDA;AAsiDA;AAg6DA;AA2nDA;AA++CA;AAkvDA;AAsnEA;AA2oDA;AAivCA;AA+nDA;AAkpDA;AA6lEA;AAs4DA;AAquDA;AA+pDA;AAqxDA;AAsrDA;AA2yDA;AA88GA;AAj6CA;AAopGA;AAsuFA;AA+zEA;AAtMA;AAizEA","sourceRoot":""}

docs/static/preview.742092f25ec9b6802477.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/preview.742092f25ec9b6802477.bundle.js","sources":["webpack:///static/preview.742092f25ec9b6802477.bundle.js"],"mappings":"AAAA;AAkuDA;AAo8CA;AA8uGA;AA++EA;AAi9NA;AAo5GA;AAmvDA;AAmgEA;AA4xDA;AAigEA;AAmjDA;AA4sDA;AAk8CA;AAu/DA;AA8lDA;AA09CA;AAqoDA;AAywEA;AAokDA;AAsvCA;AA2mDA;AA4tDA;AAqjEA;AAs2DA;AAmyDA;AAsnDA;AAk1EA;AAmjGA;AAiuDA;AA+2CA;AAq5BA;AA4zDA;AA26BA;AAuOA;AAw5EA","sourceRoot":""}

docs/static/preview.ea1bdf726a82703c8f6f.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/preview.ea1bdf726a82703c8f6f.bundle.js","sources":["webpack:///static/preview.ea1bdf726a82703c8f6f.bundle.js"],"mappings":"AAAA;AAkuDA;AAo/DA;AAgrFA;AAmmFA;AA07OA;AAuwFA;AAwtDA;AA+jEA;AA4uDA;AAi8DA;AA+lDA;AA4yDA;AA28CA;AAw7DA;AAooDA;AA67CA;AAiqDA;AAynEA;AAwxDA;AA+rCA;AA+mDA;AA2lDA;AAkqEA;AAs2DA;AA2zDA;AAo4CA;AAksFA;AAmjGA;AAksDA;AA02CA;AAgoCA;AAm/CA;AA+4CA;AAsCA;AA+jFA","sourceRoot":""}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "5.3.4",
+  "version": "5.3.5",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -61,7 +61,7 @@
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-json-tree": "^0.10.1",
-	"rimraf": "^2.6.1",
+    "rimraf": "^2.6.1",
     "standard": "^8.0.0",
     "storybook": "^0.0.0",
     "stylus": "^0.54.5",

src/defaultProps.js

@@ -21,9 +21,6 @@ export default {
   collapseOnDataChange: true,
   freezeWhenExpanded: false,
   defaultSorting: [],
-  showFilters: false,
-  defaultFiltering: [],
-  defaultFilterMethod: (filter, row, column) => (row[filter.id] === filter.value),
 
   // Controlled State Overrides
   // page: undefined,
@@ -35,7 +32,6 @@ export default {
   onPageChange: undefined,
   onPageSizeChange: undefined,
   onSortingChange: undefined,
-  onFilteringChange: undefined,
 
   // Pivoting
   pivotBy: undefined,
@@ -66,9 +62,6 @@ export default {
   getTheadProps: emptyObj,
   getTheadTrProps: emptyObj,
   getTheadThProps: emptyObj,
-  getTheadFilterProps: emptyObj,
-  getTheadFilterTrProps: emptyObj,
-  getTheadFilterThProps: emptyObj,
   getTbodyProps: emptyObj,
   getTrGroupProps: emptyObj,
   getTrProps: emptyObj,
@@ -99,8 +92,7 @@ export default {
     footer: undefined,
     footerClassName: '',
     footerStyle: {},
-    getFooterProps: emptyObj,
-    filterMethod: undefined
+    getFooterProps: emptyObj
   },
 
   // Text

src/index.js

@@ -26,9 +26,6 @@ export default React.createClass({
       getTheadProps,
       getTheadTrProps,
       getTheadThProps,
-      getTheadFilterProps,
-      getTheadFilterTrProps,
-      getTheadFilterThProps,
       getTbodyProps,
       getTrGroupProps,
       getTrProps,
@@ -44,13 +41,11 @@ export default React.createClass({
       manual,
       loadingText,
       noDataText,
-      showFilters,
       // State
       loading,
       pageSize,
       page,
       sorting,
-      filtering,
       pages,
       // Pivoting State
       pivotValKey,
@@ -87,7 +82,7 @@ export default React.createClass({
     const minRows = this.getMinRows()
     const padRows = pages > 1 ? _.range(pageSize - pageRows.length)
       : minRows ? _.range(Math.max(minRows - pageRows.length, 0))
-        : []
+      : []
 
     const hasColumnFooter = allVisibleColumns.some(d => d.footer)
 
@@ -365,142 +360,6 @@ export default React.createClass({
       )
     }
 
-    const makeFilters = () => {
-      const theadFilterProps = _.splitProps(getTheadFilterProps(finalState, undefined, undefined, this))
-      const theadFilterTrProps = _.splitProps(getTheadFilterTrProps(finalState, undefined, undefined, this))
-      return (
-        <TheadComponent
-          className={classnames('-filters', theadFilterProps.className)}
-          style={{
-            ...theadFilterProps.style,
-            minWidth: `${rowMinWidth}px`
-          }}
-          {...theadFilterProps.rest}
-        >
-          <TrComponent
-            className={theadFilterTrProps.className}
-            style={theadFilterTrProps.style}
-            {...theadFilterTrProps.rest}
-          >
-            {allVisibleColumns.map(makeFilter)}
-          </TrComponent>
-        </TheadComponent>
-      )
-    }
-
-    const makeFilter = (column, i) => {
-      const width = _.getFirstDefined(column.width, column.minWidth)
-      const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
-      const theadFilterThProps = _.splitProps(getTheadFilterThProps(finalState, undefined, column, this))
-      const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column, this))
-
-      const classes = [
-        column.headerClassName,
-        theadFilterThProps.className,
-        columnHeaderProps.className
-      ]
-
-      const styles = {
-        ...column.headerStyle,
-        ...theadFilterThProps.style,
-        ...columnHeaderProps.style
-      }
-
-      const rest = {
-        ...theadFilterThProps.rest,
-        ...columnHeaderProps.rest
-      }
-
-      if (column.expander) {
-        if (column.pivotColumns) {
-          const pivotCols = []
-          for (let i = 0; i < column.pivotColumns.length; i++) {
-            const col = column.pivotColumns[i]
-            const filter = filtering.find(filter => filter.id === col.id)
-            pivotCols.push(
-              <span key={col.id}
-                style={{display: 'flex', alignContent: 'flex-end', flex: 1}}>
-                <input type='text'
-                  style={{
-                    flex: 1,
-                    width: 20,
-                    backgroundColor: i > 0 ? '#f3f3f3' : '#fff'
-                  }}
-                  value={filter ? filter.value : ''}
-                  disabled={i > 0}
-                  onChange={(event) => this.filterColumn(col, event)}
-                />
-              </span>
-            )
-            if (i < column.pivotColumns.length - 1) {
-              pivotCols.push(<ExpanderComponent key={col.id + '-' + i} />)
-            }
-          }
-          return (
-            <ThComponent
-              key={i}
-              className={classnames(
-                'rt-pivot-header',
-                column.sortable && '-cursor-pointer',
-                classes
-              )}
-              style={{
-                ...styles,
-                flex: `${width} 0 auto`,
-                width: `${width}px`,
-                maxWidth: `${maxWidth}px`,
-                display: 'flex'
-              }}
-              {...rest}
-            >
-              {pivotCols}
-            </ThComponent>
-          )
-        }
-        return (
-          <ThComponent
-            key={i}
-            className={classnames(
-              'rt-expander-header',
-              classes
-            )}
-            style={{
-              ...styles,
-              flex: `0 0 auto`,
-              width: `${expanderColumnWidth}px`
-            }}
-            {...rest}
-          />
-        )
-      }
-
-      const filter = filtering.find(filter => filter.id === column.id)
-
-      return (
-        <ThComponent
-          key={i}
-          className={classnames(
-            classes
-          )}
-          style={{
-            ...styles,
-            flex: `${width} 0 auto`,
-            width: `${width}px`,
-            maxWidth: `${maxWidth}px`
-          }}
-          {...rest}
-        >
-          <input type='text'
-            style={{
-              width: `100%`
-            }}
-            value={filter ? filter.value : ''}
-            onChange={(event) => this.filterColumn(column, event)}
-          />
-        </ThComponent>
-      )
-    }
-
     const makePageRow = (row, i, path = []) => {
       const rowInfo = {
         row: row.__original,
@@ -593,15 +452,15 @@ export default React.createClass({
                               {...rowInfo}
                               value={rowInfo.rowValues[pivotValKey]}
                             />
-                            ) : <span>{row[pivotValKey]} ({rowInfo.subRows.length})</span>}
+                          ) : <span>{row[pivotValKey]} ({rowInfo.subRows.length})</span>}
                         </span>
-                        ) : SubComponent ? (
-                          <span>
-                            <ExpanderComponent
-                              isExpanded={isExpanded}
-                            />
-                          </span>
-                          ) : null}
+                      ) : SubComponent ? (
+                        <span>
+                          <ExpanderComponent
+                            isExpanded={isExpanded}
+                          />
+                        </span>
+                      ) : null}
                     </TdComponent>
                   )
                 }
@@ -667,6 +526,7 @@ export default React.createClass({
     const makePadRow = (row, i) => {
       const trGroupProps = getTrGroupProps(finalState, undefined, undefined, this)
       const trProps = _.splitProps(getTrProps(finalState, undefined, undefined, this))
+      const tdProps = _.splitProps(getTdProps(finalState, undefined, undefined, this))
       return (
         <TrGroupComponent
           key={i}
@@ -679,6 +539,20 @@ export default React.createClass({
             )}
             style={trProps.style || {}}
           >
+            {SubComponent && (
+              <ThComponent
+                className={classnames(
+                  'rt-expander-header',
+                  tdProps.className
+                )}
+                style={{
+                  ...tdProps.style,
+                  flex: `0 0 auto`,
+                  width: `${expanderColumnWidth}px`
+                }}
+                {...tdProps.rest}
+              />
+            )}
             {allVisibleColumns.map((column, i2) => {
               const show = typeof column.show === 'function' ? column.show() : column.show
               const width = _.getFirstDefined(column.width, column.minWidth)
@@ -861,7 +735,6 @@ export default React.createClass({
         >
           {hasHeaderGroups ? makeHeaderGroups() : null}
           {makeHeaders()}
-          {showFilters ? makeFilters() : null}
           <TbodyComponent
             className={classnames(tBodyProps.className)}
             style={{
@@ -887,7 +760,7 @@ export default React.createClass({
             style={paginationProps.style}
             {...paginationProps.rest}
           />
-          ) : null}
+        ) : null}
         {!pageRows.length && (
           <NoDataComponent
             {...noDataProps}

src/index.styl

@@ -22,12 +22,6 @@ $expandSize = 7px
       background: alpha(black, .03)
       border-bottom: 1px solid alpha(black, .05)
 
-    &.-filters
-      border-bottom: 1px solid alpha(black, 0.05)
-
-      .rt-th
-        border-right: 1px solid alpha(black, 0.02)
-
     &.-header
       box-shadow: 0 2px 15px 0px alpha(black, .15)
 

src/lifecycle.js

@@ -11,8 +11,7 @@ export default {
       page: 0,
       pageSize: this.props.defaultPageSize || 10,
       sorting: this.props.defaultSorting,
-      expandedRows: {},
-      filtering: this.props.defaultFiltering
+      expandedRows: {}
     }
   },
 
@@ -42,19 +41,12 @@ export default {
       newState.sorting = newState.defaultSorting
     }
 
-    if ((oldState.showFilters !== newState.showFilters) ||
-      (oldState.showFilters !== newState.showFilters)) {
-      newState.filtering = newState.defaultFiltering
-    }
-
     // Props that trigger a data update
     if (
       oldState.data !== newState.data ||
       oldState.columns !== newState.columns ||
       oldState.pivotBy !== newState.pivotBy ||
-      oldState.sorting !== newState.sorting ||
-      oldState.showFilters !== newState.showFilters ||
-      oldState.filtering !== newState.filtering
+      oldState.sorting !== newState.sorting
     ) {
       this.setStateWithData(this.getDataModel(newState))
     }
@@ -63,7 +55,7 @@ export default {
   setStateWithData (newState, cb) {
     const oldState = this.getResolvedState()
     const newResolvedState = this.getResolvedState({}, newState)
-    const {freezeWhenExpanded} = newResolvedState
+    const { freezeWhenExpanded } = newResolvedState
 
     // Default to unfrozen state
     newResolvedState.frozen = false
@@ -85,15 +77,11 @@ export default {
     if (
       (oldState.frozen && !newResolvedState.frozen) ||
       oldState.sorting !== newResolvedState.sorting ||
-      oldState.filtering !== newResolvedState.filtering ||
-      oldState.showFilters !== newResolvedState.showFilters ||
       (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData)
     ) {
       // Handle collapseOnSortingChange & collapseOnDataChange
       if (
         (oldState.sorting !== newResolvedState.sorting && this.props.collapseOnSortingChange) ||
-        (oldState.filtering !== newResolvedState.filtering) ||
-        (oldState.showFilters !== newResolvedState.showFilters) ||
         (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData && this.props.collapseOnDataChange)
       ) {
         newResolvedState.expandedRows = {}
@@ -103,8 +91,8 @@ export default {
     }
 
     // Calculate pageSize all the time
-    if (newResolvedState.sortedData) {
-      newResolvedState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.sortedData.length / newResolvedState.pageSize)
+    if (newResolvedState.resolvedData) {
+      newResolvedState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.resolvedData.length / newResolvedState.pageSize)
     }
 
     return this.setState(newResolvedState, cb)

src/methods.js

@@ -192,14 +192,15 @@ export default {
         // Group the rows together for this level
         let groupedRows = Object.entries(
           _.groupBy(rows, keys[i]))
-          .map(([key, value]) => {
-            return {
-              [pivotIDKey]: keys[i],
-              [pivotValKey]: key,
-              [keys[i]]: key,
-              [subRowsKey]: value
+            .map(([key, value]) => {
+              return {
+                [pivotIDKey]: keys[i],
+                [pivotValKey]: key,
+                [keys[i]]: key,
+                [subRowsKey]: value
+              }
             }
-          })
+        )
         // Recurse into the subRows
         groupedRows = groupedRows.map(rowGroup => {
           let subRows = groupRecursively(rowGroup[subRowsKey], keys, i + 1)
@@ -232,16 +233,12 @@ export default {
     const {
       manual,
       sorting,
-      filtering,
-      showFilters,
-      defaultFilterMethod,
-      resolvedData,
-      allVisibleColumns
+      resolvedData
     } = resolvedState
 
     // Resolve the data from either manual data or sorted data
     return {
-      sortedData: manual ? resolvedData : this.sortData(resolvedData, sorting, showFilters, filtering, defaultFilterMethod, allVisibleColumns)
+      sortedData: manual ? resolvedData : this.sortData(resolvedData, sorting)
     }
   },
 
@@ -254,28 +251,11 @@ export default {
   getStateOrProp (key) {
     return _.getFirstDefined(this.state[key], this.props[key])
   },
-  sortData (data, sorting, showFilters, filtering, defaultFilterMethod, allVisibleColumns) {
-    let filteredData = data
-
-    if (showFilters && filtering.length) {
-      filteredData = filtering.reduce(
-        (filteredSoFar, nextFilter) => {
-          return filteredSoFar.filter(
-            (row) => {
-              const column = allVisibleColumns.find(x => x.id === nextFilter.id) || {}
-              const filterMethod = column.filterMethod || defaultFilterMethod
-              return filterMethod(nextFilter, row, column)
-            })
-        }
-        , filteredData
-      )
-    }
-
+  sortData (data, sorting) {
     if (!sorting.length) {
-      return filteredData
+      return data
     }
-
-    const sorted = _.orderBy(filteredData, sorting.map(sort => {
+    const sorted = _.orderBy(data, sorting.map(sort => {
       return row => {
         if (row[sort.id] === null || row[sort.id] === undefined) {
           return -Infinity
@@ -301,23 +281,23 @@ export default {
 
   // User actions
   onPageChange (page) {
-    const {onPageChange, collapseOnPageChange} = this.props
+    const { onPageChange, collapseOnPageChange } = this.props
     if (onPageChange) {
       return onPageChange(page)
     }
-    const newState = {page}
+    const newState = { page }
     if (collapseOnPageChange) {
       newState.expandedRows = {}
     }
     this.setStateWithData(
       newState
-      , () => {
-        this.fireOnChange()
-      })
+    , () => {
+      this.fireOnChange()
+    })
   },
   onPageSizeChange (newPageSize) {
-    const {onPageSizeChange} = this.props
-    const {pageSize, page} = this.getResolvedState()
+    const { onPageSizeChange } = this.props
+    const { pageSize, page } = this.getResolvedState()
 
     // Normalize the page to display
     const currentRow = pageSize * page
@@ -335,8 +315,8 @@ export default {
     })
   },
   sortColumn (column, additive) {
-    const {sorting} = this.getResolvedState()
-    const {onSortingChange} = this.props
+    const { sorting } = this.getResolvedState()
+    const { onSortingChange } = this.props
     if (onSortingChange) {
       return onSortingChange(column, additive)
     }
@@ -418,30 +398,5 @@ export default {
     }, () => {
       this.fireOnChange()
     })
-  },
-  filterColumn (column, event) {
-    const {filtering} = this.getResolvedState()
-    const {onFilteringChange} = this.props
-
-    if (onFilteringChange) {
-      return onFilteringChange(column, event)
-    }
-
-    // Remove old filter first if it exists
-    const newFiltering = (filtering || []).filter(x => x.id !== column.id)
-
-    if (event.target.value !== '') {
-      newFiltering.push({
-        id: column.id,
-        value: event.target.value
-      })
-    }
-
-    this.setStateWithData({
-      page: 0,
-      filtering: newFiltering
-    }, () => {
-      this.fireOnChange()
-    })
   }
 }

stories/Filtering.js

@@ -1,206 +0,0 @@
-import React from 'react'
-import _ from 'lodash'
-import namor from 'namor'
-
-import CodeHighlight from './components/codeHighlight'
-import ReactTable from '../src/index'
-
-class Filtering extends React.Component {
-
-  constructor(props) {
-    super(props)
-
-    const data = _.map(_.range(5553), d => {
-      return {
-        firstName: namor.generate({words: 1, numLen: 0}),
-        lastName: namor.generate({words: 1, numLen: 0}),
-        age: Math.floor(Math.random() * 30)
-      }
-    })
-
-    this.state = {
-      tableOptions: {
-        loading: false,
-        showPagination: true,
-        showPageSizeOptions: true,
-        showPageJump: true,
-        collapseOnSortingChange: true,
-        collapseOnPageChange: true,
-        collapseOnDataChange: true,
-        freezeWhenExpanded: false,
-        showFilters: true
-      },
-      data: data
-    }
-
-    this.setTableOption = this.setTableOption.bind(this);
-  }
-
-  render() {
-    const columns = [{
-      header: 'Name',
-      columns: [{
-        header: 'First Name',
-        accessor: 'firstName',
-        filterMethod: (filter, row) => (row[filter.id].startsWith(filter.value) && row[filter.id].endsWith(filter.value))
-      }, {
-        header: 'Last Name',
-        id: 'lastName',
-        accessor: d => d.lastName,
-        filterMethod: (filter, row) => (row[filter.id].includes(filter.value))
-      }]
-    }, {
-      header: 'Info',
-      columns: [{
-        header: 'Age',
-        accessor: 'age'
-      }]
-    }]
-
-    return (
-      <div>
-        <div style={{float: "left"}}>
-          <h1>Table Options</h1>
-          <table>
-            <tbody>
-            {
-              Object.keys(this.state.tableOptions).map(optionKey => {
-                const optionValue = this.state.tableOptions[optionKey];
-                return (
-                  <tr key={optionKey}>
-                    <td>{optionKey}</td>
-                    <td style={{paddingLeft: 10, paddingTop: 5}}>
-                      <input type="checkbox"
-                             name={optionKey}
-                             checked={optionValue}
-                             onChange={this.setTableOption}
-                      />
-                    </td>
-                  </tr>
-                )
-              })
-            }
-            </tbody>
-          </table>
-        </div>
-        <div className='table-wrap' style={{paddingLeft: 240}}>
-          <ReactTable
-            className='-striped -highlight'
-            data={this.state.data}
-            columns={columns}
-            defaultPageSize={10}
-            defaultFilterMethod={(filter, row) => ((row[filter.id] + "").startsWith(filter.value))}
-            {...this.state.tableOptions}
-            SubComponent={(row) => {
-              return (
-                <div style={{padding: '20px'}}>
-                  <em>You can put any component you want here, even another React Table!</em>
-                  <br />
-                  <br />
-                  <ReactTable
-                    data={this.state.data}
-                    columns={columns}
-                    defaultPageSize={3}
-                    showPagination={false}
-                    SubComponent={(row) => {
-                      return (
-                        <div style={{padding: '20px'}}>
-                          <em>It even has access to the row data: </em>
-                          <CodeHighlight>{() => JSON.stringify(row, null, 2)}</CodeHighlight>
-                        </div>
-                      )
-                    }}
-                  />
-                </div>
-              )
-            }}
-          />
-        </div>
-        <div style={{textAlign: 'center'}}>
-          <br />
-          <em>Tip: Hold shift when sorting to multi-sort!</em>
-        </div>
-        <div>
-          <h1>Custom Filters In This Example</h1>
-          <p>The default filter for all columns of a table if it is not specified in the configuration is set to be an exact match. Example: age == "23".</p>
-          <p>This example overrides the default filter behavior by setting the <strong>defaultFilterMethod</strong> table option to match on values that start with the filter text. Example: age.startsWith("2")</p>
-          <p>Each column can also be customized with the column <strong>filterMethod</strong> option:</p>
-          <p>In this example the firstName column filters on the value starting with and ending with the filter value.</p>
-          <p>In this example the lastName column filters on the value including the filter value anywhere in its text.</p>
-        </div>
-        <CodeHighlight>{() => this.getCode()}</CodeHighlight>
-      </div>
-    )
-  }
-
-  setTableOption(event) {
-    const target = event.target;
-    const value = target.type === 'checkbox' ? target.checked : target.value;
-    const name = target.name;
-    this.setState({
-      tableOptions: {
-        ...this.state.tableOptions,
-        [name]: value
-      }
-    })
-  }
-
-  getCode() {
-    return `
-const columns = [{
-  header: 'Name',
-  columns: [{
-    header: 'First Name',
-    accessor: 'firstName',
-    filterMethod: (filter, row) => (row[filter.id].startsWith(filter.value) && row[filter.id].endsWith(filter.value))
-  }, {
-    header: 'Last Name',
-    id: 'lastName',
-    accessor: d => d.lastName,
-    filterMethod: (filter, row) => (row[filter.id].includes(filter.value))
-  }]
-}, {
-  header: 'Info',
-  columns: [{
-    header: 'Age',
-    accessor: 'age'
-  }]
-}]
-
-export default (
-  <ReactTable
-    data={data}
-    columns={columns}
-    defaultPageSize={10}
-    defaultFilterMethod={(filter, row) => ((row[filter.id] + \"\").startsWith(filter.value))}
-    {...otherOptions}
-    SubComponent={(row) => {
-      return (
-        <div style={{padding: '20px'}}>
-          <em>You can put any component you want here, even another React Table!</em>
-          <br />
-          <br />
-          <ReactTable
-            data={data}
-            columns={columns}
-            defaultPageSize={3}
-            showPagination={false}
-            SubComponent={(row) => {
-              return (
-                <div style={{padding: '20px'}}>
-                  <em>It even has access to the row data: </em>
-                  <CodeHighlight>{() => JSON.stringify(row, null, 2)}</CodeHighlight>
-                </div>
-              )
-            }}
-          />
-        </div>
-      )
-    }}
-  />
-)
-  `
-  }
-}
-
-export default () => <Filtering/>

stories/PivotingSubComponents.js

@@ -33,8 +33,7 @@ export default () => {
       aggregate: vals => _.round(_.mean(vals)),
       render: row => {
         return <span>{row.aggregated ? `${row.value} (avg)` : row.value}</span>
-      },
-      filterMethod: (filter, row) => (filter.value == `${row[filter.id]} (avg)`)
+      }
     }, {
       header: 'Visits',
       accessor: 'visits',
@@ -51,7 +50,6 @@ export default () => {
           defaultPageSize={10}
           className='-striped -highlight'
           pivotBy={['firstName', 'lastName']}
-          showFilters={true}
           SubComponent={(row) => {
             return (
               <div style={{padding: '20px'}}>
@@ -106,8 +104,7 @@ const columns = [{
     aggregate: vals => _.round(_.mean(vals)),
     render: row => {
       return <span>{row.aggregated ? \`\${row.value} (avg)\` : row.value}</span>
-    },
-    filterMethod: (filter, row) => (filter.value == \`\${row[filter.id]} (avg)\`) 
+    }
   }, {
     header: 'Visits',
     accessor: 'visits',
@@ -122,7 +119,6 @@ return (
     defaultPageSize={10}
     className='-striped -highlight'
     pivotBy={['firstName', 'lastName']}
-    showFilters={true}
     SubComponent={(row) => {
       return (
         <div style={{padding: '20px'}}>

stories/ServerSide.js

@@ -14,34 +14,23 @@ const rawData = _.map(_.range(3424), d => {
 })
 
 // Now let's mock the server.  It's job is simple: use the table model to sort and return the page data
-const requestData = (pageSize, page, sorting, filtering) => {
+const requestData = (pageSize, page, sorting) => {
   return new Promise((resolve, reject) => {
     // On the server, you'll likely use SQL or noSQL or some other query language to do this.
     // For this mock, we'll just use lodash
-    let filteredData = rawData
-    if (filtering.length) {
-      filteredData = filtering.reduce(
-        (filteredSoFar, nextFilter) => {
-          return filteredSoFar.filter(
-            (row) => {
-              return (row[nextFilter.id] + '').includes(nextFilter.value)
-            })
-        }
-        , filteredData)
-    }
-    const sortedData = _.orderBy(filteredData, sorting.map(sort => {
+    const sortedData = _.orderBy(rawData, sorting.map(sort => {
       return row => {
         if (row[sort.id] === null || row[sort.id] === undefined) {
           return -Infinity
         }
         return typeof row[sort.id] === 'string' ? row[sort.id].toLowerCase() : row[sort.id]
       }
-    }), sorting.map(d => d.desc ? 'desc' : 'asc'))
+    }), sorting.map(d => d.asc ? 'asc' : 'desc'))
 
     // Be sure to send back the rows to be displayed and any other pertinent information, like how many pages there are total.
     const res = {
       rows: sortedData.slice(pageSize * page, (pageSize * page) + pageSize),
-      pages: Math.ceil(filteredData.length / pageSize)
+      pages: Math.ceil(rawData.length / pageSize)
     }
 
     // Here we'll simulate a server response with 500ms of delay.
@@ -63,7 +52,7 @@ const ServerSide = React.createClass({
     // You can set the `loading` prop of the table to true to use the built-in one or show you're own loading bar if you want.
     this.setState({loading: true})
     // Request the data however you want.  Here, we'll use our mocked service we created earlier
-    requestData(state.pageSize, state.page, state.sorting, state.filtering)
+    requestData(state.pageSize, state.page, state.sorting)
       .then((res) => {
         console.log(res.rows)
         // Now just get the rows of data to your React Table (and update anything else like total pages or loading)
@@ -93,7 +82,6 @@ const ServerSide = React.createClass({
             }]}
             manual // Forces table not to paginate or sort automatically, so we can handle it server-side
             defaultPageSize={10}
-            showFilters
             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
@@ -136,8 +124,7 @@ export default React.createClass({
     Axios.post('mysite.com/data', {
       pageSize: state.pageSize,
       page: state.page,
-      sorting: state.sorting,
-      filtering: state.filtering
+      sorting: state.sorting
     })
       .then((res) => {
         // Now update your state!
@@ -164,7 +151,6 @@ export default React.createClass({
         }]}
         manual // Forces table not to paginate or sort automatically, so we can handle it server-side
         defaultPageSize={10}
-        showFilters={true}
         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

@@ -27,8 +27,7 @@ class SubComponents extends React.Component {
         collapseOnSortingChange: true,
         collapseOnPageChange: true,
         collapseOnDataChange: true,
-        freezeWhenExpanded: false,
-        showFilters: false
+        freezeWhenExpanded: false
       },
       data: data
     }