react-table - npm Package Compare versions

Comparing version 7.0.0-rc.10 to 7.0.0-rc.11

CHANGELOG.md

@@ -0,1 +1,7 @@
+## 7.0.0-rc.11
+
+- Fixed an issue where plugins using the `columns` hook were not getting decorated properly
+- Added back a new rendition of the `useFlexLayout` plugin and accompanying example.
+- Fixed all reset actions to use the initial state passed into the table, then fall back to the default initial state for the hook
+
 ## 7.0.0-rc.10
@@ -2,0 +8,0 @@

package.json

 {
   "name": "react-table",
-  "version": "7.0.0-rc.10",
+  "version": "7.0.0-rc.11",
   "description": "Hooks for building lightweight, fast and extendable datagrids for React",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -186,2 +186,3 @@ ![React Table Header](https://github.com/tannerlinsley/react-table/raw/master/media/header.png)
         <li>Anish P Patel (@anishpatelyaadada)</li>
+        <li>Alin Porumb (@alinporumb)</li>
         </ul>
@@ -188,0 +189,0 @@ </td>

src/hooks/useColumnVisibility.js

@@ -61,3 +61,3 @@ import React from 'react'
 
-function reducer(state, action, previousState, instanceRef) {
+function reducer(state, action, previousState, instance) {
   if (action.type === actions.init) {
@@ -73,3 +73,3 @@ return {
       ...state,
-      hiddenColumns: [],
+      hiddenColumns: instance.initialState.hiddenColumns || [],
     }
@@ -109,5 +109,3 @@ }
       ...state,
-      hiddenColumns: shouldAll
-        ? instanceRef.current.flatColumns.map(d => d.id)
-        : [],
+      hiddenColumns: shouldAll ? instance.flatColumns.map(d => d.id) : [],
     }
@@ -114,0 +112,0 @@ }

src/hooks/useTable.js

@@ -156,6 +156,5 @@ import React from 'react'
     () =>
-      reduceHooks(
-        getColumnsHooks(),
-        decorateColumnTree(userColumns, defaultColumn),
-        getInstance()
+      decorateColumnTree(
+        reduceHooks(getColumnsHooks(), userColumns, getInstance()),
+        defaultColumn
       ),
@@ -324,4 +323,12 @@ [
   // Header Visibility is needed by this point
-  getInstance().totalColumnsWidth = calculateHeaderWidths(headers)
+  const [
+    totalColumnsMinWidth,
+    totalColumnsWidth,
+    totalColumnsMaxWidth,
+  ] = calculateHeaderWidths(headers)
 
+  getInstance().totalColumnsMinWidth = totalColumnsMinWidth
+  getInstance().totalColumnsWidth = totalColumnsWidth
+  getInstance().totalColumnsMaxWidth = totalColumnsMaxWidth
+
   // Snapshot hook and disallow more from being added
@@ -536,3 +543,5 @@ const getUseInstance = useConsumeHookGetter(
 function calculateHeaderWidths(headers, left = 0) {
+  let sumTotalMinWidth = 0
   let sumTotalWidth = 0
+  let sumTotalMaxWidth = 0
 
@@ -545,4 +554,11 @@ headers.forEach(header => {
     if (subHeaders && subHeaders.length) {
-      header.totalWidth = calculateHeaderWidths(subHeaders, left)
+      const [totalMinWidth, totalWidth, totalMaxWidth] = calculateHeaderWidths(
+        subHeaders,
+        left
+      )
+      header.totalMinWidth = totalMinWidth
+      header.totalWidth = totalWidth
+      header.totalMaxWidth = totalMaxWidth
     } else {
+      header.totalMinWidth = header.minWidth
       header.totalWidth = Math.min(
@@ -552,10 +568,13 @@ Math.max(header.minWidth, header.width),
       )
+      header.totalMaxWidth = header.maxWidth
     }
     if (header.isVisible) {
       left += header.totalWidth
+      sumTotalMinWidth += header.totalMinWidth
       sumTotalWidth += header.totalWidth
+      sumTotalMaxWidth += header.totalMaxWidth
     }
   })
 
-  return sumTotalWidth
+  return [sumTotalMinWidth, sumTotalWidth, sumTotalMaxWidth]
 }

src/index.js

@@ -14,1 +14,2 @@ export * from './publicUtils'
 export { useBlockLayout } from './plugin-hooks/useBlockLayout'
+export { useFlexLayout } from './plugin-hooks/useFlexLayout'

src/plugin-hooks/useColumnOrder.js

@@ -20,3 +20,3 @@ import React from 'react'
 
-function reducer(state, action) {
+function reducer(state, action, previousState, instance) {
   if (action.type === actions.init) {
@@ -32,3 +32,3 @@ return {
       ...state,
-      columnOrder: [],
+      columnOrder: instance.initialState.columnOrder || [],
     }
@@ -35,0 +35,0 @@ }

src/plugin-hooks/useExpanded.js

@@ -41,3 +41,3 @@ import React from 'react'
 // Reducer
-function reducer(state, action) {
+function reducer(state, action, previousState, instance) {
   if (action.type === actions.init) {
@@ -53,3 +53,3 @@ return {
       ...state,
-      expanded: {},
+      expanded: instance.initialState.expanded || {},
     }
@@ -56,0 +56,0 @@ }

src/plugin-hooks/useFilters.js

@@ -36,3 +36,3 @@ import React from 'react'
       ...state,
-      filters: [],
+      filters: instance.initialState.filters || [],
     }
@@ -39,0 +39,0 @@ }

src/plugin-hooks/useGroupBy.js

@@ -49,3 +49,3 @@ import React from 'react'
 // Reducer
-function reducer(state, action) {
+function reducer(state, action, previousState, instance) {
   if (action.type === actions.init) {
@@ -61,3 +61,3 @@ return {
       ...state,
-      groupBy: [],
+      groupBy: instance.initialState.groupBy || [],
     }
@@ -64,0 +64,0 @@ }

src/plugin-hooks/usePagination.js

@@ -40,3 +40,3 @@ import React from 'react'
       ...state,
-      pageIndex: 0,
+      pageIndex: instance.initialState.pageIndex || 0,
     }
@@ -43,0 +43,0 @@ }

src/plugin-hooks/useRowSelect.js

@@ -84,3 +84,3 @@ import React from 'react'
       ...state,
-      selectedRowIds: {},
+      selectedRowIds: instance.initialState.selectedRowIds || {},
     }
@@ -130,3 +130,3 @@ }
 
-    let newSelectedRowPaths = { ...state.selectedRowIds }
+    let newSelectedRowIds = { ...state.selectedRowIds }
 
@@ -138,5 +138,5 @@ const handleRowById = id => {
         if (!isSelected && shouldExist) {
-          newSelectedRowPaths[id] = true
+          newSelectedRowIds[id] = true
         } else if (isSelected && !shouldExist) {
-          delete newSelectedRowPaths[id]
+          delete newSelectedRowIds[id]
         }
@@ -154,3 +154,3 @@ }
       ...state,
-      selectedRowIds: newSelectedRowPaths,
+      selectedRowIds: newSelectedRowIds,
     }
@@ -157,0 +157,0 @@ }

src/plugin-hooks/useRowState.js

@@ -21,3 +21,3 @@ import React from 'react'
 
-function reducer(state, action) {
+function reducer(state, action, previousState, instance) {
   if (action.type === actions.init) {
@@ -33,3 +33,3 @@ return {
       ...state,
-      rowState: {},
+      rowState: instance.initialState.rowState || {},
     }
@@ -36,0 +36,0 @@ }

src/plugin-hooks/useSortBy.js

@@ -69,3 +69,3 @@ import React from 'react'
       ...state,
-      sortBy: [],
+      sortBy: instance.initialState.sortBy || [],
     }
@@ -72,0 +72,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

778632

increased by2.19%

Number of package files

40

increased by2.56%

Lines of code

10386

increased by1.77%

Number of lines in readme file

215

increased by0.47%

No dependency changes