Fix prefilteredRows

.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/index.js": {
-    "bundled": 104689,
-    "minified": 48426,
-    "gzipped": 13003
+    "bundled": 104720,
+    "minified": 48438,
+    "gzipped": 13005
   },
   "dist/index.es.js": {
-    "bundled": 103802,
-    "minified": 47636,
-    "gzipped": 12848,
+    "bundled": 103833,
+    "minified": 47648,
+    "gzipped": 12849,
     "treeshaked": {
       "rollup": {
         "code": 80,

examples/kitchen-sink/src/App.js

@@ -305,7 +305,35 @@ function Table({ columns, data, updateMyData, skipReset }) {
     useSortBy,
     useExpanded,
     usePagination,
-    useRowSelect
+    useRowSelect,
+    // Here we will use a plugin to add our selection column
+    hooks => {
+      hooks.flatColumns.push(columns => {
+        return [
+          {
+            id: 'selection',
+            // Make this column a groupByBoundary. This ensures that groupBy columns
+            // are placed after it
+            groupByBoundary: true,
+            // The header can use the table's getToggleAllRowsSelectedProps method
+            // to render a checkbox
+            Header: ({ getToggleAllRowsSelectedProps }) => (
+              <div>
+                <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
+              </div>
+            ),
+            // The cell can use the individual row's getToggleRowSelectedProps method
+            // to the render a checkbox
+            Cell: ({ row }) => (
+              <div>
+                <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
+              </div>
+            ),
+          },
+          ...columns,
+        ]
+      })
+    }
   )
 
   // Render the UI for your table
@@ -494,26 +522,6 @@ const IndeterminateCheckbox = React.forwardRef(
 function App() {
   const columns = React.useMemo(
     () => [
-      {
-        id: 'selection',
-        // Make this column a groupByBoundary. This ensures that groupBy columns
-        // are placed after it
-        groupByBoundary: true,
-        // The header can use the table's getToggleAllRowsSelectedProps method
-        // to render a checkbox
-        Header: ({ getToggleAllRowsSelectedProps }) => (
-          <div>
-            <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
-          </div>
-        ),
-        // The cell can use the individual row's getToggleRowSelectedProps method
-        // to the render a checkbox
-        Cell: ({ row }) => (
-          <div>
-            <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
-          </div>
-        ),
-      },
       {
         Header: 'Name',
         columns: [

src/plugin-hooks/useFilters.js

@@ -254,7 +254,7 @@ function useInstance(instance) {
     // Now that each filtered column has it's partially filtered rows,
     // lets assign the final filtered rows to all of the other columns
     const nonFilteredColumns = flatColumns.filter(
-      column => !Object.keys(filters).includes(column.id)
+      column => !filters.find(d => d.id === column.id)
     )
 
     // This essentially enables faceted filter options to be built easily