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