diff --git a/.size-snapshot.json b/.size-snapshot.json
index f23b05f..a08330a 100644
--- a/.size-snapshot.json
+++ b/.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,
diff --git a/examples/kitchen-sink/src/App.js b/examples/kitchen-sink/src/App.js
index 41f9ff2..23beb42 100644
--- a/examples/kitchen-sink/src/App.js
+++ b/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 }) => (
+
+
+
+ ),
+ // The cell can use the individual row's getToggleRowSelectedProps method
+ // to the render a checkbox
+ Cell: ({ row }) => (
+
+
+
+ ),
+ },
+ ...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 }) => (
-
-
-
- ),
- // The cell can use the individual row's getToggleRowSelectedProps method
- // to the render a checkbox
- Cell: ({ row }) => (
-
-
-
- ),
- },
{
Header: 'Name',
columns: [
diff --git a/src/plugin-hooks/useFilters.js b/src/plugin-hooks/useFilters.js
index bee96f2..33072ea 100755
--- a/src/plugin-hooks/useFilters.js
+++ b/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