v7.0.0-alpha.26

docs/api.md

@@ -143,14 +143,17 @@ The following options are supported on any column object you can pass to `column
 
 The following properties are available on the table instance returned from `useTable`
 
-- `headerGroups: Array<HeaderGroup>`
-  - An array of normalized header groups, each containing a flattened array of final column objects for that row.
-  - See [Header Group Properties](#headergroup-properties) for more information
+- `headers[] Array<Column>`
+  - A **nested** array of final column objects, similar in structure to the original columns configuration option.
+  - See [Column Properties](#column-properties) for more information
 - `columns: Array<Column>`
   - A **flat** array of all final column objects computed from the original columns configuration option.
   - See [Column Properties](#column-properties) for more information
-- `headers[] Array<Column>`
-  - A **nested** array of final column objects, similar in structure to the original columns configuration option.
+- `headerGroups: Array<HeaderGroup>`
+  - An array of normalized header groups, each containing a flattened array of final column objects for that row.
+  - See [Header Group Properties](#headergroup-properties) for more information
+- `flatHeaders[] Array<Column>`
+  - A **flat** array of final header objects found in each header group. Columns may be duplicated (if columns are not adjacent)
   - See [Column Properties](#column-properties) for more information
 - `rows: Array<Row>`
   - An array of **materialized row objects** from the original `data` array and `columns` passed into the table options
@@ -402,12 +405,13 @@ The following options are supported on any `Column` object passed to the `column
   - If set to `true`, the underlying sorting direction will be inverted, but the UI will not.
   - This may be useful in situations where positive and negative connotation is inverted, eg. a Golfing score where a lower score is considered more positive than a higher one.
 - `sortType: String | Function`
+  - Used to compare 2 rows of data and order them correctly.
   - If a **function** is passed, it must be **memoized**
   - Defaults to [`alphanumeric`](TODO)
   - The resolved function from the this string/function will be used to sort the this column's data.
     - If a `string` is passed, the function with that name located on either the custom `sortTypes` option or the built-in sorting types object will be used. If
     - If a `function` is passed, it will be used.
-  - For mor information on sort types, see [Sorting](TODO)
+  - For more information on sort types, see [Sorting](TODO)
 
 ### Instance Properties
 
@@ -520,7 +524,7 @@ The following options are supported via the main options object passed to `useTa
   - The function (or resolved function from the string) will be used as the default/fallback filter method for every column that has filtering enabled.
     - If a `string` is passed, the function with that name located on the `filterTypes` option object will be used.
     - If a `function` is passed, it will be used.
-  - For mor information on filter types, see [Filtering](TODO)
+  - For more information on filter types, see [Filtering](TODO)
 - `manualFilters: Bool`
   - Enables filter detection functionality, but does not automatically perform row filtering.
   - Turn this on if you wish to implement your own row filter outside of the table (eg. server-side or manual row grouping/nesting)
@@ -529,7 +533,7 @@ The following options are supported via the main options object passed to `useTa
 - `filterTypes: Object<filterKey: filterType>`
   - Must be **memoized**
   - Allows overriding or adding additional filter types for columns to use. If a column's filter type isn't found on this object, it will default to using the [built-in filter types](TODO).
-  - For mor information on filter types, see [Filtering](TODO)
+  - For more information on filter types, see [Filtering](TODO)
 
 ### Column Options
 
@@ -549,7 +553,7 @@ The following options are supported on any `Column` object passed to the `column
   - The resolved function from the this string/function will be used to filter the this column's data.
     - If a `string` is passed, the function with that name located on either the custom `filterTypes` option or the built-in filtering types object will be used. If
     - If a `function` is passed, it will be used directly.
-  - For mor information on filter types, see [Filtering](TODO)
+  - For more information on filter types, see [Filtering](TODO)
   - If a **function** is passed, it must be **memoized**
 
 ### Instance Properties

examples/sorting/src/App.js

@@ -33,17 +33,11 @@ const Styles = styled.div`
   }
 `
 
-const defaultColumn = {
-  sort: 'numeric',
-}
-
 function Table({ columns, data }) {
   const { getTableProps, headerGroups, rows, prepareRow } = useTable(
     {
       columns,
       data,
-      defaultColumn,
-      debug: true,
     },
     useSortBy
   )

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "7.0.0-alpha.25",
+  "version": "7.0.0-alpha.26",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",

src/hooks/useTable.js

@@ -10,6 +10,7 @@ import {
   makeHeaderGroups,
   findMaxDepth,
   flattenBy,
+  determineColumnVisibility,
 } from '../utils'
 
 import { useTableState } from './useTableState'
@@ -49,27 +50,24 @@ export const useTable = (props, ...plugins) => {
 
   debug = process.env.NODE_ENV === 'production' ? false : debug
 
-  // Always provide a default state
+  // Always provide a default table state
   const defaultState = useTableState()
 
-  // But use the users state if provided
+  // But use the users table state if provided
   const state = userState || defaultState
 
-  // The initial api
+  // The table instance ref
   let instanceRef = React.useRef({})
 
   Object.assign(instanceRef.current, {
     ...props,
-    data,
-    state,
-    plugins,
+    data, // The raw data
+    state, // The resolved table state
+    plugins, // All resolved plugins
     hooks: {
       columnsBeforeHeaderGroups: [],
       columnsBeforeHeaderGroupsDeps: [],
       useMain: [],
-      useColumns: [],
-      useHeaders: [],
-      useHeaderGroups: [],
       useRows: [],
       prepareRow: [],
       getTableProps: [],
@@ -82,34 +80,34 @@ export const useTable = (props, ...plugins) => {
 
   // Allow plugins to register hooks
   if (process.env.NODE_ENV === 'development' && debug) console.time('plugins')
+
   plugins.filter(Boolean).forEach(plugin => {
     plugin(instanceRef.current.hooks)
   })
+
   if (process.env.NODE_ENV === 'development' && debug)
     console.timeEnd('plugins')
 
-  if (process.env.NODE_ENV === 'development' && debug)
-    console.info('buildColumns/headerGroup/headers')
   // Decorate All the columns
-  let columnTree = React.useMemo(
+  let headers = React.useMemo(
     () => decorateColumnTree(userColumns, defaultColumn),
     [defaultColumn, userColumns]
   )
 
   // Get the flat list of all columns
-  let columns = React.useMemo(() => flattenBy(columnTree, 'columns'), [
-    columnTree,
-  ])
+  let columns = React.useMemo(() => flattenBy(headers, 'columns'), [headers])
 
   // Allow hooks to decorate columns (and trigger this memoization via deps)
   columns = React.useMemo(() => {
     if (process.env.NODE_ENV === 'development' && debug)
       console.time('hooks.columnsBeforeHeaderGroups')
-    const newColumns = applyHooks(
+
+    let newColumns = applyHooks(
       instanceRef.current.hooks.columnsBeforeHeaderGroups,
       columns,
       instanceRef.current
     )
+
     if (process.env.NODE_ENV === 'development' && debug)
       console.timeEnd('hooks.columnsBeforeHeaderGroups')
     return newColumns
@@ -126,14 +124,10 @@ export const useTable = (props, ...plugins) => {
 
   // Make the headerGroups
   const headerGroups = React.useMemo(
-    () => makeHeaderGroups(columns, findMaxDepth(columnTree), defaultColumn),
-    [columnTree, columns, defaultColumn]
+    () => makeHeaderGroups(columns, findMaxDepth(headers), defaultColumn),
+    [columns, defaultColumn, headers]
   )
 
-  const headers = React.useMemo(() => flattenBy(headerGroups, 'headers'), [
-    headerGroups,
-  ])
-
   Object.assign(instanceRef.current, {
     columns,
     headerGroups,
@@ -210,12 +204,13 @@ export const useTable = (props, ...plugins) => {
   instanceRef.current.flatRows = flatRows
 
   // Determine column visibility
-  instanceRef.current.columns.forEach(column => {
-    column.isVisible =
-      typeof column.show === 'function'
-        ? column.show(instanceRef.current)
-        : !!column.show
-  })
+  determineColumnVisibility(instanceRef.current)
+
+  // Provide a flat header list for utilities
+  instanceRef.current.flatHeaders = headerGroups.reduce(
+    (all, headerGroup) => [...all, ...headerGroup.headers],
+    []
+  )
 
   if (process.env.NODE_ENV === 'development' && debug)
     console.time('hooks.useMain')
@@ -225,43 +220,42 @@ export const useTable = (props, ...plugins) => {
   )
   if (process.env.NODE_ENV === 'development' && debug)
     console.timeEnd('hooks.useMain')
-  ;[...instanceRef.current.columns, ...instanceRef.current.headers].forEach(
-    column => {
-      // Give columns/headers rendering power
-      column.render = (type, userProps = {}) => {
-        const Comp = typeof type === 'string' ? column[type] : type
 
-        if (typeof Comp === 'undefined') {
-          throw new Error(renderErr)
-        }
+  // Each materialized header needs to be assigned a render function and other
+  // prop getter properties here.
+  instanceRef.current.flatHeaders.forEach(column => {
+    // Give columns/headers rendering power
+    column.render = (type, userProps = {}) => {
+      const Comp = typeof type === 'string' ? column[type] : type
 
-        return flexRender(Comp, {
-          ...instanceRef.current,
-          column,
-          ...userProps,
-        })
+      if (typeof Comp === 'undefined') {
+        throw new Error(renderErr)
       }
 
-      // Give columns/headers a default getHeaderProps
-      column.getHeaderProps = props =>
-        mergeProps(
-          {
-            key: ['header', column.id].join('_'),
-            colSpan: column.columns
-              ? column.columns.filter(column => column.isVisible).length
-              : 1,
-          },
-          applyPropHooks(
-            instanceRef.current.hooks.getHeaderProps,
-            column,
-            instanceRef.current
-          ),
-          props
-        )
+      return flexRender(Comp, {
+        ...instanceRef.current,
+        column,
+        ...userProps,
+      })
     }
-  )
 
-  instanceRef.current.headerGroups.filter((headerGroup, i) => {
+    // Give columns/headers a default getHeaderProps
+    column.getHeaderProps = props =>
+      mergeProps(
+        {
+          key: ['header', column.id].join('_'),
+          colSpan: column.totalHeaderCount,
+        },
+        applyPropHooks(
+          instanceRef.current.hooks.getHeaderProps,
+          column,
+          instanceRef.current
+        ),
+        props
+      )
+  })
+
+  instanceRef.current.headerGroups.forEach((headerGroup, i) => {
     // Filter out any headers and headerGroups that don't have visible columns
     headerGroup.headers = headerGroup.headers.filter(header => {
       const recurse = columns =>
@@ -291,10 +285,9 @@ export const useTable = (props, ...plugins) => {
           ),
           props
         )
+
       return true
     }
-
-    return false
   })
 
   // Run the rows (this could be a dangerous hook with a ton of data)

src/plugin-hooks/tests/__snapshots__/useExpanded.test.js.snap

@@ -19,7 +19,7 @@ Snapshot Diff:
     </pre>
     <table
       class=""
-@@ -82,10 +84,53 @@
+@@ -78,10 +80,53 @@
           <td
             class=""
           >
@@ -73,7 +73,7 @@ Snapshot Diff:
             </span>
           </td>
           <td
-@@ -115,10 +160,139 @@
+@@ -111,10 +156,139 @@
           </td>
           <td
             class=""
@@ -235,7 +235,7 @@ Snapshot Diff:
       </code>
     </pre>
     <table
-@@ -127,10 +129,53 @@
+@@ -123,10 +125,53 @@
           <td
             class=""
           >
@@ -289,7 +289,7 @@ Snapshot Diff:
             </span>
           </td>
           <td
-@@ -160,10 +205,139 @@
+@@ -156,10 +201,139 @@
           </td>
           <td
             class=""
@@ -451,7 +451,7 @@ Snapshot Diff:
   }
       </code>
     </pre>
-@@ -172,10 +174,53 @@
+@@ -168,10 +170,53 @@
           <td
             class=""
           >
@@ -505,7 +505,7 @@ Snapshot Diff:
             </span>
           </td>
           <td
-@@ -205,10 +250,139 @@
+@@ -201,10 +246,139 @@
           </td>
           <td
             class=""
@@ -667,7 +667,7 @@ Snapshot Diff:
     }
   }
       </code>
-@@ -218,11 +220,11 @@
+@@ -214,11 +216,11 @@
             class=""
           >
             <span
@@ -680,7 +680,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -250,10 +252,30 @@
+@@ -246,10 +248,30 @@
           </td>
           <td
             class=""

src/plugin-hooks/tests/__snapshots__/useRowSelect.test.js.snap

@@ -5,7 +5,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -109,11 +109,11 @@
+@@ -101,11 +101,11 @@
           </td>
           <td
             class=""
@@ -18,7 +18,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -165,11 +165,11 @@
+@@ -157,11 +157,11 @@
           </td>
           <td
             class=""
@@ -31,7 +31,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -221,11 +221,11 @@
+@@ -213,11 +213,11 @@
           </td>
           <td
             class=""
@@ -44,7 +44,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -277,11 +277,11 @@
+@@ -269,11 +269,11 @@
           </td>
           <td
             class=""
@@ -57,7 +57,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -333,11 +333,11 @@
+@@ -325,11 +325,11 @@
           </td>
           <td
             class=""
@@ -70,7 +70,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -389,11 +389,11 @@
+@@ -381,11 +381,11 @@
           </td>
           <td
             class=""
@@ -83,7 +83,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -426,15 +426,22 @@
+@@ -418,15 +418,22 @@
           </td>
         </tr>
       </tbody>
@@ -115,7 +115,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -109,11 +109,11 @@
+@@ -101,11 +101,11 @@
           </td>
           <td
             class=""
@@ -128,7 +128,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -165,11 +165,11 @@
+@@ -157,11 +157,11 @@
           </td>
           <td
             class=""
@@ -141,7 +141,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -221,11 +221,11 @@
+@@ -213,11 +213,11 @@
           </td>
           <td
             class=""
@@ -154,7 +154,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -277,11 +277,11 @@
+@@ -269,11 +269,11 @@
           </td>
           <td
             class=""
@@ -167,7 +167,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -333,11 +333,11 @@
+@@ -325,11 +325,11 @@
           </td>
           <td
             class=""
@@ -180,7 +180,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -389,11 +389,11 @@
+@@ -381,11 +381,11 @@
           </td>
           <td
             class=""
@@ -193,7 +193,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -426,22 +426,15 @@
+@@ -418,22 +418,15 @@
           </td>
         </tr>
       </tbody>
@@ -225,7 +225,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -109,11 +109,11 @@
+@@ -101,11 +101,11 @@
           </td>
           <td
             class=""
@@ -238,7 +238,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -221,11 +221,11 @@
+@@ -213,11 +213,11 @@
           </td>
           <td
             class=""
@@ -251,7 +251,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -277,11 +277,11 @@
+@@ -269,11 +269,11 @@
           </td>
           <td
             class=""
@@ -264,7 +264,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -333,11 +333,11 @@
+@@ -325,11 +325,11 @@
           </td>
           <td
             class=""
@@ -277,7 +277,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -426,15 +426,20 @@
+@@ -418,15 +418,20 @@
           </td>
         </tr>
       </tbody>
@@ -307,7 +307,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -221,11 +221,11 @@
+@@ -213,11 +213,11 @@
           </td>
           <td
             class=""
@@ -320,7 +320,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -277,11 +277,11 @@
+@@ -269,11 +269,11 @@
           </td>
           <td
             class=""
@@ -333,7 +333,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -333,11 +333,11 @@
+@@ -325,11 +325,11 @@
           </td>
           <td
             class=""
@@ -346,7 +346,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -426,20 +426,17 @@
+@@ -418,20 +418,17 @@
           </td>
         </tr>
       </tbody>
@@ -376,7 +376,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -277,11 +277,11 @@
+@@ -269,11 +269,11 @@
           </td>
           <td
             class=""
@@ -389,7 +389,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -426,17 +426,18 @@
+@@ -418,17 +418,18 @@
           </td>
         </tr>
       </tbody>
@@ -417,7 +417,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -221,11 +221,11 @@
+@@ -213,11 +213,11 @@
           </td>
           <td
             class=""
@@ -430,7 +430,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -333,11 +333,11 @@
+@@ -325,11 +325,11 @@
           </td>
           <td
             class=""
@@ -443,7 +443,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -426,18 +426,20 @@
+@@ -418,18 +418,20 @@
           </td>
         </tr>
       </tbody>
@@ -473,7 +473,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -221,11 +221,11 @@
+@@ -213,11 +213,11 @@
           </td>
           <td
             class=""
@@ -486,7 +486,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -333,11 +333,11 @@
+@@ -325,11 +325,11 @@
           </td>
           <td
             class=""
@@ -499,7 +499,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -426,20 +426,18 @@
+@@ -418,20 +418,18 @@
           </td>
         </tr>
       </tbody>

src/plugin-hooks/useSortBy.js

@@ -59,6 +59,7 @@ function useMain(instance) {
     disableMultiSort,
     isMultiSortEvent = e => e.shiftKey,
     maxMultiSortColCount = Number.MAX_SAFE_INTEGER,
+    flatHeaders,
     hooks,
     state: [{ sortBy }, setState],
     plugins,
@@ -157,7 +158,7 @@ function useMain(instance) {
   }
 
   // Add the getSortByToggleProps method to columns and headers
-  ;[...instance.columns, ...instance.headers].forEach(column => {
+  flatHeaders.forEach(column => {
     const { accessor, disableSorting: columnDisableSorting, id } = column
 
     const canSort = accessor
@@ -246,9 +247,9 @@ function useMain(instance) {
             sortTypes[sortType] ||
             sortTypes.alphanumeric
 
-          // Return the correct sortFn
-          return (a, b) =>
-            sortMethod(a.values[sort.id], b.values[sort.id], sort.desc)
+          // Return the correct sortFn.
+          // This function should always return in ascending order
+          return (a, b) => sortMethod(a, b, sort.id)
         }),
         // Map the directions
         availableSortBy.map(sort => {

src/sortTypes.js

@@ -3,7 +3,9 @@ const reSplitAlphaNumeric = /([0-9]+)/gm
 // Mixed sorting is slow, but very inclusive of many edge cases.
 // It handles numbers, mixed alphanumeric combinations, and even
 // null, undefined, and Infinity
-export const alphanumeric = (a, b) => {
+export const alphanumeric = (rowA, rowB, columnID) => {
+  let a = getRowValueByColumnID(rowA, columnID)
+  let b = getRowValueByColumnID(rowB, columnID)
   // Force to strings (or "" for unsupported types)
   a = toString(a)
   b = toString(b)
@@ -51,18 +53,33 @@ export const alphanumeric = (a, b) => {
   return a.length - b.length
 }
 
-export function datetime(a, b) {
+export function datetime(rowA, rowB, columnID) {
+  let a = getRowValueByColumnID(rowA, columnID)
+  let b = getRowValueByColumnID(rowB, columnID)
+
   a = a.getTime()
   b = b.getTime()
-  return numeric(a, b)
+
+  return compareBasic(a, b)
 }
 
-export function numeric(a, b) {
-  return a === b ? 0 : a > b ? 1 : -1
+export function basic(rowA, rowB, columnID) {
+  let a = getRowValueByColumnID(rowA, columnID)
+  let b = getRowValueByColumnID(rowB, columnID)
+
+  return compareBasic(a, b)
 }
 
 // Utils
 
+function compareBasic(a, b) {
+  return a === b ? 0 : a > b ? 1 : -1
+}
+
+function getRowValueByColumnID(row, columnID) {
+  return row.values[columnID]
+}
+
 function toString(a) {
   if (typeof a === 'number') {
     if (isNaN(a) || a === Infinity || a === -Infinity) {

src/utils.js

@@ -72,14 +72,6 @@ export function decorateColumnTree(columns, defaultColumn, parent, depth = 0) {
 export function makeHeaderGroups(columns, maxDepth, defaultColumn) {
   const headerGroups = []
 
-  const removeChildColumns = column => {
-    delete column.columns
-    if (column.parent) {
-      removeChildColumns(column.parent)
-    }
-  }
-  columns.forEach(removeChildColumns)
-
   const buildGroup = (columns, depth = 0) => {
     const headerGroup = {
       headers: [],
@@ -124,15 +116,22 @@ export function makeHeaderGroups(columns, maxDepth, defaultColumn) {
         }
       }
 
-      // Establish the new columns[] relationship on the parent
+      // Establish the new headers[] relationship on the parent
       if (column.parent || hasParents) {
         latestParentColumn = [...parentColumns].reverse()[0]
-        latestParentColumn.columns = latestParentColumn.columns || []
-        if (!latestParentColumn.columns.includes(column)) {
-          latestParentColumn.columns.push(column)
+        latestParentColumn.headers = latestParentColumn.headers || []
+        if (!latestParentColumn.headers.includes(column)) {
+          latestParentColumn.headers.push(column)
         }
       }
 
+      column.totalHeaderCount = column.headers
+        ? column.headers.reduce(
+            (sum, header) => sum + header.totalHeaderCount,
+            0
+          )
+        : 1 // Leaf node columns take up at least one count
+
       headerGroup.headers.push(column)
     })
 
@@ -148,6 +147,25 @@ export function makeHeaderGroups(columns, maxDepth, defaultColumn) {
   return headerGroups.reverse()
 }
 
+export function determineColumnVisibility(instance) {
+  const { headers } = instance
+
+  const handleColumn = (column, parentVisible) => {
+    column.isVisible = parentVisible
+      ? typeof column.show === 'function'
+        ? column.show(instance)
+        : !!column.show
+      : false
+    if (column.columns && column.columns.length) {
+      column.columns.forEach(subColumn =>
+        handleColumn(subColumn, column.isVisible)
+      )
+    }
+  }
+
+  headers.forEach(subColumn => handleColumn(subColumn, true))
+}
+
 export function getBy(obj, path, def) {
   if (!path) {
     return obj